From 25e373fe7fdc5e15fa4b267e4e49889c52cff9f2 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 7 Aug 2024 17:59:34 +0700 Subject: [PATCH 1/7] fix migrating to pigment content --- .../migrating-to-pigment-css.md | 25 ++++++++++++++----- 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md index 57ea7b1717b201..16184d697e5a02 100644 --- a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md +++ b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md @@ -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); ``` @@ -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); ``` @@ -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} + */ +const pigmentConfig = { + transformLibraries: ['@mui/material'], +}; export default defineConfig({ plugins: [ @@ -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. +::: + Finally, add the Pigment CSS stylesheet to the top of the main file. ```diff title="src/main.(js|tsx)" @@ -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), +}; ``` -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: From 4c9fb414030e173f0aa99a30cd727d1cd6b7d60b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 7 Aug 2024 19:20:25 +0700 Subject: [PATCH 2/7] move theme.ts into subpath --- .../mui-material-pigment-css/src/{theme.ts => theme/index.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/mui-material-pigment-css/src/{theme.ts => theme/index.ts} (100%) diff --git a/packages/mui-material-pigment-css/src/theme.ts b/packages/mui-material-pigment-css/src/theme/index.ts similarity index 100% rename from packages/mui-material-pigment-css/src/theme.ts rename to packages/mui-material-pigment-css/src/theme/index.ts From 8b30acc6997aa9782467f8a9f70a3050397f5643 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 7 Aug 2024 19:48:28 +0700 Subject: [PATCH 3/7] move theme export to index --- packages/mui-material-pigment-css/src/index.ts | 1 + packages/mui-material-pigment-css/src/theme/index.ts | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) delete mode 100644 packages/mui-material-pigment-css/src/theme/index.ts diff --git a/packages/mui-material-pigment-css/src/index.ts b/packages/mui-material-pigment-css/src/index.ts index e2ba63ac6e2d8d..10fcc505844447 100644 --- a/packages/mui-material-pigment-css/src/index.ts +++ b/packages/mui-material-pigment-css/src/index.ts @@ -1 +1,2 @@ export * from '@pigment-css/react'; +export * from '@pigment-css/react/theme'; diff --git a/packages/mui-material-pigment-css/src/theme/index.ts b/packages/mui-material-pigment-css/src/theme/index.ts deleted file mode 100644 index e9acc9a5bde4d6..00000000000000 --- a/packages/mui-material-pigment-css/src/theme/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '@pigment-css/react/theme'; From c31a12248e84d52f3a997f7d13bb46567e5fba2d Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 7 Aug 2024 20:08:43 +0700 Subject: [PATCH 4/7] add TypeScript docs --- .../migrating-to-pigment-css.md | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md index 16184d697e5a02..3f8e6cb953440a 100644 --- a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md +++ b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md @@ -213,6 +213,35 @@ pnpm dev Open the browser and navigate to the localhost URL, you should see the app running with Pigment CSS. +### Typescript + +If you are using TypeScript, you need to extend the Pigment CSS theme types with Material UI `Theme`. +Add the following code to a file that is included in your `tsconfig.json`: + +```ts +// e.g. App.tsx +import { Theme } from '@mui/material/styles'; + +declare module '@mui/material-pigment-css' { + interface ThemeArgs { + theme: Theme; + } +} +``` + +Then, verify that the types is correctly picked up by Pigment CSS with the following code: + +```ts +// e.g. App.tsx +import { styled } from '@mui/material-pigment-css'; + +const TestThemeTypes = styled('div')(({ theme }) => ({ + color: theme.palette.primary.main, +})); +``` + +You should see no TypeScript errors in your editor. Finally, remove the test code. + ## How it works When a Pigment CSS plugin is configured through a framework bundler, it intercepts the styling APIs that Material UI uses and replaces them with those from Pigment CSS instead. Pigment CSS then extracts the styles at build time and injects them into the stylesheet. From dbaf9a29a8806358db0ece7c98fc3882ce06cff6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 7 Aug 2024 20:17:33 +0700 Subject: [PATCH 5/7] fix non-breaking space --- .../migration/migrating-to-v6/migrating-to-pigment-css.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md index 3f8e6cb953440a..bf23194c66dd16 100644 --- a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md +++ b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md @@ -215,7 +215,7 @@ Open the browser and navigate to the localhost URL, you should see the app runni ### Typescript -If you are using TypeScript, you need to extend the Pigment CSS theme types with Material UI `Theme`. +If you are using TypeScript, you need to extend the Pigment CSS theme types with Material UI `Theme`. Add the following code to a file that is included in your `tsconfig.json`: ```ts @@ -229,7 +229,7 @@ declare module '@mui/material-pigment-css' { } ``` -Then, verify that the types is correctly picked up by Pigment CSS with the following code: +Then, verify that the types is correctly picked up by Pigment CSS with the following code: ```ts // e.g. App.tsx From 08493ad48714defec2e477c3191df729393c73d3 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Wed, 7 Aug 2024 18:30:59 +0200 Subject: [PATCH 6/7] revert leaked changes from another PR --- .../migrating-to-pigment-css.md | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md index bf23194c66dd16..f47fa2694b53c4 100644 --- a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md +++ b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md @@ -76,9 +76,7 @@ const nextConfig = { /** * @type {import('@pigment-css/nextjs-plugin').PigmentOptions} */ -const pigmentConfig = { - transformLibraries: ['@mui/material'], -}; +const pigmentConfig = {}; // we will refer to this later export default withPigment(nextConfig, pigmentConfig); ``` @@ -93,9 +91,7 @@ const nextConfig = { /** * @type {import('@pigment-css/nextjs-plugin').PigmentOptions} */ -const pigmentConfig = { - transformLibraries: ['@mui/material'], -}; +const pigmentConfig = {}; // we will refer to this later module.exports = withPigment(nextConfig, pigmentConfig); ``` @@ -147,12 +143,7 @@ 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'; -/** - * @type {import('@pigment-css/nextjs-plugin').PigmentOptions} - */ -const pigmentConfig = { - transformLibraries: ['@mui/material'], -}; +const pigmentConfig = {}; // we will refer to this later export default defineConfig({ plugins: [ @@ -162,10 +153,6 @@ 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. -::: - Finally, add the Pigment CSS stylesheet to the top of the main file. ```diff title="src/main.(js|tsx)" From ba1e130bcd5f75396bff9d070b7fe7ea4a4a6c72 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Wed, 7 Aug 2024 14:43:20 -0400 Subject: [PATCH 7/7] Revert remaining leak --- .../migration/migrating-to-v6/migrating-to-pigment-css.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md index f47fa2694b53c4..6c50032e2dd258 100644 --- a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md +++ b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md @@ -173,14 +173,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 { createTheme } from '@mui/material'; ++import { extendTheme } from '@mui/material'; +const pigmentConfig = { -+ theme: createTheme(…parameters if any), ++ theme: extendTheme(), +}; ``` -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: +If you don't have a custom theme, you are ready to go. Start a development server by running: