Skip to content

Commit

Permalink
[nextjs] Update the withPigment API to accept config
Browse files Browse the repository at this point in the history
through `pigment` key from the nextConfig object itself instead of as a
2nd argument to the call. This is a standard approach followed by other
nextjs plugins

Fixes: mui#83
  • Loading branch information
brijeshb42 committed May 30, 2024
1 parent e4bb1a2 commit d803cb9
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 42 deletions.
73 changes: 37 additions & 36 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -480,11 +480,9 @@ For example, in Next.js, you can define a theme in the `next.config.js` file lik
```js
const { withPigment } = require('@pigment-css/nextjs-plugin');

module.exports = withPigment(
{
// ...other nextConfig
},
{
module.exports = withPigment({
// ...other nextConfig
pigment: {
theme: {
colors: {
primary: 'tomato',
Expand All @@ -499,7 +497,7 @@ module.exports = withPigment(
// ...more keys and values, it's free style!
},
},
);
});
```

#### Accessing theme values
Expand All @@ -521,11 +519,9 @@ Pigment CSS can generate CSS variables from the theme values when you wrap your
```js
const { withPigment, extendTheme } = require('@pigment-css/nextjs-plugin');

module.exports = withPigment(
{
// ...nextConfig
},
{
module.exports = withPigment({
// ...nextConfig
pigment: {
theme: extendTheme({
colors: {
primary: 'tomato',
Expand All @@ -539,7 +535,7 @@ module.exports = withPigment(
},
}),
},
);
});
```

The `extendTheme` utility goes through the theme and creates a `vars` object which represents the tokens that refer to CSS variables.
Expand Down Expand Up @@ -681,18 +677,23 @@ To support right-to-left (RTL) languages, add the `dir="rtl"` attribute to your
```js
const { withPigment } = require('@pigment-css/nextjs-plugin');

// ...
module.exports = withPigment(nextConfig, {
theme: yourCustomTheme,
// CSS output option
css: {
// Specify your default CSS authoring direction
defaultDirection: 'ltr',
// Generate CSS for the opposite of the `defaultDirection`
// This is set to `false` by default
generateForBothDir: true,
/** @type {import('@pigment-css/nextjs-plugin').WithPigmentOptions} */
const nextConfig = {
pigment: {
theme: yourCustomTheme,
// CSS output option
css: {
// Specify your default CSS authoring direction
defaultDirection: 'ltr',
// Generate CSS for the opposite of the `defaultDirection`
// This is set to `false` by default
generateForBothDir: true,
},
},
});
};

// ...
module.exports = withPigment(nextConfig);
```

### Vite
Expand Down Expand Up @@ -1019,12 +1020,12 @@ Next, they must set up Pigment CSS in their project:
// framework config file, for example next.config.js
const { withPigment } = require('@pigment-css/nextjs-plugin');

module.exports = withPigment(
{
// ... Your nextjs config.
module.exports = withPigment({
// ... Your nextjs config.
pigment: {
transformLibraries: ['your-package-name'],
},
{ transformLibraries: ['your-package-name'] },
);
});
```

Finally, they must import the stylesheet in the root layout file:
Expand All @@ -1050,9 +1051,9 @@ Developers can customize the component's styles using the theme's `styleOverride
For example, the custom theme below sets the background color of the statistics component's root slot to `tomato`:

```js
module.exports = withPigment(
{ ...nextConfig },
{
module.exports = withPigment({
...nextConfig,
pigment: {
theme: {
styleOverrides: {
PigmentStat: {
Expand All @@ -1069,15 +1070,15 @@ module.exports = withPigment(
},
},
},
);
});
```

Developers can also access theme values and apply styles based on the component's props using the `variants` key:

```js
module.exports = withPigment(
{ ...nextConfig },
{
module.exports = withPigment({
...nextConfig,
pigment: {
theme: {
// user defined colors
colors: {
Expand Down Expand Up @@ -1108,7 +1109,7 @@ module.exports = withPigment(
},
},
},
);
});
```

## How Pigment CSS works
Expand Down
5 changes: 3 additions & 2 deletions apps/pigment-css-next-app/next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ const pigmentOptions = {
displayName: true,
};

/** @type {import('next').NextConfig} */
/** @type {import('@pigment-css/nextjs-plugin').WithPigmentOptions} */
const nextConfig = {
eslint: {
ignoreDuringBuilds: true,
Expand All @@ -118,6 +118,7 @@ const nextConfig = {
buildActivity: true,
buildActivityPosition: 'bottom-right',
},
pigment: pigmentOptions,
};

module.exports = withPigment(nextConfig, pigmentOptions);
module.exports = withPigment(nextConfig);
18 changes: 14 additions & 4 deletions packages/pigment-css-nextjs-plugin/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,25 @@ import type { NextConfig } from 'next';
import { findPagesDir } from 'next/dist/lib/find-pages-dir';
import { webpack as webpackPlugin, extendTheme, type PigmentOptions } from '@pigment-css/unplugin';

export { type PigmentOptions };
export interface WithPigmentOptions extends NextConfig {
pigment?: PigmentOptions;
}

const extractionFile = path.join(
path.dirname(require.resolve('../package.json')),
'zero-virtual.css',
);

export function withPigment(nextConfig: NextConfig, pigmentConfig?: PigmentOptions) {
const { babelOptions = {}, asyncResolve, ...rest } = pigmentConfig ?? {};
export function withPigment(
{ pigment, ...nextConfig }: WithPigmentOptions,
pigmentConfig?: PigmentOptions,
) {
const { babelOptions = {}, asyncResolve, ...rest } = pigment ?? pigmentConfig ?? {};
if (pigmentConfig) {
console.warn(
'Passing Pigment CSS config through the 2nd argument is deprecated. Instead, pass the config through the `pigment` key in your next.js config.',
);
}
if (process.env.TURBOPACK === '1') {
// eslint-disable-next-line no-console
console.log(
Expand Down Expand Up @@ -103,4 +113,4 @@ export function withPigment(nextConfig: NextConfig, pigmentConfig?: PigmentOptio
};
}

export { extendTheme };
export { extendTheme, type PigmentOptions };

0 comments on commit d803cb9

Please sign in to comment.