Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Fix Pigment CSS migration content #43217

Merged
merged 5 commits into from
Aug 12, 2024
Merged

[docs] Fix Pigment CSS migration content #43217

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
25e373f
fix migrating to pigment content
siriwatknp Aug 7, 2024
87e4446
Merge branch 'next' of https://github.com/mui/material-ui into docs/m…
siriwatknp Aug 8, 2024
4086c20
fix as suggested
siriwatknp Aug 8, 2024
9c2287d
add SvgProp
siriwatknp Aug 9, 2024
d9677b1
Update docs/data/material/migration/migrating-to-v6/migrating-to-pigm…
siriwatknp Aug 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 19 additions & 6 deletions docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not directly related to this PR

Q: any particular reason to display the Next.js config in .mjs and .js and Vite only in .js?

Next.js Vite
Screenshot 2024-08-07 at 13 10 41 Screenshot 2024-08-07 at 13 10 33

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch, Vite should have vite.config.ts too.

Copy link
Member Author

@siriwatknp siriwatknp Aug 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It turns out either vite.config.mjs or vite.config.js, the content will be the same. I updated to mention the file pattern instead:

- Next, open vite config file, usually named `vite.config.js`, and add the plugin:
+ Next, open vite config file, usually named `vite.config.mjs` or `vite.config.js`, and add the plugin:

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So next.config.js uses require but vite.config.js uses import?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, vite.config.js supports ESM but next.config.js requires commonjs.

Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,9 @@ const nextConfig = {
/**
* @type {import('@pigment-css/nextjs-plugin').PigmentOptions}
*/
const pigmentConfig = {}; // we will refer to this later
const pigmentConfig = {
transformLibraries: ['@mui/material'],
};

export default withPigment(nextConfig, pigmentConfig);
```
Expand All @@ -91,7 +93,9 @@ const nextConfig = {
/**
* @type {import('@pigment-css/nextjs-plugin').PigmentOptions}
*/
const pigmentConfig = {}; // we will refer to this later
const pigmentConfig = {
transformLibraries: ['@mui/material'],
};

module.exports = withPigment(nextConfig, pigmentConfig);
```
Expand Down Expand Up @@ -143,7 +147,12 @@ Next, open vite config file, usually named `vite.config.js`, and add the plugin:
import { defineConfig } from 'vite';
import { pigment } from '@pigment-css/vite-plugin';

const pigmentConfig = {}; // we will refer to this later
/**
* @type {import('@pigment-css/nextjs-plugin').PigmentOptions}
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
*/
const pigmentConfig = {
transformLibraries: ['@mui/material'],
};

export default defineConfig({
plugins: [
Expand All @@ -153,6 +162,10 @@ export default defineConfig({
});
```

:::warning
There is an [issue with `pnpm`](https://github.com/mui/pigment-css/issues/176) that prevents the plugin from working correctly. Consider using `npm` or `yarn` instead.
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
:::

Finally, add the Pigment CSS stylesheet to the top of the main file.

```diff title="src/main.(js|tsx)"
Expand All @@ -173,14 +186,14 @@ Integrating Pigment CSS with Material UI requires you to configure the theme t
Add the following code to your [Next.js](#nextjs) or [Vite](#vite) config file:

```diff
+import { extendTheme } from '@mui/material';
+import { createTheme } from '@mui/material';

+const pigmentConfig = {
+ theme: extendTheme(),
+ theme: createTheme(…parameters if any),
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
+};
```

If you don't have a custom theme, you are ready to go. Start a development server by running:
If you have a custom theme, follow the [theme migration](#migrating-custom-theme), otherwise you are ready to go. Start a development server by running:
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved

<codeblock storageKey="package-manager">

Expand Down
Loading