diff --git a/.eslintignore b/.eslintignore index 5043b4bb97f494..0c319dcfc059aa 100644 --- a/.eslintignore +++ b/.eslintignore @@ -19,12 +19,12 @@ /packages/mui-icons-material/src/*.js /packages/mui-icons-material/templateSvgIcon.js /packages/mui-utils/macros/__fixtures__/ -/packages/pigment-react/utils/ -/packages/pigment-react/processors/ -/packages/pigment-react/exports/ -/packages/pigment-react/theme/ -/packages/pigment-react/tests/**/fixtures -/packages/pigment-nextjs-plugin/loader.js +/packages/pigment-css-react/utils/ +/packages/pigment-css-react/processors/ +/packages/pigment-css-react/exports/ +/packages/pigment-css-react/theme/ +/packages/pigment-css-react/tests/**/fixtures +/packages/pigment-css-nextjs-plugin/loader.js # Ignore fixtures /packages-internal/scripts/typescript-to-proptypes/test/*/* /test/bundling/fixtures/**/*.fixture.js diff --git a/apps/local-ui-lib/package.json b/apps/local-ui-lib/package.json index 8e7e2264364d9c..9cf9342c098b12 100644 --- a/apps/local-ui-lib/package.json +++ b/apps/local-ui-lib/package.json @@ -3,6 +3,6 @@ "version": "0.0.1", "private": true, "dependencies": { - "@pigment-css/react": "file:../../packages/pigment-react" + "@pigment-css/react": "file:../../packages/pigment-css-react" } } diff --git a/apps/local-ui-lib/tsconfig.json b/apps/local-ui-lib/tsconfig.json index c876374fe985c9..cad7b2a86bf955 100644 --- a/apps/local-ui-lib/tsconfig.json +++ b/apps/local-ui-lib/tsconfig.json @@ -2,7 +2,7 @@ "extends": "../../tsconfig.json", "references": [ { - "path": "../../packages/pigment-react" + "path": "../../packages/pigment-css-react" } ] } diff --git a/apps/pigment-next-app/.eslintrc b/apps/pigment-css-next-app/.eslintrc similarity index 100% rename from apps/pigment-next-app/.eslintrc rename to apps/pigment-css-next-app/.eslintrc diff --git a/apps/pigment-next-app/.gitignore b/apps/pigment-css-next-app/.gitignore similarity index 100% rename from apps/pigment-next-app/.gitignore rename to apps/pigment-css-next-app/.gitignore diff --git a/apps/pigment-next-app/README.md b/apps/pigment-css-next-app/README.md similarity index 100% rename from apps/pigment-next-app/README.md rename to apps/pigment-css-next-app/README.md diff --git a/apps/pigment-next-app/next.config.js b/apps/pigment-css-next-app/next.config.js similarity index 100% rename from apps/pigment-next-app/next.config.js rename to apps/pigment-css-next-app/next.config.js diff --git a/apps/pigment-next-app/package.json b/apps/pigment-css-next-app/package.json similarity index 80% rename from apps/pigment-next-app/package.json rename to apps/pigment-css-next-app/package.json index 99c9a8de5bb66c..eeff6a21ce1156 100644 --- a/apps/pigment-next-app/package.json +++ b/apps/pigment-css-next-app/package.json @@ -9,7 +9,7 @@ "clean": "rimraf .next" }, "dependencies": { - "@pigment-css/react": "file:../../packages/pigment-react", + "@pigment-css/react": "file:../../packages/pigment-css-react", "@mui/utils": "file:../../packages/mui-utils/build", "@mui/base": "file:../../packages/mui-base/build", "@mui/material": "file:../../packages/mui-material/build", @@ -23,8 +23,8 @@ "next": "latest" }, "devDependencies": { - "@pigment-css/unplugin": "file:../../packages/pigment-unplugin", - "@pigment-css/nextjs-plugin": "file:../../packages/pigment-nextjs-plugin", + "@pigment-css/unplugin": "file:../../packages/pigment-css-unplugin", + "@pigment-css/nextjs-plugin": "file:../../packages/pigment-css-nextjs-plugin", "@types/node": "^20.5.7", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", diff --git a/apps/pigment-next-app/public/next.svg b/apps/pigment-css-next-app/public/next.svg similarity index 100% rename from apps/pigment-next-app/public/next.svg rename to apps/pigment-css-next-app/public/next.svg diff --git a/apps/pigment-next-app/public/vercel.svg b/apps/pigment-css-next-app/public/vercel.svg similarity index 100% rename from apps/pigment-next-app/public/vercel.svg rename to apps/pigment-css-next-app/public/vercel.svg diff --git a/apps/pigment-next-app/src/app/box/page.tsx b/apps/pigment-css-next-app/src/app/box/page.tsx similarity index 100% rename from apps/pigment-next-app/src/app/box/page.tsx rename to apps/pigment-css-next-app/src/app/box/page.tsx diff --git a/apps/pigment-next-app/src/app/favicon.ico b/apps/pigment-css-next-app/src/app/favicon.ico similarity index 100% rename from apps/pigment-next-app/src/app/favicon.ico rename to apps/pigment-css-next-app/src/app/favicon.ico diff --git a/apps/pigment-next-app/src/app/globals.css b/apps/pigment-css-next-app/src/app/globals.css similarity index 100% rename from apps/pigment-next-app/src/app/globals.css rename to apps/pigment-css-next-app/src/app/globals.css diff --git a/apps/pigment-next-app/src/app/layout.tsx b/apps/pigment-css-next-app/src/app/layout.tsx similarity index 100% rename from apps/pigment-next-app/src/app/layout.tsx rename to apps/pigment-css-next-app/src/app/layout.tsx diff --git a/apps/pigment-next-app/src/app/material-ui/layout.tsx b/apps/pigment-css-next-app/src/app/material-ui/layout.tsx similarity index 100% rename from apps/pigment-next-app/src/app/material-ui/layout.tsx rename to apps/pigment-css-next-app/src/app/material-ui/layout.tsx diff --git a/apps/pigment-next-app/src/app/material-ui/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/page.tsx similarity index 100% rename from apps/pigment-next-app/src/app/material-ui/page.tsx rename to apps/pigment-css-next-app/src/app/material-ui/page.tsx diff --git a/apps/pigment-next-app/src/app/material-ui/react-alert/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-alert/page.tsx similarity index 100% rename from apps/pigment-next-app/src/app/material-ui/react-alert/page.tsx rename to apps/pigment-css-next-app/src/app/material-ui/react-alert/page.tsx diff --git a/apps/pigment-next-app/src/app/material-ui/react-avatar/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-avatar/page.tsx similarity index 100% rename from apps/pigment-next-app/src/app/material-ui/react-avatar/page.tsx rename to apps/pigment-css-next-app/src/app/material-ui/react-avatar/page.tsx diff --git a/apps/pigment-next-app/src/app/material-ui/react-badge/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-badge/page.tsx similarity index 100% rename from apps/pigment-next-app/src/app/material-ui/react-badge/page.tsx rename to apps/pigment-css-next-app/src/app/material-ui/react-badge/page.tsx diff --git a/apps/pigment-next-app/src/app/material-ui/react-switch/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-switch/page.tsx similarity index 100% rename from apps/pigment-next-app/src/app/material-ui/react-switch/page.tsx rename to apps/pigment-css-next-app/src/app/material-ui/react-switch/page.tsx diff --git a/apps/pigment-next-app/src/app/page.module.css b/apps/pigment-css-next-app/src/app/page.module.css similarity index 100% rename from apps/pigment-next-app/src/app/page.module.css rename to apps/pigment-css-next-app/src/app/page.module.css diff --git a/apps/pigment-next-app/src/app/page.tsx b/apps/pigment-css-next-app/src/app/page.tsx similarity index 100% rename from apps/pigment-next-app/src/app/page.tsx rename to apps/pigment-css-next-app/src/app/page.tsx diff --git a/apps/pigment-next-app/src/app/slider/page.tsx b/apps/pigment-css-next-app/src/app/slider/page.tsx similarity index 100% rename from apps/pigment-next-app/src/app/slider/page.tsx rename to apps/pigment-css-next-app/src/app/slider/page.tsx diff --git a/apps/pigment-next-app/src/app/theme.ts b/apps/pigment-css-next-app/src/app/theme.ts similarity index 100% rename from apps/pigment-next-app/src/app/theme.ts rename to apps/pigment-css-next-app/src/app/theme.ts diff --git a/apps/pigment-next-app/src/augment.d.ts b/apps/pigment-css-next-app/src/augment.d.ts similarity index 100% rename from apps/pigment-next-app/src/augment.d.ts rename to apps/pigment-css-next-app/src/augment.d.ts diff --git a/apps/pigment-next-app/src/components/Box.jsx b/apps/pigment-css-next-app/src/components/Box.jsx similarity index 100% rename from apps/pigment-next-app/src/components/Box.jsx rename to apps/pigment-css-next-app/src/components/Box.jsx diff --git a/apps/pigment-next-app/src/components/Slider/ZeroSlider.tsx b/apps/pigment-css-next-app/src/components/Slider/ZeroSlider.tsx similarity index 100% rename from apps/pigment-next-app/src/components/Slider/ZeroSlider.tsx rename to apps/pigment-css-next-app/src/components/Slider/ZeroSlider.tsx diff --git a/apps/pigment-next-app/tsconfig.json b/apps/pigment-css-next-app/tsconfig.json similarity index 93% rename from apps/pigment-next-app/tsconfig.json rename to apps/pigment-css-next-app/tsconfig.json index 7f52bcf9932c64..49a985026c3a0d 100644 --- a/apps/pigment-next-app/tsconfig.json +++ b/apps/pigment-css-next-app/tsconfig.json @@ -35,7 +35,7 @@ "path": "../../packages/mui-material/tsconfig.build.json" }, { - "path": "../../packages/pigment-react/tsconfig.json" + "path": "../../packages/pigment-css-react/tsconfig.json" } ] } diff --git a/apps/pigment-vite-app/.eslintrc b/apps/pigment-css-vite-app/.eslintrc similarity index 100% rename from apps/pigment-vite-app/.eslintrc rename to apps/pigment-css-vite-app/.eslintrc diff --git a/apps/pigment-vite-app/.gitignore b/apps/pigment-css-vite-app/.gitignore similarity index 100% rename from apps/pigment-vite-app/.gitignore rename to apps/pigment-css-vite-app/.gitignore diff --git a/apps/pigment-vite-app/README.md b/apps/pigment-css-vite-app/README.md similarity index 100% rename from apps/pigment-vite-app/README.md rename to apps/pigment-css-vite-app/README.md diff --git a/apps/pigment-vite-app/index.html b/apps/pigment-css-vite-app/index.html similarity index 100% rename from apps/pigment-vite-app/index.html rename to apps/pigment-css-vite-app/index.html diff --git a/apps/pigment-vite-app/package.json b/apps/pigment-css-vite-app/package.json similarity index 88% rename from apps/pigment-vite-app/package.json rename to apps/pigment-css-vite-app/package.json index 4c4c70d581786e..3822681587fc07 100644 --- a/apps/pigment-vite-app/package.json +++ b/apps/pigment-css-vite-app/package.json @@ -9,7 +9,7 @@ "build": "vite build" }, "dependencies": { - "@pigment-css/react": "file:../../packages/pigment-react", + "@pigment-css/react": "file:../../packages/pigment-css-react", "@mui/utils": "file:../../packages/mui-utils/build", "@mui/base": "file:../../packages/mui-base/build", "@mui/material": "file:../../packages/mui-material/build", @@ -26,7 +26,7 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@pigment-css/vite-plugin": "file:../../packages/pigment-vite-plugin", + "@pigment-css/vite-plugin": "file:../../packages/pigment-css-vite-plugin", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@vitejs/plugin-react": "^4.2.1", diff --git a/apps/pigment-vite-app/postcss.config.cjs b/apps/pigment-css-vite-app/postcss.config.cjs similarity index 100% rename from apps/pigment-vite-app/postcss.config.cjs rename to apps/pigment-css-vite-app/postcss.config.cjs diff --git a/apps/pigment-vite-app/src/App.tsx b/apps/pigment-css-vite-app/src/App.tsx similarity index 100% rename from apps/pigment-vite-app/src/App.tsx rename to apps/pigment-css-vite-app/src/App.tsx diff --git a/apps/pigment-vite-app/src/Box.jsx b/apps/pigment-css-vite-app/src/Box.jsx similarity index 100% rename from apps/pigment-vite-app/src/Box.jsx rename to apps/pigment-css-vite-app/src/Box.jsx diff --git a/apps/pigment-vite-app/src/Layout.tsx b/apps/pigment-css-vite-app/src/Layout.tsx similarity index 100% rename from apps/pigment-vite-app/src/Layout.tsx rename to apps/pigment-css-vite-app/src/Layout.tsx diff --git a/apps/pigment-vite-app/src/Slider/ZeroSlider.test.jsx b/apps/pigment-css-vite-app/src/Slider/ZeroSlider.test.jsx similarity index 100% rename from apps/pigment-vite-app/src/Slider/ZeroSlider.test.jsx rename to apps/pigment-css-vite-app/src/Slider/ZeroSlider.test.jsx diff --git a/apps/pigment-vite-app/src/Slider/ZeroSlider.tsx b/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx similarity index 100% rename from apps/pigment-vite-app/src/Slider/ZeroSlider.tsx rename to apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx diff --git a/apps/pigment-vite-app/src/augment.ts b/apps/pigment-css-vite-app/src/augment.ts similarity index 100% rename from apps/pigment-vite-app/src/augment.ts rename to apps/pigment-css-vite-app/src/augment.ts diff --git a/apps/pigment-vite-app/src/component.tsx b/apps/pigment-css-vite-app/src/component.tsx similarity index 100% rename from apps/pigment-vite-app/src/component.tsx rename to apps/pigment-css-vite-app/src/component.tsx diff --git a/apps/pigment-vite-app/src/extend-zero.ts b/apps/pigment-css-vite-app/src/extend-zero.ts similarity index 100% rename from apps/pigment-vite-app/src/extend-zero.ts rename to apps/pigment-css-vite-app/src/extend-zero.ts diff --git a/apps/pigment-vite-app/src/main.tsx b/apps/pigment-css-vite-app/src/main.tsx similarity index 100% rename from apps/pigment-vite-app/src/main.tsx rename to apps/pigment-css-vite-app/src/main.tsx diff --git a/apps/pigment-vite-app/src/pages/index.tsx b/apps/pigment-css-vite-app/src/pages/index.tsx similarity index 100% rename from apps/pigment-vite-app/src/pages/index.tsx rename to apps/pigment-css-vite-app/src/pages/index.tsx diff --git a/apps/pigment-vite-app/src/pages/material-ui/react-alert.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-alert.tsx similarity index 100% rename from apps/pigment-vite-app/src/pages/material-ui/react-alert.tsx rename to apps/pigment-css-vite-app/src/pages/material-ui/react-alert.tsx diff --git a/apps/pigment-vite-app/src/pages/material-ui/react-avatar.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-avatar.tsx similarity index 100% rename from apps/pigment-vite-app/src/pages/material-ui/react-avatar.tsx rename to apps/pigment-css-vite-app/src/pages/material-ui/react-avatar.tsx diff --git a/apps/pigment-vite-app/src/pages/material-ui/react-badge.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-badge.tsx similarity index 100% rename from apps/pigment-vite-app/src/pages/material-ui/react-badge.tsx rename to apps/pigment-css-vite-app/src/pages/material-ui/react-badge.tsx diff --git a/apps/pigment-vite-app/src/pages/material-ui/react-switch.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-switch.tsx similarity index 100% rename from apps/pigment-vite-app/src/pages/material-ui/react-switch.tsx rename to apps/pigment-css-vite-app/src/pages/material-ui/react-switch.tsx diff --git a/apps/pigment-vite-app/tsconfig.json b/apps/pigment-css-vite-app/tsconfig.json similarity index 86% rename from apps/pigment-vite-app/tsconfig.json rename to apps/pigment-css-vite-app/tsconfig.json index 3ac8cebf99a277..918f90a862a498 100644 --- a/apps/pigment-vite-app/tsconfig.json +++ b/apps/pigment-css-vite-app/tsconfig.json @@ -15,7 +15,7 @@ "path": "../../packages/mui-material/tsconfig.build.json" }, { - "path": "../../packages/pigment-react/tsconfig.json" + "path": "../../packages/pigment-css-react/tsconfig.json" } ] } diff --git a/apps/pigment-vite-app/vite-env.d.ts b/apps/pigment-css-vite-app/vite-env.d.ts similarity index 100% rename from apps/pigment-vite-app/vite-env.d.ts rename to apps/pigment-css-vite-app/vite-env.d.ts diff --git a/apps/pigment-vite-app/vite.config.ts b/apps/pigment-css-vite-app/vite.config.ts similarity index 100% rename from apps/pigment-vite-app/vite.config.ts rename to apps/pigment-css-vite-app/vite.config.ts diff --git a/apps/pnpm-lock.yaml b/apps/pnpm-lock.yaml index e0c6444c44b2ad..0df1319ac41672 100644 --- a/apps/pnpm-lock.yaml +++ b/apps/pnpm-lock.yaml @@ -55,8 +55,8 @@ importers: specifier: ^4.14.202 version: 4.14.202 '@types/node': - specifier: ^18.19.19 - version: 18.19.20 + specifier: ^18.19.22 + version: 18.19.22 '@types/prettier': specifier: ^2.7.3 version: 2.7.3 @@ -116,8 +116,8 @@ importers: specifier: ^10.0.6 version: 10.0.6 '@types/node': - specifier: ^18.19.19 - version: 18.19.20 + specifier: ^18.19.22 + version: 18.19.22 babel-plugin-tester: specifier: ^11.0.4 version: 11.0.4(@babel/core@7.23.9) @@ -262,8 +262,8 @@ importers: version: 15.8.1 devDependencies: '@types/node': - specifier: ^18.19.19 - version: 18.19.20 + specifier: ^18.19.22 + version: 18.19.22 '@types/prop-types': specifier: ^15.7.11 version: 15.7.11 @@ -1059,8 +1059,8 @@ importers: specifier: ^10.0.6 version: 10.0.6 '@types/node': - specifier: ^18.19.19 - version: 18.19.20 + specifier: ^18.19.22 + version: 18.19.22 '@types/react': specifier: ^18.2.55 version: 18.2.55 @@ -1087,17 +1087,17 @@ importers: version: 15.2.0 publishDirectory: build - ../packages/pigment-nextjs-plugin: + ../packages/pigment-css-nextjs-plugin: dependencies: '@pigment-css/unplugin': specifier: workspace:^ - version: link:../pigment-unplugin + version: link:../pigment-css-unplugin devDependencies: next: specifier: ^13.5.1 version: 13.5.1(react-dom@18.2.0)(react@18.2.0) - ../packages/pigment-react: + ../packages/pigment-css-react: dependencies: '@babel/core': specifier: ^7.23.9 @@ -1154,6 +1154,9 @@ importers: specifier: ^4.3.1 version: 4.3.1 devDependencies: + '@babel/plugin-syntax-jsx': + specifier: ^7.23.3 + version: 7.23.3(@babel/core@7.23.9) '@types/babel__core': specifier: ^7.20.5 version: 7.20.5 @@ -1163,15 +1166,21 @@ importers: '@types/babel__helper-plugin-utils': specifier: ^7.10.3 version: 7.10.3 + '@types/chai': + specifier: ^4.3.12 + version: 4.3.12 '@types/cssesc': specifier: ^3.0.2 version: 3.0.2 '@types/lodash': specifier: ^4.14.202 version: 4.14.202 + '@types/mocha': + specifier: ^10.0.6 + version: 10.0.6 '@types/node': - specifier: ^18.19.19 - version: 18.19.20 + specifier: ^18.19.22 + version: 18.19.22 '@types/react': specifier: ^18.2.55 version: 18.2.55 @@ -1181,18 +1190,21 @@ importers: chai: specifier: ^4.4.1 version: 4.4.1 + prettier: + specifier: ^3.2.5 + version: 3.2.5 react: specifier: ^18.2.0 version: 18.2.0 - ../packages/pigment-unplugin: + ../packages/pigment-css-unplugin: dependencies: '@babel/core': specifier: ^7.23.9 version: 7.23.9 '@pigment-css/react': specifier: workspace:^ - version: link:../pigment-react + version: link:../pigment-css-react '@wyw-in-js/shared': specifier: ^0.5.0 version: 0.5.0 @@ -1210,7 +1222,7 @@ importers: specifier: ^7.20.5 version: 7.20.5 - ../packages/pigment-vite-plugin: + ../packages/pigment-css-vite-plugin: dependencies: '@babel/core': specifier: ^7.23.9 @@ -1220,7 +1232,7 @@ importers: version: 7.23.3(@babel/core@7.23.9) '@pigment-css/react': specifier: workspace:^ - version: link:../pigment-react + version: link:../pigment-css-react '@wyw-in-js/shared': specifier: ^0.5.0 version: 0.5.0 @@ -1349,10 +1361,10 @@ importers: local-ui-lib: dependencies: '@pigment-css/react': - specifier: file:../../packages/pigment-react - version: file:../packages/pigment-react(@types/react@18.2.55)(react@18.2.0)(typescript@5.3.3) + specifier: file:../../packages/pigment-css-react + version: file:../packages/pigment-css-react(@types/react@18.2.55)(react@18.2.0)(typescript@5.3.3) - pigment-next-app: + pigment-css-next-app: dependencies: '@emotion/cache': specifier: latest @@ -1368,7 +1380,7 @@ importers: version: file:../packages/mui-material/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/material-nextjs': specifier: file:../../packages/mui-material-nextjs/build - version: file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.12)(@types/react@18.2.55)(next@14.1.0)(react@18.2.0) + version: file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.12)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0) '@mui/system': specifier: file:../../packages/mui-system/build version: file:../packages/mui-system/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) @@ -1376,14 +1388,14 @@ importers: specifier: file:../../packages/mui-utils/build version: file:../packages/mui-utils/build(@types/react@18.2.55)(react@18.2.0) '@pigment-css/react': - specifier: file:../../packages/pigment-react - version: file:../packages/pigment-react(@types/react@18.2.55)(react@18.2.0)(typescript@5.3.3) + specifier: file:../../packages/pigment-css-react + version: file:../packages/pigment-css-react(@types/react@18.2.55)(react@18.2.0)(typescript@5.3.3) local-ui-lib: specifier: workspace:^ version: link:../local-ui-lib next: specifier: latest - version: 14.1.0(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) + version: 14.1.3(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -1392,11 +1404,11 @@ importers: version: 18.2.0(react@18.2.0) devDependencies: '@pigment-css/nextjs-plugin': - specifier: file:../../packages/pigment-nextjs-plugin - version: file:../packages/pigment-nextjs-plugin(next@14.1.0) + specifier: file:../../packages/pigment-css-nextjs-plugin + version: file:../packages/pigment-css-nextjs-plugin(next@14.1.3) '@pigment-css/unplugin': - specifier: file:../../packages/pigment-unplugin - version: file:../packages/pigment-unplugin(typescript@5.3.3) + specifier: file:../../packages/pigment-css-unplugin + version: file:../packages/pigment-css-unplugin(typescript@5.3.3) '@types/node': specifier: ^20.5.7 version: 20.11.22 @@ -1413,7 +1425,7 @@ importers: specifier: ^5.3.3 version: 5.3.3 - pigment-vite-app: + pigment-css-vite-app: dependencies: '@mui/base': specifier: file:../../packages/mui-base/build @@ -1431,8 +1443,8 @@ importers: specifier: file:../../packages/mui-utils/build version: file:../packages/mui-utils/build(@types/react@18.2.55)(react@18.2.0) '@pigment-css/react': - specifier: file:../../packages/pigment-react - version: file:../packages/pigment-react(@types/react@18.2.55)(react@18.2.0)(typescript@5.3.3) + specifier: file:../../packages/pigment-css-react + version: file:../packages/pigment-css-react(@types/react@18.2.55)(react@18.2.0)(typescript@5.3.3) clsx: specifier: ^2.1.0 version: 2.1.0 @@ -1462,8 +1474,8 @@ importers: specifier: ^7.23.3 version: 7.23.3(@babel/core@7.23.9) '@pigment-css/vite-plugin': - specifier: file:../../packages/pigment-vite-plugin - version: file:../packages/pigment-vite-plugin(vite@5.0.12) + specifier: file:../../packages/pigment-css-vite-plugin + version: file:../packages/pigment-css-vite-plugin(vite@5.0.12) '@types/react': specifier: ^18.2.55 version: 18.2.55 @@ -3298,8 +3310,8 @@ packages: resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==} dev: true - /@next/env@14.1.0: - resolution: {integrity: sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw==} + /@next/env@14.1.3: + resolution: {integrity: sha512-VhgXTvrgeBRxNPjyfBsDIMvgsKDxjlpw4IAUsHCX8Gjl1vtHUYRT3+xfQ/wwvLPDd/6kqfLqk9Pt4+7gysuCKQ==} /@next/swc-darwin-arm64@13.5.1: resolution: {integrity: sha512-Bcd0VFrLHZnMmJy6LqV1CydZ7lYaBao8YBEdQUVzV8Ypn/l5s//j5ffjfvMzpEQ4mzlAj3fIY+Bmd9NxpWhACw==} @@ -3310,8 +3322,8 @@ packages: dev: true optional: true - /@next/swc-darwin-arm64@14.1.0: - resolution: {integrity: sha512-nUDn7TOGcIeyQni6lZHfzNoo9S0euXnu0jhsbMOmMJUBfgsnESdjN97kM7cBqQxZa8L/bM9om/S5/1dzCrW6wQ==} + /@next/swc-darwin-arm64@14.1.3: + resolution: {integrity: sha512-LALu0yIBPRiG9ANrD5ncB3pjpO0Gli9ZLhxdOu6ZUNf3x1r3ea1rd9Q+4xxUkGrUXLqKVK9/lDkpYIJaCJ6AHQ==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -3327,8 +3339,8 @@ packages: dev: true optional: true - /@next/swc-darwin-x64@14.1.0: - resolution: {integrity: sha512-1jgudN5haWxiAl3O1ljUS2GfupPmcftu2RYJqZiMJmmbBT5M1XDffjUtRUzP4W3cBHsrvkfOFdQ71hAreNQP6g==} + /@next/swc-darwin-x64@14.1.3: + resolution: {integrity: sha512-E/9WQeXxkqw2dfcn5UcjApFgUq73jqNKaE5bysDm58hEUdUGedVrnRhblhJM7HbCZNhtVl0j+6TXsK0PuzXTCg==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -3344,8 +3356,8 @@ packages: dev: true optional: true - /@next/swc-linux-arm64-gnu@14.1.0: - resolution: {integrity: sha512-RHo7Tcj+jllXUbK7xk2NyIDod3YcCPDZxj1WLIYxd709BQ7WuRYl3OWUNG+WUfqeQBds6kvZYlc42NJJTNi4tQ==} + /@next/swc-linux-arm64-gnu@14.1.3: + resolution: {integrity: sha512-USArX9B+3rZSXYLFvgy0NVWQgqh6LHWDmMt38O4lmiJNQcwazeI6xRvSsliDLKt+78KChVacNiwvOMbl6g6BBw==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -3361,8 +3373,8 @@ packages: dev: true optional: true - /@next/swc-linux-arm64-musl@14.1.0: - resolution: {integrity: sha512-v6kP8sHYxjO8RwHmWMJSq7VZP2nYCkRVQ0qolh2l6xroe9QjbgV8siTbduED4u0hlk0+tjS6/Tuy4n5XCp+l6g==} + /@next/swc-linux-arm64-musl@14.1.3: + resolution: {integrity: sha512-esk1RkRBLSIEp1qaQXv1+s6ZdYzuVCnDAZySpa62iFTMGTisCyNQmqyCTL9P+cLJ4N9FKCI3ojtSfsyPHJDQNw==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -3378,8 +3390,8 @@ packages: dev: true optional: true - /@next/swc-linux-x64-gnu@14.1.0: - resolution: {integrity: sha512-zJ2pnoFYB1F4vmEVlb/eSe+VH679zT1VdXlZKX+pE66grOgjmKJHKacf82g/sWE4MQ4Rk2FMBCRnX+l6/TVYzQ==} + /@next/swc-linux-x64-gnu@14.1.3: + resolution: {integrity: sha512-8uOgRlYEYiKo0L8YGeS+3TudHVDWDjPVDUcST+z+dUzgBbTEwSSIaSgF/vkcC1T/iwl4QX9iuUyUdQEl0Kxalg==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -3395,8 +3407,8 @@ packages: dev: true optional: true - /@next/swc-linux-x64-musl@14.1.0: - resolution: {integrity: sha512-rbaIYFt2X9YZBSbH/CwGAjbBG2/MrACCVu2X0+kSykHzHnYH5FjHxwXLkcoJ10cX0aWCEynpu+rP76x0914atg==} + /@next/swc-linux-x64-musl@14.1.3: + resolution: {integrity: sha512-DX2zqz05ziElLoxskgHasaJBREC5Y9TJcbR2LYqu4r7naff25B4iXkfXWfcp69uD75/0URmmoSgT8JclJtrBoQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -3412,8 +3424,8 @@ packages: dev: true optional: true - /@next/swc-win32-arm64-msvc@14.1.0: - resolution: {integrity: sha512-o1N5TsYc8f/HpGt39OUQpQ9AKIGApd3QLueu7hXk//2xq5Z9OxmV6sQfNp8C7qYmiOlHYODOGqNNa0e9jvchGQ==} + /@next/swc-win32-arm64-msvc@14.1.3: + resolution: {integrity: sha512-HjssFsCdsD4GHstXSQxsi2l70F/5FsRTRQp8xNgmQs15SxUfUJRvSI9qKny/jLkY3gLgiCR3+6A7wzzK0DBlfA==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -3429,8 +3441,8 @@ packages: dev: true optional: true - /@next/swc-win32-ia32-msvc@14.1.0: - resolution: {integrity: sha512-XXIuB1DBRCFwNO6EEzCTMHT5pauwaSj4SWs7CYnME57eaReAKBXCnkUE80p/pAZcewm7hs+vGvNqDPacEXHVkw==} + /@next/swc-win32-ia32-msvc@14.1.3: + resolution: {integrity: sha512-DRuxD5axfDM1/Ue4VahwSxl1O5rn61hX8/sF0HY8y0iCbpqdxw3rB3QasdHn/LJ6Wb2y5DoWzXcz3L1Cr+Thrw==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -3446,8 +3458,8 @@ packages: dev: true optional: true - /@next/swc-win32-x64-msvc@14.1.0: - resolution: {integrity: sha512-9WEbVRRAqJ3YFVqEZIxUqkiO8l1nool1LmNxygr5HWF8AcSYsEpneUDhmjUVJEzO2A04+oPtZdombzzPPkTtgg==} + /@next/swc-win32-x64-msvc@14.1.3: + resolution: {integrity: sha512-uC2DaDoWH7h1P/aJ4Fok3Xiw6P0Lo4ez7NbowW2VGNXw/Xv6tOuLUcxhBYZxsSUJtpeknCi8/fvnSpyCFp4Rcg==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -3815,8 +3827,8 @@ packages: resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==} dev: true - /@types/node@18.19.20: - resolution: {integrity: sha512-SKXZvI375jkpvAj8o+5U2518XQv76mAsixqfXiVyWyXZbVWQK25RurFovYpVIxVzul0rZoH58V/3SkEnm7s3qA==} + /@types/node@18.19.22: + resolution: {integrity: sha512-p3pDIfuMg/aXBmhkyanPshdfJuX5c5+bQjYLIikPLXAUycEogij/c50n/C+8XOA5L93cU4ZRXtn+dNQGi0IZqQ==} dependencies: undici-types: 5.26.5 dev: true @@ -6895,8 +6907,8 @@ packages: - babel-plugin-macros dev: true - /next@14.1.0(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-wlzrsbfeSU48YQBjZhDzOwhWhGsy+uQycR8bHAOt1LY1bn3zZEcDyHQOEoN3aWzQ8LHCAJ1nqrWCc9XF2+O45Q==} + /next@14.1.3(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-oexgMV2MapI0UIWiXKkixF8J8ORxpy64OuJ/J9oVUmIthXOUCcuVEZX+dtpgq7wIfIqtBwQsKEDXejcjTsan9g==} engines: {node: '>=18.17.0'} hasBin: true peerDependencies: @@ -6910,7 +6922,7 @@ packages: sass: optional: true dependencies: - '@next/env': 14.1.0 + '@next/env': 14.1.3 '@swc/helpers': 0.5.2 busboy: 1.6.0 caniuse-lite: 1.0.30001591 @@ -6920,15 +6932,15 @@ packages: react-dom: 18.2.0(react@18.2.0) styled-jsx: 5.1.1(@babel/core@7.23.9)(react@18.2.0) optionalDependencies: - '@next/swc-darwin-arm64': 14.1.0 - '@next/swc-darwin-x64': 14.1.0 - '@next/swc-linux-arm64-gnu': 14.1.0 - '@next/swc-linux-arm64-musl': 14.1.0 - '@next/swc-linux-x64-gnu': 14.1.0 - '@next/swc-linux-x64-musl': 14.1.0 - '@next/swc-win32-arm64-msvc': 14.1.0 - '@next/swc-win32-ia32-msvc': 14.1.0 - '@next/swc-win32-x64-msvc': 14.1.0 + '@next/swc-darwin-arm64': 14.1.3 + '@next/swc-darwin-x64': 14.1.3 + '@next/swc-linux-arm64-gnu': 14.1.3 + '@next/swc-linux-arm64-musl': 14.1.3 + '@next/swc-linux-x64-gnu': 14.1.3 + '@next/swc-linux-x64-musl': 14.1.3 + '@next/swc-win32-arm64-msvc': 14.1.3 + '@next/swc-win32-ia32-msvc': 14.1.3 + '@next/swc-win32-x64-msvc': 14.1.3 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros @@ -8998,7 +9010,7 @@ packages: react: 18.2.0 dev: false - file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.12)(@types/react@18.2.55)(next@14.1.0)(react@18.2.0): + file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.12)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0): resolution: {directory: ../packages/mui-material-nextjs/build, type: directory} id: file:../packages/mui-material-nextjs/build name: '@mui/material-nextjs' @@ -9022,7 +9034,7 @@ packages: '@emotion/cache': 11.11.0 '@mui/material': file:../packages/mui-material/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@types/react': 18.2.55 - next: 14.1.0(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) + next: 14.1.3(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 dev: false @@ -9114,20 +9126,20 @@ packages: react-is: 18.2.0 dev: false - file:../packages/pigment-nextjs-plugin(next@14.1.0): - resolution: {directory: ../packages/pigment-nextjs-plugin, type: directory} - id: file:../packages/pigment-nextjs-plugin + file:../packages/pigment-css-nextjs-plugin(next@14.1.3): + resolution: {directory: ../packages/pigment-css-nextjs-plugin, type: directory} + id: file:../packages/pigment-css-nextjs-plugin name: '@pigment-css/nextjs-plugin' peerDependencies: next: ^12.0.0 || ^13.0.0 || ^14.0.0 dependencies: - '@pigment-css/unplugin': link:../packages/pigment-unplugin - next: 14.1.0(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) + '@pigment-css/unplugin': link:../packages/pigment-css-unplugin + next: 14.1.3(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) dev: true - file:../packages/pigment-react(@types/react@18.2.55)(react@18.2.0)(typescript@5.3.3): - resolution: {directory: ../packages/pigment-react, type: directory} - id: file:../packages/pigment-react + file:../packages/pigment-css-react(@types/react@18.2.55)(react@18.2.0)(typescript@5.3.3): + resolution: {directory: ../packages/pigment-css-react, type: directory} + id: file:../packages/pigment-css-react name: '@pigment-css/react' peerDependencies: react: ^17.0.0 || ^18.0.0 @@ -9157,13 +9169,13 @@ packages: - typescript dev: false - file:../packages/pigment-unplugin(typescript@5.3.3): - resolution: {directory: ../packages/pigment-unplugin, type: directory} - id: file:../packages/pigment-unplugin + file:../packages/pigment-css-unplugin(typescript@5.3.3): + resolution: {directory: ../packages/pigment-css-unplugin, type: directory} + id: file:../packages/pigment-css-unplugin name: '@pigment-css/unplugin' dependencies: '@babel/core': 7.23.9 - '@pigment-css/react': link:../packages/pigment-react + '@pigment-css/react': link:../packages/pigment-css-react '@wyw-in-js/shared': 0.5.0 '@wyw-in-js/transform': 0.5.0(typescript@5.3.3) babel-plugin-transform-react-remove-prop-types: 0.4.24 @@ -9173,16 +9185,16 @@ packages: - typescript dev: true - file:../packages/pigment-vite-plugin(vite@5.0.12): - resolution: {directory: ../packages/pigment-vite-plugin, type: directory} - id: file:../packages/pigment-vite-plugin + file:../packages/pigment-css-vite-plugin(vite@5.0.12): + resolution: {directory: ../packages/pigment-css-vite-plugin, type: directory} + id: file:../packages/pigment-css-vite-plugin name: '@pigment-css/vite-plugin' peerDependencies: vite: ^4.0.0 || ^5.0.0 dependencies: '@babel/core': 7.23.9 '@babel/preset-typescript': 7.23.3(@babel/core@7.23.9) - '@pigment-css/react': link:../packages/pigment-react + '@pigment-css/react': link:../packages/pigment-css-react '@wyw-in-js/shared': 0.5.0 '@wyw-in-js/transform': 0.5.0(typescript@5.3.3) babel-plugin-transform-react-remove-prop-types: 0.4.24 diff --git a/babel.config.js b/babel.config.js index 7e6e17d626dd81..4c98dcc08596b0 100644 --- a/babel.config.js +++ b/babel.config.js @@ -32,7 +32,7 @@ module.exports = function getBabelConfig(api) { '@mui/utils': resolveAliasPath('./packages/mui-utils/src'), '@mui/material-next': resolveAliasPath('./packages/mui-material-next/src'), '@mui/joy': resolveAliasPath('./packages/mui-joy/src'), - '@pigment-css/react': resolveAliasPath('./packages/pigment-react/src'), + '@pigment-css/react': resolveAliasPath('./packages/pigment-css-react/src'), '@mui-internal/docs-utils': resolveAliasPath('./packages/docs-utils/src'), docs: resolveAliasPath('./docs'), test: resolveAliasPath('./test'), diff --git a/examples/pigment-css-nextjs-ts/README.md b/examples/pigment-css-nextjs-ts/README.md index 63159deba18aae..a8a18cd92a5f6b 100644 --- a/examples/pigment-css-nextjs-ts/README.md +++ b/examples/pigment-css-nextjs-ts/README.md @@ -34,5 +34,5 @@ or: To learn more about this example: -- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/master/packages/pigment-react/README.md) - learn more about Pigment CSS features and APIs. +- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/master/packages/pigment-css-react/README.md) - learn more about Pigment CSS features and APIs. - [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and APIs. diff --git a/examples/pigment-css-nextjs-ts/src/app/page.tsx b/examples/pigment-css-nextjs-ts/src/app/page.tsx index c2290095110036..d900930fddd997 100644 --- a/examples/pigment-css-nextjs-ts/src/app/page.tsx +++ b/examples/pigment-css-nextjs-ts/src/app/page.tsx @@ -175,7 +175,7 @@ export default function Home() { })} > diff --git a/examples/pigment-css-vite-ts/README.md b/examples/pigment-css-vite-ts/README.md index f1154bd1e61d36..662397d8bc6778 100644 --- a/examples/pigment-css-vite-ts/README.md +++ b/examples/pigment-css-vite-ts/README.md @@ -30,5 +30,5 @@ or: To learn more about this example: -- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/master/packages/pigment-react/README.md) - learn more about Pigment CSS features and APIs. +- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/master/packages/pigment-css-react/README.md) - learn more about Pigment CSS features and APIs. - [Vite documentation](https://vitejs.dev/guide/) - learn about Vite features and APIs. diff --git a/examples/pigment-css-vite-ts/src/App.tsx b/examples/pigment-css-vite-ts/src/App.tsx index 10351d263a0286..011af95d7d5be0 100644 --- a/examples/pigment-css-vite-ts/src/App.tsx +++ b/examples/pigment-css-vite-ts/src/App.tsx @@ -177,7 +177,7 @@ export default function Home() { })} > diff --git a/package.json b/package.json index 23762aa21b3de5..aff885bddeffae 100644 --- a/package.json +++ b/package.json @@ -54,9 +54,9 @@ "test": "node scripts/test.mjs", "tc": "node test/cli.js", "test:extended": "pnpm eslint && pnpm typescript && pnpm test:coverage", - "test:pigment-react:ci": "pnpm nx run @pigment-css/react:test:ci", - "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' --exclude 'packages/pigment-react/**/*.test.{js,ts,tsx}' && pnpm test:pigment-react", - "test:coverage:ci": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' --exclude 'packages/pigment-react/**/*.test.{js,ts,tsx}' && pnpm test:pigment-react:ci", + "test:pigment-css-react:ci": "pnpm nx run @pigment-css/react:test:ci", + "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' --exclude 'packages/pigment-css-react/**/*.test.{js,ts,tsx}' && pnpm test:pigment-css-react", + "test:coverage:ci": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' --exclude 'packages/pigment-css-react/**/*.test.{js,ts,tsx}' && pnpm test:pigment-css-react:ci", "test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=html mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", "test:e2e": "cross-env NODE_ENV=production pnpm test:e2e:build && concurrently --success first --kill-others \"pnpm test:e2e:run\" \"pnpm test:e2e:server\"", "test:e2e:build": "webpack --config test/e2e/webpack.config.js", diff --git a/packages/mui-icons-material/test/generated-types/tsconfig.json b/packages/mui-icons-material/test/generated-types/tsconfig.json index 1099b243812bac..b724ef2117368f 100644 --- a/packages/mui-icons-material/test/generated-types/tsconfig.json +++ b/packages/mui-icons-material/test/generated-types/tsconfig.json @@ -42,12 +42,12 @@ "@mui/types": ["./mui-types"], "@mui/utils": ["./mui-utils/src"], "@mui/utils/*": ["./mui-utils/src/*"], - "@pigment-css/nextjs-plugin": ["./pigment-nextjs-plugin/src"], - "@pigment-css/nextjs-plugin/*": ["./pigment-nextjs-plugin/src/*"], - "@pigment-css/react": ["./pigment-react/src"], - "@pigment-css/react/*": ["./pigment-react/src/*"], - "@pigment-css/vite-plugin": ["./pigment-vite-plugin/src"], - "@pigment-css/vite-plugin/*": ["./pigment-vite-plugin/src/*"], + "@pigment-css/nextjs-plugin": ["./pigment-css-nextjs-plugin/src"], + "@pigment-css/nextjs-plugin/*": ["./pigment-css-nextjs-plugin/src/*"], + "@pigment-css/react": ["./pigment-css-react/src"], + "@pigment-css/react/*": ["./pigment-css-react/src/*"], + "@pigment-css/vite-plugin": ["./pigment-css-vite-plugin/src"], + "@pigment-css/vite-plugin/*": ["./pigment-css-vite-plugin/src/*"], "@mui/internal-scripts/typescript-to-proptypes": [ "../packages-internal/scripts/typescript-to-proptypes/src" ] diff --git a/packages/pigment-nextjs-plugin/.eslintrc b/packages/pigment-css-nextjs-plugin/.eslintrc similarity index 100% rename from packages/pigment-nextjs-plugin/.eslintrc rename to packages/pigment-css-nextjs-plugin/.eslintrc diff --git a/packages/pigment-nextjs-plugin/.gitignore b/packages/pigment-css-nextjs-plugin/.gitignore similarity index 100% rename from packages/pigment-nextjs-plugin/.gitignore rename to packages/pigment-css-nextjs-plugin/.gitignore diff --git a/packages/pigment-nextjs-plugin/loader.js b/packages/pigment-css-nextjs-plugin/loader.js similarity index 100% rename from packages/pigment-nextjs-plugin/loader.js rename to packages/pigment-css-nextjs-plugin/loader.js diff --git a/packages/pigment-nextjs-plugin/next-font.js b/packages/pigment-css-nextjs-plugin/next-font.js similarity index 100% rename from packages/pigment-nextjs-plugin/next-font.js rename to packages/pigment-css-nextjs-plugin/next-font.js diff --git a/packages/pigment-nextjs-plugin/next-image.js b/packages/pigment-css-nextjs-plugin/next-image.js similarity index 100% rename from packages/pigment-nextjs-plugin/next-image.js rename to packages/pigment-css-nextjs-plugin/next-image.js diff --git a/packages/pigment-nextjs-plugin/package.json b/packages/pigment-css-nextjs-plugin/package.json similarity index 93% rename from packages/pigment-nextjs-plugin/package.json rename to packages/pigment-css-nextjs-plugin/package.json index 9bd71bd251699a..9a61f7b49e58b6 100644 --- a/packages/pigment-nextjs-plugin/package.json +++ b/packages/pigment-css-nextjs-plugin/package.json @@ -9,13 +9,13 @@ "repository": { "type": "git", "url": "https://github.com/mui/material-ui.git", - "directory": "packages/pigment-nextjs-plugin" + "directory": "packages/pigment-css-nextjs-plugin" }, "license": "MIT", "bugs": { "url": "https://github.com/mui/material-ui/issues" }, - "homepage": "https://github.com/mui/material-ui/tree/master/packages/pigment-react", + "homepage": "https://github.com/mui/material-ui/tree/master/packages/pigment-css-react", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" diff --git a/packages/pigment-nextjs-plugin/src/index.ts b/packages/pigment-css-nextjs-plugin/src/index.ts similarity index 100% rename from packages/pigment-nextjs-plugin/src/index.ts rename to packages/pigment-css-nextjs-plugin/src/index.ts diff --git a/packages/pigment-nextjs-plugin/src/virtual-css-loader.js b/packages/pigment-css-nextjs-plugin/src/virtual-css-loader.js similarity index 100% rename from packages/pigment-nextjs-plugin/src/virtual-css-loader.js rename to packages/pigment-css-nextjs-plugin/src/virtual-css-loader.js diff --git a/packages/pigment-nextjs-plugin/tsconfig.build.json b/packages/pigment-css-nextjs-plugin/tsconfig.build.json similarity index 100% rename from packages/pigment-nextjs-plugin/tsconfig.build.json rename to packages/pigment-css-nextjs-plugin/tsconfig.build.json diff --git a/packages/pigment-nextjs-plugin/tsconfig.json b/packages/pigment-css-nextjs-plugin/tsconfig.json similarity index 100% rename from packages/pigment-nextjs-plugin/tsconfig.json rename to packages/pigment-css-nextjs-plugin/tsconfig.json diff --git a/packages/pigment-nextjs-plugin/tsup.config.ts b/packages/pigment-css-nextjs-plugin/tsup.config.ts similarity index 100% rename from packages/pigment-nextjs-plugin/tsup.config.ts rename to packages/pigment-css-nextjs-plugin/tsup.config.ts diff --git a/packages/pigment-nextjs-plugin/zero-virtual.css b/packages/pigment-css-nextjs-plugin/zero-virtual.css similarity index 100% rename from packages/pigment-nextjs-plugin/zero-virtual.css rename to packages/pigment-css-nextjs-plugin/zero-virtual.css diff --git a/packages/pigment-react/.eslintignore b/packages/pigment-css-react/.eslintignore similarity index 100% rename from packages/pigment-react/.eslintignore rename to packages/pigment-css-react/.eslintignore diff --git a/packages/pigment-react/.eslintrc b/packages/pigment-css-react/.eslintrc similarity index 100% rename from packages/pigment-react/.eslintrc rename to packages/pigment-css-react/.eslintrc diff --git a/packages/pigment-react/.gitignore b/packages/pigment-css-react/.gitignore similarity index 100% rename from packages/pigment-react/.gitignore rename to packages/pigment-css-react/.gitignore diff --git a/packages/pigment-css-react/README.md b/packages/pigment-css-react/README.md new file mode 100644 index 00000000000000..56aaf9d01386d4 --- /dev/null +++ b/packages/pigment-css-react/README.md @@ -0,0 +1,719 @@ +# Pigment CSS + +Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time. + +- [Getting started](#getting-started) + - [Why this project exists?](#why-choose-pigment-css) + - [Start with Next.js](#start-with-nextjs) + - [Start with Vite](#start-with-vite) +- [Basic usage](#basic-usage) + - [Creating styles](#creating-styles) + - [Creating components](#creating-components) + - [Styling based on props](#styling-based-on-props) + - [Styling based on runtime values](#styling-based-on-runtime-values) + - [Styled component as a CSS selector](#styled-component-as-a-css-selector) + - [Typing props](#typing-props) +- [Theming](#theming) + - [Accesing theme values](#accesing-theme-values) + - [CSS variables support](#css-variables-support) + - [Color schemes](#color-schemes) + - [Switching color schemes](#switching-color-schemes) + - [TypeScript](#typescript) +- [How-to guides](#how-to-guides) + - [Coming from Emotion or styled-components](#coming-from-emotion-or-styled-components) + +## Getting started + +Pigment CSS supports Next.js and Vite with support for more bundlers in the future. +You must install the corresponding plugin, as shown below. + +### Why choose Pigment CSS + +Thanks to recent advancements in CSS (like CSS variables and `color-mix()`), "traditional" CSS-in-JS solutions that process styles at runtime are no longer required for unlocking features like color transformations and theme variables which are necessary for maintaining a sophisticated design system. + +Pigment CSS addresses the needs of the modern React developer by providing a zero-runtime CSS-in-JS styling solution as a successor to tools like Emotion and styled-components. + +Compared to its predecessors, Pigment CSS offers improved DX and runtime performance (though at the cost of increased build time) while also being compatible with React Server Components. +Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling us to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment CSS in v6. + +### Start with Next.js + +Use the following commands to create a new Next.js project with Pigment CSS set up: + +```bash +curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/pigment-css-nextjs-ts +cd pigment-css-nextjs-ts +``` + +#### Manual installation + +```bash +npm install @pigment-css/react +npm install --save-dev @pigment-css/nextjs-plugin +``` + +Then, in your `next.config.js` file, import the plugin and wrap the exported config object: + +```js +const { withPigment } = require('@pigment-css/nextjs-plugin'); + +module.exports = withPigment({ + // ... Your nextjs config. +}); +``` + +Finally, import the stylesheet in the root `layout.tsx` file: + +```diff + import type { Metadata } from 'next'; ++import '@pigment-css/react/styles.css'; + + export const metadata: Metadata = { + title: 'Create Next App', + description: 'Generated by create next app', + }; + + export default function RootLayout(props: { children: React.ReactNode }) { + return ( + + {props.children} + + ); + } +``` + +### Start with Vite + +Use the following commands to create a new Vite project with Pigment CSS set up: + +```bash +curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/pigment-css-vite-ts +cd pigment-css-vite-ts +``` + +#### Manual installation + +```bash +npm install @pigment-css/react +npm install --save-dev @pigment-css/vite-plugin +``` + +Then, in your Vite config file, import the plugin and pass it to the `plugins` array as shown: + +```js +import { pigment } from '@pigment-css/vite-plugin'; + +export default defineConfig({ + plugins: [ + pigment(), + // ... Your other plugins. + ], +}); +``` + +Finally, import the stylesheet in the root `main.tsx` file: + +```diff + import * as React from 'react'; + import { createRoot } from 'react-dom/client'; ++import '@pigment-css/react/styles.css'; + import App from './App'; + + const rootElement = document.getElementById('root'); + const root = createRoot(rootElement); + + root.render( + + + , + ); +``` + +## Basic usage + +**You must configure Pigment CSS with [Next.js](#nextjs) or [Vite](#vite) first.** + +### Creating styles + +Use the `css` API to create reusable styles: + +```js +import { css } from '@pigment-css/react'; + +const visuallyHidden = css({ + border: 0, + clip: 'rect(0 0 0 0)', + height: '1px', + margin: -1, + overflow: 'hidden', + padding: 0, + position: 'absolute', + whiteSpace: 'nowrap', + width: '1px', +}); + +function App() { + return
I am invisible
; +} +``` + +The call to the `css` function will be replaced with a unique string that represents the CSS class name for the generated styles. + +Use a callback function to get access to the [theme](#theming) values: + +```js +const title = css(({ theme }) => ({ + color: theme.colors.primary, + fontSize: theme.spacing.unit * 4, + fontFamily: theme.typography.fontFamily, +})); +``` + +### Creating components + +Use the `styled` API to create a component by passing styles at the end. The usage should be familiar if you've worked with Emotion or styled-components: + +```js +import { styled } from '@pigment-css/react'; + +const Heading = styled('div')({ + fontSize: '4rem', + fontWeight: 'bold', + padding: '10px 0px', +}); + +function App() { + return Hello; +} +``` + +The Pigment CSS library differs from "standard" runtime CSS-in-JS libraries in a few ways: + +1. You never get direct access to props in your styled declarations. This is because prop values are only available at runtime, but the CSS is extracted at build time. See [Styling based on runtime values](#styling-based-on-runtime-values) for a workaround. +2. Your styles must be declarative and must account for all combinations of props that you want to style. +3. The theme lets you declare CSS tokens that become part of the CSS bundle after the build. Any other values and methods that it might have are only available during build time—not at runtime. This leads to smaller bundle sizes. + +#### Styling based on props + +> 💡 This approach is recommended when the value of the prop is known at build time (finite values). + +Use the `variants` key to define styles for a combination of the component's props. + +Each variant is an object with `props` and `style` keys. The styles are applied when the component's props match the `props` object. + +**Example 1** — A button component with `small` and `large` sizes: + +```jsx +const Button = styled('button')({ + border: 'none', + padding: '0.75rem', + // ...other base styles + variants: [ + { + props: { size: 'large' }, + style: { padding: '1rem' }, + }, + { + props: { size: 'small' }, + style: { padding: '0.5rem' }, + }, + ], +}); + +; // padding: 0.75rem +; // padding: 1rem +; // padding: 0.5rem +``` + +**Example 2** — A button component with variants and colors: + +```jsx +const Button = styled('button')({ + border: 'none', + padding: '0.75rem', + // ...other base styles + variants: [ + { + props: { variant: 'contained', color: 'primary' }, + style: { backgroundColor: 'tomato', color: 'white' }, + }, + ], +}); + +// `backgroundColor: 'tomato', color: 'white'` +; +``` + +**Example 3** — Apply styles based on a condition: + +The value of the `props` can be a function that returns a boolean. If the function returns `true`, the styles are applied. + +```jsx +const Button = styled('button')({ + border: 'none', + padding: '0.75rem', + // ...other base styles + variants: [ + { + props: (props) => props.variant !== 'contained', + style: { backgroundColor: 'transparent' }, + }, + ], +}); +``` + +Note that the `props` function will not work if it is inside another closure, for example, inside an `array.map`: + +```jsx +const Button = styled('button')({ + border: 'none', + padding: '0.75rem', + // ...other base styles + variants: ['red', 'blue', 'green'].map((item) => ({ + props: (props) => { + // ❌ Cannot access `item` in this closure + return props.color === item && !props.disabled; + }, + style: { backgroundColor: 'tomato' }, + })), +}); +``` + +Instead, use plain objects to define the variants: + +```jsx +const Button = styled('button')({ + border: 'none', + padding: '0.75rem', + // ...other base styles + variants: ['red', 'blue', 'green'].map((item) => ({ + props: { color: item, disabled: false }, + style: { backgroundColor: 'tomato' }, + })), +}); +``` + +#### Styling based on runtime values + +> 💡 This approach is recommended when the value of a prop is **unknown** ahead of time or possibly unlimited values, for example styling based on the user's input. + +Use a callback function as a value to create a dynamic style for the specific CSS property: + +```jsx +const Heading = styled('h1')({ + color: ({ isError }) => (isError ? 'red' : 'black'), +}); +``` + +Pigment CSS will replace the callback with a CSS variable and inject the value through inline style. This makes it possible to create a static CSS file while still allowing dynamic styles. + +```css +.Heading_class_akjsdfb { + color: var(--Heading_class_akjsdfb-0); +} +``` + +```jsx +

(isError ? 'red' : 'black'), + }} +> + Hello +

+``` + +#### Styled component as a CSS selector + +All of the components that you create are also available as CSS selectors. For example, for the `Heading` component described in the previous section, you can target that component inside another styled component like this: + +```jsx +const Wrapper = styled.div({ + [`& .${Heading}`]: { + color: 'blue', + }, +}); +``` + +This enables you to override the default `color` of the Heading component rendered inside the Wrapper: + +```tsx + + Hello + +``` + +You can also export any styled component you create and use it as the base for additional components: + +```tsx +const ExtraHeading = styled(Heading)({ + // ... overridden styled +}); +``` + +#### Typing props + +If you use TypeScript, add the props typing before the styles to get the type checking: + +```tsx +const Heading = styled('h1')<{ isError?: boolean }>({ + color: ({ isError }) => (isError ? 'red' : 'black'), +}); +``` + +### Creating animation keyframes + +Use the `keyframes` API to create reusable [animation keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes): + +```js +import { keyframes } from '@pigment-css/react'; + +const fadeIn = keyframes` + from { + opacity: 0; + } + to { + opacity: 1; + } +`; + +function Example1() { + return
I am invisible
; +} +``` + +The call to the `keyframes` function will be replaced with a unique string that represents the CSS animation name. It can be used with `css` or `styled` too. + +```js +import { css, styled, keyframes } from '@pigment-css/react'; + +const fadeIn = keyframes(...); + +const Example2 = styled('div')({ + animation: `${fadeIn} 0.5s`, +}); + +function App() { + return ( + <> + +
+ + ) +} +``` + +### Theming + +Theming is an **optional** feature that lets you reuse the same values, such as colors, spacing, and typography, across your application. It is a plain object of any structure that you can define in your config file. + +> **💡 Good to know**: +> +> The **theme** object is used at build time and does not exist in the final JS bundle. This means that components created using Pigment's `styled` can be used with React Server Components by default while still getting the benefits of theming. + +For example, in Next.js, you can define a theme in the `next.config.js` file like this: + +```js +const { withPigment } = require('@pigment-css/nextjs-plugin'); + +module.exports = withPigment( + { + // ...other nextConfig + }, + { + theme: { + colors: { + primary: 'tomato', + secondary: 'cyan', + }, + spacing: { + unit: 8, + }, + typography: { + fontFamily: 'Inter, sans-serif', + }, + // ...more keys and values, it's free style! + }, + }, +); +``` + +#### Accessing theme values + +A callback can be used with **styled** and **css** APIs to access the theme values: + +```js +const Heading = styled('h1')(({ theme }) => ({ + color: theme.colors.primary, + fontSize: theme.spacing.unit * 4, + fontFamily: theme.typography.fontFamily, +})); +``` + +#### CSS variables support + +Pigment CSS can generate CSS variables from the theme values when you wrap your theme with `extendTheme` utility. For example, in a `next.config.js` file: + +```js +const { withPigment, extendTheme } = require('@pigment-css/nextjs-plugin'); + +module.exports = withPigment( + { + // ...nextConfig + }, + { + theme: extendTheme({ + colors: { + primary: 'tomato', + secondary: 'cyan', + }, + spacing: { + unit: 8, + }, + typography: { + fontFamily: 'Inter, sans-serif', + }, + }), + }, +); +``` + +The `extendTheme` utility will go through the theme and create a `vars` object which represents the tokens that refer to CSS variables. + +```jsx +const theme = extendTheme({ + colors: { + primary: 'tomato', + secondary: 'cyan', + }, +}); + +console.log(theme.colors.primary); // 'tomato' +console.log(theme.vars.colors.primary); // 'var(--colors-primary)' +``` + +#### Color schemes + +Some tokens, especially color-related tokens, can have different values for different scenarios. For example in a daylight condition, the background color might be white, but in a dark condition, it might be black. + +The `extendTheme` utility lets you define a theme with a special `colorSchemes` key: + +```jsx +extendTheme({ + colorSchemes: { + light: { + colors: { + background: '#f9f9f9', + foreground: '#121212', + }, + }, + dark: { + colors: { + background: '#212121', + foreground: '#fff', + }, + }, + }, +}); +``` + +In the above example, `light` (default) and `dark` color schemes are defined. The structure of each color scheme must be a plain object with keys and values. + +#### Switching color schemes + +By default, when `colorSchemes` is defined, Pigment CSS uses the [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query to switch between color schemes based on the user's system settings. + +However, if you want to control the color scheme based on application logic, for example, using a button to switch between light and dark mode, you can customize the behavior by providing a `getSelector` function: + +```diff + extendTheme({ + colorSchemes: { + light: { ... }, + dark: { ... }, + }, ++ getSelector: (colorScheme) => colorScheme ? `.theme-${colorScheme}` : ':root', + }); +``` + +Note that you need to add the logic to a button by yourself. Here is an example of how to do it: + +```jsx +function App() { + return ( + + ); +} +``` + +#### Styling based on color scheme + +The `extendTheme` utility attaches a function called `applyStyles` to the theme object. It receives a color scheme as the first argument followed by a style object. +It will return a proper CSS selector based on the theme configuration. + +```jsx +const Heading = styled('h1')(({ theme }) => ({ + color: theme.colors.primary, + fontSize: theme.spacing.unit * 4, + fontFamily: theme.typography.fontFamily, + ...theme.applyStyles('dark', { + color: theme.colors.primaryLight, + }), +})); +``` + +#### CSS variables prefix + +You can add a prefix to the generated CSS variables by providing a `cssVarPrefix` option to the `extendTheme` utility: + +```jsx +extendTheme({ + cssVarPrefix: 'pigment', +}); +``` + +The generated CSS variables will have the `pigment` prefix: + +```css +:root { + --pigment-colors-background: #f9f9f9; + --pigment-colors-foreground: #121212; +} +``` + +#### TypeScript + +To get the type checking for the theme, you need to augment the theme type: + +```ts +// any file that is included in your tsconfig.json +import type { ExtendTheme } from '@pigment-css/react'; + +declare module '@pigment-css/react/theme' { + interface ThemeTokens { + // the structure of your theme + } + + interface ThemeArgs { + theme: ExtendTheme<{ + colorScheme: 'light' | 'dark'; + tokens: ThemeTokens; + }>; + } +} +``` + +## How-to guides + +### Coming from Emotion or styled-components + +Emotion and styled-components are runtime CSS-in-JS libraries. What you write in your styles is what you get in the final bundle, which means the styles can be as dynamic as you want with bundle size and performance overhead trade-offs. + +On the other hand, Pigment CSS extracts CSS at build time and replaces the JS code with hashed class names and some CSS variables. This means that it has to know all of the styles to be extracted ahead of time, so there are rules and limitations that you need to be aware of when using JavaScript callbacks or variables in Pigment CSS's APIs. + +Here are some common patterns and how to achieve them with Pigment CSS: + +1. **Fixed set of styles** + +In Emotion or styled-components, you can use props to create styles conditionally: + +```js +const Flex = styled('div')((props) => ({ + display: 'flex', + ...(props.vertical // ❌ Pigment CSS will throw an error + ? { + flexDirection: 'column', + paddingBlock: '1rem', + } + : { + paddingInline: '1rem', + }), +})); +``` + +But in Pigment CSS, you need to define all of the styles ahead of time using the `variants` key: + +```js +const Flex = styled('div')((props) => ({ + display: 'flex', + variants: [ + { + props: { vertical: true }, + style: { + flexDirection: 'column', + paddingBlock: '1rem', + }, + }, + { + props: { vertical: false }, + style: { + paddingInline: '1rem', + }, + }, + ], +})); +``` + +> 💡 Keep in mind that the `variants` key is for fixed values of props, for example, a component's colors, sizes, and states. + +2. **Programatically generated styles** + +For Emotion and styled-components, the styles will be different on each render and instance because the styles are generated at runtime: + +```js +function randomBetween(min: number, max: number) { + return Math.floor(Math.random() * (max - min + 1) + min); +} +function generateBubbleVars() { + return ` + --x: ${randomBetween(10, 90)}%; + --y: ${randomBetween(15, 85)}%; + `; +} + +function App() { + return ( +
+ {[...Array(10)].map((_, index) => ( +
+ ))} +
+ ) +} +``` + +However, in Pigment CSS with the same code as above, all instances will have the same styles and won't change between renders because the styles are extracted at build time. + +To achieve the same result, you need to move the dynamic logic to props and pass the value to CSS variables instead: + +```js +function randomBetween(min: number, max: number) { + return Math.floor(Math.random() * (max - min + 1) + min); +} + +const Bubble = styled('div')({ + '--x': props => props.x, + '--y': props => props.y, +}); + +function App() { + return ( +
+ {[...Array(10)].map((_, index) => ( + + ))} +
+ ) +} +``` diff --git a/packages/pigment-react/exports/createUseThemeProps.js b/packages/pigment-css-react/exports/createUseThemeProps.js similarity index 100% rename from packages/pigment-react/exports/createUseThemeProps.js rename to packages/pigment-css-react/exports/createUseThemeProps.js diff --git a/packages/pigment-react/exports/css.js b/packages/pigment-css-react/exports/css.js similarity index 100% rename from packages/pigment-react/exports/css.js rename to packages/pigment-css-react/exports/css.js diff --git a/packages/pigment-react/exports/generateAtomics.js b/packages/pigment-css-react/exports/generateAtomics.js similarity index 100% rename from packages/pigment-react/exports/generateAtomics.js rename to packages/pigment-css-react/exports/generateAtomics.js diff --git a/packages/pigment-react/exports/keyframes.js b/packages/pigment-css-react/exports/keyframes.js similarity index 100% rename from packages/pigment-react/exports/keyframes.js rename to packages/pigment-css-react/exports/keyframes.js diff --git a/packages/pigment-react/exports/styled.js b/packages/pigment-css-react/exports/styled.js similarity index 100% rename from packages/pigment-react/exports/styled.js rename to packages/pigment-css-react/exports/styled.js diff --git a/packages/pigment-react/exports/sx-plugin.js b/packages/pigment-css-react/exports/sx-plugin.js similarity index 100% rename from packages/pigment-react/exports/sx-plugin.js rename to packages/pigment-css-react/exports/sx-plugin.js diff --git a/packages/pigment-react/exports/sx.js b/packages/pigment-css-react/exports/sx.js similarity index 100% rename from packages/pigment-react/exports/sx.js rename to packages/pigment-css-react/exports/sx.js diff --git a/packages/pigment-react/package.json b/packages/pigment-css-react/package.json similarity index 92% rename from packages/pigment-react/package.json rename to packages/pigment-css-react/package.json index fef627f124a6ba..fcf63176a914f6 100644 --- a/packages/pigment-react/package.json +++ b/packages/pigment-css-react/package.json @@ -9,13 +9,13 @@ "repository": { "type": "git", "url": "https://github.com/mui/material-ui.git", - "directory": "packages/pigment-react" + "directory": "packages/pigment-css-react" }, "license": "MIT", "bugs": { "url": "https://github.com/mui/material-ui/issues" }, - "homepage": "https://github.com/mui/material-ui/tree/master/packages/pigment-react", + "homepage": "https://github.com/mui/material-ui/tree/master/packages/pigment-css-react", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" @@ -25,9 +25,9 @@ "watch": "tsup --watch --clean false", "copy-license": "node ../../scripts/pigment-license.mjs", "build": "tsup", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/pigment-react/**/*.test.{js,ts,tsx}'", - "test:update": "cd ../../ && cross-env NODE_ENV=test UPDATE_FIXTURES=true mocha 'packages/pigment-react/**/*.test.{js,ts,tsx}'", - "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/pigment-react mocha 'packages/pigment-react/**/*.test.{js,ts,tsx}'", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/pigment-css-react/**/*.test.{js,ts,tsx}'", + "test:update": "cd ../../ && cross-env NODE_ENV=test UPDATE_FIXTURES=true mocha 'packages/pigment-css-react/**/*.test.{js,ts,tsx}'", + "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/pigment-css-react mocha 'packages/pigment-css-react/**/*.test.{js,ts,tsx}'", "typecheck": "tsc --noEmit -p ." }, "dependencies": { diff --git a/packages/pigment-react/src/base.d.ts b/packages/pigment-css-react/src/base.d.ts similarity index 100% rename from packages/pigment-react/src/base.d.ts rename to packages/pigment-css-react/src/base.d.ts diff --git a/packages/pigment-react/src/createUseThemeProps.d.ts b/packages/pigment-css-react/src/createUseThemeProps.d.ts similarity index 100% rename from packages/pigment-react/src/createUseThemeProps.d.ts rename to packages/pigment-css-react/src/createUseThemeProps.d.ts diff --git a/packages/pigment-react/src/createUseThemeProps.js b/packages/pigment-css-react/src/createUseThemeProps.js similarity index 100% rename from packages/pigment-react/src/createUseThemeProps.js rename to packages/pigment-css-react/src/createUseThemeProps.js diff --git a/packages/pigment-react/src/css.d.ts b/packages/pigment-css-react/src/css.d.ts similarity index 100% rename from packages/pigment-react/src/css.d.ts rename to packages/pigment-css-react/src/css.d.ts diff --git a/packages/pigment-react/src/css.js b/packages/pigment-css-react/src/css.js similarity index 100% rename from packages/pigment-react/src/css.js rename to packages/pigment-css-react/src/css.js diff --git a/packages/pigment-react/src/generateAtomics.d.ts b/packages/pigment-css-react/src/generateAtomics.d.ts similarity index 100% rename from packages/pigment-react/src/generateAtomics.d.ts rename to packages/pigment-css-react/src/generateAtomics.d.ts diff --git a/packages/pigment-react/src/generateAtomics.js b/packages/pigment-css-react/src/generateAtomics.js similarity index 100% rename from packages/pigment-react/src/generateAtomics.js rename to packages/pigment-css-react/src/generateAtomics.js diff --git a/packages/pigment-react/src/index.ts b/packages/pigment-css-react/src/index.ts similarity index 100% rename from packages/pigment-react/src/index.ts rename to packages/pigment-css-react/src/index.ts diff --git a/packages/pigment-react/src/keyframes.d.ts b/packages/pigment-css-react/src/keyframes.d.ts similarity index 100% rename from packages/pigment-react/src/keyframes.d.ts rename to packages/pigment-css-react/src/keyframes.d.ts diff --git a/packages/pigment-react/src/keyframes.js b/packages/pigment-css-react/src/keyframes.js similarity index 100% rename from packages/pigment-react/src/keyframes.js rename to packages/pigment-css-react/src/keyframes.js diff --git a/packages/pigment-react/src/processors/base-processor.ts b/packages/pigment-css-react/src/processors/base-processor.ts similarity index 100% rename from packages/pigment-react/src/processors/base-processor.ts rename to packages/pigment-css-react/src/processors/base-processor.ts diff --git a/packages/pigment-react/src/processors/createUseThemeProps.ts b/packages/pigment-css-react/src/processors/createUseThemeProps.ts similarity index 100% rename from packages/pigment-react/src/processors/createUseThemeProps.ts rename to packages/pigment-css-react/src/processors/createUseThemeProps.ts diff --git a/packages/pigment-react/src/processors/css.ts b/packages/pigment-css-react/src/processors/css.ts similarity index 100% rename from packages/pigment-react/src/processors/css.ts rename to packages/pigment-css-react/src/processors/css.ts diff --git a/packages/pigment-react/src/processors/generateAtomics.ts b/packages/pigment-css-react/src/processors/generateAtomics.ts similarity index 100% rename from packages/pigment-react/src/processors/generateAtomics.ts rename to packages/pigment-css-react/src/processors/generateAtomics.ts diff --git a/packages/pigment-react/src/processors/keyframes.ts b/packages/pigment-css-react/src/processors/keyframes.ts similarity index 100% rename from packages/pigment-react/src/processors/keyframes.ts rename to packages/pigment-css-react/src/processors/keyframes.ts diff --git a/packages/pigment-react/src/processors/styled.ts b/packages/pigment-css-react/src/processors/styled.ts similarity index 100% rename from packages/pigment-react/src/processors/styled.ts rename to packages/pigment-css-react/src/processors/styled.ts diff --git a/packages/pigment-react/src/processors/sx.ts b/packages/pigment-css-react/src/processors/sx.ts similarity index 100% rename from packages/pigment-react/src/processors/sx.ts rename to packages/pigment-css-react/src/processors/sx.ts diff --git a/packages/pigment-react/src/styled.d.ts b/packages/pigment-css-react/src/styled.d.ts similarity index 100% rename from packages/pigment-react/src/styled.d.ts rename to packages/pigment-css-react/src/styled.d.ts diff --git a/packages/pigment-react/src/styled.jsx b/packages/pigment-css-react/src/styled.jsx similarity index 100% rename from packages/pigment-react/src/styled.jsx rename to packages/pigment-css-react/src/styled.jsx diff --git a/packages/pigment-react/src/sx.d.ts b/packages/pigment-css-react/src/sx.d.ts similarity index 100% rename from packages/pigment-react/src/sx.d.ts rename to packages/pigment-css-react/src/sx.d.ts diff --git a/packages/pigment-react/src/sx.js b/packages/pigment-css-react/src/sx.js similarity index 100% rename from packages/pigment-react/src/sx.js rename to packages/pigment-css-react/src/sx.js diff --git a/packages/pigment-react/src/theme.ts b/packages/pigment-css-react/src/theme.ts similarity index 100% rename from packages/pigment-react/src/theme.ts rename to packages/pigment-css-react/src/theme.ts diff --git a/packages/pigment-react/src/utils/checkStaticObjectOrArray.ts b/packages/pigment-css-react/src/utils/checkStaticObjectOrArray.ts similarity index 100% rename from packages/pigment-react/src/utils/checkStaticObjectOrArray.ts rename to packages/pigment-css-react/src/utils/checkStaticObjectOrArray.ts diff --git a/packages/pigment-react/src/utils/convertAtomicsToCss.ts b/packages/pigment-css-react/src/utils/convertAtomicsToCss.ts similarity index 100% rename from packages/pigment-react/src/utils/convertAtomicsToCss.ts rename to packages/pigment-css-react/src/utils/convertAtomicsToCss.ts diff --git a/packages/pigment-react/src/utils/cssFnValueToVariable.ts b/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts similarity index 100% rename from packages/pigment-react/src/utils/cssFnValueToVariable.ts rename to packages/pigment-css-react/src/utils/cssFnValueToVariable.ts diff --git a/packages/pigment-react/src/utils/cssFunctionTransformerPlugin.ts b/packages/pigment-css-react/src/utils/cssFunctionTransformerPlugin.ts similarity index 100% rename from packages/pigment-react/src/utils/cssFunctionTransformerPlugin.ts rename to packages/pigment-css-react/src/utils/cssFunctionTransformerPlugin.ts diff --git a/packages/pigment-react/src/utils/emotion.ts b/packages/pigment-css-react/src/utils/emotion.ts similarity index 100% rename from packages/pigment-react/src/utils/emotion.ts rename to packages/pigment-css-react/src/utils/emotion.ts diff --git a/packages/pigment-react/src/utils/extendTheme.ts b/packages/pigment-css-react/src/utils/extendTheme.ts similarity index 100% rename from packages/pigment-react/src/utils/extendTheme.ts rename to packages/pigment-css-react/src/utils/extendTheme.ts diff --git a/packages/pigment-react/src/utils/generateCss.ts b/packages/pigment-css-react/src/utils/generateCss.ts similarity index 100% rename from packages/pigment-react/src/utils/generateCss.ts rename to packages/pigment-css-react/src/utils/generateCss.ts diff --git a/packages/pigment-react/src/utils/index.ts b/packages/pigment-css-react/src/utils/index.ts similarity index 100% rename from packages/pigment-react/src/utils/index.ts rename to packages/pigment-css-react/src/utils/index.ts diff --git a/packages/pigment-react/src/utils/isUnitLess.ts b/packages/pigment-css-react/src/utils/isUnitLess.ts similarity index 100% rename from packages/pigment-react/src/utils/isUnitLess.ts rename to packages/pigment-css-react/src/utils/isUnitLess.ts diff --git a/packages/pigment-react/src/utils/pre-linaria-plugin.ts b/packages/pigment-css-react/src/utils/pre-linaria-plugin.ts similarity index 100% rename from packages/pigment-react/src/utils/pre-linaria-plugin.ts rename to packages/pigment-css-react/src/utils/pre-linaria-plugin.ts diff --git a/packages/pigment-react/src/utils/preprocessor.ts b/packages/pigment-css-react/src/utils/preprocessor.ts similarity index 100% rename from packages/pigment-react/src/utils/preprocessor.ts rename to packages/pigment-css-react/src/utils/preprocessor.ts diff --git a/packages/pigment-react/src/utils/processCssObject.ts b/packages/pigment-css-react/src/utils/processCssObject.ts similarity index 100% rename from packages/pigment-react/src/utils/processCssObject.ts rename to packages/pigment-css-react/src/utils/processCssObject.ts diff --git a/packages/pigment-react/src/utils/sxObjectExtractor.ts b/packages/pigment-css-react/src/utils/sxObjectExtractor.ts similarity index 100% rename from packages/pigment-react/src/utils/sxObjectExtractor.ts rename to packages/pigment-css-react/src/utils/sxObjectExtractor.ts diff --git a/packages/pigment-react/src/utils/sxPropConverter.ts b/packages/pigment-css-react/src/utils/sxPropConverter.ts similarity index 100% rename from packages/pigment-react/src/utils/sxPropConverter.ts rename to packages/pigment-css-react/src/utils/sxPropConverter.ts diff --git a/packages/pigment-react/src/utils/valueToLiteral.ts b/packages/pigment-css-react/src/utils/valueToLiteral.ts similarity index 100% rename from packages/pigment-react/src/utils/valueToLiteral.ts rename to packages/pigment-css-react/src/utils/valueToLiteral.ts diff --git a/packages/pigment-react/styles.css b/packages/pigment-css-react/styles.css similarity index 100% rename from packages/pigment-react/styles.css rename to packages/pigment-css-react/styles.css diff --git a/packages/pigment-react/tests/README.md b/packages/pigment-css-react/tests/README.md similarity index 100% rename from packages/pigment-react/tests/README.md rename to packages/pigment-css-react/tests/README.md diff --git a/packages/pigment-react/tests/css/css.test.ts b/packages/pigment-css-react/tests/css/css.test.ts similarity index 100% rename from packages/pigment-react/tests/css/css.test.ts rename to packages/pigment-css-react/tests/css/css.test.ts diff --git a/packages/pigment-react/tests/css/fixtures/css.input.js b/packages/pigment-css-react/tests/css/fixtures/css.input.js similarity index 100% rename from packages/pigment-react/tests/css/fixtures/css.input.js rename to packages/pigment-css-react/tests/css/fixtures/css.input.js diff --git a/packages/pigment-react/tests/css/fixtures/css.output.css b/packages/pigment-css-react/tests/css/fixtures/css.output.css similarity index 74% rename from packages/pigment-react/tests/css/fixtures/css.output.css rename to packages/pigment-css-react/tests/css/fixtures/css.output.css index e34d404861da6d..7b2e7bc2675ee9 100644 --- a/packages/pigment-react/tests/css/fixtures/css.output.css +++ b/packages/pigment-css-react/tests/css/fixtures/css.output.css @@ -1,4 +1,4 @@ -.c1wr0t7p { +.c1pj8glw { color: red; font-size: 3rem; } diff --git a/packages/pigment-css-react/tests/css/fixtures/css.output.js b/packages/pigment-css-react/tests/css/fixtures/css.output.js new file mode 100644 index 00000000000000..351cb0daa5eb94 --- /dev/null +++ b/packages/pigment-css-react/tests/css/fixtures/css.output.js @@ -0,0 +1 @@ +const cls1 = 'c1pj8glw'; diff --git a/packages/pigment-react/tests/keyframes/fixtures/keyframes.input.js b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.input.js similarity index 100% rename from packages/pigment-react/tests/keyframes/fixtures/keyframes.input.js rename to packages/pigment-css-react/tests/keyframes/fixtures/keyframes.input.js diff --git a/packages/pigment-react/tests/keyframes/fixtures/keyframes.output.css b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.css similarity index 79% rename from packages/pigment-react/tests/keyframes/fixtures/keyframes.output.css rename to packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.css index 43ac2b3341e9fb..70e49d7a54a48d 100644 --- a/packages/pigment-react/tests/keyframes/fixtures/keyframes.output.css +++ b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.css @@ -1,4 +1,4 @@ -@keyframes r14c1bqo { +@keyframes rr2uptz { from { transform: rotate(360deg); } diff --git a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.js b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.js new file mode 100644 index 00000000000000..526fb66d7797c0 --- /dev/null +++ b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.js @@ -0,0 +1 @@ +const rotateKeyframe = 'rr2uptz'; diff --git a/packages/pigment-react/tests/keyframes/keyframes.test.ts b/packages/pigment-css-react/tests/keyframes/keyframes.test.ts similarity index 100% rename from packages/pigment-react/tests/keyframes/keyframes.test.ts rename to packages/pigment-css-react/tests/keyframes/keyframes.test.ts diff --git a/packages/pigment-react/tests/styled/fixtures/styled.input.js b/packages/pigment-css-react/tests/styled/fixtures/styled.input.js similarity index 100% rename from packages/pigment-react/tests/styled/fixtures/styled.input.js rename to packages/pigment-css-react/tests/styled/fixtures/styled.input.js diff --git a/packages/pigment-react/tests/styled/fixtures/styled.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled.output.css similarity index 70% rename from packages/pigment-react/tests/styled/fixtures/styled.output.css rename to packages/pigment-css-react/tests/styled/fixtures/styled.output.css index ff9505f6627628..f436157cb324bf 100644 --- a/packages/pigment-react/tests/styled/fixtures/styled.output.css +++ b/packages/pigment-css-react/tests/styled/fixtures/styled.output.css @@ -1,4 +1,4 @@ -@keyframes r1419f2q { +@keyframes r1sz5zcv { from { transform: rotate(360deg); } @@ -6,11 +6,11 @@ transform: rotate(0deg); } } -.c1vtarpi { +.c1aiqtje { color: red; - animation: r1419f2q 2s ease-out 0s infinite; + animation: r1sz5zcv 2s ease-out 0s infinite; } -.s1sjy0ja { +.sj0zd45 { display: block; position: absolute; border-radius: inherit; @@ -18,14 +18,14 @@ opacity: 0.38; font-size: 3rem; } -.s1sjy0ja-1 { +.sj0zd45-1 { font-size: 3rem; } -.s6hrafw { +.shdkmm7 { display: block; opacity: 0.38; font-size: 3rem; } -.s6hrafw .s1sjy0ja { +.shdkmm7 .sj0zd45 { display: none; } diff --git a/packages/pigment-react/tests/styled/fixtures/styled.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled.output.js similarity index 83% rename from packages/pigment-react/tests/styled/fixtures/styled.output.js rename to packages/pigment-css-react/tests/styled/fixtures/styled.output.js index dbe0d964a69688..73822764144ad8 100644 --- a/packages/pigment-react/tests/styled/fixtures/styled.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled.output.js @@ -3,14 +3,14 @@ import { styled as _styled2 } from '@pigment-css/react'; import { styled as _styled } from '@pigment-css/react'; import _theme from '@pigment-css/react/theme'; const Component = /*#__PURE__*/ _styled('div')({ - classes: ['c1vtarpi'], + classes: ['c1aiqtje'], }); export const SliderRail = /*#__PURE__*/ _styled2('span', { name: 'MuiSlider', slot: 'Rail', })({ - classes: ['s1sjy0ja', 's1sjy0ja-1'], + classes: ['sj0zd45', 'sj0zd45-1'], }); const SliderRail2 = /*#__PURE__*/ _styled3('span')({ - classes: ['s6hrafw'], + classes: ['shdkmm7'], }); diff --git a/packages/pigment-react/tests/styled/styled.test.ts b/packages/pigment-css-react/tests/styled/styled.test.ts similarity index 100% rename from packages/pigment-react/tests/styled/styled.test.ts rename to packages/pigment-css-react/tests/styled/styled.test.ts diff --git a/packages/pigment-react/tests/sx/fixtures/sxProps.input.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps.input.js similarity index 100% rename from packages/pigment-react/tests/sx/fixtures/sxProps.input.js rename to packages/pigment-css-react/tests/sx/fixtures/sxProps.input.js diff --git a/packages/pigment-react/tests/sx/fixtures/sxProps.output.css b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.css similarity index 60% rename from packages/pigment-react/tests/sx/fixtures/sxProps.output.css rename to packages/pigment-css-react/tests/sx/fixtures/sxProps.output.css index 2da9b96ba1de38..c7f2c2d52a85d5 100644 --- a/packages/pigment-react/tests/sx/fixtures/sxProps.output.css +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.css @@ -1,4 +1,4 @@ -.s4jxdij { +.sjfloo5 { display: block; position: absolute; border-radius: inherit; @@ -6,23 +6,23 @@ opacity: 0.38; font-size: 3rem; } -.s4jxdij-1 { +.sjfloo5-1 { font-size: 3rem; } -.s4jxdij.s6g18tg { +.sjfloo5.s1o8xp19 { color: red; } -.s4jxdij.sqa8j32 { - color: var(--sqa8j32-0); +.sjfloo5.s1xbsywq { + color: var(--s1xbsywq-0); } -.s4jxdij.s1vuaneo { +.sjfloo5.s1wnk6s5 { background-color: blue; color: white; } -.s4jxdij.sihzw1t { - color: var(--sihzw1t-0); +.sjfloo5.stzaibv { + color: var(--stzaibv-0); } -.s4jxdij.s1cb6hjd { +.sjfloo5.sazg8ol { margin-bottom: 8px; text-align: center; } diff --git a/packages/pigment-react/tests/sx/fixtures/sxProps.output.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js similarity index 61% rename from packages/pigment-react/tests/sx/fixtures/sxProps.output.js rename to packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js index 365853e2ea51e5..1f60cb6e1b5aa9 100644 --- a/packages/pigment-react/tests/sx/fixtures/sxProps.output.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js @@ -3,10 +3,10 @@ export const SliderRail = /*#__PURE__*/ _styled('span', { name: 'MuiSlider', slot: 'Rail', })({ - classes: ['s4jxdij', 's4jxdij-1'], + classes: ['sjfloo5', 'sjfloo5-1'], }); function App() { - return ; + return ; } function App2(props) { return ( @@ -14,12 +14,12 @@ function App2(props) { sx={ props.variant === 'secondary' ? { - className: 'sqa8j32', + className: 's1xbsywq', vars: { - 'sqa8j32-0': [props.isRed ? 'red' : 'blue', false], + 's1xbsywq-0': [props.isRed ? 'red' : 'blue', false], }, } - : 's1vuaneo' + : 's1wnk6s5' } /> ); @@ -29,9 +29,9 @@ function App3(props) { ; + return ; } diff --git a/packages/pigment-react/tests/sx/fixtures/sxProps2.input.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js similarity index 100% rename from packages/pigment-react/tests/sx/fixtures/sxProps2.input.js rename to packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js diff --git a/packages/pigment-react/tests/sx/fixtures/sxProps2.output.css b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css similarity index 79% rename from packages/pigment-react/tests/sx/fixtures/sxProps2.output.css rename to packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css index e406adf7a04e85..b059356454be53 100644 --- a/packages/pigment-react/tests/sx/fixtures/sxProps2.output.css +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css @@ -1,4 +1,4 @@ -.sex8rxh { +.sdbmcs3 { display: block; position: absolute; border-radius: inherit; @@ -6,14 +6,14 @@ opacity: 0.38; font-size: 3rem; } -.sex8rxh-1 { +.sdbmcs3-1 { font-size: 3rem; } -.sex8rxh.suhmzz0 { +.sdbmcs3.si7ulc4 { margin-bottom: 8px; } @media (prefers-color-scheme: dark) { - .sex8rxh.suhmzz0 { + .sdbmcs3.si7ulc4 { color: white; } } diff --git a/packages/pigment-react/tests/sx/fixtures/sxProps2.output.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js similarity index 69% rename from packages/pigment-react/tests/sx/fixtures/sxProps2.output.js rename to packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js index efe0be355aba42..f38b3f8d753633 100644 --- a/packages/pigment-react/tests/sx/fixtures/sxProps2.output.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js @@ -3,8 +3,8 @@ const SliderRail = /*#__PURE__*/ _styled('span', { name: 'MuiSlider', slot: 'Rail', })({ - classes: ['sex8rxh', 'sex8rxh-1'], + classes: ['sdbmcs3', 'sdbmcs3-1'], }); function App2(props) { - return ; + return ; } diff --git a/packages/pigment-react/tests/sx/sx.test.ts b/packages/pigment-css-react/tests/sx/sx.test.ts similarity index 100% rename from packages/pigment-react/tests/sx/sx.test.ts rename to packages/pigment-css-react/tests/sx/sx.test.ts diff --git a/packages/pigment-react/tests/testUtils.ts b/packages/pigment-css-react/tests/testUtils.ts similarity index 100% rename from packages/pigment-react/tests/testUtils.ts rename to packages/pigment-css-react/tests/testUtils.ts diff --git a/packages/pigment-react/theme/index.d.ts b/packages/pigment-css-react/theme/index.d.ts similarity index 100% rename from packages/pigment-react/theme/index.d.ts rename to packages/pigment-css-react/theme/index.d.ts diff --git a/packages/pigment-react/theme/index.js b/packages/pigment-css-react/theme/index.js similarity index 100% rename from packages/pigment-react/theme/index.js rename to packages/pigment-css-react/theme/index.js diff --git a/packages/pigment-react/theme/index.mjs b/packages/pigment-css-react/theme/index.mjs similarity index 100% rename from packages/pigment-react/theme/index.mjs rename to packages/pigment-css-react/theme/index.mjs diff --git a/packages/pigment-react/tsconfig.build.json b/packages/pigment-css-react/tsconfig.build.json similarity index 100% rename from packages/pigment-react/tsconfig.build.json rename to packages/pigment-css-react/tsconfig.build.json diff --git a/packages/pigment-react/tsconfig.json b/packages/pigment-css-react/tsconfig.json similarity index 100% rename from packages/pigment-react/tsconfig.json rename to packages/pigment-css-react/tsconfig.json diff --git a/packages/pigment-react/tsup.config.ts b/packages/pigment-css-react/tsup.config.ts similarity index 100% rename from packages/pigment-react/tsup.config.ts rename to packages/pigment-css-react/tsup.config.ts diff --git a/packages/pigment-unplugin/.gitignore b/packages/pigment-css-unplugin/.gitignore similarity index 100% rename from packages/pigment-unplugin/.gitignore rename to packages/pigment-css-unplugin/.gitignore diff --git a/packages/pigment-unplugin/package.json b/packages/pigment-css-unplugin/package.json similarity index 98% rename from packages/pigment-unplugin/package.json rename to packages/pigment-css-unplugin/package.json index 429ef0397aad68..704e2b967e5440 100644 --- a/packages/pigment-unplugin/package.json +++ b/packages/pigment-css-unplugin/package.json @@ -15,7 +15,7 @@ "bugs": { "url": "https://github.com/mui/material-ui/issues" }, - "homepage": "https://github.com/mui/material-ui/tree/master/packages/pigment-react", + "homepage": "https://github.com/mui/material-ui/tree/master/packages/pigment-css-react", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" diff --git a/packages/pigment-unplugin/src/index.ts b/packages/pigment-css-unplugin/src/index.ts similarity index 98% rename from packages/pigment-unplugin/src/index.ts rename to packages/pigment-css-unplugin/src/index.ts index e4c11e4c4b2c72..510e007267ef0c 100644 --- a/packages/pigment-unplugin/src/index.ts +++ b/packages/pigment-css-unplugin/src/index.ts @@ -269,16 +269,16 @@ export const plugin = createUnplugin((options) => { return ( // this file should exist in the package id.endsWith(`${process.env.RUNTIME_PACKAGE_NAME}/styles.css`) || - id.endsWith('/pigment-react/styles.css') || + id.endsWith('/pigment-css-react/styles.css') || id.includes(`${process.env.RUNTIME_PACKAGE_NAME}/theme`) || - id.includes('/pigment-react/theme') + id.includes('/pigment-css-react/theme') ); }, transform(_code, id) { if (id.endsWith('styles.css')) { return theme ? generateTokenCss(theme) : _code; } - if (id.includes('pigment-react/theme')) { + if (id.includes('pigment-css-react/theme')) { return `export default ${ theme ? JSON.stringify(generateThemeTokens(theme)) : '{}' };`; diff --git a/packages/pigment-unplugin/tsconfig.build.json b/packages/pigment-css-unplugin/tsconfig.build.json similarity index 100% rename from packages/pigment-unplugin/tsconfig.build.json rename to packages/pigment-css-unplugin/tsconfig.build.json diff --git a/packages/pigment-unplugin/tsconfig.json b/packages/pigment-css-unplugin/tsconfig.json similarity index 77% rename from packages/pigment-unplugin/tsconfig.json rename to packages/pigment-css-unplugin/tsconfig.json index 1a850071c7483e..aa7c7cb0fab5b0 100644 --- a/packages/pigment-unplugin/tsconfig.json +++ b/packages/pigment-css-unplugin/tsconfig.json @@ -9,8 +9,8 @@ "@mui/system/*": ["./packages/mui-system/src/*"], "@mui/utils": ["./packages/mui-utils/src"], "@mui/utils/*": ["./packages/mui-utils/src/*"], - "@pigment-css/react": ["./packages/pigment-react/src"], - "@pigment-css/react/*": ["./packages/pigment-react/src/*"] + "@pigment-css/react": ["./packages/pigment-css-react/src"], + "@pigment-css/react/*": ["./packages/pigment-css-react/src/*"] } }, "include": ["src/**/*.ts"], diff --git a/packages/pigment-unplugin/tsup.config.ts b/packages/pigment-css-unplugin/tsup.config.ts similarity index 81% rename from packages/pigment-unplugin/tsup.config.ts rename to packages/pigment-css-unplugin/tsup.config.ts index ee75314ee863c4..4f207fb16765e1 100644 --- a/packages/pigment-unplugin/tsup.config.ts +++ b/packages/pigment-css-unplugin/tsup.config.ts @@ -1,6 +1,6 @@ import { Options, defineConfig } from 'tsup'; import config from '../../tsup.config'; -import runtimePackageJson from '../pigment-react/package.json'; +import runtimePackageJson from '../pigment-css-react/package.json'; const baseConfig: Options = { ...(config as Options), diff --git a/packages/pigment-vite-plugin/.gitignore b/packages/pigment-css-vite-plugin/.gitignore similarity index 100% rename from packages/pigment-vite-plugin/.gitignore rename to packages/pigment-css-vite-plugin/.gitignore diff --git a/packages/pigment-vite-plugin/package.json b/packages/pigment-css-vite-plugin/package.json similarity index 94% rename from packages/pigment-vite-plugin/package.json rename to packages/pigment-css-vite-plugin/package.json index d0b4cb86a83a5b..a3a71836f5da63 100644 --- a/packages/pigment-vite-plugin/package.json +++ b/packages/pigment-css-vite-plugin/package.json @@ -9,13 +9,13 @@ "repository": { "type": "git", "url": "https://github.com/mui/material-ui.git", - "directory": "packages/pigment-vite-plugin" + "directory": "packages/pigment-css-vite-plugin" }, "license": "MIT", "bugs": { "url": "https://github.com/mui/material-ui/issues" }, - "homepage": "https://github.com/mui/material-ui/tree/master/packages/pigment-react", + "homepage": "https://github.com/mui/material-ui/tree/master/packages/pigment-css-react", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" diff --git a/packages/pigment-vite-plugin/src/index.ts b/packages/pigment-css-vite-plugin/src/index.ts similarity index 100% rename from packages/pigment-vite-plugin/src/index.ts rename to packages/pigment-css-vite-plugin/src/index.ts diff --git a/packages/pigment-vite-plugin/src/vite-plugin.ts b/packages/pigment-css-vite-plugin/src/vite-plugin.ts similarity index 100% rename from packages/pigment-vite-plugin/src/vite-plugin.ts rename to packages/pigment-css-vite-plugin/src/vite-plugin.ts diff --git a/packages/pigment-vite-plugin/tsconfig.build.json b/packages/pigment-css-vite-plugin/tsconfig.build.json similarity index 100% rename from packages/pigment-vite-plugin/tsconfig.build.json rename to packages/pigment-css-vite-plugin/tsconfig.build.json diff --git a/packages/pigment-vite-plugin/tsconfig.json b/packages/pigment-css-vite-plugin/tsconfig.json similarity index 76% rename from packages/pigment-vite-plugin/tsconfig.json rename to packages/pigment-css-vite-plugin/tsconfig.json index 33f1d4469a3274..bd8a7238963d0f 100644 --- a/packages/pigment-vite-plugin/tsconfig.json +++ b/packages/pigment-css-vite-plugin/tsconfig.json @@ -8,8 +8,8 @@ "@mui/system/*": ["./packages/mui-system/src/*"], "@mui/utils": ["./packages/mui-utils/src"], "@mui/utils/*": ["./packages/mui-utils/src/*"], - "@pigment-css/react": ["./packages/pigment-react/src"], - "@pigment-css/react/*": ["./packages/pigment-react/src/*"] + "@pigment-css/react": ["./packages/pigment-css-react/src"], + "@pigment-css/react/*": ["./packages/pigment-css-react/src/*"] } }, "include": ["src/**/*"], diff --git a/packages/pigment-vite-plugin/tsup.config.ts b/packages/pigment-css-vite-plugin/tsup.config.ts similarity index 86% rename from packages/pigment-vite-plugin/tsup.config.ts rename to packages/pigment-css-vite-plugin/tsup.config.ts index df6f5ec24d6e7f..49c643a8293478 100644 --- a/packages/pigment-vite-plugin/tsup.config.ts +++ b/packages/pigment-css-vite-plugin/tsup.config.ts @@ -1,6 +1,6 @@ import { Options, defineConfig } from 'tsup'; import config from '../../tsup.config'; -import zeroPkgJson from '../pigment-react/package.json'; +import zeroPkgJson from '../pigment-css-react/package.json'; const external = [`${zeroPkgJson.name}/utils`]; diff --git a/packages/pigment-react/README.md b/packages/pigment-react/README.md index 56aaf9d01386d4..1c9613bff8f608 100644 --- a/packages/pigment-react/README.md +++ b/packages/pigment-react/README.md @@ -1,719 +1,3 @@ # Pigment CSS -Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time. - -- [Getting started](#getting-started) - - [Why this project exists?](#why-choose-pigment-css) - - [Start with Next.js](#start-with-nextjs) - - [Start with Vite](#start-with-vite) -- [Basic usage](#basic-usage) - - [Creating styles](#creating-styles) - - [Creating components](#creating-components) - - [Styling based on props](#styling-based-on-props) - - [Styling based on runtime values](#styling-based-on-runtime-values) - - [Styled component as a CSS selector](#styled-component-as-a-css-selector) - - [Typing props](#typing-props) -- [Theming](#theming) - - [Accesing theme values](#accesing-theme-values) - - [CSS variables support](#css-variables-support) - - [Color schemes](#color-schemes) - - [Switching color schemes](#switching-color-schemes) - - [TypeScript](#typescript) -- [How-to guides](#how-to-guides) - - [Coming from Emotion or styled-components](#coming-from-emotion-or-styled-components) - -## Getting started - -Pigment CSS supports Next.js and Vite with support for more bundlers in the future. -You must install the corresponding plugin, as shown below. - -### Why choose Pigment CSS - -Thanks to recent advancements in CSS (like CSS variables and `color-mix()`), "traditional" CSS-in-JS solutions that process styles at runtime are no longer required for unlocking features like color transformations and theme variables which are necessary for maintaining a sophisticated design system. - -Pigment CSS addresses the needs of the modern React developer by providing a zero-runtime CSS-in-JS styling solution as a successor to tools like Emotion and styled-components. - -Compared to its predecessors, Pigment CSS offers improved DX and runtime performance (though at the cost of increased build time) while also being compatible with React Server Components. -Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling us to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment CSS in v6. - -### Start with Next.js - -Use the following commands to create a new Next.js project with Pigment CSS set up: - -```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/pigment-css-nextjs-ts -cd pigment-css-nextjs-ts -``` - -#### Manual installation - -```bash -npm install @pigment-css/react -npm install --save-dev @pigment-css/nextjs-plugin -``` - -Then, in your `next.config.js` file, import the plugin and wrap the exported config object: - -```js -const { withPigment } = require('@pigment-css/nextjs-plugin'); - -module.exports = withPigment({ - // ... Your nextjs config. -}); -``` - -Finally, import the stylesheet in the root `layout.tsx` file: - -```diff - import type { Metadata } from 'next'; -+import '@pigment-css/react/styles.css'; - - export const metadata: Metadata = { - title: 'Create Next App', - description: 'Generated by create next app', - }; - - export default function RootLayout(props: { children: React.ReactNode }) { - return ( - - {props.children} - - ); - } -``` - -### Start with Vite - -Use the following commands to create a new Vite project with Pigment CSS set up: - -```bash -curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/pigment-css-vite-ts -cd pigment-css-vite-ts -``` - -#### Manual installation - -```bash -npm install @pigment-css/react -npm install --save-dev @pigment-css/vite-plugin -``` - -Then, in your Vite config file, import the plugin and pass it to the `plugins` array as shown: - -```js -import { pigment } from '@pigment-css/vite-plugin'; - -export default defineConfig({ - plugins: [ - pigment(), - // ... Your other plugins. - ], -}); -``` - -Finally, import the stylesheet in the root `main.tsx` file: - -```diff - import * as React from 'react'; - import { createRoot } from 'react-dom/client'; -+import '@pigment-css/react/styles.css'; - import App from './App'; - - const rootElement = document.getElementById('root'); - const root = createRoot(rootElement); - - root.render( - - - , - ); -``` - -## Basic usage - -**You must configure Pigment CSS with [Next.js](#nextjs) or [Vite](#vite) first.** - -### Creating styles - -Use the `css` API to create reusable styles: - -```js -import { css } from '@pigment-css/react'; - -const visuallyHidden = css({ - border: 0, - clip: 'rect(0 0 0 0)', - height: '1px', - margin: -1, - overflow: 'hidden', - padding: 0, - position: 'absolute', - whiteSpace: 'nowrap', - width: '1px', -}); - -function App() { - return
I am invisible
; -} -``` - -The call to the `css` function will be replaced with a unique string that represents the CSS class name for the generated styles. - -Use a callback function to get access to the [theme](#theming) values: - -```js -const title = css(({ theme }) => ({ - color: theme.colors.primary, - fontSize: theme.spacing.unit * 4, - fontFamily: theme.typography.fontFamily, -})); -``` - -### Creating components - -Use the `styled` API to create a component by passing styles at the end. The usage should be familiar if you've worked with Emotion or styled-components: - -```js -import { styled } from '@pigment-css/react'; - -const Heading = styled('div')({ - fontSize: '4rem', - fontWeight: 'bold', - padding: '10px 0px', -}); - -function App() { - return Hello; -} -``` - -The Pigment CSS library differs from "standard" runtime CSS-in-JS libraries in a few ways: - -1. You never get direct access to props in your styled declarations. This is because prop values are only available at runtime, but the CSS is extracted at build time. See [Styling based on runtime values](#styling-based-on-runtime-values) for a workaround. -2. Your styles must be declarative and must account for all combinations of props that you want to style. -3. The theme lets you declare CSS tokens that become part of the CSS bundle after the build. Any other values and methods that it might have are only available during build time—not at runtime. This leads to smaller bundle sizes. - -#### Styling based on props - -> 💡 This approach is recommended when the value of the prop is known at build time (finite values). - -Use the `variants` key to define styles for a combination of the component's props. - -Each variant is an object with `props` and `style` keys. The styles are applied when the component's props match the `props` object. - -**Example 1** — A button component with `small` and `large` sizes: - -```jsx -const Button = styled('button')({ - border: 'none', - padding: '0.75rem', - // ...other base styles - variants: [ - { - props: { size: 'large' }, - style: { padding: '1rem' }, - }, - { - props: { size: 'small' }, - style: { padding: '0.5rem' }, - }, - ], -}); - -; // padding: 0.75rem -; // padding: 1rem -; // padding: 0.5rem -``` - -**Example 2** — A button component with variants and colors: - -```jsx -const Button = styled('button')({ - border: 'none', - padding: '0.75rem', - // ...other base styles - variants: [ - { - props: { variant: 'contained', color: 'primary' }, - style: { backgroundColor: 'tomato', color: 'white' }, - }, - ], -}); - -// `backgroundColor: 'tomato', color: 'white'` -; -``` - -**Example 3** — Apply styles based on a condition: - -The value of the `props` can be a function that returns a boolean. If the function returns `true`, the styles are applied. - -```jsx -const Button = styled('button')({ - border: 'none', - padding: '0.75rem', - // ...other base styles - variants: [ - { - props: (props) => props.variant !== 'contained', - style: { backgroundColor: 'transparent' }, - }, - ], -}); -``` - -Note that the `props` function will not work if it is inside another closure, for example, inside an `array.map`: - -```jsx -const Button = styled('button')({ - border: 'none', - padding: '0.75rem', - // ...other base styles - variants: ['red', 'blue', 'green'].map((item) => ({ - props: (props) => { - // ❌ Cannot access `item` in this closure - return props.color === item && !props.disabled; - }, - style: { backgroundColor: 'tomato' }, - })), -}); -``` - -Instead, use plain objects to define the variants: - -```jsx -const Button = styled('button')({ - border: 'none', - padding: '0.75rem', - // ...other base styles - variants: ['red', 'blue', 'green'].map((item) => ({ - props: { color: item, disabled: false }, - style: { backgroundColor: 'tomato' }, - })), -}); -``` - -#### Styling based on runtime values - -> 💡 This approach is recommended when the value of a prop is **unknown** ahead of time or possibly unlimited values, for example styling based on the user's input. - -Use a callback function as a value to create a dynamic style for the specific CSS property: - -```jsx -const Heading = styled('h1')({ - color: ({ isError }) => (isError ? 'red' : 'black'), -}); -``` - -Pigment CSS will replace the callback with a CSS variable and inject the value through inline style. This makes it possible to create a static CSS file while still allowing dynamic styles. - -```css -.Heading_class_akjsdfb { - color: var(--Heading_class_akjsdfb-0); -} -``` - -```jsx -

(isError ? 'red' : 'black'), - }} -> - Hello -

-``` - -#### Styled component as a CSS selector - -All of the components that you create are also available as CSS selectors. For example, for the `Heading` component described in the previous section, you can target that component inside another styled component like this: - -```jsx -const Wrapper = styled.div({ - [`& .${Heading}`]: { - color: 'blue', - }, -}); -``` - -This enables you to override the default `color` of the Heading component rendered inside the Wrapper: - -```tsx - - Hello - -``` - -You can also export any styled component you create and use it as the base for additional components: - -```tsx -const ExtraHeading = styled(Heading)({ - // ... overridden styled -}); -``` - -#### Typing props - -If you use TypeScript, add the props typing before the styles to get the type checking: - -```tsx -const Heading = styled('h1')<{ isError?: boolean }>({ - color: ({ isError }) => (isError ? 'red' : 'black'), -}); -``` - -### Creating animation keyframes - -Use the `keyframes` API to create reusable [animation keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes): - -```js -import { keyframes } from '@pigment-css/react'; - -const fadeIn = keyframes` - from { - opacity: 0; - } - to { - opacity: 1; - } -`; - -function Example1() { - return
I am invisible
; -} -``` - -The call to the `keyframes` function will be replaced with a unique string that represents the CSS animation name. It can be used with `css` or `styled` too. - -```js -import { css, styled, keyframes } from '@pigment-css/react'; - -const fadeIn = keyframes(...); - -const Example2 = styled('div')({ - animation: `${fadeIn} 0.5s`, -}); - -function App() { - return ( - <> - -
- - ) -} -``` - -### Theming - -Theming is an **optional** feature that lets you reuse the same values, such as colors, spacing, and typography, across your application. It is a plain object of any structure that you can define in your config file. - -> **💡 Good to know**: -> -> The **theme** object is used at build time and does not exist in the final JS bundle. This means that components created using Pigment's `styled` can be used with React Server Components by default while still getting the benefits of theming. - -For example, in Next.js, you can define a theme in the `next.config.js` file like this: - -```js -const { withPigment } = require('@pigment-css/nextjs-plugin'); - -module.exports = withPigment( - { - // ...other nextConfig - }, - { - theme: { - colors: { - primary: 'tomato', - secondary: 'cyan', - }, - spacing: { - unit: 8, - }, - typography: { - fontFamily: 'Inter, sans-serif', - }, - // ...more keys and values, it's free style! - }, - }, -); -``` - -#### Accessing theme values - -A callback can be used with **styled** and **css** APIs to access the theme values: - -```js -const Heading = styled('h1')(({ theme }) => ({ - color: theme.colors.primary, - fontSize: theme.spacing.unit * 4, - fontFamily: theme.typography.fontFamily, -})); -``` - -#### CSS variables support - -Pigment CSS can generate CSS variables from the theme values when you wrap your theme with `extendTheme` utility. For example, in a `next.config.js` file: - -```js -const { withPigment, extendTheme } = require('@pigment-css/nextjs-plugin'); - -module.exports = withPigment( - { - // ...nextConfig - }, - { - theme: extendTheme({ - colors: { - primary: 'tomato', - secondary: 'cyan', - }, - spacing: { - unit: 8, - }, - typography: { - fontFamily: 'Inter, sans-serif', - }, - }), - }, -); -``` - -The `extendTheme` utility will go through the theme and create a `vars` object which represents the tokens that refer to CSS variables. - -```jsx -const theme = extendTheme({ - colors: { - primary: 'tomato', - secondary: 'cyan', - }, -}); - -console.log(theme.colors.primary); // 'tomato' -console.log(theme.vars.colors.primary); // 'var(--colors-primary)' -``` - -#### Color schemes - -Some tokens, especially color-related tokens, can have different values for different scenarios. For example in a daylight condition, the background color might be white, but in a dark condition, it might be black. - -The `extendTheme` utility lets you define a theme with a special `colorSchemes` key: - -```jsx -extendTheme({ - colorSchemes: { - light: { - colors: { - background: '#f9f9f9', - foreground: '#121212', - }, - }, - dark: { - colors: { - background: '#212121', - foreground: '#fff', - }, - }, - }, -}); -``` - -In the above example, `light` (default) and `dark` color schemes are defined. The structure of each color scheme must be a plain object with keys and values. - -#### Switching color schemes - -By default, when `colorSchemes` is defined, Pigment CSS uses the [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query to switch between color schemes based on the user's system settings. - -However, if you want to control the color scheme based on application logic, for example, using a button to switch between light and dark mode, you can customize the behavior by providing a `getSelector` function: - -```diff - extendTheme({ - colorSchemes: { - light: { ... }, - dark: { ... }, - }, -+ getSelector: (colorScheme) => colorScheme ? `.theme-${colorScheme}` : ':root', - }); -``` - -Note that you need to add the logic to a button by yourself. Here is an example of how to do it: - -```jsx -function App() { - return ( - - ); -} -``` - -#### Styling based on color scheme - -The `extendTheme` utility attaches a function called `applyStyles` to the theme object. It receives a color scheme as the first argument followed by a style object. -It will return a proper CSS selector based on the theme configuration. - -```jsx -const Heading = styled('h1')(({ theme }) => ({ - color: theme.colors.primary, - fontSize: theme.spacing.unit * 4, - fontFamily: theme.typography.fontFamily, - ...theme.applyStyles('dark', { - color: theme.colors.primaryLight, - }), -})); -``` - -#### CSS variables prefix - -You can add a prefix to the generated CSS variables by providing a `cssVarPrefix` option to the `extendTheme` utility: - -```jsx -extendTheme({ - cssVarPrefix: 'pigment', -}); -``` - -The generated CSS variables will have the `pigment` prefix: - -```css -:root { - --pigment-colors-background: #f9f9f9; - --pigment-colors-foreground: #121212; -} -``` - -#### TypeScript - -To get the type checking for the theme, you need to augment the theme type: - -```ts -// any file that is included in your tsconfig.json -import type { ExtendTheme } from '@pigment-css/react'; - -declare module '@pigment-css/react/theme' { - interface ThemeTokens { - // the structure of your theme - } - - interface ThemeArgs { - theme: ExtendTheme<{ - colorScheme: 'light' | 'dark'; - tokens: ThemeTokens; - }>; - } -} -``` - -## How-to guides - -### Coming from Emotion or styled-components - -Emotion and styled-components are runtime CSS-in-JS libraries. What you write in your styles is what you get in the final bundle, which means the styles can be as dynamic as you want with bundle size and performance overhead trade-offs. - -On the other hand, Pigment CSS extracts CSS at build time and replaces the JS code with hashed class names and some CSS variables. This means that it has to know all of the styles to be extracted ahead of time, so there are rules and limitations that you need to be aware of when using JavaScript callbacks or variables in Pigment CSS's APIs. - -Here are some common patterns and how to achieve them with Pigment CSS: - -1. **Fixed set of styles** - -In Emotion or styled-components, you can use props to create styles conditionally: - -```js -const Flex = styled('div')((props) => ({ - display: 'flex', - ...(props.vertical // ❌ Pigment CSS will throw an error - ? { - flexDirection: 'column', - paddingBlock: '1rem', - } - : { - paddingInline: '1rem', - }), -})); -``` - -But in Pigment CSS, you need to define all of the styles ahead of time using the `variants` key: - -```js -const Flex = styled('div')((props) => ({ - display: 'flex', - variants: [ - { - props: { vertical: true }, - style: { - flexDirection: 'column', - paddingBlock: '1rem', - }, - }, - { - props: { vertical: false }, - style: { - paddingInline: '1rem', - }, - }, - ], -})); -``` - -> 💡 Keep in mind that the `variants` key is for fixed values of props, for example, a component's colors, sizes, and states. - -2. **Programatically generated styles** - -For Emotion and styled-components, the styles will be different on each render and instance because the styles are generated at runtime: - -```js -function randomBetween(min: number, max: number) { - return Math.floor(Math.random() * (max - min + 1) + min); -} -function generateBubbleVars() { - return ` - --x: ${randomBetween(10, 90)}%; - --y: ${randomBetween(15, 85)}%; - `; -} - -function App() { - return ( -
- {[...Array(10)].map((_, index) => ( -
- ))} -
- ) -} -``` - -However, in Pigment CSS with the same code as above, all instances will have the same styles and won't change between renders because the styles are extracted at build time. - -To achieve the same result, you need to move the dynamic logic to props and pass the value to CSS variables instead: - -```js -function randomBetween(min: number, max: number) { - return Math.floor(Math.random() * (max - min + 1) + min); -} - -const Bubble = styled('div')({ - '--x': props => props.x, - '--y': props => props.y, -}); - -function App() { - return ( -
- {[...Array(10)].map((_, index) => ( - - ))} -
- ) -} -``` +The package has moved [here](../pigment-css-react/). diff --git a/packages/pigment-react/tests/css/fixtures/css.output.js b/packages/pigment-react/tests/css/fixtures/css.output.js deleted file mode 100644 index afbe5dcc772db6..00000000000000 --- a/packages/pigment-react/tests/css/fixtures/css.output.js +++ /dev/null @@ -1 +0,0 @@ -const cls1 = 'c1wr0t7p'; diff --git a/packages/pigment-react/tests/keyframes/fixtures/keyframes.output.js b/packages/pigment-react/tests/keyframes/fixtures/keyframes.output.js deleted file mode 100644 index 2df1df78892cc8..00000000000000 --- a/packages/pigment-react/tests/keyframes/fixtures/keyframes.output.js +++ /dev/null @@ -1 +0,0 @@ -const rotateKeyframe = 'r14c1bqo'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 132dd9f439ff00..90b1d2655f346e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -127,7 +127,7 @@ importers: version: 20.0.2 '@pigment-css/react': specifier: workspace:^ - version: link:packages/pigment-react + version: link:packages/pigment-css-react '@playwright/test': specifier: 1.42.1 version: 1.42.1 @@ -2088,17 +2088,17 @@ importers: specifier: ^11.2.0 version: 11.2.0 - packages/pigment-nextjs-plugin: + packages/pigment-css-nextjs-plugin: dependencies: '@pigment-css/unplugin': specifier: workspace:^ - version: link:../pigment-unplugin + version: link:../pigment-css-unplugin devDependencies: next: specifier: ^13.5.1 version: 13.5.1(@babel/core@7.23.9)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) - packages/pigment-react: + packages/pigment-css-react: dependencies: '@babel/core': specifier: ^7.23.9 @@ -2198,14 +2198,14 @@ importers: specifier: ^18.2.0 version: 18.2.0 - packages/pigment-unplugin: + packages/pigment-css-unplugin: dependencies: '@babel/core': specifier: ^7.23.9 version: 7.23.9 '@pigment-css/react': specifier: workspace:^ - version: link:../pigment-react + version: link:../pigment-css-react '@wyw-in-js/shared': specifier: ^0.5.0 version: 0.5.0 @@ -2223,7 +2223,7 @@ importers: specifier: ^7.20.5 version: 7.20.5 - packages/pigment-vite-plugin: + packages/pigment-css-vite-plugin: dependencies: '@babel/core': specifier: ^7.23.9 @@ -2233,7 +2233,7 @@ importers: version: 7.23.3(@babel/core@7.23.9) '@pigment-css/react': specifier: workspace:^ - version: link:../pigment-react + version: link:../pigment-css-react '@wyw-in-js/shared': specifier: ^0.5.0 version: 0.5.0 diff --git a/tsconfig.json b/tsconfig.json index 94f8dff28f53c3..ac3aa8a81841b1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -44,12 +44,12 @@ "@mui/joy": ["./packages/mui-joy/src"], "@mui/joy/*": ["./packages/mui-joy/src/*"], "@mui/icons-material/*": ["./packages/mui-icons-material/src/icon.d.ts"], - "@pigment-css/nextjs-plugin": ["./packages/pigment-nextjs-plugin/src"], - "@pigment-css/nextjs-plugin/*": ["./packages/pigment-nextjs-plugin/src/*"], - "@pigment-css/react": ["./packages/pigment-react/src"], - "@pigment-css/react/*": ["./packages/pigment-react/src/*"], - "@pigment-css/vite-plugin": ["./packages/pigment-vite-plugin/src"], - "@pigment-css/vite-plugin/*": ["./packages/pigment-vite-plugin/src/*"], + "@pigment-css/nextjs-plugin": ["./packages/pigment-css-nextjs-plugin/src"], + "@pigment-css/nextjs-plugin/*": ["./packages/pigment-css-nextjs-plugin/src/*"], + "@pigment-css/react": ["./packages/pigment-css-react/src"], + "@pigment-css/react/*": ["./packages/pigment-css-react/src/*"], + "@pigment-css/vite-plugin": ["./packages/pigment-css-vite-plugin/src"], + "@pigment-css/vite-plugin/*": ["./packages/pigment-css-vite-plugin/src/*"], "@mui-internal/docs-utils": ["./packages/docs-utils/src"], "@mui/internal-scripts/typescript-to-proptypes": [ "./packages-internal/scripts/typescript-to-proptypes/src" diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index 66f7f8121b5e6f..a6bfc4370679f9 100644 --- a/webpackBaseConfig.js +++ b/webpackBaseConfig.js @@ -24,7 +24,7 @@ module.exports = { '@mui/material-next': path.resolve(__dirname, './packages/mui-material-next/src'), '@mui/material-nextjs': path.resolve(__dirname, './packages/mui-material-nextjs/src'), '@mui/joy': path.resolve(__dirname, './packages/mui-joy/src'), - '@pigment-css/react': path.resolve(__dirname, './packages/pigment-react/src'), + '@pigment-css/react': path.resolve(__dirname, './packages/pigment-css-react/src'), '@mui-internal/docs-utils': path.resolve(__dirname, './packages/docs-utils/src'), '@mui/internal-scripts/typescript-to-proptypes': path.resolve( __dirname,