From 2d02b940af272f6a344c7ed954fdf791a7269424 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 23 Apr 2024 11:18:11 +0200 Subject: [PATCH 01/10] [core] Remove @pigment-css/* packages (#41965) --- .eslintignore | 6 - apps/local-ui-lib/package.json | 2 +- apps/local-ui-lib/tsconfig.json | 7 +- apps/pigment-css-next-app/README.md | 2 +- apps/pigment-css-next-app/package.json | 4 +- apps/pigment-css-next-app/tsconfig.json | 3 - apps/pigment-css-vite-app/README.md | 7 +- apps/pigment-css-vite-app/package.json | 4 +- apps/pigment-css-vite-app/tsconfig.json | 3 - babel.config.js | 1 - examples/pigment-css-nextjs-ts/package.json | 4 +- examples/pigment-css-remix-ts/package.json | 4 +- examples/pigment-css-vite-ts/package.json | 4 +- package.json | 20 +- .../test/generated-types/tsconfig.json | 6 - packages/pigment-css-nextjs-plugin/.eslintrc | 5 - packages/pigment-css-nextjs-plugin/.gitignore | 1 - packages/pigment-css-nextjs-plugin/loader.js | 5 - .../pigment-css-nextjs-plugin/next-font.js | 5 - .../pigment-css-nextjs-plugin/next-image.js | 2 - .../pigment-css-nextjs-plugin/package.json | 53 - .../pigment-css-nextjs-plugin/src/index.ts | 106 -- .../src/virtual-css-loader.js | 6 - .../third-party-styled.js | 4 - .../tsconfig.build.json | 6 - .../pigment-css-nextjs-plugin/tsconfig.json | 9 - .../pigment-css-nextjs-plugin/tsup.config.ts | 13 - .../zero-virtual.css | 1 - packages/pigment-css-react/.eslintignore | 4 - packages/pigment-css-react/.eslintrc | 6 - packages/pigment-css-react/.gitignore | 4 - packages/pigment-css-react/README.md | 1110 +---------------- .../exports/createUseThemeProps.js | 5 - packages/pigment-css-react/exports/css.js | 5 - .../exports/generateAtomics.js | 6 - .../pigment-css-react/exports/keyframes.js | 5 - .../exports/remove-prop-types-plugin.js | 5 - packages/pigment-css-react/exports/styled.js | 5 - .../pigment-css-react/exports/sx-plugin.js | 5 - packages/pigment-css-react/exports/sx.js | 5 - packages/pigment-css-react/package.json | 190 --- packages/pigment-css-react/src/Box.d.ts | 26 - packages/pigment-css-react/src/Box.jsx | 54 - .../pigment-css-react/src/RtlProvider.tsx | 25 - packages/pigment-css-react/src/base.d.ts | 66 - .../src/createUseThemeProps.d.ts | 5 - .../src/createUseThemeProps.js | 52 - packages/pigment-css-react/src/css.d.ts | 22 - packages/pigment-css-react/src/css.js | 5 - .../src/generateAtomics.d.ts | 29 - .../pigment-css-react/src/generateAtomics.js | 64 - packages/pigment-css-react/src/index.ts | 6 - packages/pigment-css-react/src/keyframes.d.ts | 27 - packages/pigment-css-react/src/keyframes.js | 5 - .../src/private-runtime/ForwardSx.js | 32 - .../src/private-runtime/index.ts | 1 - .../src/processors/base-processor.ts | 45 - .../src/processors/createUseThemeProps.ts | 65 - .../pigment-css-react/src/processors/css.ts | 183 --- .../src/processors/generateAtomics.ts | 106 -- .../src/processors/keyframes.ts | 167 --- .../src/processors/styled.ts | 559 --------- .../pigment-css-react/src/processors/sx.ts | 191 --- packages/pigment-css-react/src/styled.d.ts | 77 -- packages/pigment-css-react/src/styled.js | 160 --- packages/pigment-css-react/src/sx.d.ts | 6 - packages/pigment-css-react/src/sx.js | 3 - packages/pigment-css-react/src/theme.ts | 2 - .../src/utils/checkStaticObjectOrArray.ts | 47 - .../src/utils/convertAtomicsToCss.ts | 92 -- .../src/utils/cssFnValueToVariable.ts | 217 ---- .../src/utils/cssFunctionTransformerPlugin.ts | 64 - .../pigment-css-react/src/utils/emotion.ts | 8 - .../src/utils/extendTheme.ts | 164 --- .../src/utils/generateCss.ts | 21 - packages/pigment-css-react/src/utils/index.ts | 4 - .../pigment-css-react/src/utils/isUnitLess.ts | 56 - .../src/utils/preprocessor.ts | 61 - .../src/utils/processCssObject.ts | 24 - .../src/utils/remove-prop-types-plugin.ts | 27 - .../pigment-css-react/src/utils/sx-plugin.ts | 166 --- .../src/utils/sxObjectExtractor.ts | 141 --- .../src/utils/sxPropConverter.ts | 45 - .../src/utils/valueToLiteral.ts | 128 -- packages/pigment-css-react/styles.css | 3 - packages/pigment-css-react/tests/Box.spec.tsx | 22 - .../pigment-css-react/tests/Box/box.test.tsx | 13 - .../tests/Box/fixtures/box.input.js | 20 - .../tests/Box/fixtures/box.output.css | 9 - .../tests/Box/fixtures/box.output.js | 10 - packages/pigment-css-react/tests/README.md | 35 - .../pigment-css-react/tests/css/css.test.ts | 40 - .../tests/css/fixtures/css.input.js | 6 - .../tests/css/fixtures/css.output.css | 4 - .../tests/css/fixtures/css.output.js | 1 - .../fixtures/keyframes-theme.input.js | 29 - .../fixtures/keyframes-theme.output.css | 22 - .../fixtures/keyframes-theme.output.js | 2 - .../keyframes/fixtures/keyframes.input.js | 20 - .../keyframes/fixtures/keyframes.output.css | 16 - .../keyframes/fixtures/keyframes.output.js | 2 - .../tests/keyframes/keyframes.test.ts | 36 - .../tests/styled/fixtures/styled-rtl.input.js | 33 - .../styled/fixtures/styled-rtl.output.css | 44 - .../styled/fixtures/styled-rtl.output.js | 14 - .../styled/fixtures/styled-theme.input.js | 54 - .../styled/fixtures/styled-theme.output.css | 31 - .../styled/fixtures/styled-theme.output.js | 29 - .../styled/fixtures/styled-variants.input.js | 18 - .../fixtures/styled-variants.output.css | 6 - .../styled/fixtures/styled-variants.output.js | 17 - .../tests/styled/fixtures/styled.input.js | 50 - .../tests/styled/fixtures/styled.output.css | 26 - .../tests/styled/fixtures/styled.output.js | 27 - .../tests/styled/runtime-styled.test.js | 205 --- .../tests/styled/styled.test.tsx | 84 -- .../tests/sx/fixtures/sxProps.input.js | 45 - .../tests/sx/fixtures/sxProps.output.css | 28 - .../tests/sx/fixtures/sxProps.output.js | 52 - .../tests/sx/fixtures/sxProps2.input.js | 68 - .../tests/sx/fixtures/sxProps2.output.css | 46 - .../tests/sx/fixtures/sxProps2.output.js | 34 - .../pigment-css-react/tests/sx/sx.test.ts | 62 - packages/pigment-css-react/tests/testUtils.ts | 114 -- .../theme/fixtures/themed-component.input.js | 53 - .../fixtures/themed-component.output.css | 21 - .../theme/fixtures/themed-component.output.js | 44 - .../tests/theme/theme.test.ts | 65 - .../tests/utils/theme-tokens.test.ts | 102 -- packages/pigment-css-react/theme/index.d.ts | 1 - packages/pigment-css-react/theme/index.js | 1 - packages/pigment-css-react/theme/index.mjs | 1 - .../pigment-css-react/tsconfig.build.json | 6 - packages/pigment-css-react/tsconfig.json | 20 - packages/pigment-css-react/tsup.config.ts | 39 - packages/pigment-css-unplugin/.eslintrc | 5 - packages/pigment-css-unplugin/.gitignore | 1 - packages/pigment-css-unplugin/package.json | 55 - packages/pigment-css-unplugin/src/index.ts | 408 ------ packages/pigment-css-unplugin/src/utils.ts | 66 - .../pigment-css-unplugin/tests/utils.test.ts | 88 -- .../pigment-css-unplugin/tsconfig.build.json | 9 - packages/pigment-css-unplugin/tsconfig.json | 19 - packages/pigment-css-unplugin/tsup.config.ts | 13 - packages/pigment-css-vite-plugin/.gitignore | 1 - packages/pigment-css-vite-plugin/package.json | 54 - packages/pigment-css-vite-plugin/src/index.ts | 122 -- .../src/vite-plugin.ts | 286 ----- .../tsconfig.build.json | 9 - .../pigment-css-vite-plugin/tsconfig.json | 17 - .../pigment-css-vite-plugin/tsup.config.ts | 21 - packages/pigment-react/README.md | 2 +- patches/@wyw-in-js__transform@0.5.0.patch | 44 - pnpm-lock.yaml | 639 ++++------ scripts/pigment-license.mjs | 11 - tsconfig.json | 6 - tsup.config.ts | 36 - webpackBaseConfig.js | 1 - 158 files changed, 250 insertions(+), 8289 deletions(-) delete mode 100644 packages/pigment-css-nextjs-plugin/.eslintrc delete mode 100644 packages/pigment-css-nextjs-plugin/.gitignore delete mode 100644 packages/pigment-css-nextjs-plugin/loader.js delete mode 100644 packages/pigment-css-nextjs-plugin/next-font.js delete mode 100644 packages/pigment-css-nextjs-plugin/next-image.js delete mode 100644 packages/pigment-css-nextjs-plugin/package.json delete mode 100644 packages/pigment-css-nextjs-plugin/src/index.ts delete mode 100644 packages/pigment-css-nextjs-plugin/src/virtual-css-loader.js delete mode 100644 packages/pigment-css-nextjs-plugin/third-party-styled.js delete mode 100644 packages/pigment-css-nextjs-plugin/tsconfig.build.json delete mode 100644 packages/pigment-css-nextjs-plugin/tsconfig.json delete mode 100644 packages/pigment-css-nextjs-plugin/tsup.config.ts delete mode 100644 packages/pigment-css-nextjs-plugin/zero-virtual.css delete mode 100644 packages/pigment-css-react/.eslintignore delete mode 100644 packages/pigment-css-react/.eslintrc delete mode 100644 packages/pigment-css-react/.gitignore delete mode 100644 packages/pigment-css-react/exports/createUseThemeProps.js delete mode 100644 packages/pigment-css-react/exports/css.js delete mode 100644 packages/pigment-css-react/exports/generateAtomics.js delete mode 100644 packages/pigment-css-react/exports/keyframes.js delete mode 100644 packages/pigment-css-react/exports/remove-prop-types-plugin.js delete mode 100644 packages/pigment-css-react/exports/styled.js delete mode 100644 packages/pigment-css-react/exports/sx-plugin.js delete mode 100644 packages/pigment-css-react/exports/sx.js delete mode 100644 packages/pigment-css-react/package.json delete mode 100644 packages/pigment-css-react/src/Box.d.ts delete mode 100644 packages/pigment-css-react/src/Box.jsx delete mode 100644 packages/pigment-css-react/src/RtlProvider.tsx delete mode 100644 packages/pigment-css-react/src/base.d.ts delete mode 100644 packages/pigment-css-react/src/createUseThemeProps.d.ts delete mode 100644 packages/pigment-css-react/src/createUseThemeProps.js delete mode 100644 packages/pigment-css-react/src/css.d.ts delete mode 100644 packages/pigment-css-react/src/css.js delete mode 100644 packages/pigment-css-react/src/generateAtomics.d.ts delete mode 100644 packages/pigment-css-react/src/generateAtomics.js delete mode 100644 packages/pigment-css-react/src/index.ts delete mode 100644 packages/pigment-css-react/src/keyframes.d.ts delete mode 100644 packages/pigment-css-react/src/keyframes.js delete mode 100644 packages/pigment-css-react/src/private-runtime/ForwardSx.js delete mode 100644 packages/pigment-css-react/src/private-runtime/index.ts delete mode 100644 packages/pigment-css-react/src/processors/base-processor.ts delete mode 100644 packages/pigment-css-react/src/processors/createUseThemeProps.ts delete mode 100644 packages/pigment-css-react/src/processors/css.ts delete mode 100644 packages/pigment-css-react/src/processors/generateAtomics.ts delete mode 100644 packages/pigment-css-react/src/processors/keyframes.ts delete mode 100644 packages/pigment-css-react/src/processors/styled.ts delete mode 100644 packages/pigment-css-react/src/processors/sx.ts delete mode 100644 packages/pigment-css-react/src/styled.d.ts delete mode 100644 packages/pigment-css-react/src/styled.js delete mode 100644 packages/pigment-css-react/src/sx.d.ts delete mode 100644 packages/pigment-css-react/src/sx.js delete mode 100644 packages/pigment-css-react/src/theme.ts delete mode 100644 packages/pigment-css-react/src/utils/checkStaticObjectOrArray.ts delete mode 100644 packages/pigment-css-react/src/utils/convertAtomicsToCss.ts delete mode 100644 packages/pigment-css-react/src/utils/cssFnValueToVariable.ts delete mode 100644 packages/pigment-css-react/src/utils/cssFunctionTransformerPlugin.ts delete mode 100644 packages/pigment-css-react/src/utils/emotion.ts delete mode 100644 packages/pigment-css-react/src/utils/extendTheme.ts delete mode 100644 packages/pigment-css-react/src/utils/generateCss.ts delete mode 100644 packages/pigment-css-react/src/utils/index.ts delete mode 100644 packages/pigment-css-react/src/utils/isUnitLess.ts delete mode 100644 packages/pigment-css-react/src/utils/preprocessor.ts delete mode 100644 packages/pigment-css-react/src/utils/processCssObject.ts delete mode 100644 packages/pigment-css-react/src/utils/remove-prop-types-plugin.ts delete mode 100644 packages/pigment-css-react/src/utils/sx-plugin.ts delete mode 100644 packages/pigment-css-react/src/utils/sxObjectExtractor.ts delete mode 100644 packages/pigment-css-react/src/utils/sxPropConverter.ts delete mode 100644 packages/pigment-css-react/src/utils/valueToLiteral.ts delete mode 100644 packages/pigment-css-react/styles.css delete mode 100644 packages/pigment-css-react/tests/Box.spec.tsx delete mode 100644 packages/pigment-css-react/tests/Box/box.test.tsx delete mode 100644 packages/pigment-css-react/tests/Box/fixtures/box.input.js delete mode 100644 packages/pigment-css-react/tests/Box/fixtures/box.output.css delete mode 100644 packages/pigment-css-react/tests/Box/fixtures/box.output.js delete mode 100644 packages/pigment-css-react/tests/README.md delete mode 100644 packages/pigment-css-react/tests/css/css.test.ts delete mode 100644 packages/pigment-css-react/tests/css/fixtures/css.input.js delete mode 100644 packages/pigment-css-react/tests/css/fixtures/css.output.css delete mode 100644 packages/pigment-css-react/tests/css/fixtures/css.output.js delete mode 100644 packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.input.js delete mode 100644 packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.css delete mode 100644 packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.js delete mode 100644 packages/pigment-css-react/tests/keyframes/fixtures/keyframes.input.js delete mode 100644 packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.css delete mode 100644 packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.js delete mode 100644 packages/pigment-css-react/tests/keyframes/keyframes.test.ts delete mode 100644 packages/pigment-css-react/tests/styled/fixtures/styled-rtl.input.js delete mode 100644 packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.css delete mode 100644 packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js delete mode 100644 packages/pigment-css-react/tests/styled/fixtures/styled-theme.input.js delete mode 100644 packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.css delete mode 100644 packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js delete mode 100644 packages/pigment-css-react/tests/styled/fixtures/styled-variants.input.js delete mode 100644 packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.css delete mode 100644 packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.js delete mode 100644 packages/pigment-css-react/tests/styled/fixtures/styled.input.js delete mode 100644 packages/pigment-css-react/tests/styled/fixtures/styled.output.css delete mode 100644 packages/pigment-css-react/tests/styled/fixtures/styled.output.js delete mode 100644 packages/pigment-css-react/tests/styled/runtime-styled.test.js delete mode 100644 packages/pigment-css-react/tests/styled/styled.test.tsx delete mode 100644 packages/pigment-css-react/tests/sx/fixtures/sxProps.input.js delete mode 100644 packages/pigment-css-react/tests/sx/fixtures/sxProps.output.css delete mode 100644 packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js delete mode 100644 packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js delete mode 100644 packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css delete mode 100644 packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js delete mode 100644 packages/pigment-css-react/tests/sx/sx.test.ts delete mode 100644 packages/pigment-css-react/tests/testUtils.ts delete mode 100644 packages/pigment-css-react/tests/theme/fixtures/themed-component.input.js delete mode 100644 packages/pigment-css-react/tests/theme/fixtures/themed-component.output.css delete mode 100644 packages/pigment-css-react/tests/theme/fixtures/themed-component.output.js delete mode 100644 packages/pigment-css-react/tests/theme/theme.test.ts delete mode 100644 packages/pigment-css-react/tests/utils/theme-tokens.test.ts delete mode 100644 packages/pigment-css-react/theme/index.d.ts delete mode 100644 packages/pigment-css-react/theme/index.js delete mode 100644 packages/pigment-css-react/theme/index.mjs delete mode 100644 packages/pigment-css-react/tsconfig.build.json delete mode 100644 packages/pigment-css-react/tsconfig.json delete mode 100644 packages/pigment-css-react/tsup.config.ts delete mode 100644 packages/pigment-css-unplugin/.eslintrc delete mode 100644 packages/pigment-css-unplugin/.gitignore delete mode 100644 packages/pigment-css-unplugin/package.json delete mode 100644 packages/pigment-css-unplugin/src/index.ts delete mode 100644 packages/pigment-css-unplugin/src/utils.ts delete mode 100644 packages/pigment-css-unplugin/tests/utils.test.ts delete mode 100644 packages/pigment-css-unplugin/tsconfig.build.json delete mode 100644 packages/pigment-css-unplugin/tsconfig.json delete mode 100644 packages/pigment-css-unplugin/tsup.config.ts delete mode 100644 packages/pigment-css-vite-plugin/.gitignore delete mode 100644 packages/pigment-css-vite-plugin/package.json delete mode 100644 packages/pigment-css-vite-plugin/src/index.ts delete mode 100644 packages/pigment-css-vite-plugin/src/vite-plugin.ts delete mode 100644 packages/pigment-css-vite-plugin/tsconfig.build.json delete mode 100644 packages/pigment-css-vite-plugin/tsconfig.json delete mode 100644 packages/pigment-css-vite-plugin/tsup.config.ts delete mode 100644 patches/@wyw-in-js__transform@0.5.0.patch delete mode 100644 scripts/pigment-license.mjs delete mode 100644 tsup.config.ts diff --git a/.eslintignore b/.eslintignore index 0c319dcfc059aa..9a58941c035a16 100644 --- a/.eslintignore +++ b/.eslintignore @@ -19,12 +19,6 @@ /packages/mui-icons-material/src/*.js /packages/mui-icons-material/templateSvgIcon.js /packages/mui-utils/macros/__fixtures__/ -/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 9cf9342c098b12..aebf0777660701 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-css-react" + "@pigment-css/react": "^0.0.9" } } diff --git a/apps/local-ui-lib/tsconfig.json b/apps/local-ui-lib/tsconfig.json index cad7b2a86bf955..4082f16a5d91ce 100644 --- a/apps/local-ui-lib/tsconfig.json +++ b/apps/local-ui-lib/tsconfig.json @@ -1,8 +1,3 @@ { - "extends": "../../tsconfig.json", - "references": [ - { - "path": "../../packages/pigment-css-react" - } - ] + "extends": "../../tsconfig.json" } diff --git a/apps/pigment-css-next-app/README.md b/apps/pigment-css-next-app/README.md index ed983b5fd8b560..1f520a3e1172ea 100644 --- a/apps/pigment-css-next-app/README.md +++ b/apps/pigment-css-next-app/README.md @@ -7,7 +7,7 @@ This is a Pigment CSS and [Next.js](https://nextjs.org/) project bootstrapped w First, build all the packages in the workspace at least once. Run ```bash -pnpm build:zero +pnpm build ``` Then start the Next.js development server: diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json index 84ef8fd91759f2..4f4c2168181828 100644 --- a/apps/pigment-css-next-app/package.json +++ b/apps/pigment-css-next-app/package.json @@ -9,7 +9,7 @@ "clean": "rimraf .next" }, "dependencies": { - "@pigment-css/react": "workspace:^", + "@pigment-css/react": "^0.0.9", "@mui/utils": "workspace:^", "@mui/base": "workspace:^", "@mui/lab": "workspace:^", @@ -24,7 +24,7 @@ "next": "latest" }, "devDependencies": { - "@pigment-css/nextjs-plugin": "workspace:^", + "@pigment-css/nextjs-plugin": "^0.0.9", "@types/node": "^20.5.7", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", diff --git a/apps/pigment-css-next-app/tsconfig.json b/apps/pigment-css-next-app/tsconfig.json index 49a985026c3a0d..40e9c49eb15b71 100644 --- a/apps/pigment-css-next-app/tsconfig.json +++ b/apps/pigment-css-next-app/tsconfig.json @@ -33,9 +33,6 @@ }, { "path": "../../packages/mui-material/tsconfig.build.json" - }, - { - "path": "../../packages/pigment-css-react/tsconfig.json" } ] } diff --git a/apps/pigment-css-vite-app/README.md b/apps/pigment-css-vite-app/README.md index a9491647bf3268..a34e37f0611e53 100644 --- a/apps/pigment-css-vite-app/README.md +++ b/apps/pigment-css-vite-app/README.md @@ -5,12 +5,7 @@ This project is not part of the workspace yet. ## How to run -You can either run `pnpm build` to build all packages or else build the two most important ones: - -1. `@pigment-css/react` -2. `@pigment-css/vite-plugin` - -Make sure to run `pnpm release:build` at least once because the project uses the `@mui/material` and `@mui/system` packages. On subsequent runs, you can build only the above packages using: +First, build all the packages in the workspace at least once. Run ```bash pnpm build diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json index 1e662ef5ad83cf..42bbe24db89f0e 100644 --- a/apps/pigment-css-vite-app/package.json +++ b/apps/pigment-css-vite-app/package.json @@ -9,7 +9,7 @@ "build": "vite build" }, "dependencies": { - "@pigment-css/react": "workspace:^", + "@pigment-css/react": "^0.0.9", "@mui/utils": "workspace:^", "@mui/base": "workspace:^", "@mui/lab": "workspace:^", @@ -27,7 +27,7 @@ "devDependencies": { "@babel/preset-react": "^7.24.1", "@babel/preset-typescript": "^7.24.1", - "@pigment-css/vite-plugin": "workspace:^", + "@pigment-css/vite-plugin": "^0.0.9", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@vitejs/plugin-react": "^4.2.1", diff --git a/apps/pigment-css-vite-app/tsconfig.json b/apps/pigment-css-vite-app/tsconfig.json index 918f90a862a498..0ed0fe1afa6d97 100644 --- a/apps/pigment-css-vite-app/tsconfig.json +++ b/apps/pigment-css-vite-app/tsconfig.json @@ -13,9 +13,6 @@ }, { "path": "../../packages/mui-material/tsconfig.build.json" - }, - { - "path": "../../packages/pigment-css-react/tsconfig.json" } ] } diff --git a/babel.config.js b/babel.config.js index ad22418643bf84..6b373018b036be 100644 --- a/babel.config.js +++ b/babel.config.js @@ -31,7 +31,6 @@ module.exports = function getBabelConfig(api) { '@mui/base': resolveAliasPath('./packages/mui-base/src'), '@mui/utils': resolveAliasPath('./packages/mui-utils/src'), '@mui/joy': resolveAliasPath('./packages/mui-joy/src'), - '@pigment-css/react': resolveAliasPath('./packages/pigment-css-react/src'), '@mui/internal-docs-utils': resolveAliasPath('./packages-internal/docs-utils/src'), docs: resolveAliasPath('./docs'), test: resolveAliasPath('./test'), diff --git a/examples/pigment-css-nextjs-ts/package.json b/examples/pigment-css-nextjs-ts/package.json index f0cbed14e0dc94..b2579629a61906 100644 --- a/examples/pigment-css-nextjs-ts/package.json +++ b/examples/pigment-css-nextjs-ts/package.json @@ -10,13 +10,13 @@ "post-update": "echo \"codesandbox preview only, need an update\" && pnpm update --latest" }, "dependencies": { - "@pigment-css/react": "next", + "@pigment-css/react": "latest", "react": "latest", "react-dom": "latest", "next": "latest" }, "devDependencies": { - "@pigment-css/nextjs-plugin": "next", + "@pigment-css/nextjs-plugin": "latest", "@types/node": "latest", "@types/react": "latest", "@types/react-dom": "latest", diff --git a/examples/pigment-css-remix-ts/package.json b/examples/pigment-css-remix-ts/package.json index 21fbee6451ff9d..fed2f6e7b85591 100644 --- a/examples/pigment-css-remix-ts/package.json +++ b/examples/pigment-css-remix-ts/package.json @@ -10,7 +10,7 @@ "typecheck": "tsc" }, "dependencies": { - "@pigment-css/react": "next", + "@pigment-css/react": "latest", "@remix-run/node": "latest", "@remix-run/react": "latest", "@remix-run/serve": "latest", @@ -19,7 +19,7 @@ "react-dom": "^18.2.0" }, "devDependencies": { - "@pigment-css/vite-plugin": "next", + "@pigment-css/vite-plugin": "latest", "@remix-run/dev": "latest", "@types/react": "latest", "@types/react-dom": "latest", diff --git a/examples/pigment-css-vite-ts/package.json b/examples/pigment-css-vite-ts/package.json index a4691ef62945f3..8b61ac52d46cb2 100644 --- a/examples/pigment-css-vite-ts/package.json +++ b/examples/pigment-css-vite-ts/package.json @@ -9,12 +9,12 @@ "preview": "vite preview" }, "dependencies": { - "@pigment-css/react": "next", + "@pigment-css/react": "latest", "react": "latest", "react-dom": "latest" }, "devDependencies": { - "@pigment-css/vite-plugin": "next", + "@pigment-css/vite-plugin": "latest", "@types/react": "latest", "@types/react-dom": "latest", "@vitejs/plugin-react": "latest", diff --git a/package.json b/package.json index 31db43ee0b9292..0f04b2ab04bc3c 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,6 @@ "build": "lerna run build --ignore docs", "build:public": "lerna run --no-private build", "build:ci": "lerna run build --ignore docs --concurrency 8 --skip-nx-cache", - "build:zero": "lerna run --scope \"@pigmentcss/*\" build", - "clean:zero": "pnpm --filter \"@pigmentcss/*\" clean", "build:codesandbox": "NODE_OPTIONS=\"--max_old_space_size=4096\" lerna run --concurrency 8 --scope \"@mui/*\" --scope \"@mui-internal/*\" --no-private build", "release:version": "lerna version --no-changelog --no-push --no-git-tag-version --no-private --force-publish=@mui/core-downloads-tracker", "release:build": "lerna run --concurrency 8 --no-private build --skip-nx-cache", @@ -55,9 +53,8 @@ "test": "node scripts/test.mjs", "tc": "node test/cli.js", "test:extended": "pnpm eslint && pnpm typescript && pnpm test:coverage", - "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": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", + "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}'", "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", @@ -74,13 +71,12 @@ "test:regressions:run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'", "test:regressions:server": "serve test/regressions -p 5001", "test:umd": "node packages/mui-material/test/umd/run.js", - "test:unit": "cross-env NODE_ENV=test 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:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", "test:argos": "node ./scripts/pushArgos.mjs", "typescript": "lerna run --no-bail --parallel typescript", "typescript:ci": "lerna run --concurrency 3 --no-bail --no-sort typescript", "validate-declarations": "tsx scripts/validateTypescriptDeclarations.mts", - "generate-codeowners": "node scripts/generateCodeowners.mjs", - "watch:zero": "nx run-many -t watch --projects=\"@pigmentcss/*\" --parallel" + "generate-codeowners": "node scripts/generateCodeowners.mjs" }, "dependencies": { "@googleapis/sheets": "^5.0.5", @@ -115,7 +111,7 @@ "@mui/utils": "workspace:^", "@next/eslint-plugin-next": "^14.2.2", "@octokit/rest": "^20.1.0", - "@pigment-css/react": "workspace:^", + "@pigment-css/react": "^0.0.9", "@playwright/test": "1.43.1", "@types/enzyme": "^3.10.18", "@types/fs-extra": "^11.0.4", @@ -184,7 +180,6 @@ "stylelint-config-standard": "^34.0.0", "stylelint-processor-styled-components": "^1.10.0", "terser-webpack-plugin": "^5.3.10", - "tsup": "^8.0.2", "tsx": "^4.7.2", "typescript": "^5.4.5", "webpack": "^5.91.0", @@ -226,10 +221,5 @@ ], "sourceMap": false, "instrument": false - }, - "pnpm": { - "patchedDependencies": { - "@wyw-in-js/transform@0.5.0": "patches/@wyw-in-js__transform@0.5.0.patch" - } } } diff --git a/packages/mui-icons-material/test/generated-types/tsconfig.json b/packages/mui-icons-material/test/generated-types/tsconfig.json index 7d97d6b4ec2a58..48346071bcbb3d 100644 --- a/packages/mui-icons-material/test/generated-types/tsconfig.json +++ b/packages/mui-icons-material/test/generated-types/tsconfig.json @@ -40,12 +40,6 @@ "@mui/types": ["./mui-types"], "@mui/utils": ["./mui-utils/src"], "@mui/utils/*": ["./mui-utils/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-css-nextjs-plugin/.eslintrc b/packages/pigment-css-nextjs-plugin/.eslintrc deleted file mode 100644 index 5abd34a395bc37..00000000000000 --- a/packages/pigment-css-nextjs-plugin/.eslintrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "rules": { - "import/prefer-default-export": "off" - } -} diff --git a/packages/pigment-css-nextjs-plugin/.gitignore b/packages/pigment-css-nextjs-plugin/.gitignore deleted file mode 100644 index 6b1d0bfabc3c1c..00000000000000 --- a/packages/pigment-css-nextjs-plugin/.gitignore +++ /dev/null @@ -1 +0,0 @@ -LICENSE diff --git a/packages/pigment-css-nextjs-plugin/loader.js b/packages/pigment-css-nextjs-plugin/loader.js deleted file mode 100644 index f39de0b8dc089d..00000000000000 --- a/packages/pigment-css-nextjs-plugin/loader.js +++ /dev/null @@ -1,5 +0,0 @@ -Object.defineProperty(exports, '__esModule', { - value: true, -}); - -exports.default = require('./build/virtual-css-loader').loader; diff --git a/packages/pigment-css-nextjs-plugin/next-font.js b/packages/pigment-css-nextjs-plugin/next-font.js deleted file mode 100644 index 6f40c9a23ab5cf..00000000000000 --- a/packages/pigment-css-nextjs-plugin/next-font.js +++ /dev/null @@ -1,5 +0,0 @@ -/* eslint-env node */ -module.exports = { - className: 'next-font-dummy-className', - style: {}, -}; diff --git a/packages/pigment-css-nextjs-plugin/next-image.js b/packages/pigment-css-nextjs-plugin/next-image.js deleted file mode 100644 index fd25c1a989c782..00000000000000 --- a/packages/pigment-css-nextjs-plugin/next-image.js +++ /dev/null @@ -1,2 +0,0 @@ -/* eslint-env node */ -module.exports = function DummyNextImage() {}; diff --git a/packages/pigment-css-nextjs-plugin/package.json b/packages/pigment-css-nextjs-plugin/package.json deleted file mode 100644 index 3d6c003465f0f2..00000000000000 --- a/packages/pigment-css-nextjs-plugin/package.json +++ /dev/null @@ -1,53 +0,0 @@ -{ - "name": "@pigment-css/nextjs-plugin", - "version": "0.0.7", - "main": "build/index.js", - "module": "build/index.mjs", - "types": "build/index.d.ts", - "author": "MUI Team", - "description": "Next.js integration for Pigment CSS.", - "repository": { - "type": "git", - "url": "https://github.com/mui/material-ui.git", - "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-css-react", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "scripts": { - "clean": "rimraf build types", - "watch": "tsup --watch --tsconfig tsconfig.build.json", - "copy-license": "node ../../scripts/pigment-license.mjs", - "build": "tsup --tsconfig tsconfig.build.json", - "typecheck": "tsc --noEmit -p ." - }, - "dependencies": { - "@pigment-css/unplugin": "workspace:^" - }, - "devDependencies": { - "next": "^13.5.1" - }, - "peerDependencies": { - "next": "^12.0.0 || ^13.0.0 || ^14.0.0" - }, - "sideEffects": false, - "publishConfig": { - "access": "public" - }, - "files": [ - "build", - "loader.js", - "next-font.js", - "next-image.js", - "third-party-styled.js", - "zero-virtual.css", - "package.json", - "LICENSE" - ] -} diff --git a/packages/pigment-css-nextjs-plugin/src/index.ts b/packages/pigment-css-nextjs-plugin/src/index.ts deleted file mode 100644 index 53e6e62ffdf78e..00000000000000 --- a/packages/pigment-css-nextjs-plugin/src/index.ts +++ /dev/null @@ -1,106 +0,0 @@ -import * as path from 'node:path'; -import type { NextConfig } from 'next'; -import { findPagesDir } from 'next/dist/lib/find-pages-dir'; -import { webpack as webpackPlugin, extendTheme, type PigmentOptions } from '@pigment-css/unplugin'; - -export { type PigmentOptions }; - -const extractionFile = path.join( - path.dirname(require.resolve('../package.json')), - 'zero-virtual.css', -); - -export function withPigment(nextConfig: NextConfig, pigmentConfig?: PigmentOptions) { - const { babelOptions = {}, asyncResolve, ...rest } = pigmentConfig ?? {}; - if (process.env.TURBOPACK === '1') { - // eslint-disable-next-line no-console - console.log( - `\x1B[33m${process.env.PACKAGE_NAME}: Turbo mode is not supported yet. Please disable it by removing the "--turbo" flag from your "next dev" command to use Pigment CSS.\x1B[39m`, - ); - return nextConfig; - } - - const webpack: Exclude = (config, context) => { - const { dir, dev, isServer, config: resolvedNextConfig } = context; - - const findPagesDirResult = findPagesDir( - dir, - // @ts-expect-error next.js v12 accepts 2 arguments, while v13 only accepts 1 - resolvedNextConfig.experimental?.appDir ?? false, - ); - - let hasAppDir = false; - - if ('appDir' in resolvedNextConfig.experimental) { - hasAppDir = - !!resolvedNextConfig.experimental.appDir && - !!(findPagesDirResult && findPagesDirResult.appDir); - } else { - hasAppDir = !!(findPagesDirResult && findPagesDirResult.appDir); - } - - config.module.rules.unshift({ - enforce: 'pre', - test: (filename: string) => filename.endsWith('zero-virtual.css'), - use: require.resolve('../loader'), - }); - config.plugins.push( - webpackPlugin({ - ...rest, - meta: { - type: 'next', - dev, - isServer, - outputCss: dev || hasAppDir || !isServer, - placeholderCssFile: extractionFile, - projectPath: dir, - }, - async asyncResolve(what: string, importer: string, stack: string[]) { - // Using the same stub file as "next/font". Should be updated in future to - // use it's own stub depdending on the actual usage. - if (what.startsWith('__barrel_optimize__')) { - return require.resolve('../next-font'); - } - // Need to point to the react from node_modules during eval time. - // Otherwise, next makes it point to its own version of react that - // has a lot of RSC specific logic which is not actually needed. - if (what.startsWith('@babel') || what.startsWith('react') || what.startsWith('next')) { - return require.resolve(what); - } - if (what === 'next/image') { - return require.resolve('../next-image'); - } - if (what.startsWith('next/font')) { - return require.resolve('../next-font'); - } - if (what.startsWith('@emotion/styled') || what.startsWith('styled-components')) { - return require.resolve('../third-party-styled'); - } - if (asyncResolve) { - return asyncResolve(what, importer, stack); - } - return null; - }, - babelOptions: { - ...babelOptions, - presets: [...(babelOptions?.presets ?? []), 'next/babel'], - }, - }), - ); - - if (typeof nextConfig.webpack === 'function') { - return nextConfig.webpack(config, context); - } - config.ignoreWarnings = config.ignoreWarnings ?? []; - config.ignoreWarnings.push({ - module: /(zero-virtual\.css)|(react\/styles\.css)/, - }); - return config; - }; - return { - ...nextConfig, - webpack, - }; -} - -export { extendTheme }; diff --git a/packages/pigment-css-nextjs-plugin/src/virtual-css-loader.js b/packages/pigment-css-nextjs-plugin/src/virtual-css-loader.js deleted file mode 100644 index 7ef1b6d716e01c..00000000000000 --- a/packages/pigment-css-nextjs-plugin/src/virtual-css-loader.js +++ /dev/null @@ -1,6 +0,0 @@ -export const loader = function virtualFileLoader() { - const callback = this.async(); - const resourceQuery = this.resourceQuery.slice(1); - const { source } = JSON.parse(decodeURIComponent(resourceQuery)); - return callback(null, source); -}; diff --git a/packages/pigment-css-nextjs-plugin/third-party-styled.js b/packages/pigment-css-nextjs-plugin/third-party-styled.js deleted file mode 100644 index 053f431428732b..00000000000000 --- a/packages/pigment-css-nextjs-plugin/third-party-styled.js +++ /dev/null @@ -1,4 +0,0 @@ -/* eslint-env node */ -module.exports = function DummyStyled() { - return () => () => null; -}; diff --git a/packages/pigment-css-nextjs-plugin/tsconfig.build.json b/packages/pigment-css-nextjs-plugin/tsconfig.build.json deleted file mode 100644 index 80b6a0a8461245..00000000000000 --- a/packages/pigment-css-nextjs-plugin/tsconfig.build.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "composite": false - } -} diff --git a/packages/pigment-css-nextjs-plugin/tsconfig.json b/packages/pigment-css-nextjs-plugin/tsconfig.json deleted file mode 100644 index ad4f42a8683509..00000000000000 --- a/packages/pigment-css-nextjs-plugin/tsconfig.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "resolveJsonModule": true, - "target": "ES2015" - }, - "include": ["src/**/*.ts"], - "exclude": ["./tsup.config.ts"] -} diff --git a/packages/pigment-css-nextjs-plugin/tsup.config.ts b/packages/pigment-css-nextjs-plugin/tsup.config.ts deleted file mode 100644 index cc7e4562200b87..00000000000000 --- a/packages/pigment-css-nextjs-plugin/tsup.config.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Options, defineConfig } from 'tsup'; -import config from '../../tsup.config'; - -const configOptions = config as Options; - -const baseConfig: Options = { - ...configOptions, - tsconfig: './tsconfig.build.json', - cjsInterop: true, - entry: ['./src/index.ts', './src/virtual-css-loader.js'], -}; - -export default defineConfig(baseConfig); diff --git a/packages/pigment-css-nextjs-plugin/zero-virtual.css b/packages/pigment-css-nextjs-plugin/zero-virtual.css deleted file mode 100644 index 9ad1d681126fae..00000000000000 --- a/packages/pigment-css-nextjs-plugin/zero-virtual.css +++ /dev/null @@ -1 +0,0 @@ -/** Placeholder file */ diff --git a/packages/pigment-css-react/.eslintignore b/packages/pigment-css-react/.eslintignore deleted file mode 100644 index 5e7cacd6e3c1c3..00000000000000 --- a/packages/pigment-css-react/.eslintignore +++ /dev/null @@ -1,4 +0,0 @@ -/build/ -/processors/ -/theme/ -/utils/ diff --git a/packages/pigment-css-react/.eslintrc b/packages/pigment-css-react/.eslintrc deleted file mode 100644 index 2d10f64a22f97b..00000000000000 --- a/packages/pigment-css-react/.eslintrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "ignorePatterns": ["**/exports/*.js", "**/theme/*.*"], - "rules": { - "import/prefer-default-export": "off" - } -} diff --git a/packages/pigment-css-react/.gitignore b/packages/pigment-css-react/.gitignore deleted file mode 100644 index 3b44608184d983..00000000000000 --- a/packages/pigment-css-react/.gitignore +++ /dev/null @@ -1,4 +0,0 @@ -/processors/ -/utils/ -LICENSE -/private-runtime/ diff --git a/packages/pigment-css-react/README.md b/packages/pigment-css-react/README.md index 6a7190afcb4cac..463f9d5c5ab6d9 100644 --- a/packages/pigment-css-react/README.md +++ b/packages/pigment-css-react/README.md @@ -1,1111 +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) - - [Accessing theme values](#accessing-theme-values) - - [CSS variables support](#css-variables-support) - - [Color schemes](#color-schemes) - - [Switching color schemes](#switching-color-schemes) - - [TypeScript](#typescript) -- [Right-to-left support](#right-to-left-support) -- [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 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 - -#### Quickstart - -Use the following commands to quickly 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@next -npm install --save-dev @pigment-css/nextjs-plugin@next -``` - -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 - -#### Quickstart - -Use the following commands to quickly 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@next -npm install --save-dev @pigment-css/vite-plugin@next -``` - -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 is 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; -} -``` - -Pigment CSS 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: - -```tsx -interface ButtonProps { - size?: 'small' | 'large'; -} - -const Button = styled('button')({ - border: 'none', - padding: '0.75rem', - // ...other 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 doesn't 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. - -There are two ways to achieve this (both involve using a CSS variable): - -1. Declare a CSS variable directly in the styles and set its value using inline styles: - -```jsx -const Heading = styled('h1')({ - color: 'var(--color)', -}); - -function Heading() { - const [color, setColor] = React.useState('red'); - - return ; -} -``` - -2. 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 replaces the callback with a CSS variable and injects the value through inline styles. 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 -

- 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: - -```jsx -const ExtraHeading = styled(Heading)({ - // ... overridden styled -}); -``` - -#### Media and Container queries - -Pigment CSS APIs have built-in support for writing media queries and container queries. Use the `@media` and `@container` keys to define styles for different screen and container sizes. - -```jsx -import { css, styled } from '@pigment-css/react'; - -const styles = css({ - fontSize: '2rem', - '@media (min-width: 768px)': { - fontSize: '3rem', - }, - '@container (max-width: 768px)': { - fontSize: '1.5rem', - }, -}); - -const Heading = styled('h1')({ - fontSize: '2rem', - '@media (min-width: 768px)': { - fontSize: '3rem', - }, - '@container (max-width: 768px)': { - fontSize: '1.5rem', - }, -}); -``` - -> 💡 **Good to know**: -> -> Pigment CSS uses Emotion behind the scenes for turning tagged templates and objects into CSS strings. - -#### 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 is 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 JavaScript bundle. This means that components created using Pigment CSS'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 goes through the theme and creates 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)' -``` - -#### Adding a prefix to CSS variables - -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 have the `pigment` prefix: - -```css -:root { - --pigment-colors-background: #f9f9f9; - --pigment-colors-foreground: #121212; -} -``` - -#### 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 returns 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, - }), -})); -``` - -#### 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/theme'; - -declare module '@pigment-css/react/theme' { - interface ThemeTokens { - // the structure of your theme - } - - interface ThemeArgs { - theme: ExtendTheme<{ - colorScheme: 'light' | 'dark'; - tokens: ThemeTokens; - }>; - } -} -``` - -## Right-to-left support - -To support right-to-left (RTL) languages, add the `dir="rtl"` attribute to your app's `` element or any other equivalent top level container. Then, update your bundler config as follows to generate styles for both directions: - -### Next.js - -```js -const { withPigment } = require('@pigment-css/nextjs-plugin'); - -// ... -module.exports = withPigment(nextConfig, { - theme: yourCustomTheme, - // CSS output option - css: { - // Specify your default CSS authoring direction - defaultDirection: 'ltr', - // Generate CSS for the opposite of the `defaultDirection` - // This is set to `false` by default - generateForBothDir: true, - }, -}); -``` - -### Vite - -```js -import { pigment } from '@pigment-css/vite-plugin'; - -export default defineConfig({ - plugins: [ - pigment({ - theme: yourTheme, - css: { - // Specify your default CSS authoring direction - defaultDirection: 'ltr', - // Generate CSS for the opposite of the `defaultDirection` - // This is set to `false` by default - generateForBothDir: true, - }, - }), - // ... other plugins. - ], -}); -``` - -### Generated CSS - -For example, if you've specified `defaultDirection: 'ltr'` and `dir="rtl"`, and your authored CSS looks like this: - -```js -import { css } from '@pigment-css/react'; - -const className = css` - margin-left: 10px, - margin-right: 20px, - padding: '0 10px 20px 30px' -`; -``` - -Then the actual CSS output would be: - -```css -.cmip3v5 { - margin-left: 10px; - margin-right: 20px; - padding: 0 10px 20px 30px; -} - -[dir='rtl'] .cmip3v5 { - margin-right: 10px; - margin-left: 20px; - padding: 0 30px 20px 10px; -} -``` - -### Custom dir selector - -The default selector in the output CSS is `[dir=rtl]` or `[dir=ltr]`. You can customize it by passing an optional `getDirSelector` method to the `css` property in your bundler config: - -```js - css: { - getDirSelector(dir: string) { - // return a custom selector you'd like to use - return `:dir(${dir})`; - }, - }, -``` - -## 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 JavaScript 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 are 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 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) => ( - - ))} -
- ) -} -``` - -## Building reusable components for UI libraries - -The purpose of this guide is to demonstrate how to create reusable components for a UI library that can be shared across multiple projects and used to implement different design systems through custom theming. -The approach outlined here is not necessary when constructing components to be consumed and themed in a single project. -It's most relevant for developers who want to build a component library that could be published as a package to be consumed and themed by other developers. - -The steps below will walk you through how to create a statistics component that could serve as part of a reusable UI library built with Pigment CSS. -This process has three parts: - -1. [Create component slots](#1-create-component-slots). -2. [Compose slots to create the component](#2-create-the-component). -3. [Style slots based on props](#3-style-slots-based-on-props). - -### 1. Create component slots - -Slots let the consumers customize each individual element of the component by targeting its respective name in the [theme's styleOverrides](#themeable-statistics-component). - -This statistics component is composed of three slots: - -- `root`: the container of the component -- `value`: the number to be displayed -- `unit`: the unit or description of the value - -> 💡 Though you can give these slots any names you prefer, we recommend using `root` for the outermost container element for consistency with the rest of the library. - -Use the `styled` API with `name` and `slot` parameters to create the slots, as shown below: - -```js -// /path/to/Stat.js -import * as React from 'react'; -import { styled } from '@pigment-css/react'; - -const StatRoot = styled('div', { - name: 'PigmentStat', // The component name - slot: 'root', // The slot name -})({ - display: 'flex', - flexDirection: 'column', - gap: '1rem', - padding: '0.75rem 1rem', - backgroundColor: '#f9f9f9', - borderRadius: '8px', - boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', - letterSpacing: '-0.025em', - fontWeight: 600, -}); - -const StatValue = styled('div', { - name: 'PigmentStat', - slot: 'value', -})({ - font: '1.2rem "Fira Sans", sans-serif', -}); - -const StatUnit = styled('div', { - name: 'PigmentStat', - slot: 'unit', -})({ - font: '0.875rem "Fira Sans", sans-serif', - color: '#121212', -}); -``` - -### 2. Create the component - -Assemble the component using the slots created in the previous step: - -```js -// /path/to/Stat.js -import * as React from 'react'; - -// ...slot styled-components - -const Stat = React.forwardRef(function Stat(props, ref) { - const { value, unit, ...other } = props; - - return ( - - {value} - {unit} - - ); -}); - -export default Stat; -``` - -### 3. Style slots based on props - -In this example, a prop named `variant` is defined to let consumers change the appearance of the `Stat` component. - -Pass down the `variant` prop to `` to style the `root` slot, as shown below: - -```diff - const Stat = React.forwardRef(function Stat(props, ref) { -+ const { value, unit, variant, ...other } = props; - - return ( -- -- {value} -- {unit} -- -+ -+ {value} -+ {unit} -+ - ); - }); -``` - -Then you can use Pigment CSS variants API to style it when `variant` prop has a value of `outlined`: - -```diff - const StatRoot = styled('div', { - name: 'PigmentStat', - slot: 'root', - })({ - display: 'flex', - flexDirection: 'column', - gap: '1rem', - padding: '0.75rem 1rem', - backgroundColor: '#f9f9f9', - borderRadius: '8px', - boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', - letterSpacing: '-0.025em', - fontWeight: 600, -+ variants: [ -+ { -+ props: { variant: 'outlined' }, -+ style: { -+ border: `2px solid #e9e9e9`, -+ }, -+ }, -+ ], - }); -``` - -This completes the reusable statistics component. -If this were a real UI library, the component would be ready to upload to a package registry so others could use it. - -### Consumer usage - -Developers using your component must first install your package as well as the Pigment CSS packages that correspond to the [framework](#start-with-nextjs) they're using. - -```bash -npm install your-package-name @pigment-css/react -npm install -D @pigment-css/nextjs-plugin -``` - -Next, they must set up Pigment CSS in their project: - -```js -// framework config file, for example next.config.js -const { withPigment } = require('@pigment-css/nextjs-plugin'); - -module.exports = withPigment( - { - // ... Your nextjs config. - }, - { transformLibraries: ['your-package-name'] }, -); -``` - -Finally, they must import the stylesheet in the root layout file: - -```js -// index.tsx -import '@pigment-css/react/styles.css'; -``` - -Then they can use your component in their project: - -```jsx -import Stat from 'your-package-name/Stat'; - -function App() { - return ; -} -``` - -### Consumer theming - -Developers can customize the component's styles using the theme's `styleOverrides` key and the component name and slots you defined in [step 2](#2-create-the-component). -For example, the custom theme below sets the background color of the statistics component's root slot to `tomato`: - -```js -module.exports = withPigment( - { ...nextConfig }, - { - theme: { - styleOverrides: { - PigmentStat: { - root: { - backgroundColor: 'tomato', - }, - value: { - color: 'white', - }, - unit: { - color: 'white', - }, - }, - }, - }, - }, -); -``` - -Developers can also access theme values and apply styles based on the component's props using the `variants` key: - -```js -module.exports = withPigment( - { ...nextConfig }, - { - theme: { - // user defined colors - colors: { - primary: 'tomato', - primaryLight: 'lightcoral', - }, - styleOverrides: { - PigmentStat: { - root: ({ theme }) => ({ - backgroundColor: 'tomato', - variants: [ - { - props: { variant: 'outlined' }, - style: { - border: `2px solid ${theme.colors.primary}`, - backgroundColor: theme.colors.primaryLight, - }, - }, - ], - }), - value: { - color: 'white', - }, - unit: { - color: 'white', - }, - }, - }, - }, - }, -); -``` +The package has moved [here](https://github.com/mui/pigment-css). diff --git a/packages/pigment-css-react/exports/createUseThemeProps.js b/packages/pigment-css-react/exports/createUseThemeProps.js deleted file mode 100644 index 2d5e6f3f8bd60d..00000000000000 --- a/packages/pigment-css-react/exports/createUseThemeProps.js +++ /dev/null @@ -1,5 +0,0 @@ -Object.defineProperty(exports, '__esModule', { - value: true, -}); - -exports.default = require('../processors/createUseThemeProps').CreateUseThemePropsProcessor; diff --git a/packages/pigment-css-react/exports/css.js b/packages/pigment-css-react/exports/css.js deleted file mode 100644 index 5e83514b4dc37a..00000000000000 --- a/packages/pigment-css-react/exports/css.js +++ /dev/null @@ -1,5 +0,0 @@ -Object.defineProperty(exports, '__esModule', { - value: true, -}); - -exports.default = require('../processors/css').CssProcessor; diff --git a/packages/pigment-css-react/exports/generateAtomics.js b/packages/pigment-css-react/exports/generateAtomics.js deleted file mode 100644 index 8364eb9c7870e6..00000000000000 --- a/packages/pigment-css-react/exports/generateAtomics.js +++ /dev/null @@ -1,6 +0,0 @@ -// eslint-ignore -Object.defineProperty(exports, '__esModule', { - value: true, -}); - -exports.default = require('../processors/generateAtomics').GenerateAtomicsProcessor; diff --git a/packages/pigment-css-react/exports/keyframes.js b/packages/pigment-css-react/exports/keyframes.js deleted file mode 100644 index 6de596c2dc662b..00000000000000 --- a/packages/pigment-css-react/exports/keyframes.js +++ /dev/null @@ -1,5 +0,0 @@ -Object.defineProperty(exports, '__esModule', { - value: true, -}); - -exports.default = require('../processors/keyframes').KeyframesProcessor; diff --git a/packages/pigment-css-react/exports/remove-prop-types-plugin.js b/packages/pigment-css-react/exports/remove-prop-types-plugin.js deleted file mode 100644 index 98b4a7ee73fe90..00000000000000 --- a/packages/pigment-css-react/exports/remove-prop-types-plugin.js +++ /dev/null @@ -1,5 +0,0 @@ -Object.defineProperty(exports, '__esModule', { - value: true, -}); - -exports.default = require('../utils/remove-prop-types-plugin').removePropTypesPlugin; diff --git a/packages/pigment-css-react/exports/styled.js b/packages/pigment-css-react/exports/styled.js deleted file mode 100644 index 937d484a867010..00000000000000 --- a/packages/pigment-css-react/exports/styled.js +++ /dev/null @@ -1,5 +0,0 @@ -Object.defineProperty(exports, '__esModule', { - value: true, -}); - -exports.default = require('../processors/styled').StyledProcessor; diff --git a/packages/pigment-css-react/exports/sx-plugin.js b/packages/pigment-css-react/exports/sx-plugin.js deleted file mode 100644 index 5aaf3ba4deb4b8..00000000000000 --- a/packages/pigment-css-react/exports/sx-plugin.js +++ /dev/null @@ -1,5 +0,0 @@ -Object.defineProperty(exports, '__esModule', { - value: true, -}); - -exports.default = require('../utils/sx-plugin').babelPlugin; diff --git a/packages/pigment-css-react/exports/sx.js b/packages/pigment-css-react/exports/sx.js deleted file mode 100644 index a07d9d481a18aa..00000000000000 --- a/packages/pigment-css-react/exports/sx.js +++ /dev/null @@ -1,5 +0,0 @@ -Object.defineProperty(exports, '__esModule', { - value: true, -}); - -exports.default = require('../processors/sx').SxProcessor; diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json deleted file mode 100644 index 7d158db12e3ff9..00000000000000 --- a/packages/pigment-css-react/package.json +++ /dev/null @@ -1,190 +0,0 @@ -{ - "name": "@pigment-css/react", - "version": "0.0.7", - "main": "build/index.js", - "module": "build/index.mjs", - "types": "build/index.d.ts", - "author": "MUI Team", - "description": "A zero-runtime CSS-in-JS library.", - "repository": { - "type": "git", - "url": "https://github.com/mui/material-ui.git", - "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-css-react", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "scripts": { - "clean": "rimraf build types processors utils", - "watch": "tsup --watch --clean false", - "copy-license": "node ../../scripts/pigment-license.mjs", - "build": "tsup", - "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": { - "@babel/core": "^7.24.4", - "@babel/helper-module-imports": "^7.24.3", - "@babel/helper-plugin-utils": "^7.24.0", - "@babel/parser": "^7.24.4", - "@babel/types": "^7.24.0", - "@emotion/css": "^11.11.2", - "@emotion/is-prop-valid": "^1.2.2", - "@emotion/react": "^11.11.4", - "@emotion/serialize": "^1.1.4", - "@emotion/styled": "^11.11.5", - "@mui/system": "workspace:^", - "@wyw-in-js/processor-utils": "^0.5.0", - "@wyw-in-js/shared": "^0.5.0", - "@wyw-in-js/transform": "^0.5.0", - "clsx": "^2.1.0", - "cssesc": "^3.0.0", - "csstype": "^3.1.3", - "lodash": "^4.17.21", - "stylis": "^4.3.1", - "stylis-plugin-rtl": "^2.1.1" - }, - "devDependencies": { - "@babel/plugin-syntax-jsx": "^7.24.1", - "@types/babel__core": "^7.20.5", - "@types/babel__helper-module-imports": "^7.18.3", - "@types/babel__helper-plugin-utils": "^7.10.3", - "@types/chai": "^4.3.14", - "@types/cssesc": "^3.0.2", - "@types/lodash": "^4.17.0", - "@types/mocha": "^10.0.6", - "@types/node": "^18.19.31", - "@types/react": "^18.2.55", - "@types/stylis": "^4.2.5", - "chai": "^4.4.1", - "prettier": "^3.2.5", - "prop-types": "^15.8.1", - "react": "^18.2.0" - }, - "peerDependencies": { - "react": "^17.0.0 || ^18.0.0" - }, - "sideEffects": false, - "publishConfig": { - "access": "public" - }, - "wyw-in-js": { - "tags": { - "styled": "./exports/styled.js", - "default": "./exports/styled.js", - "sx": "./exports/sx.js", - "keyframes": "./exports/keyframes.js", - "generateAtomics": "./exports/generateAtomics.js", - "css": "./exports/css.js", - "createUseThemeProps": "./exports/createUseThemeProps.js" - } - }, - "files": [ - "build", - "exports", - "processors", - "theme", - "utils", - "package.json", - "styles.css", - "LICENSE" - ], - "exports": { - ".": { - "types": "./build/index.d.ts", - "import": { - "types": "./build/index.d.mts", - "default": "./build/index.mjs" - }, - "require": "./build/index.js", - "default": "./theme/index.js" - }, - "./package.json": "./package.json", - "./theme": { - "types": "./theme/index.d.ts", - "import": "./theme/index.mjs", - "require": "./theme/index.js", - "default": "./theme/index.js" - }, - "./styles.css": { - "require": "./build/index.js", - "default": "./styles.css" - }, - "./utils": { - "types": "./utils/index.d.ts", - "import": { - "types": "./utils/index.d.mts", - "default": "./utils/index.mjs" - }, - "require": "./utils/index.js", - "default": "./utils/index.js" - }, - "./exports/*": { - "default": "./exports/*.js" - }, - "./Box": { - "types": "./build/Box.d.ts", - "import": { - "types": "./build/Box.d.mts", - "default": "./build/Box.mjs" - }, - "require": "./build/Box.js", - "default": "./build/Box.js" - }, - "./RtlProvider": { - "types": "./build/RtlProvider.d.ts", - "import": { - "types": "./build/RtlProvider.d.mts", - "default": "./build/RtlProvider.mjs" - }, - "require": "./build/RtlProvider.js", - "default": "./build/RtlProvider.js" - }, - "./private-runtime": { - "types": "./private-runtime/index.d.ts", - "import": { - "types": "./private-runtime/index.d.mts", - "default": "./private-runtime/index.mjs" - }, - "require": "./private-runtime/index.js", - "default": "./private-runtime/index.js" - } - }, - "nx": { - "targets": { - "test": { - "cache": false, - "dependsOn": [ - "build" - ] - }, - "test:update": { - "cache": false, - "dependsOn": [ - "build" - ] - }, - "test:ci": { - "cache": false, - "dependsOn": [ - "build" - ] - }, - "build": { - "outputs": [ - "{projectRoot}/build", - "{projectRoot}/processors", - "{projectRoot}/utils" - ] - } - } - } -} diff --git a/packages/pigment-css-react/src/Box.d.ts b/packages/pigment-css-react/src/Box.d.ts deleted file mode 100644 index 0fe8b89db82c79..00000000000000 --- a/packages/pigment-css-react/src/Box.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type { BaseDefaultProps, Substitute, NoInfer } from './base'; -import type { SxProp } from './sx'; - -export type PolymorphicComponentProps< - BaseProps extends object, - AsTarget extends React.ElementType | undefined, - AsTargetProps extends object = AsTarget extends React.ElementType - ? React.ComponentPropsWithRef - : BaseDefaultProps, -> = NoInfer, 'as' | 'component'>> & { - as?: AsTarget; - component?: AsTarget; - sx?: SxProp; - children?: React.ReactNode; -}; - -export interface PolymorphicComponent - extends React.ForwardRefExoticComponent { - ( - props: PolymorphicComponentProps, - ): JSX.Element; -} - -declare const Box: PolymorphicComponent<{}>; - -export default Box; diff --git a/packages/pigment-css-react/src/Box.jsx b/packages/pigment-css-react/src/Box.jsx deleted file mode 100644 index de32424c204c3b..00000000000000 --- a/packages/pigment-css-react/src/Box.jsx +++ /dev/null @@ -1,54 +0,0 @@ -/* eslint-disable react/prop-types */ -import * as React from 'react'; - -const Box = React.forwardRef( - ( - { - as = 'div', - // Added to support compatibility with @mui/system - component, - /** - * The type of the transformed sx prop is either a - * "string" if the css passed was fully static or an - * object with the following shape: - * { - * className: string, - * vars: Record - * } - */ - sx, - className, - style, - ...rest - }, - ref, - ) => { - const Component = component ?? as; - // eslint-disable-next-line react/prop-types - const sxClass = typeof sx === 'string' ? sx : sx?.className; - const classes = [className, sxClass].filter(Boolean).join(' '); - // eslint-disable-next-line react/prop-types - const sxVars = sx && typeof sx !== 'string' ? sx?.vars : {}; - const varStyles = {}; - - if (sxVars) { - Object.entries(sxVars).forEach(([cssVariable, [value, isUnitLess]]) => { - if (typeof value === 'string' || isUnitLess) { - varStyles[`--${cssVariable}`] = value; - } else { - varStyles[`--${cssVariable}`] = `${value}px`; - } - }); - } - - const styles = { - ...style, - ...varStyles, - }; - - // eslint-disable-next-line react/jsx-filename-extension - return ; - }, -); - -export default Box; diff --git a/packages/pigment-css-react/src/RtlProvider.tsx b/packages/pigment-css-react/src/RtlProvider.tsx deleted file mode 100644 index 0ad4de0fbfccd2..00000000000000 --- a/packages/pigment-css-react/src/RtlProvider.tsx +++ /dev/null @@ -1,25 +0,0 @@ -'use client'; -/** - * This package has it's own version of RtlProvider to avoid including - * @mui/system in the bundle if someone is not using it. - */ -import * as React from 'react'; - -type RtlContextType = boolean | undefined; - -type RtlProviderProps = { - value?: RtlContextType; -}; - -const RtlContext = React.createContext(false); - -function RtlProvider({ value, ...props }: RtlProviderProps) { - return ; -} - -export const useRtl = () => { - const value = React.useContext(RtlContext); - return value ?? false; -}; - -export default RtlProvider; diff --git a/packages/pigment-css-react/src/base.d.ts b/packages/pigment-css-react/src/base.d.ts deleted file mode 100644 index c524bd4a3f7e43..00000000000000 --- a/packages/pigment-css-react/src/base.d.ts +++ /dev/null @@ -1,66 +0,0 @@ -import type * as CSS from 'csstype'; - -export type CSSProperties = CSS.PropertiesFallback; - -export type CSSPropertiesMultiValue = { - [K in keyof CSSProperties]: CSSProperties[K] | Array>; -}; - -export type CSSPropertiesWithCallback = { - [K in keyof CSSProperties]: - | CSSProperties[K] - | Array> - | ((props: Props) => CSSProperties[K]); -}; - -export type CSSPseudos = { - [K in CSS.Pseudos]?: CSSObject; -}; -export type CSSPseudosNoCallback = { [K in CSS.Pseudos]?: CSSObjectNoCallback }; - -export interface CSSOthersObject { - [selector: string]: CSSObject; -} - -export interface CSSOthersObjectNoCallback { - [selector: string]: CSSObjectNoCallback; -} - -export type CSSObject = - | CSSPropertiesWithCallback - | CSSPseudos - | CSSOthersObject; - -export type CSSObjectNoCallback = - | CSSPropertiesMultiValue - | CSSPseudosNoCallback - | CSSOthersObjectNoCallback; - -export type BaseDefaultProps = object; - -export type NoInfer = [T][T extends any ? 0 : never]; -type FastOmit = { - [K in keyof T as K extends U ? never : K]: T[K]; -}; - -export type Substitute = FastOmit & B; - -export type PolymorphicComponentProps< - SxProp, - BaseProps extends object, - AsTarget extends React.ElementType | undefined, - AsTargetProps extends object = AsTarget extends React.ElementType - ? React.ComponentPropsWithRef - : BaseDefaultProps, -> = NoInfer, 'as'>> & { - as?: AsTarget; - sx?: SxProp; - children?: React.ReactNode; -}; - -export interface PolymorphicComponent - extends React.ForwardRefExoticComponent { - ( - props: PolymorphicComponentProps, - ): JSX.Element; -} diff --git a/packages/pigment-css-react/src/createUseThemeProps.d.ts b/packages/pigment-css-react/src/createUseThemeProps.d.ts deleted file mode 100644 index 7fc1bbc9ea4f37..00000000000000 --- a/packages/pigment-css-react/src/createUseThemeProps.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -interface UseThemeProps { - (params: { theme: Record; props: Props; name: string }): Props; -} - -export default function createUseThemeProps(theme: any): UseThemeProps; diff --git a/packages/pigment-css-react/src/createUseThemeProps.js b/packages/pigment-css-react/src/createUseThemeProps.js deleted file mode 100644 index da5edcd844ca8a..00000000000000 --- a/packages/pigment-css-react/src/createUseThemeProps.js +++ /dev/null @@ -1,52 +0,0 @@ -import { internal_resolveProps as resolveProps } from '@mui/utils'; - -/** - * Runtime function for creating `useThemeProps`. - * In the codebase, the first argument will be a string that represent the component slug (should match one of the `theme.components.*`). - * Then, the transformation will replace the first argument with the `defaultProps` object if provided. - */ -export default function createUseThemeProps(nameOrDefaultProps) { - return function useThemeProps({ props }) { - if (typeof nameOrDefaultProps === 'string') { - // if no default props provided in the theme, return the props as is. - return props; - } - const defaultProps = nameOrDefaultProps; - // The same logic as in packages/mui-utils/src/resolveProps.ts - // TODO: consider reusing the logic from the utils package - const output = { ...props }; - - Object.keys(defaultProps).forEach((propName) => { - if (propName.toString().match(/^(components|slots)$/)) { - output[propName] = { - ...defaultProps[propName], - ...output[propName], - }; - } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) { - const defaultSlotProps = defaultProps[propName] || {}; - const slotProps = props[propName]; - output[propName] = {}; - - if (!slotProps || !Object.keys(slotProps)) { - // Reduce the iteration if the slot props is empty - output[propName] = defaultSlotProps; - } else if (!defaultSlotProps || !Object.keys(defaultSlotProps)) { - // Reduce the iteration if the default slot props is empty - output[propName] = slotProps; - } else { - output[propName] = { ...slotProps }; - Object.keys(defaultSlotProps).forEach((slotPropName) => { - output[propName][slotPropName] = resolveProps( - defaultSlotProps[slotPropName], - slotProps[slotPropName], - ); - }); - } - } else if (output[propName] === undefined) { - output[propName] = defaultProps[propName]; - } - }); - - return output; - }; -} diff --git a/packages/pigment-css-react/src/css.d.ts b/packages/pigment-css-react/src/css.d.ts deleted file mode 100644 index f98e9f8b3756c7..00000000000000 --- a/packages/pigment-css-react/src/css.d.ts +++ /dev/null @@ -1,22 +0,0 @@ -import type { CSSObjectNoCallback } from './base'; -import type { ThemeArgs } from './theme'; - -type Primitve = string | null | undefined | boolean | number; - -type CssArg = ((themeArgs: ThemeArgs) => CSSObjectNoCallback) | CSSObjectNoCallback; -type CssFn = (themeArgs: ThemeArgs) => string | number; - -interface Css { - /** - * @returns {string} The generated css class name to be referenced. - */ - (arg: TemplateStringsArray, ...templateArgs: (Primitve | CssFn)[]): string; - /** - * @returns {string} The generated css class name to be referenced. - */ - (...arg: CssArg[]): string; -} - -declare const css: Css; - -export default css; diff --git a/packages/pigment-css-react/src/css.js b/packages/pigment-css-react/src/css.js deleted file mode 100644 index 39cdb04db50bf4..00000000000000 --- a/packages/pigment-css-react/src/css.js +++ /dev/null @@ -1,5 +0,0 @@ -export default function css() { - throw new Error( - `${process.env.PACKAGE_NAME}: You were trying to call "css" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.`, - ); -} diff --git a/packages/pigment-css-react/src/generateAtomics.d.ts b/packages/pigment-css-react/src/generateAtomics.d.ts deleted file mode 100644 index 5fea8626759d99..00000000000000 --- a/packages/pigment-css-react/src/generateAtomics.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { CSSProperties } from './base'; -import type { ThemeArgs } from './theme'; - -// @TODO Implement proper types -type GenerateAtomicsResult = (props: any) => { className: string }; - -type AtomicProperty = { - [Key in keyof CSSProperties]: ReadonlyArray; -}; - -type Atomics< - Conditions extends Record, - Properties extends AtomicProperty = AtomicProperty, - Shorthands extends Record> = Record< - string, - Array - >, -> = { - conditions: Conditions; - defaultCondition: keyof Conditions; - properties: Properties; - shorthands?: Shorthands; -}; - -export declare function generateAtomics>( - atomics: Atomics | ((themeConfig: ThemeArgs) => Atomics), -): GenerateAtomicsResult; - -export declare function atomics(config: unknown): string; diff --git a/packages/pigment-css-react/src/generateAtomics.js b/packages/pigment-css-react/src/generateAtomics.js deleted file mode 100644 index 442e1f6711ee5c..00000000000000 --- a/packages/pigment-css-react/src/generateAtomics.js +++ /dev/null @@ -1,64 +0,0 @@ -import cx from 'clsx'; - -export function generateAtomics() { - throw new Error( - `${process.env.PACKAGE_NAME}: You were trying to call "generateAtomics" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.`, - ); -} - -/** - * @typedef {Object} RuntimeConfig - * @property {Object.>>} styles - * @property {Object.} shorthands - * @property {string[]} conditions - */ - -/** - * @param {RuntimeConfig} runtimeConfig - */ -export function atomics({ styles, shorthands, conditions }) { - function addStyles(cssProperty, values, classes) { - const styleClasses = styles[cssProperty]; - if (!styleClasses) { - return; - } - if (typeof values === 'string') { - classes.push(styleClasses[values].$$default); - } else if (Array.isArray(values)) { - values.forEach((value, index) => { - classes.push(styleClasses[value][conditions[index]]); - }); - } else { - Object.keys(values).forEach((condition) => { - const propertyClasses = styleClasses[values[condition]]; - if (!propertyClasses) { - return; - } - classes.push(propertyClasses[condition]); - }); - } - } - - function generateClass(props) { - const classes = []; - const runtimeStyles = { ...props }; - Object.keys(runtimeStyles).forEach((cssProperty) => { - const values = runtimeStyles[cssProperty]; - if (cssProperty in shorthands) { - const configShorthands = shorthands[cssProperty]; - if (!configShorthands) { - return; - } - configShorthands.forEach((shorthand) => { - addStyles(shorthand, values, classes); - }); - } else { - addStyles(cssProperty, values, classes); - } - }); - return { - className: cx(Array.from(new Set(classes))), - }; - } - return generateClass; -} diff --git a/packages/pigment-css-react/src/index.ts b/packages/pigment-css-react/src/index.ts deleted file mode 100644 index 52c2a5e4bc993f..00000000000000 --- a/packages/pigment-css-react/src/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { default as styled, type StyledComponent } from './styled'; -export { default as sx } from './sx'; -export { default as keyframes } from './keyframes'; -export { generateAtomics, atomics } from './generateAtomics'; -export { default as css } from './css'; -export { default as createUseThemeProps } from './createUseThemeProps'; diff --git a/packages/pigment-css-react/src/keyframes.d.ts b/packages/pigment-css-react/src/keyframes.d.ts deleted file mode 100644 index 5c65aa2aee9c73..00000000000000 --- a/packages/pigment-css-react/src/keyframes.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -import type { CSSProperties } from './base'; -import type { ThemeArgs } from './theme'; - -export type Primitve = string | null | undefined | boolean | number; - -interface KeyframesObject { - [key: string]: { - [K in keyof CSSProperties]: CSSProperties[K] | Array; - }; -} - -type KeyframesArg = ((themeArgs: ThemeArgs) => KeyframesObject) | KeyframesObject; - -interface Keyframes { - /** - * @returns {string} The generated keyframe name to be referenced. - */ - (arg: TemplateStringsArray, ...templateArgs: Primitve[]): string; - /** - * @returns {string} The generated keyframe name to be referenced. - */ - (arg: KeyframesArg): string; -} - -declare const keyframes: Keyframes; - -export default keyframes; diff --git a/packages/pigment-css-react/src/keyframes.js b/packages/pigment-css-react/src/keyframes.js deleted file mode 100644 index 197d509e941068..00000000000000 --- a/packages/pigment-css-react/src/keyframes.js +++ /dev/null @@ -1,5 +0,0 @@ -export default function keyframes() { - throw new Error( - `${process.env.PACKAGE_NAME}: You were trying to call "keyframes" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.`, - ); -} diff --git a/packages/pigment-css-react/src/private-runtime/ForwardSx.js b/packages/pigment-css-react/src/private-runtime/ForwardSx.js deleted file mode 100644 index 2201ae8a94936c..00000000000000 --- a/packages/pigment-css-react/src/private-runtime/ForwardSx.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import clsx from 'clsx'; - -function useSx(sx, className, style) { - const sxClass = typeof sx === 'string' ? sx : sx?.className; - const sxVars = sx && typeof sx !== 'string' ? sx.vars : undefined; - const varStyles = {}; - - if (sxVars) { - Object.entries(sxVars).forEach(([cssVariable, [value, isUnitLess]]) => { - if (typeof value === 'string' || isUnitLess) { - varStyles[`--${cssVariable}`] = value; - } else { - varStyles[`--${cssVariable}`] = `${value}px`; - } - }); - } - - return { - className: clsx(sxClass, className), - style: { - ...varStyles, - ...style, - }, - }; -} - -/* eslint-disable-next-line react/prop-types */ -export const ForwardSx = React.forwardRef(({ sx, sxComponent, className, style, ...rest }, ref) => { - const Component = sxComponent; - return ; -}); diff --git a/packages/pigment-css-react/src/private-runtime/index.ts b/packages/pigment-css-react/src/private-runtime/index.ts deleted file mode 100644 index b8e8215a9be903..00000000000000 --- a/packages/pigment-css-react/src/private-runtime/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ForwardSx'; diff --git a/packages/pigment-css-react/src/processors/base-processor.ts b/packages/pigment-css-react/src/processors/base-processor.ts deleted file mode 100644 index 7e17e4459da12c..00000000000000 --- a/packages/pigment-css-react/src/processors/base-processor.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { slugify, IVariableContext } from '@wyw-in-js/shared'; -import { - buildSlug, - BaseProcessor as WywBaseProcessor, - toValidCSSIdentifier, -} from '@wyw-in-js/processor-utils'; - -export default abstract class BaseProcessor extends WywBaseProcessor { - variableIdx = 0; - - // Implementation taken from Linaria - https://github.com/callstack/linaria/blob/master/packages/react/src/processors/styled.ts#L284 - protected getCustomVariableId(cssKey: string, source: string, hasUnit: boolean) { - const context = this.getVariableContext(cssKey, source, hasUnit); - const customSlugFn = this.options.variableNameSlug; - if (!customSlugFn) { - return toValidCSSIdentifier(`${this.slug}-${context.index}`); - } - - return typeof customSlugFn === 'function' - ? customSlugFn(context) - : buildSlug(customSlugFn, { ...context }); - } - - // Implementation taken from Linaria - https://github.com/callstack/linaria/blob/master/packages/react/src/processors/styled.ts#L362 - protected getVariableContext(cssKey: string, source: string, hasUnit: boolean): IVariableContext { - const getIndex = () => { - const id = this.variableIdx; - this.variableIdx += 1; - return id; - }; - - return { - componentName: this.displayName, - componentSlug: this.slug, - get index() { - return getIndex(); - }, - precedingCss: cssKey, - processor: this.constructor.name, - source: '', - unit: '', - valueSlug: slugify(`${source}${hasUnit}`), - }; - } -} diff --git a/packages/pigment-css-react/src/processors/createUseThemeProps.ts b/packages/pigment-css-react/src/processors/createUseThemeProps.ts deleted file mode 100644 index bdaafb5adc86d6..00000000000000 --- a/packages/pigment-css-react/src/processors/createUseThemeProps.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { validateParams, IOptions as IBaseOptions } from '@wyw-in-js/processor-utils'; -import type { Expression, Params, TailProcessorParams } from '@wyw-in-js/processor-utils'; -import BaseProcessor from './base-processor'; -import { valueToLiteral } from '../utils/valueToLiteral'; - -type IOptions = IBaseOptions & { - themeArgs: { - theme: { components?: Record }> }; - }; -}; - -export class CreateUseThemePropsProcessor extends BaseProcessor { - componentName: string; - - constructor(params: Params, ...args: TailProcessorParams) { - // this is already transformed if there is an extra argument - if (params.length > 2) { - throw BaseProcessor.SKIP; - } - validateParams(params, ['callee', 'call'], 'Invalid use of createUseThemeProps tag.'); - - super([params[0]], ...args); - const [, callParam] = params; - const [, callArg] = callParam; - if (!callArg || callArg.ex.type !== 'StringLiteral') { - throw new Error( - `Invalid usage of \`createUseThemeProps\` tag, expected one string literal argument but got ${callArg?.ex.type}.`, - ); - } - this.componentName = callArg.ex.value; - } - - // eslint-disable-next-line class-methods-use-this - build(): void {} - - doEvaltimeReplacement(): void { - this.replacer(this.value, false); - } - - get value(): Expression { - return this.astService.nullLiteral(); - } - - doRuntimeReplacement(): void { - const t = this.astService; - - const { themeArgs: { theme } = {} } = this.options as IOptions; - - const useThemePropsImportIdentifier = t.addNamedImport( - this.tagSource.imported, - process.env.PACKAGE_NAME as string, - ); - - let replacement: Expression = t.stringLiteral(this.componentName); - if (theme?.components?.[this.componentName]?.defaultProps) { - replacement = valueToLiteral(theme.components[this.componentName].defaultProps); - } - this.replacer(t.callExpression(useThemePropsImportIdentifier, [replacement]), true); - } - - public override get asSelector(): string { - // For completeness, this is not intended to be used. - return `.${this.className}`; - } -} diff --git a/packages/pigment-css-react/src/processors/css.ts b/packages/pigment-css-react/src/processors/css.ts deleted file mode 100644 index 7511c7a39cf925..00000000000000 --- a/packages/pigment-css-react/src/processors/css.ts +++ /dev/null @@ -1,183 +0,0 @@ -import type { Expression } from '@babel/types'; -import { validateParams } from '@wyw-in-js/processor-utils'; -import type { - CallParam, - TemplateParam, - Params, - TailProcessorParams, - ValueCache, -} from '@wyw-in-js/processor-utils'; -import type { Replacements, Rules } from '@wyw-in-js/shared'; -import { ValueType } from '@wyw-in-js/shared'; -import type { CSSInterpolation } from '@emotion/css'; -import deepMerge from 'lodash/merge'; -import BaseProcessor from './base-processor'; -import type { IOptions } from './styled'; -import { cache, css } from '../utils/emotion'; -import type { Primitive, TemplateCallback } from './keyframes'; - -/** - * @description Scope css class generation similar to css from emotion. - * - * @example - * ```ts - * import { css } from '@pigment-css/react'; - * - * const class1 = css(({theme}) => ({ - * color: (theme.vars || theme).palette.primary.main, - * })) - * ``` - * - * - */ -export class CssProcessor extends BaseProcessor { - callParam: CallParam | TemplateParam; - - constructor(params: Params, ...args: TailProcessorParams) { - if (params.length < 2) { - throw BaseProcessor.SKIP; - } - super([params[0]], ...args); - validateParams( - params, - ['callee', ['call', 'template']], - `Invalid use of ${this.tagSource.imported} tag.`, - ); - - const [, callParams] = params; - if (callParams[0] === 'call') { - const [, ...callArgs] = callParams; - this.dependencies.push(...callArgs); - } else if (callParams[0] === 'template') { - callParams[1].forEach((element) => { - if ('kind' in element && element.kind !== ValueType.CONST) { - this.dependencies.push(element); - } - }); - } - this.callParam = callParams; - } - - build(values: ValueCache) { - if (this.artifacts.length > 0) { - throw new Error(`MUI: "${this.tagSource.imported}" is already built`); - } - - const [callType] = this.callParam; - - if (callType === 'template') { - this.handleTemplate(this.callParam, values); - } else { - this.handleCall(this.callParam, values); - } - } - - private handleTemplate([, callArgs]: TemplateParam, values: ValueCache) { - const templateStrs: string[] = []; - // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. - templateStrs.raw = []; - const templateExpressions: Primitive[] = []; - const { themeArgs } = this.options as IOptions; - - callArgs.forEach((item) => { - if ('kind' in item) { - switch (item.kind) { - case ValueType.FUNCTION: { - const value = values.get(item.ex.name) as TemplateCallback; - templateExpressions.push(value(themeArgs)); - break; - } - case ValueType.CONST: - templateExpressions.push(item.value); - break; - case ValueType.LAZY: { - const evaluatedValue = values.get(item.ex.name); - if (typeof evaluatedValue === 'function') { - templateExpressions.push(evaluatedValue(themeArgs)); - } else { - templateExpressions.push(evaluatedValue as Primitive); - } - break; - } - default: - break; - } - } else if (item.type === 'TemplateElement') { - templateStrs.push(item.value.cooked as string); - // @ts-ignore - templateStrs.raw.push(item.value.raw); - } - }); - this.generateArtifacts(templateStrs, ...templateExpressions); - } - - generateArtifacts(styleObjOrTaggged: CSSInterpolation | string[], ...args: Primitive[]) { - const cssClassName = css(styleObjOrTaggged, ...args); - const cssText = cache.registered[cssClassName] as string; - - const rules: Rules = { - [this.asSelector]: { - className: this.className, - cssText, - displayName: this.displayName, - start: this.location?.start ?? null, - }, - }; - const sourceMapReplacements: Replacements = [ - { - length: cssText.length, - original: { - start: { - column: this.location?.start.column ?? 0, - line: this.location?.start.line ?? 0, - }, - end: { - column: this.location?.end.column ?? 0, - line: this.location?.end.line ?? 0, - }, - }, - }, - ]; - this.artifacts.push(['css', [rules, sourceMapReplacements]]); - } - - private handleCall([, ...callArgs]: CallParam, values: ValueCache) { - const mergedStyleObj: CSSInterpolation = {}; - - callArgs.forEach((callArg) => { - let styleObj: CSSInterpolation; - if (callArg.kind === ValueType.LAZY) { - styleObj = values.get(callArg.ex.name) as CSSInterpolation; - } else if (callArg.kind === ValueType.FUNCTION) { - const { themeArgs } = this.options as IOptions; - const value = values.get(callArg.ex.name) as ( - args: Record | undefined, - ) => CSSInterpolation; - styleObj = value(themeArgs); - } - - if (styleObj) { - deepMerge(mergedStyleObj, styleObj); - } - }); - if (Object.keys(mergedStyleObj).length > 0) { - this.generateArtifacts(mergedStyleObj); - } - } - - doEvaltimeReplacement() { - this.replacer(this.value, false); - } - - doRuntimeReplacement() { - this.doEvaltimeReplacement(); - } - - get asSelector() { - return `.${this.className}`; - } - - get value(): Expression { - return this.astService.stringLiteral(this.className); - } -} diff --git a/packages/pigment-css-react/src/processors/generateAtomics.ts b/packages/pigment-css-react/src/processors/generateAtomics.ts deleted file mode 100644 index 1780a386f2f02e..00000000000000 --- a/packages/pigment-css-react/src/processors/generateAtomics.ts +++ /dev/null @@ -1,106 +0,0 @@ -import { Expression } from '@babel/types'; -import { - type Params, - type TailProcessorParams, - type ValueCache, - validateParams, -} from '@wyw-in-js/processor-utils'; -import { ValueType, type ExpressionValue, type Replacements, type Rules } from '@wyw-in-js/shared'; - -import { CSSInterpolation } from '@emotion/css'; -import BaseProcessor from './base-processor'; -import type { IOptions } from './styled'; -import { - convertAtomicsToCss, - type Atomics, - type RuntimeConfig, -} from '../utils/convertAtomicsToCss'; -import { css, cache } from '../utils/emotion'; -import { valueToLiteral } from '../utils/valueToLiteral'; - -export class GenerateAtomicsProcessor extends BaseProcessor { - callParam: ExpressionValue; - - runtimeConfig?: RuntimeConfig; - - constructor(params: Params, ...args: TailProcessorParams) { - super([params[0]], ...args); - validateParams(params, ['callee', ['call']], `Invalid use of ${this.tagSource.imported} tag.`); - const [, callParam] = params; - const [, callParamArgument] = callParam; - this.dependencies.push(callParamArgument); - this.callParam = callParamArgument; - } - - // eslint-disable-next-line class-methods-use-this - get asSelector(): string { - throw new Error('Method not implemented.'); - } - - // eslint-disable-next-line class-methods-use-this - get value(): Expression { - throw new Error('Method not implemented.'); - } - - doEvaltimeReplacement(): void { - this.replacer(this.astService.nullLiteral(), true); - } - - build(values: ValueCache): void { - const { themeArgs = {} } = this.options as IOptions; - const param = this.callParam; - if (param.kind !== ValueType.CONST) { - const value = - param.kind === ValueType.FUNCTION - ? (values.get(param.ex.name) as (config: unknown) => unknown)(themeArgs) - : values.get(param.ex.name); - const { classes, runtimeConfig } = convertAtomicsToCss( - value as Atomics, - this.className, - false, - this.options.displayName, - ); - this.runtimeConfig = runtimeConfig; - - classes.forEach(({ className, css: cssObject }) => { - const emotionClass = css(cssObject as CSSInterpolation); - const cssText = cache.registered[emotionClass]; - - const rules: Rules = { - [`.${className}`]: { - cssText, - className: this.className, - displayName: this.displayName, - start: this.location?.start ?? null, - }, - }; - const sourceMapReplacements: Replacements = [ - { - length: cssText.length, - original: { - start: { - column: this.location?.start.column ?? 0, - line: this.location?.start.line ?? 0, - }, - end: { - column: this.location?.end.column ?? 0, - line: this.location?.end.line ?? 0, - }, - }, - }, - ]; - this.artifacts.push(['css', [rules, sourceMapReplacements]]); - }); - } - } - - doRuntimeReplacement(): void { - if (!this.runtimeConfig) { - this.doEvaltimeReplacement(); - return; - } - const { astService: t } = this; - const importName = t.addNamedImport('atomics', process.env.PACKAGE_NAME as string); - this.replacer(t.callExpression(importName, [valueToLiteral(this.runtimeConfig)]), true); - } -} diff --git a/packages/pigment-css-react/src/processors/keyframes.ts b/packages/pigment-css-react/src/processors/keyframes.ts deleted file mode 100644 index 98b55419336d96..00000000000000 --- a/packages/pigment-css-react/src/processors/keyframes.ts +++ /dev/null @@ -1,167 +0,0 @@ -import type { Expression } from '@babel/types'; -import type { - CallParam, - TemplateParam, - Params, - TailProcessorParams, - ValueCache, -} from '@wyw-in-js/processor-utils'; -import { serializeStyles, Interpolation } from '@emotion/serialize'; -import { type Replacements, type Rules, ValueType } from '@wyw-in-js/shared'; -import type { CSSInterpolation } from '@emotion/css'; -import { validateParams } from '@wyw-in-js/processor-utils'; -import BaseProcessor from './base-processor'; -import type { IOptions } from './styled'; -import { cache } from '../utils/emotion'; - -export type Primitive = string | number | boolean | null | undefined; - -export type TemplateCallback = (params: Record | undefined) => string | number; - -export class KeyframesProcessor extends BaseProcessor { - callParam: CallParam | TemplateParam; - - constructor(params: Params, ...args: TailProcessorParams) { - super([params[0]], ...args); - if (params.length < 2) { - throw BaseProcessor.SKIP; - } - validateParams( - params, - ['callee', ['call', 'template']], - `Invalid use of ${this.tagSource.imported} tag.`, - ); - - const [, callParams] = params; - if (callParams[0] === 'call') { - this.dependencies.push(callParams[1]); - } else if (callParams[0] === 'template') { - callParams[1].forEach((element) => { - if ('kind' in element && element.kind !== ValueType.CONST) { - this.dependencies.push(element); - } - }); - } - this.callParam = callParams; - } - - build(values: ValueCache) { - if (this.artifacts.length > 0) { - throw new Error(`MUI: "${this.tagSource.imported}" is already built`); - } - - const [callType] = this.callParam; - - if (callType === 'template') { - this.handleTemplate(this.callParam, values); - } else { - this.handleCall(this.callParam, values); - } - } - - private handleTemplate([, callArgs]: TemplateParam, values: ValueCache) { - const templateStrs: string[] = []; - // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. - templateStrs.raw = []; - const templateExpressions: Primitive[] = []; - const { themeArgs } = this.options as IOptions; - - callArgs.forEach((item) => { - if ('kind' in item) { - switch (item.kind) { - case ValueType.FUNCTION: { - const value = values.get(item.ex.name) as TemplateCallback; - templateExpressions.push(value(themeArgs)); - break; - } - case ValueType.CONST: - templateExpressions.push(item.value); - break; - case ValueType.LAZY: { - const evaluatedValue = values.get(item.ex.name); - if (typeof evaluatedValue === 'function') { - templateExpressions.push(evaluatedValue(themeArgs)); - } else { - templateExpressions.push(evaluatedValue as Primitive); - } - break; - } - default: - break; - } - } else if (item.type === 'TemplateElement') { - templateStrs.push(item.value.cooked as string); - // @ts-ignore - templateStrs.raw.push(item.value.raw); - } - }); - this.generateArtifacts(templateStrs, ...templateExpressions); - } - - generateArtifacts(styleObjOrTaggged: CSSInterpolation | string[], ...args: Primitive[]) { - const { styles } = serializeStyles( - args.length > 0 - ? [styleObjOrTaggged as Interpolation<{}>, ...args] - : [styleObjOrTaggged as Interpolation<{}>], - cache.registered, - ); - const cssText = `@keyframes {${styles}}`; - - const rules: Rules = { - [this.asSelector]: { - className: this.className, - cssText, - displayName: this.displayName, - start: this.location?.start ?? null, - }, - }; - const sourceMapReplacements: Replacements = [ - { - length: cssText.length, - original: { - start: { - column: this.location?.start.column ?? 0, - line: this.location?.start.line ?? 0, - }, - end: { - column: this.location?.end.column ?? 0, - line: this.location?.end.line ?? 0, - }, - }, - }, - ]; - this.artifacts.push(['css', [rules, sourceMapReplacements]]); - } - - private handleCall([, callArg]: CallParam, values: ValueCache) { - let styleObj: CSSInterpolation; - if (callArg.kind === ValueType.LAZY) { - styleObj = values.get(callArg.ex.name) as CSSInterpolation; - } else if (callArg.kind === ValueType.FUNCTION) { - const { themeArgs } = this.options as IOptions; - const value = values.get(callArg.ex.name) as ( - args: Record | undefined, - ) => CSSInterpolation; - styleObj = value(themeArgs); - } - if (styleObj) { - this.generateArtifacts(styleObj); - } - } - - doEvaltimeReplacement() { - this.replacer(this.value, false); - } - - doRuntimeReplacement() { - this.doEvaltimeReplacement(); - } - - get asSelector() { - return this.className; - } - - get value(): Expression { - return this.astService.stringLiteral(this.className); - } -} diff --git a/packages/pigment-css-react/src/processors/styled.ts b/packages/pigment-css-react/src/processors/styled.ts deleted file mode 100644 index fa2021df976340..00000000000000 --- a/packages/pigment-css-react/src/processors/styled.ts +++ /dev/null @@ -1,559 +0,0 @@ -import { parseExpression } from '@babel/parser'; -import type { - ObjectExpression, - SourceLocation, - Identifier, - Expression, - TemplateElement, -} from '@babel/types'; -import { - Params, - TailProcessorParams, - ValueCache, - validateParams, - IOptions as IBaseOptions, -} from '@wyw-in-js/processor-utils'; -import { - ValueType, - type ConstValue, - type ExpressionValue, - type LazyValue, - type Replacements, - type Rules, -} from '@wyw-in-js/shared'; -import { CSSObject } from '@emotion/serialize'; -import type { PluginCustomOptions } from '../utils/cssFnValueToVariable'; -import { cssFnValueToVariable } from '../utils/cssFnValueToVariable'; -import { processCssObject } from '../utils/processCssObject'; -import { valueToLiteral } from '../utils/valueToLiteral'; -import BaseProcessor from './base-processor'; -import { Primitive, TemplateCallback } from './keyframes'; -import { cache, css } from '../utils/emotion'; - -type Theme = { [key: 'unstable_sxConfig' | string]: string | number | Theme }; - -type VariantData = { - props: (componentProps: unknown) => boolean | Record; - style: object; - originalExpression?: Exclude; -}; - -type VariantDataTransformed = { - props: VariantData['props']; - className: string; -}; - -export type WrappedNode = - | string - | { - node: Identifier; - nonLinaria?: true; - source: string; - }; - -export type IOptions = IBaseOptions & PluginCustomOptions; -type ComponentNames = keyof Exclude; - -type ComponentMeta = { - name?: ComponentNames; - slot?: string; - skipVariantsResolver?: boolean; - skipSx?: boolean; -}; - -/** - * WyW-in-JS tag processor responsible for converting complex `styled()()` calls - * at build-time to simple `styled` calls supported by runtime. - * - * Ex - - * ``` - * const SliderTrack = styled('h4', { - * name: 'MuiSlider', - * slot: 'Track', - * overridesResolver: (props, styles) => styles.track, - * })({ - * fontSize: 13, - * color: (props) => (props.isRed ? 'red' : 'blue'), - * }); - * ``` - * - * gets converted to a simple styled call with no nested calls - - * - * ``` - * const SliderTrack = styled('h4', { - * classes: ['h13ydq1s'], - * vars: { 'b1xyu9xj-0': [(t) => (t.isRed ? 'red' : 'blue'), !1] }, - * variants: [], - * name: 'MuiSlider', - * slot: 'Track', - * overridesResolver: (t, o) => o.track, - * overrideStyles: {} - * }) - * ``` - * - * and this css - * ```css - * .h13ydq1s { - * fontSize: 13px, - * color: var(--b1xyu9xj-0); - * } - * ``` - * - * For Wyw-in-JS tag processors, we need to implement 3 methods of BaseProcessor - - * 1. doEvaltimeReplacement - * 2. build - * 3. doRuntimeReplacement - */ -export class StyledProcessor extends BaseProcessor { - variableIdx = 0; - - component?: WrappedNode; - - componentMetaArg?: LazyValue; - - styleArgs: ExpressionValue[] | (TemplateElement | ExpressionValue)[]; - - finalVariants: { - props: Record; - className: string; - }[] = []; - - overrides: Record = {}; - - counterMap: Map = new Map(); - - baseClasses: string[] = []; - - collectedStyles: [string, string, ExpressionValue | null][] = []; - - collectedVariables: [string, Expression, boolean][] = []; - - collectedVariants: VariantDataTransformed[] = []; - - originalLocation: SourceLocation | null = null; - - isTemplateTag: boolean; - - constructor(params: Params, ...args: TailProcessorParams) { - if (params.length <= 2) { - // no need to do any processing if it is an already transformed call or just a reference. - throw BaseProcessor.SKIP; - } - super([params[0]], ...args); - validateParams( - params, - ['callee', ['call', 'member'], ['call', 'template']], - `Invalid use of ${this.tagSource.imported} tag.`, - ); - const [callee, memberOrCall, styleCallOrTemplate] = params; - const [callType, componentArg, componentMetaArg] = memberOrCall; - const [, ...styleArgs] = styleCallOrTemplate; - this.isTemplateTag = styleCallOrTemplate[0] === 'template'; - this.componentMetaArg = - componentMetaArg && componentMetaArg.kind === ValueType.LAZY ? componentMetaArg : undefined; - this.styleArgs = styleArgs as ExpressionValue[]; - - if (callType === 'member') { - this.component = componentArg; - } else { - switch (componentArg.kind) { - case ValueType.CONST: - this.component = typeof componentArg.value === 'string' ? componentArg.value : undefined; - break; - case ValueType.LAZY: - this.component = { - node: componentArg.ex, - source: componentArg.source, - }; - this.dependencies.push(componentArg); - break; - default: - this.component = 'FunctionalComponent'; - break; - } - if (componentMetaArg && componentMetaArg.kind !== ValueType.FUNCTION) { - this.dependencies.push(componentMetaArg); - } - } - if (!this.component) { - throw new Error('Invalid usage of `styled` tag'); - } - - styleArgs.flat().forEach((item) => { - if ('kind' in item) { - // push item in dependencies so that they get evaluated and we receive its value in build call. - this.dependencies.push(item); - } - }); - if (callee[0] === 'callee') { - this.originalLocation = callee[1].loc ?? null; - } - } - - getClassName(key = 'base') { - if (!this.counterMap.has(key)) { - this.counterMap.set(key, 0); - } - const currentCount = this.counterMap.get(key) as number; - this.counterMap.set(key, currentCount + 1); - - return `${this.className}${key === 'base' ? '' : `-${key}`}${ - currentCount > 0 ? `-${currentCount}` : '' - }`; - } - - private generateArtifacts() { - const artifacts: [Rules, Replacements][] = this.collectedStyles.map(([className, cssText]) => { - const rules: Rules = { - [`.${className}`]: { - className, - cssText, - displayName: this.displayName, - start: this.location?.start ?? null, - }, - }; - // @TODO - Refactor for finer location tracking in original code. - const replacements: Replacements = [ - { - length: cssText.length, - original: { - start: { - column: this.location?.start.column ?? 0, - line: this.location?.start.line ?? 0, - }, - end: { - column: this.location?.end.column ?? 0, - line: this.location?.end.line ?? 0, - }, - }, - }, - ]; - return [rules, replacements]; - }); - artifacts.forEach((artifact) => { - // Wyw-in-JS accesses artifacts array to get the final - // css definitions which are then exposed to the bundler. - this.artifacts.push(['css', artifact]); - }); - } - - private buildForTemplateTag(values: ValueCache): void { - const templateStrs: string[] = []; - // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array. - templateStrs.raw = []; - const templateExpressions: Primitive[] = []; - const { themeArgs } = this.options as IOptions; - - this.styleArgs.flat().forEach((item) => { - if ('kind' in item) { - switch (item.kind) { - case ValueType.FUNCTION: { - const value = values.get(item.ex.name) as TemplateCallback; - templateExpressions.push(value(themeArgs)); - break; - } - case ValueType.CONST: - templateExpressions.push(item.value); - break; - case ValueType.LAZY: { - const evaluatedValue = values.get(item.ex.name); - if (typeof evaluatedValue === 'function') { - templateExpressions.push(evaluatedValue(themeArgs)); - } else { - templateExpressions.push(evaluatedValue as Primitive); - } - break; - } - default: - break; - } - } else if (item.type === 'TemplateElement') { - templateStrs.push(item.value.cooked as string); - // @ts-ignore - templateStrs.raw.push(item.value.raw); - } - }); - const cssClassName = css(templateStrs, ...templateExpressions); - const cssText = cache.registered[cssClassName] as string; - - const baseClass = this.getClassName(); - this.baseClasses.push(baseClass); - this.collectedStyles.push([baseClass, cssText, null]); - const variantsAccumulator: VariantData[] = []; - this.processOverrides(values, variantsAccumulator); - variantsAccumulator.forEach((variant) => { - this.processVariant(variant); - }); - this.generateArtifacts(); - } - - /** - * There are 2 main phases in Wyw-in-JS's processing, Evaltime and Runtime. During Evaltime, Wyw-in-JS prepares minimal code that gets evaluated to get the actual values of the styled arguments. Here, we mostly want to replace the styled calls with a simple string/object of its classname. This is necessary for class composition. For ex, you could potentially do this - - * ```js - * const Component = styled(...)(...) - * const Component2 = styled()({ - * [`${Component} &`]: { - * color: 'red' - * } - * }) - * ``` - * to further target `Component` rendered inside `Component2`. - */ - doEvaltimeReplacement() { - this.replacer(this.astService.stringLiteral(this.asSelector), false); - } - - /** - * This is called by Wyw-in-JS after evaluating the code. Here, we - * get access to the actual values of the `styled` arguments - * which we can use to generate our styles. - * Order of processing styles - - * 1. CSS directly declared in styled call - * 2. CSS declared in theme object's styledOverrides - * 3. Variants declared in styled call - * 3. Variants declared in theme object - */ - build(values: ValueCache): void { - if (this.isTemplateTag) { - this.buildForTemplateTag(values); - return; - } - const themeImportIdentifier = this.astService.addDefaultImport( - `${process.env.PACKAGE_NAME}/theme`, - 'theme', - ); - // all the variant definitions are collected here so that we can - // apply variant styles after base styles for more specific targetting. - const variantsAccumulator: VariantData[] = []; - (this.styleArgs as ExpressionValue[]).forEach((styleArg) => { - this.processStyle(values, styleArg, variantsAccumulator, themeImportIdentifier.name); - }); - this.processOverrides(values, variantsAccumulator); - variantsAccumulator.forEach((variant) => { - this.processVariant(variant); - }); - this.generateArtifacts(); - } - - /** - * This is the runtime phase where all of the css have been transformed and we finally want to replace the `styled` call with the code that we want in the final bundle. In this particular case, we replace the `styled` calls with - * ```js - * const Component = styled('div')({ - * displayName: 'Component', - * name: 'MuiSlider', - * slot: 'root', - * classes: ['class', 'class-1', '...'], - * vars: { - * 'var-id': [(props) => props.isRed ? 'red' : 'blue', false], - * // ... - * }, - * variants: [{ - * props: { - * }, - * className: 'class-variant-1', - * }], - * // ... - * }) - * ``` - */ - doRuntimeReplacement(): void { - const t = this.astService; - let componentName: Expression; - if (typeof this.component === 'string') { - if (this.component === 'FunctionalComponent') { - componentName = t.arrowFunctionExpression([], t.blockStatement([])); - } else { - componentName = t.stringLiteral(this.component); - } - } else if (this.component?.node) { - componentName = t.callExpression(t.identifier(this.component.node.name), []); - } else { - componentName = t.nullLiteral(); - } - const argProperties: ReturnType< - typeof t.objectProperty | typeof t.spreadElement | typeof t.objectMethod - >[] = []; - - const classNames = Array.from( - new Set([this.className, ...(this.baseClasses.length ? this.baseClasses : [])]), - ); - argProperties.push( - t.objectProperty( - t.identifier('classes'), - t.arrayExpression(classNames.map((cls) => t.stringLiteral(cls))), - ), - ); - - const varProperties: ReturnType[] = this.collectedVariables.map( - ([variableId, expression, isUnitLess]) => - t.objectProperty( - t.stringLiteral(variableId), - t.arrayExpression([expression, t.booleanLiteral(isUnitLess)]), - ), - ); - if (varProperties.length) { - argProperties.push(t.objectProperty(t.identifier('vars'), t.objectExpression(varProperties))); - } - if (this.collectedVariants.length) { - argProperties.push( - t.objectProperty(t.identifier('variants'), valueToLiteral(this.collectedVariants)), - ); - } - - let componentMetaExpression: ObjectExpression | undefined; - - if (this.componentMetaArg) { - const parsedMeta = parseExpression(this.componentMetaArg.source); - if (parsedMeta.type === 'ObjectExpression') { - componentMetaExpression = parsedMeta as ObjectExpression; - } - } - - const styledImportIdentifier = t.addNamedImport( - this.tagSource.imported, - process.env.PACKAGE_NAME as string, - ); - const styledCall = t.callExpression( - styledImportIdentifier, - componentMetaExpression ? [componentName, componentMetaExpression] : [componentName], - ); - const mainCall = t.callExpression(styledCall, [t.objectExpression(argProperties)]); - this.replacer(mainCall, true); - } - - /** - * Generates css for object directly provided as arguments in the styled call. - */ - processStyle( - values: ValueCache, - styleArg: ExpressionValue, - variantsAccumulator?: VariantData[], - themeImportIdentifier?: string, - ) { - if (styleArg.kind === ValueType.CONST) { - if (typeof styleArg.value === 'string') { - this.collectedStyles.push([this.getClassName(), styleArg.value, styleArg]); - } - } else { - const styleObjOrFn = values.get(styleArg.ex.name); - const finalStyle = this.processCss( - styleObjOrFn as object | (() => void), - styleArg, - variantsAccumulator, - themeImportIdentifier, - ); - const className = this.getClassName(); - this.baseClasses.push(className); - this.collectedStyles.push([className, finalStyle, styleArg]); - } - } - - /** - * Generates css for styleOverride objects in the theme object. - */ - processOverrides(values: ValueCache, variantsAccumulator?: VariantData[]) { - if (!this.componentMetaArg) { - return; - } - const value = values.get(this.componentMetaArg.ex.name) as ComponentMeta; - const { themeArgs: { theme } = {} } = this.options as IOptions; - if (!value.name || !value.slot || !theme) { - return; - } - const componentData = theme.components?.[value.name]; - if (!componentData) { - return; - } - - if ('styleOverrides' in componentData) { - const overrides = componentData.styleOverrides as Record; - if (!overrides) { - return; - } - const overrideStyle = (overrides[value.slot.toLowerCase()] || overrides[value.slot]) as - | string - | CSSObject; - const className = this.getClassName(); - if (typeof overrideStyle === 'string') { - this.collectedStyles.push([className, overrideStyle, null]); - return; - } - const finalStyle = this.processCss(overrideStyle, null, variantsAccumulator); - this.baseClasses.push(className); - this.collectedStyles.push([className, finalStyle, null]); - } - - if (!variantsAccumulator) { - return; - } - - if ( - 'variants' in componentData && - componentData.variants && - value.slot.toLowerCase() === 'root' - ) { - variantsAccumulator.push(...(componentData.variants as unknown as VariantData[])); - } - } - - /** - * Generates css for all the variants collected after processing direct css and styleOverride css. - */ - processVariant(variant: VariantData) { - const { displayName } = this.options; - const className = this.getClassName(displayName ? 'variant' : undefined); - const styleObjOrFn = variant.style; - const originalExpression = variant.originalExpression; - const finalStyle = this.processCss(styleObjOrFn, originalExpression ?? null); - this.collectedStyles.push([className, finalStyle, null]); - this.collectedVariants.push({ - props: variant.props, - className, - }); - } - - processCss( - styleObjOrFn: ((args: Record) => void) | object, - styleArg: ExpressionValue | null, - variantsAccumulator?: VariantData[], - themeImportIdentifier?: string, - ) { - const { themeArgs = {} } = this.options as IOptions; - const styleObj = typeof styleObjOrFn === 'function' ? styleObjOrFn(themeArgs) : styleObjOrFn; - if (!styleObj) { - return ''; - } - if (styleObj.variants) { - variantsAccumulator?.push( - ...styleObj.variants.map((variant: Omit) => ({ - ...variant, - originalExpression: styleArg, - })), - ); - } - delete styleObj.variants; - const res = cssFnValueToVariable({ - styleObj, - expressionValue: styleArg, - getVariableName: (cssKey: string, source: string, hasUnit: boolean) => - this.getCustomVariableId(cssKey, source, hasUnit), - filename: this.context.filename, - options: this.options as IOptions, - includeThemeArg: typeof styleObjOrFn === 'function', - themeImportIdentifier, - }); - if (res.length) { - this.collectedVariables.push(...res); - } - return processCssObject(styleObj, themeArgs); - } - - public override get asSelector(): string { - return `.${this.className}`; - } - - get value(): Expression { - const t = this.astService; - return t.stringLiteral(this.className); - } -} diff --git a/packages/pigment-css-react/src/processors/sx.ts b/packages/pigment-css-react/src/processors/sx.ts deleted file mode 100644 index 141c470ed8c1ae..00000000000000 --- a/packages/pigment-css-react/src/processors/sx.ts +++ /dev/null @@ -1,191 +0,0 @@ -import type { Expression } from '@babel/types'; -import { - validateParams, - type Params, - type TailProcessorParams, - type ValueCache, -} from '@wyw-in-js/processor-utils'; -import { ValueType, type ExpressionValue, type Replacements, type Rules } from '@wyw-in-js/shared'; -import type { IOptions } from './styled'; -import { processCssObject } from '../utils/processCssObject'; -import { cssFnValueToVariable } from '../utils/cssFnValueToVariable'; -import BaseProcessor from './base-processor'; - -// @TODO: Maybe figure out a better way allow imports. -const allowedSxTransformImports = [`${process.env.PACKAGE_NAME}/Box`]; - -/** - * Specifically looks for whether the sx prop should be transformed or not. - * If it's a Pigment CSS styled component, the value of `argumentValue` will - * be a string className starting with "." - * In other cases, it explicitly checks if the import is allowed for sx transformation. - */ -function allowSxTransform(argumentExpression: ExpressionValue, argumentValue?: string) { - if (!argumentExpression) { - return false; - } - if ( - argumentExpression.kind === ValueType.LAZY && - argumentExpression.importedFrom?.some((i) => allowedSxTransformImports.includes(i)) - ) { - return true; - } - if (argumentValue && argumentValue[0] === '.') { - return true; - } - return false; -} - -export class SxProcessor extends BaseProcessor { - sxArguments: ExpressionValue[] = []; - - variableIdx: number = 0; - - collectedVariables: [string, Expression, boolean][] = []; - - elementClassName = ''; - - constructor(params: Params, ...args: TailProcessorParams) { - super([params[0]], ...args); - validateParams(params, ['callee', 'call'], 'Invalid usage of sx call.'); - const [, [, ...sxCallArguments]] = params; - sxCallArguments.forEach((arg) => { - if ('kind' in arg) { - this.dependencies.push(arg); - } - }); - this.sxArguments = sxCallArguments; - } - - build(values: ValueCache) { - const [sxStyle, elementClassExpression] = this.sxArguments; - if (elementClassExpression.kind === ValueType.LAZY) { - const elementClassValue = values.get(elementClassExpression.ex.name); - if (typeof elementClassValue === 'string') { - this.elementClassName = elementClassValue; - } - } - - if (!allowSxTransform(elementClassExpression, this.elementClassName)) { - return; - } - - let cssText: string = ''; - if (sxStyle.kind === ValueType.CONST) { - if (sxStyle.ex.type === 'StringLiteral') { - cssText = sxStyle.ex.value; - } - } else { - const styleObjOrFn = values.get(sxStyle.ex.name); - cssText = this.processCss(styleObjOrFn, sxStyle); - } - const selector = this.elementClassName - ? `${this.elementClassName}${this.asSelector}` - : this.asSelector; - - if (!cssText) { - return; - } - - const rules: Rules = { - [selector]: { - className: this.className, - cssText, - displayName: this.displayName, - start: this.location?.start ?? null, - }, - }; - const replacements: Replacements = [ - { - length: cssText.length, - original: { - start: { - column: this.location?.start.column ?? 0, - line: this.location?.start.line ?? 0, - }, - end: { - column: this.location?.end.column ?? 0, - line: this.location?.end.line ?? 0, - }, - }, - }, - ]; - this.artifacts.push(['css', [rules, replacements]]); - } - - doEvaltimeReplacement() { - this.replacer(this.value, false); - } - - doRuntimeReplacement() { - const t = this.astService; - // do not replace if sx prop is not a Pigment styled component - if (this.artifacts.length === 0) { - return; - } - if (this.collectedVariables.length) { - const varProperties: ReturnType[] = this.collectedVariables.map( - ([variableId, expression, isUnitLess]) => { - switch (expression.type) { - case 'ArrowFunctionExpression': { - return t.objectProperty( - t.stringLiteral(variableId), - t.arrayExpression([expression.body as Expression, t.booleanLiteral(isUnitLess)]), - ); - } - case 'FunctionExpression': { - const returnStatement = expression.body.body[0]; - if (returnStatement.type === 'ReturnStatement' && returnStatement.argument) { - return t.objectProperty( - t.stringLiteral(variableId), - t.arrayExpression([returnStatement.argument, t.booleanLiteral(isUnitLess)]), - ); - } - throw this.sxArguments[0].buildCodeFrameError( - 'Invalid transformation encountered. The callbacks in sx properties should directly return an Expression.', - ); - } - default: { - return t.objectProperty(t.stringLiteral(variableId), t.nullLiteral()); - } - } - }, - ); - - const obj = t.objectExpression([ - t.objectProperty(t.identifier('className'), t.stringLiteral(this.className)), - t.objectProperty(t.identifier('vars'), t.objectExpression(varProperties)), - ]); - this.replacer(obj, false); - } else { - this.replacer(this.value, false); - } - } - - get asSelector(): string { - return `.${this.className}`; - } - - get value(): Expression { - return this.astService.stringLiteral(this.className); - } - - private processCss(styleObjOrFn: unknown, expressionValue: ExpressionValue) { - const { themeArgs } = this.options as IOptions; - const styleObj = typeof styleObjOrFn === 'function' ? styleObjOrFn(themeArgs) : styleObjOrFn; - - const res = cssFnValueToVariable({ - styleObj, - expressionValue, - getVariableName: (cssKey: string, source: string, hasUnit: boolean) => - this.getCustomVariableId(cssKey, source, hasUnit), - filename: this.context.filename, - options: this.options as IOptions, - }); - if (res.length) { - this.collectedVariables.push(...res); - } - - return processCssObject(styleObj, themeArgs, false); - } -} diff --git a/packages/pigment-css-react/src/styled.d.ts b/packages/pigment-css-react/src/styled.d.ts deleted file mode 100644 index d0fd15efb7351a..00000000000000 --- a/packages/pigment-css-react/src/styled.d.ts +++ /dev/null @@ -1,77 +0,0 @@ -import type * as React from 'react'; -import type { BaseDefaultProps, CSSObject, PolymorphicComponent, Substitute } from './base'; -import type { ThemeArgs } from './theme'; -import type { SxProp } from './sx'; -import { Primitve } from './keyframes'; - -type Falsy = false | 0 | '' | null | undefined; - -export interface StyledVariants { - props: Partial | ((props: Props) => boolean); - style: CSSObject; -} - -export type StyledCssArgument = CSSObject & { - variants?: Array>; -}; - -export type StyledCallback = ( - buildArg: ThemeArgs, -) => StyledCssArgument; - -export type StyledArgument = - | StyledCssArgument - | StyledCallback; - -export interface StyledComponent - extends PolymorphicComponent { - defaultProps?: Partial | undefined; - toString: () => string; -} - -export interface CreateStyledComponent< - Component extends React.ElementType, - OuterProps extends object, -> { - ( - styles: TemplateStringsArray, - ...args: Array<(options: ThemeArgs) => Primitve | Primitve | React.ComponentClass> - ): StyledComponent & (Component extends string ? BaseDefaultProps : Component); - - /** - * @typeparam Props: Additional props to add to the styled component - */ - ( - ...styles: Array> - ): StyledComponent> & - (Component extends string ? BaseDefaultProps : Component); -} - -export interface StyledOptions { - name?: string; - slot?: string; - skipSx?: boolean; - skipVariantsResolver?: boolean; - shouldForwardProp?: (propName: string) => boolean; - overridesResolver?: ( - props: any | Props, - styles: Record, - ) => (string | Falsy) | Array; -} - -export interface CreateStyled { - < - TagOrComponent extends React.ElementType, - FinalProps extends BaseDefaultProps = React.ComponentPropsWithRef, - >( - tag: TagOrComponent, - options?: StyledOptions, - ): CreateStyledComponent; -} - -export type CreateStyledIndex = { - [Key in keyof JSX.IntrinsicElements]: CreateStyledComponent; -}; - -declare const styled: CreateStyled & CreateStyledIndex; -export default styled; diff --git a/packages/pigment-css-react/src/styled.js b/packages/pigment-css-react/src/styled.js deleted file mode 100644 index 0febf1e7df4512..00000000000000 --- a/packages/pigment-css-react/src/styled.js +++ /dev/null @@ -1,160 +0,0 @@ -import * as React from 'react'; -import clsx from 'clsx'; -import isPropValid from '@emotion/is-prop-valid'; - -function getVariantClasses(componentProps, variants) { - const { ownerState = {} } = componentProps; - const variantClasses = variants - .filter(({ props: variantProps }) => - typeof variantProps === 'function' - ? variantProps({ ...componentProps, ...componentProps.ownerState }) - : Object.entries(variantProps).every(([propKey, propValue]) => { - return ownerState[propKey] === propValue || componentProps[propKey] === propValue; - }), - ) - .map(({ className }) => className); - return variantClasses; -} - -function isHtmlTag(tag) { - return ( - typeof tag === 'string' && - // 96 is one less than the char code - // for "a" so this is checking that - // it's a lowercase character - tag.charCodeAt(0) > 96 - ); -} - -const slotShouldForwardProp = (key) => key !== 'sx' && key !== 'as' && key !== 'ownerState'; -const rootShouldForwardProp = (key) => slotShouldForwardProp(key) && key !== 'classes'; - -/** - * @typedef {(propKey: string) => boolean} ShouldForwardProp - */ - -/** - * This is the runtime `styled` function that finally renders the component - * after transpilation through WyW-in-JS. It makes sure to add the base classes, - * variant classes if they satisfy the prop value and also adds dynamic css - * variables at runtime, if any. - * @param {string | Function} tag - * @param {Object} componentMeta - * @param {string} componentMeta.name - * @param {string} componentMeta.slot - * @param {ShouldForwardProp} componentMeta.shouldForwardProp - * @param {Object} componentMeta.defaultProps Default props object copied over and inlined from theme object - */ -export default function styled(tag, componentMeta = {}) { - const { name, slot, shouldForwardProp } = componentMeta; - - let finalShouldForwardProp = shouldForwardProp; - if (!shouldForwardProp) { - if (isHtmlTag(tag)) { - finalShouldForwardProp = isPropValid; - } else if (slot === 'Root' || slot === 'root') { - finalShouldForwardProp = rootShouldForwardProp; - } else { - finalShouldForwardProp = slotShouldForwardProp; - } - } - const shouldUseAs = !finalShouldForwardProp('as'); - /** - * This is the runtime `styled` function that finally renders the component - * after transpilation through WyW-in-JS. It makes sure to add the base classes, - * variant classes if they satisfy the prop value and also adds dynamic css - * variables at runtime, if any. - * @param {string | Function} tag - * @param {Object} options - * @param {string} options.displayName Set by WyW-in-JS. Mostly is same as the variable name. For this code, ```const Comp = styled(...)(...)```, `displayName` will be `Comp`. - * @param {string[]} options.classes List of class names that reference the inline css object styles. - * @param {Object} options.vars Dynamically generated css variables inlined directly on the element for runtime styling. - * @param {Object[]} options.variants - * @param {Object} options.variants.props - * @param {string} options.variants.className Classname generated for this specific variant through styled processor. - * @param {string} options.name - * @param {string} options.slot - * @param {ShouldForwardProp} options.shouldForwardProp - */ - function scopedStyledWithOptions(options = {}) { - const { displayName, classes = [], vars: cssVars = {}, variants = [] } = options; - - const StyledComponent = React.forwardRef(function StyledComponent(inProps, ref) { - const { as, className, sx, style, ownerState, ...props } = inProps; - const Component = (shouldUseAs && as) || tag; - const varStyles = Object.entries(cssVars).reduce( - (acc, [cssVariable, [variableFunction, isUnitLess]]) => { - const value = variableFunction(props); - if (typeof value === 'undefined') { - return acc; - } - if (typeof value === 'string' || isUnitLess) { - acc[`--${cssVariable}`] = value; - } else { - acc[`--${cssVariable}`] = `${value}px`; - } - return acc; - }, - {}, - ); - const sxClass = typeof sx === 'string' ? sx : sx?.className; - const sxVars = sx && typeof sx !== 'string' ? sx.vars : undefined; - - if (sxVars) { - Object.entries(sxVars).forEach(([cssVariable, [value, isUnitLess]]) => { - if (typeof value === 'string' || isUnitLess) { - varStyles[`--${cssVariable}`] = value; - } else { - varStyles[`--${cssVariable}`] = `${value}px`; - } - }); - } - - const finalClassName = clsx( - classes, - sxClass, - className, - getVariantClasses(inProps, variants), - ); - - const newProps = {}; - // eslint-disable-next-line no-restricted-syntax - for (const key in props) { - if (shouldUseAs && key === 'as') { - continue; - } - - if (finalShouldForwardProp(key)) { - newProps[key] = props[key]; - } - } - - return ( - - ); - }); - - let componentName = displayName; - if (!componentName && name) { - componentName = `${name}${slot ? `-${slot}` : ''}`; - } - StyledComponent.displayName = `Styled(${componentName})`; - // eslint-disable-next-line no-underscore-dangle - StyledComponent.__styled_by_pigment_css = true; - - return StyledComponent; - } - - return scopedStyledWithOptions; -} diff --git a/packages/pigment-css-react/src/sx.d.ts b/packages/pigment-css-react/src/sx.d.ts deleted file mode 100644 index 317ecf714c771b..00000000000000 --- a/packages/pigment-css-react/src/sx.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { CSSObjectNoCallback } from './base'; -import type { ThemeArgs } from './theme'; - -export type SxProp = CSSObjectNoCallback | ((themeArgs: ThemeArgs) => CSSObjectNoCallback); - -export default function sx(arg: SxProp, componentClass?: string): string; diff --git a/packages/pigment-css-react/src/sx.js b/packages/pigment-css-react/src/sx.js deleted file mode 100644 index 4d9091f558229c..00000000000000 --- a/packages/pigment-css-react/src/sx.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function sx(styleObj) { - return styleObj; -} diff --git a/packages/pigment-css-react/src/theme.ts b/packages/pigment-css-react/src/theme.ts deleted file mode 100644 index 38cd0856a93723..00000000000000 --- a/packages/pigment-css-react/src/theme.ts +++ /dev/null @@ -1,2 +0,0 @@ -export interface ThemeArgs {} -export { ExtendTheme } from './utils/extendTheme'; diff --git a/packages/pigment-css-react/src/utils/checkStaticObjectOrArray.ts b/packages/pigment-css-react/src/utils/checkStaticObjectOrArray.ts deleted file mode 100644 index 536758c39a058a..00000000000000 --- a/packages/pigment-css-react/src/utils/checkStaticObjectOrArray.ts +++ /dev/null @@ -1,47 +0,0 @@ -import type { NodePath } from '@babel/core'; -import type * as t from '@babel/types'; - -export function isStaticObjectExpression( - nodePath: NodePath, -): nodePath is NodePath { - const properties = nodePath.get('properties'); - return properties.every((property): boolean => { - if (!property.isObjectProperty()) { - return false; - } - const key = property.get('key'); - const value = property.get('value'); - return ( - (key.isIdentifier() && value.isLiteral()) || - (value.isObjectExpression() && isStaticObjectExpression(value)) - ); - }); -} - -/** - * Recursively check if all items in an array or all keys and values in - * an object are static. - */ -export function isStaticObjectOrArrayExpression( - nodePath: NodePath, -): nodePath is NodePath | NodePath { - if (nodePath.isArrayExpression()) { - const elements = nodePath.get('elements'); - return elements.every((item) => { - if (item.isLiteral()) { - return true; - } - if (item.isObjectExpression()) { - return isStaticObjectExpression(item); - } - if (item.isArrayExpression()) { - return isStaticObjectOrArrayExpression(nodePath); - } - return false; - }); - } - if (nodePath.isObjectExpression()) { - return isStaticObjectExpression(nodePath); - } - return false; -} diff --git a/packages/pigment-css-react/src/utils/convertAtomicsToCss.ts b/packages/pigment-css-react/src/utils/convertAtomicsToCss.ts deleted file mode 100644 index 1afdf7c64c4a7b..00000000000000 --- a/packages/pigment-css-react/src/utils/convertAtomicsToCss.ts +++ /dev/null @@ -1,92 +0,0 @@ -import cssesc from 'cssesc'; - -export type Atomics = { - conditions: Record; - defaultCondition: string; - properties: { - [key: string]: string[]; - }; - shorthands: Record; -}; - -export type RuntimeConfig = { - conditions: string[]; - styles: Record>>; - shorthands: Atomics['shorthands']; -}; - -function getClassName(...items: string[]) { - return cssesc(items.filter(Boolean).join('_')); -} - -export function convertAtomicsToCss( - { conditions = {}, defaultCondition, properties, shorthands = {} }: Atomics, - mainClassName: string, - isGlobal = false, - debug = false, - prefix = 'Mui', -) { - const runtimeConfig: RuntimeConfig = { - styles: {}, - shorthands, - conditions: Object.keys(conditions), - }; - let count = 1; - function getCount() { - const val = count; - count += 1; - return val; - } - - const classes: { - className: string; - css: object; - }[] = []; - - Object.entries(conditions).forEach(([conditionName, mediaQueryStr]) => { - Object.entries(properties).forEach(([cssPropertyName, propertyValues]) => { - propertyValues.forEach((propertyValue) => { - const className = - isGlobal || debug - ? getClassName( - prefix, - cssPropertyName, - conditionName ?? 'default', - propertyValue, - !isGlobal ? mainClassName : '', - ) - : `${mainClassName}${getCount()}`; - if (defaultCondition === conditionName || !mediaQueryStr) { - classes.push({ - className, - css: { - [cssPropertyName]: propertyValue, - }, - }); - } else { - classes.push({ - className, - css: { - [mediaQueryStr]: { - [cssPropertyName]: propertyValue, - }, - }, - }); - } - const classMap = runtimeConfig.styles[cssPropertyName] ?? {}; - const conditionClassMap = classMap[propertyValue] ?? {}; - conditionClassMap[conditionName] = className; - if (conditionName === defaultCondition) { - conditionClassMap.$$default = className; - } - classMap[propertyValue] = conditionClassMap; - runtimeConfig.styles[cssPropertyName] = classMap; - }); - }); - }); - - return { - classes, - runtimeConfig, - }; -} diff --git a/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts b/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts deleted file mode 100644 index c439ccadacbe8f..00000000000000 --- a/packages/pigment-css-react/src/utils/cssFnValueToVariable.ts +++ /dev/null @@ -1,217 +0,0 @@ -import type { ExpressionValue, FunctionValue } from '@wyw-in-js/shared'; -import { transformSync, type Node } from '@babel/core'; -import { parseExpression } from '@babel/parser'; -import * as t from '@babel/types'; -import type { Expression } from '@babel/types'; -import { isUnitLess } from './isUnitLess'; -import { cssFunctionTransformerPlugin } from './cssFunctionTransformerPlugin'; -import type { Theme } from './extendTheme'; - -interface StyleObj { - [key: string]: string | number | (() => void) | StyleObj; -} - -export type PluginCustomOptions = { - /** - * Object to pass as parameter to the styled css callback functions. - */ - themeArgs?: { theme?: Theme }; - /** - * Customize the output CSS. Mainly used for RTL support right now. - */ - css?: { - /** - * To denote that whatever default css is being authored pertains to this - * direction so that when Pigment CSS generates the CSS for the other direction, - * it can revert the direction of the selector accordingly. - * @default 'ltr' - */ - defaultDirection: 'ltr' | 'rtl'; - /** - * Pass this as true if you want to output the CSS for both ltr and rtl. - * The css of the non-default direction will be wrapped in a `dir` selector. - */ - generateForBothDir: boolean; - /** - * Pass this callback to customize the selector for the `dir` attribute. The default - * is [dir=ltr] or [dir=rtl]. - */ - getDirSelector?: (dir: 'ltr' | 'rtl') => string; - }; -}; - -type CssFnValueToVariableParams = { - styleObj: unknown; - expressionValue: ExpressionValue | null; - getVariableName: (cssKey: string, source: string, hasUnit: boolean) => string; - filename?: string | null; - options: PluginCustomOptions; - includeThemeArg?: boolean; - themeImportIdentifier?: string; -}; - -// @TODO - Implement default theme argument for non-theme config as well. -function parseAndWrapExpression( - functionString: string, - expressionValue?: FunctionValue, - themeImportIdentifier?: string, -) { - if (!expressionValue) { - return parseExpression(functionString); - } - const expression = parseExpression(functionString); - if (expression.type === 'FunctionExpression' || expression.type === 'ArrowFunctionExpression') { - // let parsedParentExpression = expressionCache.get(expressionValue); - // if (!parsedParentExpression) { - // parsedParentExpression = parseExpression(expressionValue.source); - // if (!parsedParentExpression) { - // throw new Error("MUI: Could not parse styled function's source."); - // } - // } - expression.params.push( - t.assignmentPattern(t.identifier('theme'), t.identifier(themeImportIdentifier ?? 'theme')), - ); - } - return expression; -} - -function transformThemeKeysInFn( - styleKey: string, - functionString: string, - options: PluginCustomOptions, - filename?: string, - expressionValue?: FunctionValue, - themeImportIdentifier?: string, -) { - const { themeArgs: { theme } = {} } = options; - - // return the function as-is if sxConfig does not contain - // this css key - if (!theme) { - return parseAndWrapExpression(functionString, expressionValue, themeImportIdentifier); - } - - const result = transformSync(functionString, { - plugins: [ - [ - cssFunctionTransformerPlugin, - { - styleKey, - options, - }, - ], - ], - filename: filename ?? 'intermediate-fn.ts', - ast: true, - configFile: false, - babelrc: false, - }); - const firstItem = result?.ast?.program.body[0]; - if (!firstItem) { - return parseAndWrapExpression(functionString, expressionValue, themeImportIdentifier); - } - const defaultThemeParam = t.assignmentPattern( - t.identifier('theme'), - t.identifier(themeImportIdentifier ?? 'theme'), - ); - if (firstItem.type === 'ExpressionStatement') { - const { expression } = firstItem; - if (expression.type === 'ArrowFunctionExpression' || expression.type === 'FunctionExpression') { - expression.params.push(defaultThemeParam); - } - return expression; - } - if (firstItem.type === 'FunctionDeclaration') { - return t.functionExpression(null, [...firstItem.params, defaultThemeParam], firstItem.body); - } - return parseAndWrapExpression(functionString, expressionValue, themeImportIdentifier); -} - -function iterateAndReplaceFunctions( - styleObj: unknown, - expressionValue: ExpressionValue | null, - getVariableName: (cssKey: string, source: string, hasUnit: boolean) => string, - options: PluginCustomOptions, - acc: [string, Node, boolean][], - filename?: string, - themeImportIdentifier?: string, - includeThemeArg = false, -) { - const css = styleObj as StyleObj; - Object.keys(css).forEach((key) => { - const value = css[key]; - - if (typeof value === 'object') { - if (!Array.isArray(value)) { - iterateAndReplaceFunctions( - value, - expressionValue, - getVariableName, - options, - acc, - filename, - themeImportIdentifier, - includeThemeArg, - ); - } - return; - } - - if (typeof value !== 'function') { - return; - } - - try { - const fnString = value.toString(); - const expression = transformThemeKeysInFn( - key, - fnString, - options, - filename, - includeThemeArg && expressionValue ? (expressionValue as FunctionValue) : undefined, - themeImportIdentifier, - ); - const unitLess = isUnitLess(key); - const variableId = getVariableName(key, fnString, unitLess); - acc.push([variableId, expression, unitLess]); - css[key] = `var(--${variableId})`; - } catch (ex) { - const err = expressionValue?.buildCodeFrameError( - (ex as Error).message || 'Could not parse function expression.', - ) as Error; - if (!err) { - throw ex; - } - if ('cause' in err) { - err.cause = ex; - } - throw err; - } - }); -} - -/** - * Goes through the css object and identifies any keys where the value is a function and replaces the function with a variable id. - */ -export function cssFnValueToVariable({ - styleObj, - expressionValue, - getVariableName, - filename, - options, - themeImportIdentifier, - includeThemeArg = false, -}: CssFnValueToVariableParams) { - const acc: [string, Expression, boolean][] = []; - iterateAndReplaceFunctions( - styleObj, - expressionValue, - getVariableName, - options, - acc, - filename ?? undefined, - themeImportIdentifier, - includeThemeArg, - ); - return acc; -} diff --git a/packages/pigment-css-react/src/utils/cssFunctionTransformerPlugin.ts b/packages/pigment-css-react/src/utils/cssFunctionTransformerPlugin.ts deleted file mode 100644 index 1a4985c50f0625..00000000000000 --- a/packages/pigment-css-react/src/utils/cssFunctionTransformerPlugin.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { declare } from '@babel/helper-plugin-utils'; -import { unstable_defaultSxConfig as defaultSxConfig } from '@mui/system/styleFunctionSx'; -import get from 'lodash/get'; -import type { PluginCustomOptions } from './cssFnValueToVariable'; - -type BabelPluginOptions = { - styleKey: string; - options: PluginCustomOptions; -}; - -/** - * Replaces all usage of theme key strings inside runtime functions with it's equivalent css variable. - * For ex, for this function - * ```ts - * (props: any) => (props.isRed ? 'primary.main' : 'secondary.main') - * ``` - * The output will be - * ```ts - * (props) => (props.isRed ? 'var(--mui-palette-primary-main)' : 'var(--mui-palette-secondary-main)') - * ``` - */ -const cssFunctionTransformerPlugin = declare((api, pluginOptions) => { - const { types: t } = api; - const { - options: { themeArgs: { theme } = {} }, - styleKey, - } = pluginOptions; - const config = theme?.unstable_sxConfig ?? defaultSxConfig; - const cssPropOptions = config[styleKey]; - const themeKey = cssPropOptions?.themeKey; - const finalPrefix = theme?.cssVarPrefix || ''; - - return { - name: '@pigmentcss/zero-internal/cssFunctionTransformerPlugin', - visitor: { - // @TODO - Maybe add support for plain strings in template - // literals as well. - StringLiteral(path) { - const val = path.node.value; - if (val.startsWith('var(') || !val.includes('.')) { - return; - } - if (themeKey === 'typography' && val === 'inherit') { - return; - } - const propertyThemeKey = themeKey ?? val.split('.')[0]; - const themeValue = - get(theme, `${propertyThemeKey}.${val}`) ?? - (theme?.vars ? get(theme.vars, `${propertyThemeKey}.${val}`) : undefined); - if (!themeValue) { - console.warn( - `MUI: Value for key: ${val} does not exist in "theme.${propertyThemeKey}" or "theme.vars.${propertyThemeKey}"`, - ); - } - const themeKeyArr = val.split('.').join('-'); - path.replaceWith( - t.stringLiteral(`var(--${finalPrefix}${propertyThemeKey}-${themeKeyArr})`), - ); - }, - }, - }; -}); - -export { cssFunctionTransformerPlugin }; diff --git a/packages/pigment-css-react/src/utils/emotion.ts b/packages/pigment-css-react/src/utils/emotion.ts deleted file mode 100644 index 8c5ad9b5e1fa2e..00000000000000 --- a/packages/pigment-css-react/src/utils/emotion.ts +++ /dev/null @@ -1,8 +0,0 @@ -import createEmotion from '@emotion/css/create-instance'; - -const { keyframes, cache, css } = createEmotion({ - stylisPlugins: [], - key: 'zero', -}); - -export { keyframes, cache, css }; diff --git a/packages/pigment-css-react/src/utils/extendTheme.ts b/packages/pigment-css-react/src/utils/extendTheme.ts deleted file mode 100644 index aab9ac6607a01d..00000000000000 --- a/packages/pigment-css-react/src/utils/extendTheme.ts +++ /dev/null @@ -1,164 +0,0 @@ -import { prepareCssVars } from '@mui/system/cssVars'; -import type { SxConfig } from '@mui/system/styleFunctionSx'; -import type { CSSObject } from '../base'; - -export interface ThemeInput extends Record { - /** - * The prefix to be used for the CSS variables. - */ - cssVarPrefix?: string; - /** - * The color schemes to be used for the theme. - */ - colorSchemes?: Record; - /** - * The default color scheme to be used for the theme. It must be one of the keys from `theme.colorSchemes`. - * Required when `colorSchemes` is provided. - * @default 'light' - */ - defaultColorScheme?: ColorScheme; - /** - * If provided, it will be used to create a selector for the color scheme. - * This is useful if you want to use class or data-* attributes to apply the color scheme. - * - * The callback receives the colorScheme with the possible values of: - * - undefined: the selector for tokens that are not color scheme dependent - * - string: the selector for the color scheme - * - * @example - * // class selector - * (colorScheme) => colorScheme !== 'light' ? `.theme-${colorScheme}` : ":root" - * - * @example - * // data-* attribute selector - * (colorScheme) => colorScheme !== 'light' ? `[data-theme="${colorScheme}"`] : ":root" - */ - getSelector?: ( - colorScheme: ColorScheme | undefined, - css: Record, - ) => string | Record; - /** - * A function to skip generating a CSS variable for a specific path or value. - * - * Note: properties with function as a value are always skipped. - * - * @example - * // skip the `meta.*` fields from generating CSS variables and `theme.vars` - * (keys, value) => keys[0] === 'meta' - * - */ - shouldSkipGeneratingVar?: (objectPathKeys: Array, value: string | number) => boolean; - components?: Partial< - Record< - string, - { - styleOverrides?: Record; - defaultProps: Record; - } - > - >; -} - -export type ExtendTheme< - Options extends { - colorScheme: string; - tokens: Record; - } = { - colorScheme: string; - tokens: Record; - }, -> = ThemeInput & - Options['tokens'] & { - vars: Options['tokens']; - applyStyles: ( - colorScheme: Options['colorScheme'], - styles: CSSObject, - ) => Record>; - getColorSchemeSelector: (colorScheme: Options['colorScheme']) => string; - generateStyleSheets: () => Array>; - unstable_sxConfig?: SxConfig; - }; - -export type Theme = Record; - -/** - * A utility to tell zero-runtime to generate CSS variables for the theme. - */ -export function extendTheme< - Options extends { - colorScheme: string; - tokens: Record; - } = { - colorScheme: string; - tokens: Record; - }, ->(theme: ThemeInput) { - const { - cssVarPrefix, - shouldSkipGeneratingVar, - getSelector = defaultGetSelector, - defaultColorScheme = 'light', - ...otherTheme - } = theme; - - function defaultGetSelector( - colorScheme: string | undefined, - css: Record, - ): string | Record { - if (colorScheme === 'light' && defaultColorScheme !== 'light') { - return { - '@media (prefers-color-scheme: light)': { - ':root': css, - }, - }; - } - if (colorScheme === 'dark' && defaultColorScheme !== 'dark') { - return { - '@media (prefers-color-scheme: dark)': { - ':root': css, - }, - }; - } - return ':root'; - } - - if ( - theme.colorSchemes && - (!defaultColorScheme || !Object.keys(theme.colorSchemes).includes(defaultColorScheme)) - ) { - throw new Error( - `Zero: \`defaultColorScheme\` must be one of ${JSON.stringify( - theme.colorSchemes, - )}, but got "\`${theme.defaultColorScheme}\`".`, - ); - } - - const parserConfig = { - prefix: cssVarPrefix, - shouldSkipGeneratingVar, - getSelector, - }; - const { generateThemeVars, generateStyleSheets } = prepareCssVars(otherTheme, parserConfig); - - const finalTheme = { - ...theme, - defaultColorScheme, - vars: generateThemeVars(), - generateStyleSheets, - } as unknown as ExtendTheme<{ colorScheme: Options['colorScheme']; tokens: Options['tokens'] }>; - - finalTheme.getColorSchemeSelector = (colorScheme: string) => { - if (!theme.getSelector) { - return `@media (prefers-color-scheme: ${colorScheme})`; - } - return `:where(${theme.getSelector(colorScheme, {})}) &`; - }; - - finalTheme.applyStyles = function applyStyles(colorScheme, styles) { - return { - [this.getColorSchemeSelector(colorScheme)]: styles, - }; - }; - - return finalTheme; -} diff --git a/packages/pigment-css-react/src/utils/generateCss.ts b/packages/pigment-css-react/src/utils/generateCss.ts deleted file mode 100644 index 99203736139704..00000000000000 --- a/packages/pigment-css-react/src/utils/generateCss.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { serializeStyles } from '@emotion/serialize'; -import { Theme } from './extendTheme'; - -export function generateTokenCss(theme: Theme) { - // use emotion to serialize the object to css string - const { styles } = serializeStyles(theme.generateStyleSheets?.() || []); - return styles; -} - -export function generateThemeTokens(theme: Theme) { - if (!theme || typeof theme !== 'object') { - return {}; - } - // is created using extendTheme - if ('vars' in theme && theme.vars) { - return { - vars: theme.vars, - }; - } - return {}; -} diff --git a/packages/pigment-css-react/src/utils/index.ts b/packages/pigment-css-react/src/utils/index.ts deleted file mode 100644 index 08259f964e184f..00000000000000 --- a/packages/pigment-css-react/src/utils/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export type { PluginCustomOptions } from './cssFnValueToVariable'; -export * from './preprocessor'; -export * from './generateCss'; -export * from './extendTheme'; diff --git a/packages/pigment-css-react/src/utils/isUnitLess.ts b/packages/pigment-css-react/src/utils/isUnitLess.ts deleted file mode 100644 index d1fdc5bf6ffa2c..00000000000000 --- a/packages/pigment-css-react/src/utils/isUnitLess.ts +++ /dev/null @@ -1,56 +0,0 @@ -// Copied over from https://github.com/emotion-js/emotion/blob/main/packages/unitless/src/index.js -// since typings of @emotion/unitless are broken. PR to fix here - https://github.com/emotion-js/emotion/pull/3088 -const unitlessKeys: { [key: string]: 1 } = { - animationIterationCount: 1, - aspectRatio: 1, - borderImageOutset: 1, - borderImageSlice: 1, - borderImageWidth: 1, - boxFlex: 1, - boxFlexGroup: 1, - boxOrdinalGroup: 1, - columnCount: 1, - columns: 1, - flex: 1, - flexGrow: 1, - flexPositive: 1, - flexShrink: 1, - flexNegative: 1, - flexOrder: 1, - gridRow: 1, - gridRowEnd: 1, - gridRowSpan: 1, - gridRowStart: 1, - gridColumn: 1, - gridColumnEnd: 1, - gridColumnSpan: 1, - gridColumnStart: 1, - msGridRow: 1, - msGridRowSpan: 1, - msGridColumn: 1, - msGridColumnSpan: 1, - fontWeight: 1, - lineHeight: 1, - opacity: 1, - order: 1, - orphans: 1, - tabSize: 1, - widows: 1, - zIndex: 1, - zoom: 1, - WebkitLineClamp: 1, - - // SVG-related properties - fillOpacity: 1, - floodOpacity: 1, - stopOpacity: 1, - strokeDasharray: 1, - strokeDashoffset: 1, - strokeMiterlimit: 1, - strokeOpacity: 1, - strokeWidth: 1, -}; - -export function isUnitLess(cssKey: string) { - return unitlessKeys[cssKey] === 1 || cssKey.startsWith('--'); -} diff --git a/packages/pigment-css-react/src/utils/preprocessor.ts b/packages/pigment-css-react/src/utils/preprocessor.ts deleted file mode 100644 index 48b135fc938f39..00000000000000 --- a/packages/pigment-css-react/src/utils/preprocessor.ts +++ /dev/null @@ -1,61 +0,0 @@ -import type { Element } from 'stylis'; -import { serialize, compile, stringify, middleware } from 'stylis'; -import rtlPlugin from 'stylis-plugin-rtl'; -import { type PluginCustomOptions } from './cssFnValueToVariable'; - -function globalSelector(element: Element) { - switch (element.type) { - case 'rule': - element.props = (element.props as string[]).map((value) => { - if (value.match(/(:where|:is)\(/)) { - value = value.replace(/\.[^:]+(:where|:is)/, '$1'); - return value; - } - return value; - }); - break; - default: - break; - } -} - -function getSerializer(includeRtl?: boolean) { - if (!includeRtl) { - return middleware([globalSelector, stringify]); - } - return middleware([globalSelector, rtlPlugin, stringify]); -} - -const serializer = getSerializer(); -const serializerRtl = getSerializer(true); - -const stylis = (css: string, serializerParam = serializer) => - serialize(compile(css), serializerParam); - -const defaultGetDirSelector = (dir: 'ltr' | 'rtl') => `[dir=${dir}]`; - -export function preprocessor( - selector: string, - cssText: string, - options?: PluginCustomOptions['css'], -) { - const { - defaultDirection = 'ltr', - generateForBothDir = false, - getDirSelector = defaultGetDirSelector, - } = options || {}; - let css = ''; - if (cssText.startsWith('@keyframes')) { - css += stylis(cssText.replace('@keyframes', `@keyframes ${selector}`)); - return css; - } - css += stylis(`${selector}{${cssText}}`); - if (generateForBothDir) { - css += stylis( - `${getDirSelector(defaultDirection === 'ltr' ? 'rtl' : 'ltr')} ${selector}{${cssText}}`, - serializerRtl, - ); - } - - return css; -} diff --git a/packages/pigment-css-react/src/utils/processCssObject.ts b/packages/pigment-css-react/src/utils/processCssObject.ts deleted file mode 100644 index 27412b58af4cf1..00000000000000 --- a/packages/pigment-css-react/src/utils/processCssObject.ts +++ /dev/null @@ -1,24 +0,0 @@ -import type { CSSObject } from '@emotion/css'; -// @TODO - Ideally, this should be replicated here instead of importing. -import styleFunctionSx from '@mui/system/styleFunctionSx'; -import { css, cache } from './emotion'; -import type { PluginCustomOptions } from './cssFnValueToVariable'; - -export function processCssObject( - cssObj: object, - themeArgs?: PluginCustomOptions['themeArgs'], - skipSx = true, -) { - const processedObj = ( - skipSx - ? cssObj - : styleFunctionSx({ - // Does not support shorthand as of now because - // it also adds the spacing multiplier - sx: () => cssObj, - ...themeArgs, - }) - ) as CSSObject; - const className = css(processedObj); - return cache.registered[className]; -} diff --git a/packages/pigment-css-react/src/utils/remove-prop-types-plugin.ts b/packages/pigment-css-react/src/utils/remove-prop-types-plugin.ts deleted file mode 100644 index de48af2ae2d0ba..00000000000000 --- a/packages/pigment-css-react/src/utils/remove-prop-types-plugin.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { declare } from '@babel/helper-plugin-utils'; - -export const removePropTypesPlugin = declare<{}>((api) => { - api.assertVersion(7); - return { - name: '@pigmentcss/wyw-remove-prop-types-plugin', - visitor: { - AssignmentExpression(path) { - const left = path.get('left'); - if (!left.isMemberExpression()) { - return; - } - const property = left.get('property'); - const isPropTypes = property.isIdentifier({ name: 'propTypes' }); - const isMuiName = property.isIdentifier({ name: 'muiName' }); - - if (!isPropTypes && !isMuiName) { - return; - } - const parentExpression = path.findParent((p) => p.isExpressionStatement()); - if (parentExpression) { - parentExpression.remove(); - } - }, - }, - }; -}); diff --git a/packages/pigment-css-react/src/utils/sx-plugin.ts b/packages/pigment-css-react/src/utils/sx-plugin.ts deleted file mode 100644 index 4265dcfb77ae33..00000000000000 --- a/packages/pigment-css-react/src/utils/sx-plugin.ts +++ /dev/null @@ -1,166 +0,0 @@ -import { addNamed } from '@babel/helper-module-imports'; -import { declare } from '@babel/helper-plugin-utils'; -import { NodePath } from '@babel/core'; -import * as Types from '@babel/types'; - -import { sxPropConverter } from './sxPropConverter'; - -function convertJsxMemberExpressionToMemberExpression( - t: typeof Types, - nodePath: NodePath, -): Types.MemberExpression { - const object = nodePath.get('object'); - const property = nodePath.get('property'); - - if (object.isJSXMemberExpression()) { - return t.memberExpression( - convertJsxMemberExpressionToMemberExpression(t, object), - t.identifier(property.node.name), - ); - } - return t.memberExpression( - t.identifier((object.node as Types.JSXIdentifier).name), - t.identifier(property.node.name), - ); -} - -function wrapWithSxComponent( - t: typeof Types, - tagNamePath: NodePath, - sxComponentName: string, -) { - const sxComponent = addNamed( - tagNamePath, - sxComponentName, - `${process.env.PACKAGE_NAME}/private-runtime`, - ); - const jsxElement = tagNamePath.findParent((p) => p.isJSXElement()); - if (!jsxElement?.isJSXElement()) { - return; - } - const component = t.jsxIdentifier(sxComponent.name); - - const newChildren = (jsxElement.get('children') ?? []).map((child) => child.node); - let sxComponentValue: Types.Identifier | Types.MemberExpression | null = null; - - if (tagNamePath.isJSXIdentifier()) { - sxComponentValue = t.identifier(tagNamePath.node.name); - } else if (tagNamePath.isJSXMemberExpression()) { - sxComponentValue = convertJsxMemberExpressionToMemberExpression(t, tagNamePath); - } - - const newElement = t.jsxElement( - t.jsxOpeningElement( - component, - [ - t.jsxAttribute( - t.jsxIdentifier('sxComponent'), - t.jsxExpressionContainer(sxComponentValue ?? t.nullLiteral()), - ), - ...jsxElement - .get('openingElement') - .get('attributes') - .map((attr) => attr.node), - ], - !newChildren.length, - ), - newChildren.length ? t.jsxClosingElement(component) : null, - newChildren, - !newChildren.length, - ); - jsxElement.replaceWith(newElement); -} - -function replaceNodePath( - expressionPath: NodePath, - namePath: NodePath, - importName: string, - t: typeof Types, - tagNamePath: NodePath< - Types.JSXIdentifier | Types.Identifier | Types.JSXMemberExpression | Types.MemberExpression - >, - sxComponentName: string, -) { - const sxIdentifier = addNamed(namePath, importName, process.env.PACKAGE_NAME as string); - let wasSxTransformed = false; - - const wrapWithSxCall = (expPath: NodePath) => { - let tagNameArg: Types.Identifier | Types.MemberExpression | null = null; - if (tagNamePath.isJSXIdentifier()) { - tagNameArg = t.identifier(tagNamePath.node.name); - } else if (tagNamePath.isJSXMemberExpression()) { - tagNameArg = convertJsxMemberExpressionToMemberExpression(t, tagNamePath); - } else { - tagNameArg = tagNamePath.node as Types.Identifier | Types.MemberExpression; - } - expPath.replaceWith(t.callExpression(sxIdentifier, [expPath.node, tagNameArg])); - wasSxTransformed = true; - }; - - sxPropConverter(expressionPath, wrapWithSxCall); - - if (wasSxTransformed) { - if (tagNamePath.isJSXIdentifier() || tagNamePath.isJSXMemberExpression()) { - wrapWithSxComponent(t, tagNamePath, sxComponentName); - } - } -} - -export const babelPlugin = declare<{ - propName?: string; - importName?: string; - sxComponentName?: string; -}>((api, { propName = 'sx', importName = 'sx', sxComponentName = 'ForwardSx' }) => { - api.assertVersion(7); - const { types: t } = api; - return { - name: '@pigmentcss/sx-plugin', - visitor: { - JSXAttribute(path) { - const namePath = path.get('name'); - const openingElement = path.findParent((p) => p.isJSXOpeningElement()); - if ( - !openingElement || - !openingElement.isJSXOpeningElement() || - !namePath.isJSXIdentifier() || - namePath.node.name !== propName - ) { - return; - } - const tagName = openingElement.get('name'); - const valuePath = path.get('value'); - if (!valuePath.isJSXExpressionContainer()) { - return; - } - const expressionPath = valuePath.get('expression'); - if (!expressionPath.isExpression()) { - return; - } - // @ts-ignore - replaceNodePath(expressionPath, namePath, importName, t, tagName, sxComponentName); - }, - ObjectProperty(path) { - // @TODO - Maybe add support for React.createElement calls as well. - // Right now, it only checks for jsx(),jsxs(),jsxDEV() and jsxsDEV() calls. - const keyPath = path.get('key'); - if (!keyPath.isIdentifier() || keyPath.node.name !== propName) { - return; - } - const valuePath = path.get('value'); - if (!valuePath.isObjectExpression() && !valuePath.isArrowFunctionExpression()) { - return; - } - const parentJsxCall = path.findParent((p) => p.isCallExpression()); - if (!parentJsxCall || !parentJsxCall.isCallExpression()) { - return; - } - const callee = parentJsxCall.get('callee'); - if (!callee.isIdentifier() || !callee.node.name.includes('jsx')) { - return; - } - const jsxElement = parentJsxCall.get('arguments')[0] as NodePath; - replaceNodePath(valuePath, keyPath, importName, t, jsxElement, sxComponentName); - }, - }, - }; -}); diff --git a/packages/pigment-css-react/src/utils/sxObjectExtractor.ts b/packages/pigment-css-react/src/utils/sxObjectExtractor.ts deleted file mode 100644 index 01cc360fddc8d6..00000000000000 --- a/packages/pigment-css-react/src/utils/sxObjectExtractor.ts +++ /dev/null @@ -1,141 +0,0 @@ -import type { NodePath } from '@babel/core'; -import { arrowFunctionExpression, cloneNode } from '@babel/types'; -import type { - ArrowFunctionExpression, - Expression, - Identifier, - ObjectExpression, - PrivateName, -} from '@babel/types'; -import { findIdentifiers } from '@wyw-in-js/transform'; -import { isStaticObjectOrArrayExpression } from './checkStaticObjectOrArray'; - -function validateObjectKey( - keyPath: NodePath, - parentCall?: NodePath, -) { - const rootScope = keyPath.scope.getProgramParent(); - if (keyPath.isIdentifier()) { - return; - } - const identifiers = findIdentifiers([keyPath]); - if (!identifiers.length) { - return; - } - - // check if all the identifiers being used for the key, if it is not a static value, - // (ie, [theme.apply()] or [globalVariable]) are globally defined or not. - // Global means in the root scope (file scope) or in the same scope as the parentCall - const areAllGlobalIdentifiers = identifiers.every((item) => { - // get the definition AST node path of the identifier - const binding = item.scope.getBinding(item.node.name); - if (!binding) { - return false; - } - if ( - // if the identifier is defined in the same scope as the parentCall, ie, ({theme}) => ({color: theme.color}) - binding.path.findParent((parent) => parent === parentCall) || - // if the identifier is defined in the file scope - binding.path.scope === rootScope - ) { - return true; - } - return false; - }); - - if (!parentCall) { - if (areAllGlobalIdentifiers) { - return; - } - throw keyPath.buildCodeFrameError( - `${process.env.PACKAGE_NAME}: Expressions in css object keys are not supported.`, - ); - } - if (!areAllGlobalIdentifiers) { - throw keyPath.buildCodeFrameError( - `${process.env.PACKAGE_NAME}: Variables in css object keys should only use the passed theme(s) object or variables that are defined in the root scope.`, - ); - } -} - -function traverseObjectExpression( - nodePath: NodePath, - parentCall?: NodePath, -) { - const rootScope = nodePath.scope.getProgramParent(); - const properties = nodePath.get('properties'); - properties.forEach((property) => { - if (property.isObjectProperty()) { - validateObjectKey(property.get('key'), parentCall); - - const value = property.get('value'); - if (!value.isExpression()) { - throw value.buildCodeFrameError( - `${process.env.PACKAGE_NAME}: This value is not supported. It can only be static values or local variables.`, - ); - } - if (value.isObjectExpression()) { - traverseObjectExpression(value, parentCall); - } else if (!value.isLiteral() && !isStaticObjectOrArrayExpression(value)) { - const identifiers = findIdentifiers([value], 'reference'); - const localIdentifiers: NodePath[] = []; - identifiers.forEach((id) => { - if (!id.isIdentifier()) { - return; - } - const binding = id.scope.getBinding(id.node.name); - if (!binding) { - return; - } - if ((parentCall && binding.scope === parentCall.scope) || binding.scope === rootScope) { - return; - } - localIdentifiers.push(id); - }); - if (localIdentifiers.length) { - const arrowFn = arrowFunctionExpression( - localIdentifiers.map((i) => i.node), - cloneNode(value.node), - ); - value.replaceWith(arrowFn); - } - } - } else if (property.isSpreadElement()) { - const identifiers = findIdentifiers([property.get('argument')]); - if ( - !identifiers.every((id) => { - const binding = property.scope.getBinding(id.node.name); - // the indentifier definition should either be in the root scope or in the same scope - // as the object property, ie, ({theme}) => ({...theme.applyStyles()}) - return binding && (binding.scope === rootScope || binding.scope === property.scope); - }) - ) { - throw property.buildCodeFrameError( - `${process.env.PACKAGE_NAME}: You can only use variables in the spread that are defined in the root scope of the file.`, - ); - } - } else if (property.isObjectMethod()) { - throw property.buildCodeFrameError( - `${process.env.PACKAGE_NAME}: sx prop object does not support ObjectMethods.`, - ); - } else { - throw property.buildCodeFrameError( - `${process.env.PACKAGE_NAME}: Unknown property in object.`, - ); - } - }); -} - -export function sxObjectExtractor(nodePath: NodePath) { - if (nodePath.isObjectExpression()) { - traverseObjectExpression(nodePath); - } else if (nodePath.isArrowFunctionExpression()) { - const body = nodePath.get('body'); - if (!body.isObjectExpression()) { - throw body.buildCodeFrameError( - `${process.env.PACKAGE_NAME}: sx prop only supports arrow functions directly returning an object, for example () => ({color: 'red'}). You can accept theme object in the params if required.`, - ); - } - traverseObjectExpression(body, nodePath); - } -} diff --git a/packages/pigment-css-react/src/utils/sxPropConverter.ts b/packages/pigment-css-react/src/utils/sxPropConverter.ts deleted file mode 100644 index 838184239a2b19..00000000000000 --- a/packages/pigment-css-react/src/utils/sxPropConverter.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { NodePath } from '@babel/core'; -import { ArrowFunctionExpression, Expression, ObjectExpression } from '@babel/types'; -import { sxObjectExtractor } from './sxObjectExtractor'; - -function isAllowedExpression( - node: NodePath, -): node is NodePath | NodePath { - return node.isObjectExpression() || node.isArrowFunctionExpression(); -} - -export function sxPropConverter( - node: NodePath, - wrapWithSxCall: (expPath: NodePath) => void, -) { - if (node.isConditionalExpression()) { - const consequent = node.get('consequent'); - const alternate = node.get('alternate'); - - if (isAllowedExpression(consequent)) { - sxObjectExtractor(consequent); - wrapWithSxCall(consequent); - } - if (isAllowedExpression(alternate)) { - sxObjectExtractor(alternate); - wrapWithSxCall(alternate); - } - } else if (node.isLogicalExpression()) { - const right = node.get('right'); - if (isAllowedExpression(right)) { - sxObjectExtractor(right); - wrapWithSxCall(right); - } - } else if (isAllowedExpression(node)) { - sxObjectExtractor(node); - wrapWithSxCall(node); - } else if (node.isIdentifier()) { - const rootScope = node.scope.getProgramParent(); - const binding = node.scope.getBinding(node.node.name); - // Simplest case, ie, const styles = {static object} - // and is used as - if (binding?.scope === rootScope) { - wrapWithSxCall(node); - } - } -} diff --git a/packages/pigment-css-react/src/utils/valueToLiteral.ts b/packages/pigment-css-react/src/utils/valueToLiteral.ts deleted file mode 100644 index 8f737b17ade2ff..00000000000000 --- a/packages/pigment-css-react/src/utils/valueToLiteral.ts +++ /dev/null @@ -1,128 +0,0 @@ -import { types as t } from '@babel/core'; -import { parseExpression } from '@babel/parser'; -import { ExpressionValue, isBoxedPrimitive } from '@wyw-in-js/shared'; -import { Serializable } from '@wyw-in-js/transform'; - -export function isSerializable(o: unknown): o is Serializable { - if (Array.isArray(o)) { - return o.every(isSerializable); - } - - if (o === null) { - return true; - } - - if (isBoxedPrimitive(o)) { - return true; - } - - if (typeof o === 'object') { - return Object.values(o).every(isSerializable); - } - - return ( - typeof o === 'function' || - typeof o === 'string' || - typeof o === 'number' || - typeof o === 'boolean' - ); -} - -export function parseAndGenerateFunction(fnString: string, expression?: ExpressionValue) { - try { - const exp = parseExpression(fnString); - // a function or an arrow function expression - return exp as t.FunctionExpression | t.ArrowFunctionExpression; - } catch (ex) { - try { - const exp = parseExpression(`{${fnString}}`); - if (exp.type !== 'ObjectExpression') { - throw new Error('MUI: The expression must be an object literal.'); - } - const propMethod = exp.properties[0] as t.ObjectMethod; - return t.arrowFunctionExpression(propMethod.params, propMethod.body); - } catch (ex2) { - throw ( - expression?.buildCodeFrameError(`MUI: Could not parse the expression '${fnString}'.`) ?? - new Error(`MUI: Could not parse the given expression ${fnString}`) - ); - } - } -} - -/** - * Converts a javascript primitive to its Babel AST node representation. - */ -export function valueToLiteral(value: unknown, expression?: ExpressionValue): t.Expression { - if (value === undefined) { - return { - type: 'Identifier', - name: 'undefined', - }; - } - - if (typeof value === 'function') { - return parseAndGenerateFunction(value.toString(), expression); - } - - if (isSerializable(value)) { - if (value === null) { - return { - type: 'NullLiteral', - }; - } - - if (typeof value === 'string') { - return { - type: 'StringLiteral', - value, - }; - } - - if (typeof value === 'number') { - return { - type: 'NumericLiteral', - value, - }; - } - - if (typeof value === 'boolean') { - return { - type: 'BooleanLiteral', - value, - }; - } - - if (Array.isArray(value)) { - return { - type: 'ArrayExpression', - elements: value.map((v) => valueToLiteral(v, expression)), - }; - } - - return { - type: 'ObjectExpression', - properties: Object.entries(value).map(([key, v]) => ({ - type: 'ObjectProperty', - key: key.match(/^[a-zA-Z]\w*$/) - ? { - type: 'Identifier', - name: key, - } - : { - type: 'StringLiteral', - value: key, - }, - value: valueToLiteral(v, expression), - computed: false, - shorthand: false, - })), - }; - } - - throw ( - expression?.buildCodeFrameError( - `The expression evaluated to '${value}', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, for example - 'String(${expression.source})'.`, - ) ?? new Error(`Could not convert value: "${value}" to literal.`) - ); -} diff --git a/packages/pigment-css-react/styles.css b/packages/pigment-css-react/styles.css deleted file mode 100644 index d27283bddcbe05..00000000000000 --- a/packages/pigment-css-react/styles.css +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Placeholder file for generated theme - */ diff --git a/packages/pigment-css-react/tests/Box.spec.tsx b/packages/pigment-css-react/tests/Box.spec.tsx deleted file mode 100644 index 8b28efe600b1be..00000000000000 --- a/packages/pigment-css-react/tests/Box.spec.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; -import { Box } from '@pigment-css/react/Box'; - -export function App() { - return ( - - ({ color: 'primary' })}> - Hello{' '} - - Link - - - Dialog - - {/* @ts-expect-error */} - - Dialog 2 - - - - ); -} diff --git a/packages/pigment-css-react/tests/Box/box.test.tsx b/packages/pigment-css-react/tests/Box/box.test.tsx deleted file mode 100644 index a5a33298b875b4..00000000000000 --- a/packages/pigment-css-react/tests/Box/box.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import path from 'node:path'; -import { runTransformation, expect } from '../testUtils'; - -describe('Pigment CSS - Box', () => { - it('should transform and render sx prop', async () => { - const { output, fixture } = await runTransformation( - path.join(__dirname, 'fixtures/box.input.js'), - ); - - expect(output.js).to.equal(fixture.js); - expect(output.css).to.equal(fixture.css); - }); -}); diff --git a/packages/pigment-css-react/tests/Box/fixtures/box.input.js b/packages/pigment-css-react/tests/Box/fixtures/box.input.js deleted file mode 100644 index b8548e7690dc31..00000000000000 --- a/packages/pigment-css-react/tests/Box/fixtures/box.input.js +++ /dev/null @@ -1,20 +0,0 @@ -import Box from '@pigment-css/react/Box'; - -export function App() { - return ( - - Hello Box - - ); -} diff --git a/packages/pigment-css-react/tests/Box/fixtures/box.output.css b/packages/pigment-css-react/tests/Box/fixtures/box.output.css deleted file mode 100644 index eb1554a5a0285f..00000000000000 --- a/packages/pigment-css-react/tests/Box/fixtures/box.output.css +++ /dev/null @@ -1,9 +0,0 @@ -._1yemdgw { - margin: 0; - margin-block: 1rem; - padding: 0; - padding-left: 1.5rem; - display: flex; - flex-direction: column; - gap: 0.5rem; -} diff --git a/packages/pigment-css-react/tests/Box/fixtures/box.output.js b/packages/pigment-css-react/tests/Box/fixtures/box.output.js deleted file mode 100644 index 4f231e1a80fc4d..00000000000000 --- a/packages/pigment-css-react/tests/Box/fixtures/box.output.js +++ /dev/null @@ -1,10 +0,0 @@ -import { sx as _sx2 } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx } from '@pigment-css/react/private-runtime'; -import Box from '@pigment-css/react/Box'; -export function App() { - return ( - <_ForwardSx sxComponent={Box} as="ul" sx={'_1yemdgw'}> - Hello Box - - ); -} diff --git a/packages/pigment-css-react/tests/README.md b/packages/pigment-css-react/tests/README.md deleted file mode 100644 index 728d83d3822f49..00000000000000 --- a/packages/pigment-css-react/tests/README.md +++ /dev/null @@ -1,35 +0,0 @@ -# Pigment CSS testing - -## Folder structure - -- `tests` is the root folder for all tests - - `fixtures` contains all the fixtures for the tests - - `*.input.js` are the input files created manually - - `*.output.*` are the expected output files created by running the tests - - `*.test.js` are the test files that run the fixtures - -## Running tests - -At the root project terminal: - -```bash -pnpm nx run @pigment-css/react:test -``` - -To update the output fixtures: - -```bash -pnpm nx run @pigment-css/react:test:update -``` - -## Adding new tests - -Each folder inside `tests` is a Pigment CSS feature. To add a new test, create a new folder with the feature name and add a new test file with the `.test.js` extension. Inside the test file, import the fixtures and run the tests. - -## Adding new fixtures - -Create a new file name with `[name].input.js` and add `styled`, `css` or other Pigment CSS calls into the file. - -The first time you run the tests, the output files will be created automatically. Then check the output files to make sure they are correct. - -For any implementation changes after that, if you want to update the output files, run the tests with the `test:update` script. diff --git a/packages/pigment-css-react/tests/css/css.test.ts b/packages/pigment-css-react/tests/css/css.test.ts deleted file mode 100644 index d926f6de9a4162..00000000000000 --- a/packages/pigment-css-react/tests/css/css.test.ts +++ /dev/null @@ -1,40 +0,0 @@ -import path from 'node:path'; -import { runTransformation, expect } from '../testUtils'; - -const theme = { - palette: { - primary: { - main: 'red', - }, - }, - size: { - font: { - h1: '3rem', - }, - }, - components: { - MuiSlider: { - styleOverrides: { - rail: { - fontSize: '3rem', - }, - }, - }, - }, -}; - -describe('Pigment CSS - css', () => { - it('basics', async () => { - const { output, fixture } = await runTransformation( - path.join(__dirname, 'fixtures/css.input.js'), - { - themeArgs: { - theme, - }, - }, - ); - - expect(output.js).to.equal(fixture.js); - expect(output.css).to.equal(fixture.css); - }); -}); diff --git a/packages/pigment-css-react/tests/css/fixtures/css.input.js b/packages/pigment-css-react/tests/css/fixtures/css.input.js deleted file mode 100644 index 24519d991b09ac..00000000000000 --- a/packages/pigment-css-react/tests/css/fixtures/css.input.js +++ /dev/null @@ -1,6 +0,0 @@ -import { css } from '@pigment-css/react'; - -const cls1 = css` - color: ${({ theme }) => theme.palette.primary.main}; - font-size: ${({ theme }) => theme.size.font.h1}; -`; diff --git a/packages/pigment-css-react/tests/css/fixtures/css.output.css b/packages/pigment-css-react/tests/css/fixtures/css.output.css deleted file mode 100644 index 7b2e7bc2675ee9..00000000000000 --- a/packages/pigment-css-react/tests/css/fixtures/css.output.css +++ /dev/null @@ -1,4 +0,0 @@ -.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 deleted file mode 100644 index 351cb0daa5eb94..00000000000000 --- a/packages/pigment-css-react/tests/css/fixtures/css.output.js +++ /dev/null @@ -1 +0,0 @@ -const cls1 = 'c1pj8glw'; diff --git a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.input.js b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.input.js deleted file mode 100644 index d1c52344896f2d..00000000000000 --- a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.input.js +++ /dev/null @@ -1,29 +0,0 @@ -import { keyframes } from '@pigment-css/react'; - -const green = 'green'; - -const gradientKeyframe = keyframes(({ theme }) => ({ - '0%': { - background: theme.palette.primary.main, - }, - '50%': { - background: green, - }, - '100%': { - background: theme.palette.secondary.main, - }, -})); - -const gradientKeyframe2 = keyframes` - 0% { - background: ${({ theme }) => theme.palette.primary.main}; - } - - 50% { - background: ${green}; - } - - 100% { - background: ${({ theme }) => theme.palette.secondary.main}; - } -`; diff --git a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.css b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.css deleted file mode 100644 index 491c737fd38365..00000000000000 --- a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.css +++ /dev/null @@ -1,22 +0,0 @@ -@keyframes gpsum18 { - 0% { - background: red; - } - 50% { - background: green; - } - 100% { - background: blue; - } -} -@keyframes g1t1dgxp { - 0% { - background: red; - } - 50% { - background: green; - } - 100% { - background: blue; - } -} diff --git a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.js b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.js deleted file mode 100644 index 9674335eb2d8fd..00000000000000 --- a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.js +++ /dev/null @@ -1,2 +0,0 @@ -const gradientKeyframe = 'gpsum18'; -const gradientKeyframe2 = 'g1t1dgxp'; diff --git a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.input.js b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.input.js deleted file mode 100644 index 4c4103c6f66c3a..00000000000000 --- a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.input.js +++ /dev/null @@ -1,20 +0,0 @@ -import { keyframes } from '@pigment-css/react'; - -const rotateKeyframe = keyframes({ - from: { - transform: 'rotate(360deg)', - }, - to: { - transform: 'rotate(0deg)', - }, -}); - -const rotateKeyframe2 = keyframes` - from { - transform: rotate(360deg); - } - - to { - transform: rotate(0deg); - } -`; diff --git a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.css b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.css deleted file mode 100644 index 255fbfb069242c..00000000000000 --- a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.css +++ /dev/null @@ -1,16 +0,0 @@ -@keyframes rr2uptz { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} -@keyframes r1dngkim { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} diff --git a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.js b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.js deleted file mode 100644 index bab4d4fc9bd619..00000000000000 --- a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes.output.js +++ /dev/null @@ -1,2 +0,0 @@ -const rotateKeyframe = 'rr2uptz'; -const rotateKeyframe2 = 'r1dngkim'; diff --git a/packages/pigment-css-react/tests/keyframes/keyframes.test.ts b/packages/pigment-css-react/tests/keyframes/keyframes.test.ts deleted file mode 100644 index 87f956f4c0f17b..00000000000000 --- a/packages/pigment-css-react/tests/keyframes/keyframes.test.ts +++ /dev/null @@ -1,36 +0,0 @@ -import path from 'node:path'; -import { runTransformation, expect } from '../testUtils'; - -describe('Pigment CSS - keyframes', () => { - it('basics', async () => { - const { output, fixture } = await runTransformation( - path.join(__dirname, 'fixtures/keyframes.input.js'), - ); - - expect(output.js).to.equal(fixture.js); - expect(output.css).to.equal(fixture.css); - }); - - it('should transform correctly with theme', async () => { - const { output, fixture } = await runTransformation( - path.join(__dirname, 'fixtures/keyframes-theme.input.js'), - { - themeArgs: { - theme: { - palette: { - primary: { - main: 'red', - }, - secondary: { - main: 'blue', - }, - }, - }, - }, - }, - ); - - expect(output.js).to.equal(fixture.js); - expect(output.css).to.equal(fixture.css); - }); -}); diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.input.js b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.input.js deleted file mode 100644 index 7fd5497f9a95e2..00000000000000 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.input.js +++ /dev/null @@ -1,33 +0,0 @@ -import { styled, keyframes } from '@pigment-css/react'; - -const rotateKeyframe = keyframes({ - from: { - transform: 'translateX(0%)', - }, - to: { - transform: 'translateX(100%)', - }, -}); - -const Component = styled.div(({ theme }) => ({ - animation: `${rotateKeyframe} 2s ease-out 0s infinite`, - marginLeft: 10, -})); - -export const SliderRail = styled('span', { - name: 'MuiSlider', - slot: 'Rail', -})` - display: block; - position: absolute; - left: 0; - top: 0; - border-top-left-radius: 3px; -`; - -const SliderRail2 = styled.span` - ${SliderRail} { - padding-inline-start: none; - margin: 0px 10px 10px 30px; - } -`; diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.css deleted file mode 100644 index 3cbf43f433094d..00000000000000 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.css +++ /dev/null @@ -1,44 +0,0 @@ -@keyframes r14vlhb { - from { - transform: translateX(0%); - } - to { - transform: translateX(100%); - } -} -.c194j3ko { - animation: r14vlhb 2s ease-out 0s infinite; - margin-left: 10px; -} -:dir(rtl) .c194j3ko { - animation: r14vlhb 2s ease-out 0s infinite; - margin-right: 10px; -} -.sgip8u5 { - display: block; - position: absolute; - left: 0; - top: 0; - border-top-left-radius: 3px; -} -:dir(rtl) .sgip8u5 { - display: block; - position: absolute; - right: 0; - top: 0; - border-top-right-radius: 3px; -} -.sgip8u5-1 { - font-size: 1.5rem; -} -:dir(rtl) .sgip8u5-1 { - font-size: 1.5rem; -} -.smip3v5 .sgip8u5 { - padding-inline-start: none; - margin: 0px 10px 10px 30px; -} -:dir(rtl) .smip3v5 .sgip8u5 { - padding-inline-start: none; - margin: 0px 30px 10px 10px; -} diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js deleted file mode 100644 index f53fc340ec7dea..00000000000000 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js +++ /dev/null @@ -1,14 +0,0 @@ -import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react'; -import _theme from '@pigment-css/react/theme'; -const Component = /*#__PURE__*/ _styled('div')({ - classes: ['c194j3ko'], -}); -export const SliderRail = /*#__PURE__*/ _styled2('span', { - name: 'MuiSlider', - slot: 'Rail', -})({ - classes: ['sgip8u5', 'sgip8u5-1'], -}); -const SliderRail2 = /*#__PURE__*/ _styled3('span')({ - classes: ['smip3v5'], -}); diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.input.js b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.input.js deleted file mode 100644 index d06b7864ff96d4..00000000000000 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.input.js +++ /dev/null @@ -1,54 +0,0 @@ -import { styled, keyframes } from '@pigment-css/react'; -import PropTypes from 'prop-types'; - -const rotateKeyframe = keyframes({ - from: { - transform: 'rotate(360deg)', - }, - to: { - transform: 'rotate(0deg)', - }, -}); - -const Component = styled.div(({ theme }) => ({ - color: (theme.vars ?? theme).palette.primary.main, - animation: `${rotateKeyframe} 2s ease-out 0s infinite`, -})); - -const SliderRail = styled('span', { - name: 'MuiSlider', - slot: 'Rail', -})` - display: block; - position: absolute; - border-radius: inherit; - background-color: currentColor; - opacity: 0.38; - font-size: ${({ theme }) => (theme.vars ?? theme).size.font.h1}; -`; - -const SliderRail2 = styled.span` - display: block; - opacity: 0.38; - font-size: ${({ theme }) => (theme.vars ?? theme).size.font.h1}; - ${SliderRail} { - display: none; - } -`; - -export function App() { - return ( - - - - - ); -} - -process.env.NODE_ENV !== 'production' - ? (App.propTypes = { - children: PropTypes.element, - }) - : void 0; - -process.env.NODE_ENV !== 'production' ? (App.muiName = 'App') : void 0; diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.css deleted file mode 100644 index 2d6da6559ab971..00000000000000 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.css +++ /dev/null @@ -1,31 +0,0 @@ -@keyframes rnit1sq { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} -.c1h7nuob { - color: red; - animation: rnit1sq 2s ease-out 0s infinite; -} -.s13xim6i { - display: block; - position: absolute; - border-radius: inherit; - background-color: currentColor; - opacity: 0.38; - font-size: 3rem; -} -.s13xim6i-1 { - font-size: 1.5rem; -} -.s1emg10t { - display: block; - opacity: 0.38; - font-size: 3rem; -} -.s1emg10t .s13xim6i { - display: none; -} diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js deleted file mode 100644 index 3e3eae8b2f3244..00000000000000 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js +++ /dev/null @@ -1,29 +0,0 @@ -import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react'; -import _theme from '@pigment-css/react/theme'; -import PropTypes from 'prop-types'; -const Component = /*#__PURE__*/ _styled('div')({ - classes: ['c1h7nuob'], -}); -const SliderRail = /*#__PURE__*/ _styled2('span', { - name: 'MuiSlider', - slot: 'Rail', -})({ - classes: ['s13xim6i', 's13xim6i-1'], -}); -const SliderRail2 = /*#__PURE__*/ _styled3('span')({ - classes: ['s1emg10t'], -}); -export function App() { - return ( - - - - - ); -} -process.env.NODE_ENV !== 'production' - ? (App.propTypes = { - children: PropTypes.element, - }) - : void 0; -process.env.NODE_ENV !== 'production' ? (App.muiName = 'App') : void 0; diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-variants.input.js b/packages/pigment-css-react/tests/styled/fixtures/styled-variants.input.js deleted file mode 100644 index 61b1d00d14b0a9..00000000000000 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-variants.input.js +++ /dev/null @@ -1,18 +0,0 @@ -import { styled } from '@pigment-css/react'; - -const Button = styled('button')({ - variants: [ - { - props: { color: 'primary' }, - style: { - color: 'tomato', - }, - }, - { - props: ({ ownerState }) => ownerState.color === 'secondary', - style: { - color: 'salmon', - }, - }, - ], -}); diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.css deleted file mode 100644 index 4a6e20753801af..00000000000000 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.css +++ /dev/null @@ -1,6 +0,0 @@ -.b1prasel-1 { - color: tomato; -} -.b1prasel-2 { - color: salmon; -} diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.js deleted file mode 100644 index 6b450dcd6f112a..00000000000000 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-variants.output.js +++ /dev/null @@ -1,17 +0,0 @@ -import { styled as _styled } from '@pigment-css/react'; -import _theme from '@pigment-css/react/theme'; -const Button = /*#__PURE__*/ _styled('button')({ - classes: ['b1prasel'], - variants: [ - { - props: { - color: 'primary', - }, - className: 'b1prasel-1', - }, - { - props: ({ ownerState }) => ownerState.color === 'secondary', - className: 'b1prasel-2', - }, - ], -}); diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled.input.js b/packages/pigment-css-react/tests/styled/fixtures/styled.input.js deleted file mode 100644 index 355ba897b1d1f4..00000000000000 --- a/packages/pigment-css-react/tests/styled/fixtures/styled.input.js +++ /dev/null @@ -1,50 +0,0 @@ -import { styled, keyframes } from '@pigment-css/react'; -import PropTypes from 'prop-types'; - -const rotateKeyframe = keyframes({ - from: { - transform: 'rotate(360deg)', - }, - to: { - transform: 'rotate(0deg)', - }, -}); - -const Component = styled.div(({ theme }) => ({ - color: '#ff5252', - animation: `${rotateKeyframe} 2s ease-out 0s infinite`, -})); - -export const SliderRail = styled('span', { - name: 'MuiSlider', - slot: 'Rail', -})` - display: block; - position: absolute; - border-radius: inherit; - background-color: currentColor; - opacity: 0.38; -`; - -const SliderRail2 = styled.span` - display: block; - opacity: 0.38; - ${SliderRail} { - display: none; - } -`; - -export function App() { - return ( - - - - - ); -} - -App.propTypes = { - children: PropTypes.element, -}; - -App.muiName = 'App'; diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled.output.css b/packages/pigment-css-react/tests/styled/fixtures/styled.output.css deleted file mode 100644 index f21339761843bf..00000000000000 --- a/packages/pigment-css-react/tests/styled/fixtures/styled.output.css +++ /dev/null @@ -1,26 +0,0 @@ -@keyframes r1sz5zcv { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} -.c1aiqtje { - color: #ff5252; - animation: r1sz5zcv 2s ease-out 0s infinite; -} -.sj0zd45 { - display: block; - position: absolute; - border-radius: inherit; - background-color: currentColor; - opacity: 0.38; -} -.shdkmm7 { - display: block; - opacity: 0.38; -} -.shdkmm7 .sj0zd45 { - display: none; -} diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled.output.js deleted file mode 100644 index 5ae7640121516f..00000000000000 --- a/packages/pigment-css-react/tests/styled/fixtures/styled.output.js +++ /dev/null @@ -1,27 +0,0 @@ -import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react'; -import _theme from '@pigment-css/react/theme'; -import PropTypes from 'prop-types'; -const Component = /*#__PURE__*/ _styled('div')({ - classes: ['c1aiqtje'], -}); -export const SliderRail = /*#__PURE__*/ _styled2('span', { - name: 'MuiSlider', - slot: 'Rail', -})({ - classes: ['sj0zd45'], -}); -const SliderRail2 = /*#__PURE__*/ _styled3('span')({ - classes: ['shdkmm7'], -}); -export function App() { - return ( - - - - - ); -} -App.propTypes = { - children: PropTypes.element, -}; -App.muiName = 'App'; diff --git a/packages/pigment-css-react/tests/styled/runtime-styled.test.js b/packages/pigment-css-react/tests/styled/runtime-styled.test.js deleted file mode 100644 index d2f325b082b0a3..00000000000000 --- a/packages/pigment-css-react/tests/styled/runtime-styled.test.js +++ /dev/null @@ -1,205 +0,0 @@ -import * as React from 'react'; -import { expect } from 'chai'; -import { createRenderer } from '@mui-internal/test-utils'; -import styled from '../../src/styled'; - -describe('props filtering', () => { - const { render } = createRenderer(); - - it('composes shouldForwardProp on composed styled components', () => { - const StyledDiv = styled('div', { - shouldForwardProp: (prop) => prop !== 'foo', - })(); - - const ComposedDiv = styled(StyledDiv, { - shouldForwardProp: (prop) => prop !== 'bar', - })(); - - const { container } = render(); - - expect(container.firstChild).to.not.have.attribute('foo'); - expect(container.firstChild).to.not.have.attribute('bar'); - expect(container.firstChild).to.have.attribute('xyz', 'true'); - }); - - it('custom shouldForwardProp works', () => { - function Svg(props) { - return ( - - - - ); - } - - const StyledSvg = styled(Svg, { - shouldForwardProp: (prop) => ['className', 'width', 'height'].indexOf(prop) !== -1, - })` - &, - & * { - fill: ${({ color }) => color}; - } - `; - - const { container } = render(); - expect(container.firstChild).to.not.have.attribute('color'); - expect(container.firstChild).to.have.attribute('width', '100px'); - expect(container.firstChild).to.have.attribute('height', '100px'); - }); - - it('default prop filtering for native html tag', () => { - const Link = styled('a')` - color: green; - `; - const rest = { m: [3], pt: [4] }; - - const { container } = render( - - hello world - , - ); - expect(container.firstChild).to.have.attribute('href', 'link'); - expect(container.firstChild).to.have.attribute('aria-label', 'some label'); - expect(container.firstChild).to.have.attribute('data-wow', 'value'); - expect(container.firstChild).to.have.attribute('is', 'true'); - - expect(container.firstChild).not.to.have.attribute('a'); - expect(container.firstChild).not.to.have.attribute('b'); - expect(container.firstChild).not.to.have.attribute('wow'); - expect(container.firstChild).not.to.have.attribute('prop'); - expect(container.firstChild).not.to.have.attribute('filtering'); - expect(container.firstChild).not.to.have.attribute('cool'); - }); - - it('no prop filtering on non string tags', () => { - // eslint-disable-next-line jsx-a11y/anchor-has-content - const Link = styled((props) => )` - color: green; - `; - - const { container } = render( - - hello world - , - ); - - expect(container.firstChild).to.have.attribute('href', 'link'); - expect(container.firstChild).to.have.attribute('aria-label', 'some label'); - expect(container.firstChild).to.have.attribute('data-wow', 'value'); - expect(container.firstChild).to.have.attribute('is', 'true'); - expect(container.firstChild).to.have.attribute('a', 'true'); - expect(container.firstChild).to.have.attribute('b', 'true'); - expect(container.firstChild).to.have.attribute('wow', 'true'); - expect(container.firstChild).to.have.attribute('prop', 'true'); - expect(container.firstChild).to.have.attribute('filtering', 'true'); - expect(container.firstChild).to.have.attribute('cool', 'true'); - }); - - describe('ownerState prop', () => { - it('[HTML tag] does not forward `ownerState` by default', () => { - const StyledDiv = styled('div')(); - - const { container } = render(); - expect(container.firstChild).not.to.have.attribute('ownerState'); - }); - - it('does not forward `ownerState` to other React component', () => { - function InnerComponent(props) { - const { ownerState } = props; - return
; - } - const StyledDiv = styled(InnerComponent)(); - - const { container } = render(); - expect(container.firstChild).not.to.have.attribute('ownerState'); - expect(container.firstChild).to.have.attribute('data-ownerstate', 'false'); - }); - - it('forward `ownerState` to inherited styled component', () => { - const StyledDiv = styled('div')({ - classes: ['div1'], - variants: [ - { - props: ({ ownerState }) => ownerState.color === 'secondary', - className: 'div1-secondary', - }, - ], - }); - - const StyledDiv2 = styled(StyledDiv)({ - classes: ['div2'], - variants: [ - { - props: ({ ownerState }) => ownerState.color === 'secondary', - className: 'div2-secondary', - }, - ], - }); - - const { container } = render(); - expect(container.firstChild).to.have.class('div1-secondary'); - expect(container.firstChild).to.have.class('div2-secondary'); - }); - }); - - describe('classes prop', () => { - it('does not forward `classes` by default', () => { - const StyledDiv = styled('div')(); - - const { container } = render(); - expect(container.firstChild).not.to.have.attribute('classes'); - }); - - it('does not forward `classes` for the root slot to other React component', () => { - function InnerComponent(props) { - const { classes = {} } = props; - return
; - } - const StyledDiv = styled(InnerComponent, { - name: 'Div', - slot: 'root', - })(); - - const { container } = render(); - expect(container.firstChild).not.to.have.attribute('classes'); - expect(container.firstChild).not.to.have.class('root-123'); - }); - - it('forward `classes` for the root slot by a custom shouldForwardProp', () => { - function ButtonBase(props) { - const { classes = {} } = props; - return
; - } - const ButtonRoot = styled(ButtonBase, { - name: 'Div', - slot: 'root', - shouldForwardProp: (prop) => prop === 'classes', - })(); - - const { container } = render(); - expect(container.firstChild).to.have.class('root-123'); - }); - }); -}); diff --git a/packages/pigment-css-react/tests/styled/styled.test.tsx b/packages/pigment-css-react/tests/styled/styled.test.tsx deleted file mode 100644 index 4e555d7497c670..00000000000000 --- a/packages/pigment-css-react/tests/styled/styled.test.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import path from 'node:path'; -import { runTransformation, expect } from '../testUtils'; - -const theme = { - palette: { - primary: { - main: 'red', - }, - }, - size: { - font: { - h1: '3rem', - }, - }, - components: { - MuiSlider: { - styleOverrides: { - rail: { - fontSize: '1.5rem', - }, - }, - }, - }, -}; - -describe('Pigment CSS - styled', () => { - it('basics', async () => { - const { output, fixture } = await runTransformation( - path.join(__dirname, 'fixtures/styled.input.js'), - ); - - expect(output.js).to.equal(fixture.js); - expect(output.css).to.equal(fixture.css); - }); - - it('should work with theme', async () => { - const { output, fixture } = await runTransformation( - path.join(__dirname, 'fixtures/styled-theme.input.js'), - { - themeArgs: { - theme, - }, - }, - ); - - expect(output.js).to.equal(fixture.js); - expect(output.css).to.equal(fixture.css); - }); - - it('should work with theme and rtl', async () => { - const { output, fixture } = await runTransformation( - path.join(__dirname, 'fixtures/styled-rtl.input.js'), - { - themeArgs: { - theme, - }, - css: { - defaultDirection: 'ltr', - generateForBothDir: true, - getDirSelector(dir) { - return `:dir(${dir})`; - }, - }, - }, - ); - - expect(output.js).to.equal(fixture.js); - expect(output.css).to.equal(fixture.css); - }); - - it('should work with variants', async () => { - const { output, fixture } = await runTransformation( - path.join(__dirname, 'fixtures/styled-variants.input.js'), - { - themeArgs: { - theme, - }, - }, - ); - - expect(output.js).to.equal(fixture.js); - expect(output.css).to.equal(fixture.css); - }); -}); diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps.input.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps.input.js deleted file mode 100644 index 0d8f4e16e1b14c..00000000000000 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps.input.js +++ /dev/null @@ -1,45 +0,0 @@ -import { styled } from '@pigment-css/react'; - -export const SliderRail = styled('span', { - name: 'MuiSlider', - slot: 'Rail', -})` - display: block; - position: absolute; - border-radius: inherit; - background-color: currentColor; - opacity: 0.38; - font-size: ${({ theme }) => (theme.vars ?? theme).size.font.h1}; -`; - -function App() { - return ; -} - -function App2(props) { - return ( - - ); -} - -function App3(props) { - return ( - - ); -} - -const textAlign = 'center'; -const styles4 = { - mb: 1, - textAlign, -}; - -function App4(props) { - return ; -} diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.css b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.css deleted file mode 100644 index 6d7384b2e1627f..00000000000000 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.css +++ /dev/null @@ -1,28 +0,0 @@ -.sjfloo5 { - display: block; - position: absolute; - border-radius: inherit; - background-color: currentColor; - opacity: 0.38; - font-size: 3rem; -} -.sjfloo5-1 { - font-size: 3rem; -} -.sjfloo5._1o8xp19 { - color: red; -} -.sjfloo5._1xbsywq { - color: var(--_1xbsywq-0); -} -.sjfloo5._1wnk6s5 { - background-color: blue; - color: white; -} -.sjfloo5._tzaibv { - color: var(--_tzaibv-0); -} -.sjfloo5._azg8ol { - margin-bottom: 8px; - text-align: center; -} diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js deleted file mode 100644 index 5aefa5d93cda52..00000000000000 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js +++ /dev/null @@ -1,52 +0,0 @@ -import { sx as _sx8, styled as _styled } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx4 } from '@pigment-css/react/private-runtime'; -import { sx as _sx6 } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx3 } from '@pigment-css/react/private-runtime'; -import { sx as _sx4 } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx2 } from '@pigment-css/react/private-runtime'; -import { sx as _sx2 } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx } from '@pigment-css/react/private-runtime'; -export const SliderRail = /*#__PURE__*/ _styled('span', { - name: 'MuiSlider', - slot: 'Rail', -})({ - classes: ['sjfloo5', 'sjfloo5-1'], -}); -function App() { - return <_ForwardSx sxComponent={SliderRail} sx={'_1o8xp19'} />; -} -function App2(props) { - return ( - <_ForwardSx2 - sxComponent={SliderRail} - sx={ - props.variant === 'secondary' - ? { - className: '_1xbsywq', - vars: { - '_1xbsywq-0': [props.isRed ? 'red' : 'blue', false], - }, - } - : '_1wnk6s5' - } - /> - ); -} -function App3(props) { - return ( - <_ForwardSx3 - sxComponent={SliderRail} - sx={ - props.variant === 'secondary' && { - className: '_tzaibv', - vars: { - '_tzaibv-0': [props.isRed ? 'red' : 'blue', false], - }, - } - } - /> - ); -} -function App4(props) { - return <_ForwardSx4 sxComponent={SliderRail} sx={'_azg8ol'} />; -} diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js deleted file mode 100644 index 34370216509ab8..00000000000000 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.input.js +++ /dev/null @@ -1,68 +0,0 @@ -import { styled } from '@pigment-css/react'; - -const autocompleteClasses = { - option: 'MuiAutocomplete-option', -}; - -const SliderRail = styled('span', { - name: 'MuiSlider', - slot: 'Rail', -})` - display: block; - position: absolute; - border-radius: inherit; - background-color: currentColor; - opacity: 0.38; - font-size: ${({ theme }) => (theme.vars ?? theme).size.font.h1}; -`; - -const A = { - SliderRail, -}; - -function App(props) { - return ( - ({ - mb: 1, - ...theme.applyStyles('dark', { - color: 'white', - }), - })} - /> - ); -} - -function App2() { - return ( - - ); -} - -function App3(props) { - return ( - ({ - color: (theme.vars || theme).palette.primary.main, - fontSize: props.isRed ? 'h1-fontSize' : 'h2-fontSize', - ':hover': { - backgroundColor: ['primary.main', 'secondary.main'], - color: { - sm: 'primary.main', - md: 'secondary.main', - }, - }, - })} - /> - ); -} diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css deleted file mode 100644 index 90b60e9eba1a27..00000000000000 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css +++ /dev/null @@ -1,46 +0,0 @@ -.sdbmcs3 { - display: block; - position: absolute; - border-radius: inherit; - background-color: currentColor; - opacity: 0.38; - font-size: 3rem; -} -.sdbmcs3-1 { - font-size: 3rem; -} -.sdbmcs3._i7ulc4 { - margin-bottom: 8px; -} -@media (prefers-color-scheme: dark) { - .sdbmcs3._i7ulc4 { - color: white; - } -} -.sdbmcs3._liig2s { - border-radius: 8px; - margin: 5px; -} -.sdbmcs3._liig2s.MuiAutocomplete-option { - padding: 8px; -} -.sdbmcs3._o956n { - color: red; - font-size: var(--_o956n-0); -} -@media (min-width: 0px) { - .sdbmcs3._o956n :hover { - background-color: red; - } -} -@media (min-width: 600px) { - .sdbmcs3._o956n :hover { - background-color: blue; - color: red; - } -} -@media (min-width: 900px) { - .sdbmcs3._o956n :hover { - color: blue; - } -} diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js deleted file mode 100644 index 7c8a5ca1d23900..00000000000000 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js +++ /dev/null @@ -1,34 +0,0 @@ -import { sx as _sx6, styled as _styled } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx3 } from '@pigment-css/react/private-runtime'; -import { sx as _sx4 } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx2 } from '@pigment-css/react/private-runtime'; -import { sx as _sx2 } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx } from '@pigment-css/react/private-runtime'; -const SliderRail = /*#__PURE__*/ _styled('span', { - name: 'MuiSlider', - slot: 'Rail', -})({ - classes: ['sdbmcs3', 'sdbmcs3-1'], -}); -const A = { - SliderRail, -}; -function App(props) { - return <_ForwardSx sxComponent={SliderRail} sx={'_i7ulc4'} />; -} -function App2() { - return <_ForwardSx2 sxComponent={SliderRail} sx={'_liig2s'} component="li" {...props} />; -} -function App3(props) { - return ( - <_ForwardSx3 - sxComponent={A.SliderRail} - sx={{ - className: '_o956n', - vars: { - '_o956n-0': [props.isRed ? 'h1-fontSize' : 'h2-fontSize', false], - }, - }} - /> - ); -} diff --git a/packages/pigment-css-react/tests/sx/sx.test.ts b/packages/pigment-css-react/tests/sx/sx.test.ts deleted file mode 100644 index 20b36d95a14f11..00000000000000 --- a/packages/pigment-css-react/tests/sx/sx.test.ts +++ /dev/null @@ -1,62 +0,0 @@ -import path from 'node:path'; -import { runTransformation, expect } from '../testUtils'; - -const theme = { - palette: { - primary: { - main: 'red', - }, - secondary: { - main: 'blue', - }, - }, - size: { - font: { - h1: '3rem', - }, - }, - components: { - MuiSlider: { - styleOverrides: { - rail: { - fontSize: '3rem', - }, - }, - }, - }, - applyStyles(mode: string, style: object) { - return { - [`@media (prefers-color-scheme: ${mode})`]: style, - }; - }, -}; - -describe('Pigment CSS - sx prop', () => { - it('sx prop with logical and conditional expressions', async () => { - const { output, fixture } = await runTransformation( - path.join(__dirname, 'fixtures/sxProps.input.js'), - { - themeArgs: { - theme, - }, - }, - ); - - expect(output.js).to.equal(fixture.js); - expect(output.css).to.equal(fixture.css); - }); - - it('sx prop with theme spread', async () => { - const { output, fixture } = await runTransformation( - path.join(__dirname, 'fixtures/sxProps2.input.js'), - { - themeArgs: { - theme, - }, - }, - ); - - expect(output.js).to.equal(fixture.js); - expect(output.css).to.equal(fixture.css); - }); -}); diff --git a/packages/pigment-css-react/tests/testUtils.ts b/packages/pigment-css-react/tests/testUtils.ts deleted file mode 100644 index fd7db17ced5380..00000000000000 --- a/packages/pigment-css-react/tests/testUtils.ts +++ /dev/null @@ -1,114 +0,0 @@ -import * as fs from 'node:fs'; -import * as path from 'node:path'; -import { expect as chaiExpect } from 'chai'; -import { transformAsync } from '@babel/core'; -import { asyncResolveFallback } from '@wyw-in-js/shared'; -import { - TransformCacheCollection, - transform as wywTransform, - createFileReporter, -} from '@wyw-in-js/transform'; -import { PluginCustomOptions, preprocessor } from '@pigment-css/react/utils'; -import * as prettier from 'prettier'; - -import sxTransformPlugin from '../exports/sx-plugin'; - -const shouldUpdateOutput = process.env.UPDATE_FIXTURES === 'true'; - -function runSxTransform(code: string, filename: string) { - return transformAsync(code, { - babelrc: false, - configFile: false, - filename, - plugins: ['@babel/plugin-syntax-jsx', [sxTransformPlugin]], - }); -} - -export async function runTransformation( - absolutePath: string, - options?: { themeArgs?: { theme?: any }; css?: PluginCustomOptions['css'] }, -) { - const cache = new TransformCacheCollection(); - const { emitter: eventEmitter } = createFileReporter(false); - const inputFilePath = absolutePath; - const outputFilePath = absolutePath.replace('.input.', '.output.'); - const outputCssFilePath = absolutePath.replace('.input.js', '.output.css'); - - const inputContent = fs.readFileSync(inputFilePath, 'utf8'); - let outputContent = fs.existsSync(outputFilePath) ? fs.readFileSync(outputFilePath, 'utf8') : ''; - let outputCssContent = fs.existsSync(outputCssFilePath) - ? fs.readFileSync(outputCssFilePath, 'utf8') - : ''; - - const babelResult = await runSxTransform(inputContent, inputFilePath); - - const pluginOptions = { - themeArgs: { - theme: options?.themeArgs?.theme, - }, - babelOptions: { - configFile: false, - babelrc: false, - plugins: ['@babel/plugin-syntax-jsx'], - }, - tagResolver(source: string, tag: string) { - if (source !== '@pigment-css/react') { - return null; - } - return require.resolve(`../exports/${tag}`); - }, - }; - - const result = await wywTransform( - { - options: { - filename: inputFilePath, - preprocessor: (selector, css) => preprocessor(selector, css, options?.css), - pluginOptions, - }, - cache, - eventEmitter, - }, - babelResult?.code ?? inputContent, - asyncResolveFallback, - ); - - const prettierConfig = await prettier.resolveConfig( - path.join(process.cwd(), 'prettier.config.js'), - ); - const formattedJs = await prettier.format(result.code, { - ...prettierConfig, - parser: 'babel', - }); - const formattedCss = await prettier.format(result.cssText ?? '', { - ...prettierConfig, - parser: 'css', - }); - - if (!outputContent || shouldUpdateOutput) { - fs.writeFileSync(outputFilePath, formattedJs, 'utf-8'); - outputContent = formattedJs; - } - - if (!outputCssContent || shouldUpdateOutput) { - fs.writeFileSync(outputCssFilePath, formattedCss, 'utf-8'); - outputCssContent = formattedCss; - } - - return { - output: { - js: formattedJs, - css: formattedCss, - }, - fixture: { - js: outputContent, - css: outputCssContent, - }, - }; -} - -export function expect(val: any): ReturnType { - const CUSTOM_ERROR = - 'The file contents have changed. Run "test:update" command to update the file if this is expected.'; - return chaiExpect(val, CUSTOM_ERROR); -} diff --git a/packages/pigment-css-react/tests/theme/fixtures/themed-component.input.js b/packages/pigment-css-react/tests/theme/fixtures/themed-component.input.js deleted file mode 100644 index b162403d9824e6..00000000000000 --- a/packages/pigment-css-react/tests/theme/fixtures/themed-component.input.js +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from 'react'; -import { styled } from '@pigment-css/react'; - -const StatRoot = styled('div', { - name: 'PigmentStat', // The component name - slot: 'root', // The slot name -})(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - gap: '1rem', - padding: '0.75rem 1rem', - backgroundColor: theme.colors.primary.background, - borderRadius: theme.radius.xs, - boxShadow: theme.shadow.sm, - letterSpacing: '-0.025em', - fontWeight: 600, - variants: [ - { - props: { variant: 'outlined' }, - style: { - border: `2px solid #e9e9e9`, - }, - }, - ], -})); - -const StatValue = styled('div', { - name: 'PigmentStat', - slot: 'value', -})(({ theme }) => ({ - ...theme.typography.h3, -})); - -const StatUnit = styled('div', { - name: 'PigmentStat', - slot: 'unit', -})(({ theme }) => ({ - ...theme.typography.body2, - color: theme.colors.neutral.foreground, -})); - -const Stat = React.forwardRef(function Stat(props, ref) { - const { value, unit, ...other } = props; - - return ( - - {value} - {unit} - - ); -}); - -export default Stat; diff --git a/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.css b/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.css deleted file mode 100644 index 78a83f48768ee9..00000000000000 --- a/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.css +++ /dev/null @@ -1,21 +0,0 @@ -.si9gu6v { - display: flex; - flex-direction: column; - gap: 1rem; - padding: 0.75rem 1rem; - background-color: #ebf5ff; - border-radius: 0.25rem; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - letter-spacing: -0.025em; - font-weight: 600; -} -.si9gu6v-1 { - border: 2px solid #e9e9e9; -} -.sbfbm5t { - font-size: 2rem; -} -.s1xscf0o { - font-size: 1rem; - color: #6f7f95; -} diff --git a/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.js b/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.js deleted file mode 100644 index 98cafa341251ad..00000000000000 --- a/packages/pigment-css-react/tests/theme/fixtures/themed-component.output.js +++ /dev/null @@ -1,44 +0,0 @@ -import { styled as _styled3 } from '@pigment-css/react'; -import _theme3 from '@pigment-css/react/theme'; -import { styled as _styled2 } from '@pigment-css/react'; -import _theme2 from '@pigment-css/react/theme'; -import { styled as _styled } from '@pigment-css/react'; -import _theme from '@pigment-css/react/theme'; -import * as React from 'react'; -const StatRoot = /*#__PURE__*/ _styled('div', { - name: 'PigmentStat', - // The component name - slot: 'root', // The slot name -})({ - classes: ['si9gu6v'], - variants: [ - { - props: { - variant: 'outlined', - }, - className: 'si9gu6v-1', - }, - ], -}); -const StatValue = /*#__PURE__*/ _styled2('div', { - name: 'PigmentStat', - slot: 'value', -})({ - classes: ['sbfbm5t'], -}); -const StatUnit = /*#__PURE__*/ _styled3('div', { - name: 'PigmentStat', - slot: 'unit', -})({ - classes: ['s1xscf0o'], -}); -const Stat = React.forwardRef(function Stat(props, ref) { - const { value, unit, ...other } = props; - return ( - - {value} - {unit} - - ); -}); -export default Stat; diff --git a/packages/pigment-css-react/tests/theme/theme.test.ts b/packages/pigment-css-react/tests/theme/theme.test.ts deleted file mode 100644 index 02f71def92da8f..00000000000000 --- a/packages/pigment-css-react/tests/theme/theme.test.ts +++ /dev/null @@ -1,65 +0,0 @@ -import path from 'node:path'; -import { runTransformation, expect } from '../testUtils'; - -describe('Pigment CSS - theme', () => { - it('should work with theme', async () => { - const { output, fixture } = await runTransformation( - path.join(__dirname, 'fixtures/themed-component.input.js'), - { - themeArgs: { - theme: { - colors: { - primary: { - background: '#EBF5FF', - foreground: '#003A75', - }, - neutral: { - background: '#F3F6F9', - foreground: '#6F7F95', - }, - }, - radius: { - xs: '0.25rem', - }, - shadow: { - sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', - }, - typography: { - h3: { - fontSize: '2rem', - }, - body2: { - fontSize: '1rem', - }, - }, - components: { - MuiStat: { - styleOverrides: { - root: ({ theme }) => ({ - variants: [ - { - props: { variant: 'outlined' }, - style: { - borderColor: theme.colors.primary.background, - }, - }, - ], - }), - title: { - letterSpacing: '0.1rem', - }, - value: { - lineHeight: 1.7, - }, - }, - }, - }, - }, - }, - }, - ); - - expect(output.js).to.equal(fixture.js); - expect(output.css).to.equal(fixture.css); - }); -}); diff --git a/packages/pigment-css-react/tests/utils/theme-tokens.test.ts b/packages/pigment-css-react/tests/utils/theme-tokens.test.ts deleted file mode 100644 index 8ea8478919c788..00000000000000 --- a/packages/pigment-css-react/tests/utils/theme-tokens.test.ts +++ /dev/null @@ -1,102 +0,0 @@ -import { extendTheme, generateTokenCss, generateThemeTokens } from '@pigment-css/react/utils'; -import { expect } from 'chai'; - -describe('theme-tokens', () => { - describe('generateTokenCss', () => { - it('should work with plain theme', () => { - expect( - generateTokenCss({ - colors: { - primary: 'red', - secondary: 'blue', - }, - fontSizes: [12, 14, 16, 20, 24, 32], - }), - ).to.equal(''); - }); - - it('should generate stylesheet correctly', () => { - expect( - generateTokenCss( - extendTheme({ - colorSchemes: { - light: { - palette: { - primary: 'red', - secondary: 'blue', - }, - }, - dark: { - palette: { - primary: 'darkred', - secondary: 'darkblue', - }, - }, - }, - radius: { - xs: 4, - sm: 8, - md: 16, - }, - }), - ), - ).to.equal( - ':root{--radius-xs:4px;--radius-sm:8px;--radius-md:16px;}:root{--palette-primary:red;--palette-secondary:blue;}@media (prefers-color-scheme: dark){:root{--palette-primary:darkred;--palette-secondary:darkblue;}}', - ); - }); - }); - - describe('generateThemeTokens', () => { - it('should work with plain theme', () => { - expect( - generateThemeTokens({ - colors: { - primary: 'red', - secondary: 'blue', - }, - fontSizes: [12, 14, 16, 20, 24, 32], - }), - ).to.deep.equal({}); - }); - - it('should use `vars` object', () => { - expect( - generateThemeTokens( - extendTheme({ - colorSchemes: { - light: { - palette: { - primary: 'red', - secondary: 'blue', - }, - }, - dark: { - palette: { - primary: 'darkred', - secondary: 'darkblue', - }, - }, - }, - radius: { - xs: 4, - sm: 8, - md: 16, - }, - }), - ), - ).to.deep.equal({ - vars: { - palette: { - primary: 'var(--palette-primary)', - secondary: 'var(--palette-secondary)', - }, - radius: { - md: 'var(--radius-md)', - sm: 'var(--radius-sm)', - xs: 'var(--radius-xs)', - }, - }, - }); - }); - }); -}); diff --git a/packages/pigment-css-react/theme/index.d.ts b/packages/pigment-css-react/theme/index.d.ts deleted file mode 100644 index 7da9b781121a8a..00000000000000 --- a/packages/pigment-css-react/theme/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '../build/theme'; diff --git a/packages/pigment-css-react/theme/index.js b/packages/pigment-css-react/theme/index.js deleted file mode 100644 index f053ebf7976e37..00000000000000 --- a/packages/pigment-css-react/theme/index.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = {}; diff --git a/packages/pigment-css-react/theme/index.mjs b/packages/pigment-css-react/theme/index.mjs deleted file mode 100644 index ff8b4c56321a33..00000000000000 --- a/packages/pigment-css-react/theme/index.mjs +++ /dev/null @@ -1 +0,0 @@ -export default {}; diff --git a/packages/pigment-css-react/tsconfig.build.json b/packages/pigment-css-react/tsconfig.build.json deleted file mode 100644 index 80b6a0a8461245..00000000000000 --- a/packages/pigment-css-react/tsconfig.build.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "composite": false - } -} diff --git a/packages/pigment-css-react/tsconfig.json b/packages/pigment-css-react/tsconfig.json deleted file mode 100644 index 2ad099bdf46489..00000000000000 --- a/packages/pigment-css-react/tsconfig.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "target": "ES2015", - "allowJs": true, - "lib": ["ES2017", "ES2021.String", "DOM"], - "composite": true, - "noEmit": false, - "resolveJsonModule": true, - "paths": { - "@mui/system": ["./packages/mui-system/src"], - "@mui/system/*": ["./packages/mui-system/src/*"], - "@mui/utils": ["./packages/mui-utils/src"], - "@mui/utils/*": ["./packages/mui-utils/src/*"] - }, - "types": ["node", "mocha"] - }, - "include": ["src/**/*.tsx", "src/**/*.js"], - "exclude": ["./tsup.config.ts"] -} diff --git a/packages/pigment-css-react/tsup.config.ts b/packages/pigment-css-react/tsup.config.ts deleted file mode 100644 index fe170a407cde54..00000000000000 --- a/packages/pigment-css-react/tsup.config.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Options, defineConfig } from 'tsup'; -import config from '../../tsup.config'; - -const processors = ['styled', 'sx', 'keyframes', 'generateAtomics', 'css', 'createUseThemeProps']; -const external = ['react', 'react-is', 'prop-types']; - -const baseConfig: Options = { - ...(config as Options), - tsconfig: './tsconfig.build.json', - external, -}; - -const BASE_FILES = ['index.ts', 'theme.ts', 'Box.jsx', 'RtlProvider.tsx']; - -export default defineConfig([ - { - ...baseConfig, - entry: BASE_FILES.map((file) => `./src/${file}`), - }, - { - ...baseConfig, - entry: processors.map((file) => `./src/processors/${file}.ts`), - outDir: 'processors', - }, - { - ...baseConfig, - entry: [ - './src/utils/index.ts', - './src/utils/sx-plugin.ts', - './src/utils/remove-prop-types-plugin.ts', - ], - outDir: 'utils', - }, - { - ...baseConfig, - entry: ['./src/private-runtime/index.ts'], - outDir: 'private-runtime', - }, -]); diff --git a/packages/pigment-css-unplugin/.eslintrc b/packages/pigment-css-unplugin/.eslintrc deleted file mode 100644 index 5abd34a395bc37..00000000000000 --- a/packages/pigment-css-unplugin/.eslintrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "rules": { - "import/prefer-default-export": "off" - } -} diff --git a/packages/pigment-css-unplugin/.gitignore b/packages/pigment-css-unplugin/.gitignore deleted file mode 100644 index 6b1d0bfabc3c1c..00000000000000 --- a/packages/pigment-css-unplugin/.gitignore +++ /dev/null @@ -1 +0,0 @@ -LICENSE diff --git a/packages/pigment-css-unplugin/package.json b/packages/pigment-css-unplugin/package.json deleted file mode 100644 index 20b76347b07fb8..00000000000000 --- a/packages/pigment-css-unplugin/package.json +++ /dev/null @@ -1,55 +0,0 @@ -{ - "name": "@pigment-css/unplugin", - "version": "0.0.7", - "main": "build/index.js", - "module": "build/index.mjs", - "types": "build/index.d.ts", - "author": "MUI Team", - "description": "Webpack integration for Pigment CSS.", - "repository": { - "type": "git", - "url": "https://github.com/mui/material-ui.git", - "directory": "packages/pigment-unplugin" - }, - "license": "MIT", - "bugs": { - "url": "https://github.com/mui/material-ui/issues" - }, - "homepage": "https://github.com/mui/material-ui/tree/master/packages/pigment-css-react", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "scripts": { - "clean": "rimraf build types", - "watch": "tsup --watch --tsconfig tsconfig.build.json", - "copy-license": "node ../../scripts/pigment-license.mjs", - "build": "tsup --tsconfig tsconfig.build.json", - "typecheck": "tsc --noEmit -p .", - "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/pigment-css-unplugin/**/*.test.{js,ts,tsx}'", - "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/pigment-css-unplugin mocha 'packages/pigment-css-unplugin/**/*.test.{js,ts,tsx}'" - }, - "dependencies": { - "@babel/core": "^7.24.4", - "@pigment-css/react": "workspace:^", - "@wyw-in-js/shared": "^0.5.0", - "@wyw-in-js/transform": "^0.5.0", - "babel-plugin-define-var": "^0.1.0", - "unplugin": "^1.7.1" - }, - "devDependencies": { - "@types/babel__core": "^7.20.5", - "@types/chai": "^4.3.14", - "@types/mocha": "^10.0.6", - "chai": "^4.4.1" - }, - "sideEffects": false, - "publishConfig": { - "access": "public" - }, - "files": [ - "build", - "package.json", - "LICENSE" - ] -} diff --git a/packages/pigment-css-unplugin/src/index.ts b/packages/pigment-css-unplugin/src/index.ts deleted file mode 100644 index cbddd39982e4d7..00000000000000 --- a/packages/pigment-css-unplugin/src/index.ts +++ /dev/null @@ -1,408 +0,0 @@ -import * as path from 'node:path'; -import { transformAsync } from '@babel/core'; -import { - type Preprocessor, - type PluginOptions as WywInJsPluginOptions, - type IFileReporterOptions, - TransformCacheCollection, - transform, - createFileReporter, -} from '@wyw-in-js/transform'; -import { asyncResolveFallback, slugify } from '@wyw-in-js/shared'; -import { - UnpluginFactoryOutput, - WebpackPluginInstance, - createUnplugin, - UnpluginOptions, -} from 'unplugin'; -import { - preprocessor as basePreprocessor, - generateTokenCss, - generateThemeTokens, - extendTheme, - type Theme as BaseTheme, - type PluginCustomOptions, -} from '@pigment-css/react/utils'; -import type { ResolvePluginInstance } from 'webpack'; - -import { handleUrlReplacement, type AsyncResolver } from './utils'; - -type NextMeta = { - type: 'next'; - dev: boolean; - isServer: boolean; - outputCss: boolean; - placeholderCssFile: string; - projectPath: string; -}; - -type ViteMeta = { - type: 'vite'; -}; - -type WebpackMeta = { - type: 'webpack'; -}; - -type Meta = NextMeta | ViteMeta | WebpackMeta; - -export type PigmentOptions = { - theme?: Theme; - transformLibraries?: string[]; - preprocessor?: Preprocessor; - debug?: IFileReporterOptions | false; - sourceMap?: boolean; - meta?: Meta; - asyncResolve?: (...args: Parameters) => Promise; - transformSx?: boolean; -} & Partial & - Omit; - -const extensions = ['.js', '.jsx', '.mjs', '.cjs', '.ts', '.tsx', '.mts', '.cts']; - -function hasCorectExtension(fileName: string) { - return extensions.some((ext) => fileName.endsWith(ext)); -} - -const VIRTUAL_CSS_FILE = `\0zero-runtime-styles.css`; -const VIRTUAL_THEME_FILE = `\0zero-runtime-theme.js`; - -function isZeroRuntimeThemeFile(fileName: string) { - return fileName === VIRTUAL_CSS_FILE || fileName === VIRTUAL_THEME_FILE; -} - -function isZeroRuntimeProcessableFile(fileName: string, transformLibraries: string[]) { - const isNodeModule = fileName.includes('node_modules'); - const isTransformableFile = - isNodeModule && transformLibraries.some((libName) => fileName.includes(libName)); - return ( - hasCorectExtension(fileName) && - (isTransformableFile || !isNodeModule) && - !fileName.includes('runtime/build') - ); -} - -/** - * Next.js initializes the plugin multiple times. So all the calls - * have to share the same Maps. - */ -const globalCssFileLookup = new Map(); -const globalCssLookup = new Map(); - -const pluginName = 'PigmentCSSWebpackPlugin'; - -function innerNoop() { - return null; -} - -function outerNoop() { - return innerNoop; -} - -export const plugin = createUnplugin((options) => { - const { - theme, - meta, - transformLibraries = [], - preprocessor, - asyncResolve: asyncResolveOpt, - debug = false, - sourceMap = false, - transformSx = true, - overrideContext, - tagResolver, - css, - ...rest - } = options; - const cache = new TransformCacheCollection(); - const { emitter, onDone } = createFileReporter(debug ?? false); - const cssLookup = meta?.type === 'next' ? globalCssLookup : new Map(); - const cssFileLookup = meta?.type === 'next' ? globalCssFileLookup : new Map(); - const isNext = meta?.type === 'next'; - const outputCss = isNext && meta.outputCss; - const babelTransformPlugin: UnpluginOptions = { - name: 'pigment-css-plugin-transform-babel', - enforce: 'post', - transformInclude(id) { - return isZeroRuntimeProcessableFile(id, transformLibraries); - }, - async transform(code, id) { - const result = await transformAsync(code, { - filename: id, - babelrc: false, - configFile: false, - plugins: [[`${process.env.RUNTIME_PACKAGE_NAME}/exports/sx-plugin`]], - }); - if (!result) { - return null; - } - return { - code: result.code ?? code, - map: result.map, - }; - }, - }; - const projectPath = meta?.type === 'next' ? meta.projectPath : process.cwd(); - - let webpackResolver: AsyncResolver; - - const asyncResolve: AsyncResolver = async (what, importer, stack) => { - const result = await asyncResolveOpt?.(what, importer, stack); - if (typeof result === 'string') { - return result; - } - if (webpackResolver) { - return webpackResolver(what, importer, stack); - } - return asyncResolveFallback(what, importer, stack); - }; - - const withRtl = (selector: string, cssText: string) => { - return basePreprocessor(selector, cssText, css); - }; - - const wywInJSTransformPlugin: UnpluginOptions = { - name: 'pigment-css-plugin-transform-wyw-in-js', - enforce: 'post', - buildEnd() { - onDone(process.cwd()); - }, - transformInclude(id) { - return isZeroRuntimeProcessableFile(id, transformLibraries); - }, - webpack(compiler) { - const resolverPlugin: ResolvePluginInstance = { - apply(resolver) { - webpackResolver = function webpackAsyncResolve( - what: string, - importer: string, - stack: string[], - ) { - const context = path.isAbsolute(importer) - ? path.dirname(importer) - : path.join(process.cwd(), path.dirname(importer)); - return new Promise((resolve, reject) => { - resolver.resolve({}, context, what, { stack: new Set(stack) }, (err, result) => { - if (err) { - reject(err); - } else if (result) { - resolve(result); - } else { - reject(new Error(`${process.env.PACKAGE_NAME}: Cannot resolve ${what}`)); - } - }); - }); - }; - }, - }; - compiler.options.resolve.plugins = compiler.options.resolve.plugins || []; - compiler.options.resolve.plugins.push(resolverPlugin); - }, - async transform(code, filePath) { - const [id] = filePath.split('?'); - const transformServices = { - options: { - filename: id, - root: process.cwd(), - preprocessor: preprocessor ?? withRtl, - pluginOptions: { - ...rest, - themeArgs: { - theme, - }, - overrideContext(context: Record, filename: string) { - if (overrideContext) { - return overrideContext(context, filename); - } - if (!context.$RefreshSig$) { - context.$RefreshSig$ = outerNoop; - } - return context; - }, - tagResolver(source: string, tag: string) { - const tagResult = tagResolver?.(source, tag); - if (tagResult) { - return tagResult; - } - if (source.endsWith('/zero-styled')) { - return require.resolve(`${process.env.RUNTIME_PACKAGE_NAME}/exports/${tag}`); - } - return null; - }, - babelOptions: { - ...rest.babelOptions, - plugins: [ - `${process.env.RUNTIME_PACKAGE_NAME}/exports/remove-prop-types-plugin`, - 'babel-plugin-define-var', // A fix for undefined variables in the eval phase of wyw-in-js, more details on https://github.com/siriwatknp/babel-plugin-define-var?tab=readme-ov-file#problem - ...(rest.babelOptions?.plugins ?? []), - ], - }, - }, - }, - cache, - eventEmitter: emitter, - }; - - try { - const result = await transform(transformServices, code, asyncResolve); - - if (!result.cssText) { - return null; - } - - let { cssText } = result; - if (isNext && !outputCss) { - return { - code: result.code, - map: result.sourceMap, - }; - } - - if (isNext) { - // Handle url() replacement in css. Only handled in Next.js as the css is injected - // through the use of a placeholder CSS file that lies in the nextjs plugin package. - // So url paths can't be resolved relative to that file. - if (cssText && cssText.includes('url(')) { - cssText = await handleUrlReplacement(cssText, id, asyncResolve, projectPath); - } - } - - if (sourceMap && result.cssSourceMapText) { - const map = Buffer.from(result.cssSourceMapText).toString('base64'); - cssText += `/*# sourceMappingURL=data:application/json;base64,${map}*/`; - } - - // Virtual modules do not work consistently in Next.js (the build is done at least - // thrice with different combination of parameters) resulting in error in - // subsequent builds. So we use a placeholder CSS file with the actual CSS content - // as part of the query params. - if (isNext) { - const data = `${meta.placeholderCssFile}?${encodeURIComponent( - JSON.stringify({ - filename: id.split('/').pop(), - source: cssText, - }), - )}`; - return { - // CSS import should be the last so that nested components produce correct CSS order injection. - code: `${result.code}\nimport ${JSON.stringify(data)};`, - map: result.sourceMap, - }; - } - - const slug = slugify(cssText); - const cssFilename = `${slug}.pigment.css`; - const cssId = `./${cssFilename}`; - cssFileLookup.set(cssId, cssFilename); - cssLookup.set(cssFilename, cssText); - - return { - code: `${result.code}\nimport ${JSON.stringify(`./${cssFilename}`)};`, - map: result.sourceMap, - }; - } catch (e) { - const error = new Error((e as Error).message); - error.stack = (e as Error).stack; - throw error; - } - }, - }; - - const plugins: Array = [ - { - name: 'pigment-css-plugin-theme-tokens', - enforce: 'pre', - webpack(compiler) { - compiler.hooks.normalModuleFactory.tap(pluginName, (nmf) => { - nmf.hooks.createModule.tap( - pluginName, - // @ts-expect-error CreateData is typed as 'object'... - (createData: { matchResource?: string; settings: { sideEffects?: boolean } }) => { - if (createData.matchResource && createData.matchResource.endsWith('.pigment.css')) { - createData.settings.sideEffects = true; - } - }, - ); - }); - }, - ...(isNext - ? { - transformInclude(id) { - return ( - // this file should exist in the package - id.endsWith(`${process.env.RUNTIME_PACKAGE_NAME}/styles.css`) || - id.endsWith('/pigment-css-react/styles.css') || - id.includes(`${process.env.RUNTIME_PACKAGE_NAME}/theme`) || - id.includes('/pigment-css-react/theme') - ); - }, - transform(_code, id) { - if (id.endsWith('styles.css')) { - return theme ? generateTokenCss(theme) : _code; - } - if (id.includes('pigment-css-react/theme')) { - return `export default ${ - theme ? JSON.stringify(generateThemeTokens(theme)) : '{}' - };`; - } - return null; - }, - } - : { - resolveId(source: string) { - if (source === `${process.env.RUNTIME_PACKAGE_NAME}/styles.css`) { - return VIRTUAL_CSS_FILE; - } - if (source === `${process.env.RUNTIME_PACKAGE_NAME}/theme`) { - return VIRTUAL_THEME_FILE; - } - return null; - }, - loadInclude(id) { - return isZeroRuntimeThemeFile(id); - }, - load(id) { - if (id === VIRTUAL_CSS_FILE && theme) { - return generateTokenCss(theme); - } - if (id === VIRTUAL_THEME_FILE) { - return `export default ${ - theme ? JSON.stringify(generateThemeTokens(theme)) : '{}' - };`; - } - return null; - }, - }), - }, - ]; - - if (transformSx) { - plugins.push(babelTransformPlugin); - } - plugins.push(wywInJSTransformPlugin); - - // This is already handled separately for Next.js using `placeholderCssFile` - if (!isNext) { - plugins.push({ - name: 'pigment-css-plugin-load-output-css', - enforce: 'pre', - resolveId(source: string) { - return cssFileLookup.get(source); - }, - loadInclude(id) { - return id.endsWith('.pigment.css'); - }, - load(id) { - return cssLookup.get(id) ?? ''; - }, - }); - } - return plugins; -}); - -export const webpack = plugin.webpack as unknown as UnpluginFactoryOutput< - PigmentOptions, - WebpackPluginInstance ->; - -export { type AsyncResolver, extendTheme }; diff --git a/packages/pigment-css-unplugin/src/utils.ts b/packages/pigment-css-unplugin/src/utils.ts deleted file mode 100644 index da108320f607b2..00000000000000 --- a/packages/pigment-css-unplugin/src/utils.ts +++ /dev/null @@ -1,66 +0,0 @@ -import * as path from 'node:path'; - -export type AsyncResolver = (what: string, importer: string, stack: string[]) => Promise; - -/** - * There might be a better way to do this in future, but due to the async - * nature of the resolver, this is the best way currently to replace url() - * content references with the absolute path of the referenced file. - * This is because WyW-in-JS's preprocessor is a sync call. So we can't resolve - * paths in this call asyncronously. - * The upside is that we can use aliases in the url() references as well - * alongside relative paths. - */ -export const handleUrlReplacement = async ( - cssText: string, - filename: string, - asyncResolver: AsyncResolver, - projectPath: string, -) => { - // [0] [1][2] [3] [4] - const urlRegex = /\b(url\((["']?))(\.?[^)]+?)(\2\))/g; - let newCss = ''; - let match = urlRegex.exec(cssText); - let lastIndex = 0; - while (match) { - newCss += cssText.substring(lastIndex, match.index); - const mainItem = match[3]; - // no need to handle data uris or absolute paths - if ( - mainItem.startsWith('data:') || - mainItem.startsWith('http:') || - mainItem.startsWith('https:') - ) { - newCss += `url(${mainItem})`; - } else if (mainItem[0] === '/') { - const newPath = mainItem.replace(projectPath, '').split(path.sep).join('/'); - if (newPath === mainItem) { - // absolute path unrelated to files in the project or in public directory - newCss += `url(${mainItem})`; - } else { - // absolute path to files in the project - newCss += `url(~${mainItem.replace(projectPath, '').split(path.sep).join('/')})`; - } - } else { - // eslint-disable-next-line no-await-in-loop - const resolvedAbsolutePath = await asyncResolver(mainItem, filename, []); - if (!resolvedAbsolutePath) { - newCss += `url(${mainItem})`; - } else { - let pathFromRoot = resolvedAbsolutePath.replace(projectPath, ''); - // Need to do this for Windows paths - pathFromRoot = pathFromRoot.split(path.sep).join('/'); - // const relativePathToProjectRoot = path.relative() - // Next.js expects the path to be relative to the project root and starting with ~ - newCss += `url(~${pathFromRoot})`; - } - } - lastIndex = match.index + match[0].length; - match = urlRegex.exec(cssText); - } - newCss += cssText.substring(lastIndex); - if (!newCss) { - return cssText; - } - return newCss; -}; diff --git a/packages/pigment-css-unplugin/tests/utils.test.ts b/packages/pigment-css-unplugin/tests/utils.test.ts deleted file mode 100644 index c0f8a4bd97ee4f..00000000000000 --- a/packages/pigment-css-unplugin/tests/utils.test.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { expect } from 'chai'; -import { handleUrlReplacement } from '../src/utils'; - -const DATA_URI = - 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIwLjUgMTMuN2'; -const HTML_LOGO_URL = 'https://mui.com/static/logo.svg'; -const ABSOLUTE_PATH = '/static/logo.svg'; -const dummyResolver = (url: string) => { - return Promise.resolve(url); -}; - -describe('utils', () => { - describe('handleUrlReplacement', () => { - it('should not replace http/data/absolute urls', async () => { - [DATA_URI, HTML_LOGO_URL, ABSOLUTE_PATH].forEach(async (url) => { - const cssString1 = `.className { - background-image: url(${url}); - }`; - const cssString2 = `.className { - background-image: url('${url}'); - }`; - expect( - await handleUrlReplacement( - cssString1, - '/path/to/project/filename.ts', - dummyResolver, - '/path/to/project', - ), - ).to.equal(cssString1); - expect( - await handleUrlReplacement( - cssString2, - '/path/to/project/filename.ts', - dummyResolver, - '/path/to/project', - ), - ).to.equal(cssString1); - }); - }); - - it('should replace relative or aliased paths with paths relative to the current working directory', async () => { - const projectPath = '/path/to/project'; - const filePath = `${projectPath}/src/components/Slider.tsx`; - const resolver = (url: string): Promise => { - return new Promise((resolve) => { - if (url.startsWith('@/')) { - resolve(`${projectPath}/src${url.slice(1)}`); - } else if (url.startsWith('../../')) { - resolve(`${projectPath}/src/${url.replace('../../', '')}`); - } else if (url.startsWith('/')) { - resolve(url); - } - }); - }; - const cssString = `.className_c17ksbvo{ - background-color:var(--mui-palette-background-default, #fff); - color:var(--mui-palette-text-primary, rgba(0, 0, 0, 0.87)); - background-image: url('${DATA_URI}'); - background-image: url('${HTML_LOGO_URL}'); - background-image: url(${ABSOLUTE_PATH}); - background-image: url('../../assets/mui.svg'); - background-image: url('@/assets/mui.svg'); - background-image: url('${projectPath}/src/assets/mui.svg'); - background-image: url('/assets/mui.svg'); - background-image: url('@/assets/mui.svg'); - display: flex; - position: absolute; - }`; - const expectedCssString = `.className_c17ksbvo{ - background-color:var(--mui-palette-background-default, #fff); - color:var(--mui-palette-text-primary, rgba(0, 0, 0, 0.87)); - background-image: url(${DATA_URI}); - background-image: url(${HTML_LOGO_URL}); - background-image: url(${ABSOLUTE_PATH}); - background-image: url(~/src/assets/mui.svg); - background-image: url(~/src/assets/mui.svg); - background-image: url(~/src/assets/mui.svg); - background-image: url(/assets/mui.svg); - background-image: url(~/src/assets/mui.svg); - display: flex; - position: absolute; - }`; - expect(await handleUrlReplacement(cssString, filePath, resolver, projectPath)).to.equal( - expectedCssString, - ); - }); - }); -}); diff --git a/packages/pigment-css-unplugin/tsconfig.build.json b/packages/pigment-css-unplugin/tsconfig.build.json deleted file mode 100644 index 9bb90e12c7f860..00000000000000 --- a/packages/pigment-css-unplugin/tsconfig.build.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "composite": false, - "paths": { - "@babel/core": ["./node_modules/@babel/core"] - } - } -} diff --git a/packages/pigment-css-unplugin/tsconfig.json b/packages/pigment-css-unplugin/tsconfig.json deleted file mode 100644 index 76104e9ff8ee6d..00000000000000 --- a/packages/pigment-css-unplugin/tsconfig.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "resolveJsonModule": true, - "target": "ES2022", - "paths": { - "@babel/core": ["./node_modules/@babel/core"], - "@mui/system": ["./packages/mui-system/src"], - "@mui/system/*": ["./packages/mui-system/src/*"], - "@mui/utils": ["./packages/mui-utils/src"], - "@mui/utils/*": ["./packages/mui-utils/src/*"], - "@pigment-css/react": ["./packages/pigment-css-react/src"], - "@pigment-css/react/*": ["./packages/pigment-css-react/src/*"] - }, - "types": ["node", "mocha", "chai"] - }, - "include": ["src/**/*.ts"], - "exclude": ["./tsup.config.ts"] -} diff --git a/packages/pigment-css-unplugin/tsup.config.ts b/packages/pigment-css-unplugin/tsup.config.ts deleted file mode 100644 index 4f207fb16765e1..00000000000000 --- a/packages/pigment-css-unplugin/tsup.config.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Options, defineConfig } from 'tsup'; -import config from '../../tsup.config'; -import runtimePackageJson from '../pigment-css-react/package.json'; - -const baseConfig: Options = { - ...(config as Options), - tsconfig: './tsconfig.build.json', - env: { - RUNTIME_PACKAGE_NAME: runtimePackageJson.name, - }, -}; - -export default defineConfig(baseConfig); diff --git a/packages/pigment-css-vite-plugin/.gitignore b/packages/pigment-css-vite-plugin/.gitignore deleted file mode 100644 index 9dc7e3d4a9c91b..00000000000000 --- a/packages/pigment-css-vite-plugin/.gitignore +++ /dev/null @@ -1 +0,0 @@ -/LICENSE diff --git a/packages/pigment-css-vite-plugin/package.json b/packages/pigment-css-vite-plugin/package.json deleted file mode 100644 index 75691df0b35f97..00000000000000 --- a/packages/pigment-css-vite-plugin/package.json +++ /dev/null @@ -1,54 +0,0 @@ -{ - "name": "@pigment-css/vite-plugin", - "version": "0.0.7", - "main": "build/index.js", - "module": "build/index.mjs", - "types": "build/index.d.ts", - "author": "MUI Team", - "description": "Vite integration for Pigment CSS.", - "repository": { - "type": "git", - "url": "https://github.com/mui/material-ui.git", - "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-css-react", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "scripts": { - "clean": "rimraf build", - "watch": "tsup --watch", - "copy-license": "node ../../scripts/pigment-license.mjs", - "build": "tsup", - "typecheck": "tsc --noEmit -p ." - }, - "dependencies": { - "@babel/core": "^7.24.4", - "@babel/preset-typescript": "^7.24.1", - "@pigment-css/react": "workspace:^", - "@wyw-in-js/shared": "^0.5.0", - "@wyw-in-js/transform": "^0.5.0", - "babel-plugin-define-var": "^0.1.0" - }, - "devDependencies": { - "@types/babel__core": "^7.20.5", - "vite": "^5.2.8" - }, - "peerDependencies": { - "vite": "^4.0.0 || ^5.0.0" - }, - "sideEffects": false, - "publishConfig": { - "access": "public" - }, - "files": [ - "build", - "package.json", - "LICENSE" - ] -} diff --git a/packages/pigment-css-vite-plugin/src/index.ts b/packages/pigment-css-vite-plugin/src/index.ts deleted file mode 100644 index a3772fce0f726e..00000000000000 --- a/packages/pigment-css-vite-plugin/src/index.ts +++ /dev/null @@ -1,122 +0,0 @@ -import type { Plugin } from 'vite'; -import { - preprocessor as basePreprocessor, - generateTokenCss, - generateThemeTokens, - type Theme, - extendTheme, -} from '@pigment-css/react/utils'; -import { transformAsync } from '@babel/core'; -import baseWywPluginPlugin, { type VitePluginOptions } from './vite-plugin'; - -export interface PigmentOptions extends Omit { - /** - * The theme object that you want to be passed to the `styled` function - */ - theme: Theme; -} - -const VIRTUAL_CSS_FILE = `\0zero-runtime-styles.css`; -const VIRTUAL_THEME_FILE = `\0zero-runtime-theme.js`; - -const extensions = ['.js', '.jsx', '.mjs', '.cjs', '.ts', '.tsx', '.mts', '.cts']; - -function hasCorectExtension(fileName: string) { - return extensions.some((ext) => fileName.endsWith(ext)); -} - -function isZeroRuntimeProcessableFile(fileName: string, transformLibraries: string[]) { - const isNodeModule = fileName.includes('node_modules'); - const isTransformableFile = - isNodeModule && transformLibraries.some((libName) => fileName.includes(libName)); - return ( - hasCorectExtension(fileName) && - (isTransformableFile || !isNodeModule) && - !fileName.includes('runtime/dist') - ); -} - -export function pigment(options: PigmentOptions) { - const { - theme, - babelOptions = {}, - preprocessor, - transformLibraries = [], - transformSx = true, - css, - ...rest - } = options ?? {}; - - function injectMUITokensPlugin(): Plugin { - return { - name: 'vite-mui-theme-injection-plugin', - enforce: 'pre', - resolveId(source) { - if (source === `${process.env.RUNTIME_PACKAGE_NAME}/styles.css`) { - return VIRTUAL_CSS_FILE; - } - if (source === `${process.env.RUNTIME_PACKAGE_NAME}/theme`) { - return VIRTUAL_THEME_FILE; - } - return null; - }, - load(id) { - if (id === VIRTUAL_CSS_FILE) { - return generateTokenCss(theme); - } - if (id === VIRTUAL_THEME_FILE) { - return `export default ${JSON.stringify(generateThemeTokens(theme))};`; - } - return null; - }, - }; - } - - function intermediateBabelPlugin(): Plugin { - return { - name: 'vite-mui-zero-intermediate-plugin', - enforce: 'post', - async transform(code, id) { - const [filename] = id.split('?'); - if (!isZeroRuntimeProcessableFile(id, transformLibraries)) { - return null; - } - try { - const result = await transformAsync(code, { - filename, - babelrc: false, - configFile: false, - plugins: [[`${process.env.RUNTIME_PACKAGE_NAME}/exports/sx-plugin`]], - }); - return { - code: result?.code ?? code, - map: result?.map, - }; - } catch (ex) { - console.error(ex); - return null; - } - }, - }; - } - - const withRtl = (selector: string, cssText: string) => { - return basePreprocessor(selector, cssText, css); - }; - - const zeroPlugin = baseWywPluginPlugin({ - themeArgs: { - theme, - }, - preprocessor: preprocessor ?? withRtl, - babelOptions: { - ...babelOptions, - plugins: ['@babel/plugin-syntax-typescript', ...(babelOptions.plugins ?? [])], - }, - ...rest, - }); - - return [injectMUITokensPlugin(), transformSx ? intermediateBabelPlugin() : null, zeroPlugin]; -} - -export { extendTheme }; diff --git a/packages/pigment-css-vite-plugin/src/vite-plugin.ts b/packages/pigment-css-vite-plugin/src/vite-plugin.ts deleted file mode 100644 index 211bdc371c97f8..00000000000000 --- a/packages/pigment-css-vite-plugin/src/vite-plugin.ts +++ /dev/null @@ -1,286 +0,0 @@ -/** - * Extended from - - * https://github.com/callstack/linaria/blob/master/packages/vite/src/index.ts - * for it be customizable in future - */ - -import { existsSync } from 'node:fs'; -import path from 'node:path'; - -import type { ModuleNode, Plugin, ResolvedConfig, ViteDevServer, FilterPattern } from 'vite'; -import { optimizeDeps, createFilter } from 'vite'; - -import { logger as wywLogger, syncResolve } from '@wyw-in-js/shared'; -import { - TransformCacheCollection, - transform, - Preprocessor, - createFileReporter, - getFileIdx, - type PluginOptions, - type IFileReporterOptions, -} from '@wyw-in-js/transform'; -import { type PluginCustomOptions } from '@pigment-css/react/utils'; - -export type VitePluginOptions = { - debug?: IFileReporterOptions | false | null | undefined; - exclude?: FilterPattern; - include?: FilterPattern; - preprocessor?: Preprocessor; - sourceMap?: boolean; - transformLibraries?: string[]; - transformSx?: boolean; -} & Partial & - PluginCustomOptions; - -function innerNoop() { - return null; -} - -function outerNoop() { - return innerNoop; -} - -export default function wywVitePlugin({ - debug, - include, - exclude, - sourceMap, - preprocessor, - transformLibraries = [], - overrideContext, - tagResolver, - css: cssConfig, - ...rest -}: VitePluginOptions = {}): Plugin { - const filter = createFilter(include, exclude); - const cssLookup = new Map(); - const cssFileLookup = new Map(); - let config: ResolvedConfig; - let devServer: ViteDevServer; - - const { emitter, onDone } = createFileReporter(debug ?? false); - - // - const targets: { dependencies: string[]; id: string }[] = []; - const cache = new TransformCacheCollection(); - return { - name: 'vite-plugin-zero-runtime', - enforce: 'post', - buildEnd() { - onDone(process.cwd()); - }, - configResolved(resolvedConfig: ResolvedConfig) { - config = resolvedConfig; - }, - configureServer(_server) { - devServer = _server; - }, - resolveId(importeeUrl: string) { - const [id] = importeeUrl.split('?', 1); - if (cssLookup.has(id)) { - return id; - } - return cssFileLookup.get(id); - }, - load(url: string) { - const [id] = url.split('?', 1); - return cssLookup.get(id); - }, - handleHotUpdate(ctx) { - // it's module, so just transform it - if (ctx.modules.length) { - return ctx.modules; - } - - // Select affected modules of changed dependency - const affected = targets.filter( - (x) => - // file is dependency of any target - x.dependencies.some((dep) => dep === ctx.file) || - // or changed module is a dependency of any target - x.dependencies.some((dep) => ctx.modules.some((m) => m.file === dep)), - ); - const deps = affected.flatMap((target) => target.dependencies); - - for (let i = 0; i < deps.length; i += 1) { - const depId = deps[i]; - cache.invalidateForFile(depId); - } - - return affected - .map((target) => devServer.moduleGraph.getModuleById(target.id)) - .concat(ctx.modules) - .filter((m): m is ModuleNode => !!m); - }, - async transform(code, url) { - const [id] = url.split('?', 1); - - // Main modification starts - if (id in cssLookup) { - return null; - } - - let shouldReturn = url.includes('node_modules'); - - if (shouldReturn) { - shouldReturn = !transformLibraries.some((libName: string) => url.includes(libName)); - } - - if (shouldReturn) { - return null; - } - // Main modification end - - // Do not transform ignored and generated files - if (!filter(url)) { - return null; - } - - const log = wywLogger.extend('vite'); - log('Vite transform', getFileIdx(id)); - - const asyncResolve = async (what: string, importer: string, stack: string[]) => { - const resolved = await this.resolve(what, importer); - if (resolved) { - if (resolved.external) { - // If module is marked as external, Rollup will not resolve it, - // so we need to resolve it ourselves with default resolver - const resolvedId = syncResolve(what, importer, stack); - log("resolve ✅ '%s'@'%s -> %O\n%s", what, importer, resolved); - return resolvedId; - } - - log("resolve ✅ '%s'@'%s -> %O\n%s", what, importer, resolved); - // Vite adds param like `?v=667939b3` to cached modules - const resolvedId = resolved.id.split('?', 1)[0]; - - if (resolvedId.startsWith('\0')) { - // \0 is a special character in Rollup that tells Rollup to not include this in the bundle - // https://rollupjs.org/guide/en/#outputexports - return null; - } - - if (!existsSync(resolvedId)) { - await optimizeDeps(config); - } - - return resolvedId; - } - - log("resolve ❌ '%s'@'%s", what, importer); - throw new Error(`Could not resolve ${what}`); - }; - - const presets = new Set( - Array.isArray(rest.babelOptions?.presets) ? rest.babelOptions?.presets : [], - ); - presets.add('@babel/preset-typescript'); - - try { - const result = await transform( - { - options: { - filename: id, - root: process.cwd(), - preprocessor, - pluginOptions: { - ...rest, - babelOptions: { - ...rest.babelOptions, - plugins: [ - `${process.env.RUNTIME_PACKAGE_NAME}/exports/remove-prop-types-plugin`, - 'babel-plugin-define-var', // A fix for undefined variables in the eval phase of wyw-in-js, more details on https://github.com/siriwatknp/babel-plugin-define-var?tab=readme-ov-file#problem - ...(rest.babelOptions?.plugins ?? []), - ], - presets: Array.from(presets), - }, - overrideContext(context: Record, filename: string) { - if (overrideContext) { - return overrideContext(context, filename); - } - if (!context.$RefreshSig$) { - context.$RefreshSig$ = outerNoop; - } - return context; - }, - tagResolver(source: string, tag: string) { - const tagResult = tagResolver?.(source, tag); - if (tagResult) { - return tagResult; - } - if (source.endsWith('/zero-styled')) { - return `${process.env.RUNTIME_PACKAGE_NAME}/exports/${tag}`; - } - return null; - }, - }, - }, - cache, - eventEmitter: emitter, - }, - code, - asyncResolve, - ); - - let { cssText, dependencies } = result; - - if (!cssText) { - return null; - } - - dependencies ??= []; - - const cssFilename = path - .normalize(`${id.replace(/\.[jt]sx?$/, '')}.pigment.css`) - .replace(/\\/g, path.posix.sep); - - const cssRelativePath = path - .relative(config.root, cssFilename) - .replace(/\\/g, path.posix.sep); - - const cssId = `/${cssRelativePath}`; - - if (sourceMap && result.cssSourceMapText) { - const map = Buffer.from(result.cssSourceMapText).toString('base64'); - cssText += `/*# sourceMappingURL=data:application/json;base64,${map}*/`; - } - - cssLookup.set(cssFilename, cssText); - cssFileLookup.set(cssId, cssFilename); - - result.code += `\nimport ${JSON.stringify(cssFilename)};\n`; - - for (let i = 0, end = dependencies.length; i < end; i += 1) { - // eslint-disable-next-line no-await-in-loop - const depModule = await this.resolve(dependencies[i], url, { - isEntry: false, - }); - if (depModule) { - dependencies[i] = depModule.id; - } - } - const target = targets.find((t) => t.id === id); - if (!target) { - targets.push({ id, dependencies }); - } else { - target.dependencies = dependencies; - } - // Reload the contents of the CSS file in the dev server - if (devServer?.moduleGraph) { - const cssModule = devServer.moduleGraph.getModuleById(cssFilename); - if (cssModule) { - devServer.reloadModule(cssModule); - } - } - - return { code: result.code, map: result.sourceMap }; - } catch (ex) { - const err = new Error(`${process.env.PACKAGE_NAME}: Error while transforming file '${id}'`); - err.message = (ex as Error).message; - err.stack = (ex as Error).stack; - throw err; - } - }, - }; -} diff --git a/packages/pigment-css-vite-plugin/tsconfig.build.json b/packages/pigment-css-vite-plugin/tsconfig.build.json deleted file mode 100644 index 9bb90e12c7f860..00000000000000 --- a/packages/pigment-css-vite-plugin/tsconfig.build.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "composite": false, - "paths": { - "@babel/core": ["./node_modules/@babel/core"] - } - } -} diff --git a/packages/pigment-css-vite-plugin/tsconfig.json b/packages/pigment-css-vite-plugin/tsconfig.json deleted file mode 100644 index bd8a7238963d0f..00000000000000 --- a/packages/pigment-css-vite-plugin/tsconfig.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "target": "ES2022", - "paths": { - "@babel/core": ["./node_modules/@babel/core"], - "@mui/system": ["./packages/mui-system/src"], - "@mui/system/*": ["./packages/mui-system/src/*"], - "@mui/utils": ["./packages/mui-utils/src"], - "@mui/utils/*": ["./packages/mui-utils/src/*"], - "@pigment-css/react": ["./packages/pigment-css-react/src"], - "@pigment-css/react/*": ["./packages/pigment-css-react/src/*"] - } - }, - "include": ["src/**/*"], - "exclude": ["./tsup.config.ts"] -} diff --git a/packages/pigment-css-vite-plugin/tsup.config.ts b/packages/pigment-css-vite-plugin/tsup.config.ts deleted file mode 100644 index 49c643a8293478..00000000000000 --- a/packages/pigment-css-vite-plugin/tsup.config.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Options, defineConfig } from 'tsup'; -import config from '../../tsup.config'; -import zeroPkgJson from '../pigment-css-react/package.json'; - -const external = [`${zeroPkgJson.name}/utils`]; - -const baseConfig: Options = { - ...(config as Options), - tsconfig: './tsconfig.build.json', - external, - env: { - RUNTIME_PACKAGE_NAME: zeroPkgJson.name, - }, -}; - -export default defineConfig([ - { - ...baseConfig, - entry: ['./src/index.ts'], - }, -]); diff --git a/packages/pigment-react/README.md b/packages/pigment-react/README.md index 1c9613bff8f608..463f9d5c5ab6d9 100644 --- a/packages/pigment-react/README.md +++ b/packages/pigment-react/README.md @@ -1,3 +1,3 @@ # Pigment CSS -The package has moved [here](../pigment-css-react/). +The package has moved [here](https://github.com/mui/pigment-css). diff --git a/patches/@wyw-in-js__transform@0.5.0.patch b/patches/@wyw-in-js__transform@0.5.0.patch deleted file mode 100644 index 2c8676be1898aa..00000000000000 --- a/patches/@wyw-in-js__transform@0.5.0.patch +++ /dev/null @@ -1,44 +0,0 @@ -diff --git a/esm/module.js b/esm/module.js -index 527070166142e7fda5ed14e1f3465052c82f2a2b..122061e0d481066a2b5fd0c7ab2a8b1d523b1ef1 100644 ---- a/esm/module.js -+++ b/esm/module.js -@@ -119,7 +119,7 @@ export class Module { - this.services = services; - this.moduleImpl = moduleImpl; - this.cache = services.cache; -- this.#entrypointRef = new WeakRef(entrypoint); -+ this.#entrypointRef = entrypoint; - this.idx = entrypoint.idx; - this.id = entrypoint.name; - this.filename = entrypoint.name; -@@ -143,7 +143,7 @@ export class Module { - this.debug('the whole exports was overridden with %O', value); - } - get entrypoint() { -- const entrypoint = this.#entrypointRef.deref(); -+ const entrypoint = this.#entrypointRef; - invariant(entrypoint, `Module ${this.idx} is disposed`); - return entrypoint; - } -diff --git a/lib/module.js b/lib/module.js -index d2f2644c2469ac7ad0dbd1b9f58099eda4084b80..b8bad9c43c35bef14c3f6a277f8c9974607b2a00 100644 ---- a/lib/module.js -+++ b/lib/module.js -@@ -127,7 +127,7 @@ class Module { - this.services = services; - this.moduleImpl = moduleImpl; - this.cache = services.cache; -- this.#entrypointRef = new WeakRef(entrypoint); -+ this.#entrypointRef = entrypoint; - this.idx = entrypoint.idx; - this.id = entrypoint.name; - this.filename = entrypoint.name; -@@ -151,7 +151,7 @@ class Module { - this.debug('the whole exports was overridden with %O', value); - } - get entrypoint() { -- const entrypoint = this.#entrypointRef.deref(); -+ const entrypoint = this.#entrypointRef; - (0, _tsInvariant.invariant)(entrypoint, `Module ${this.idx} is disposed`); - return entrypoint; - } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a6903b76b0c5db..bf01c733beeef1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -27,11 +27,6 @@ overrides: '@types/react-dom': 18.2.19 cross-fetch: ^4.0.0 -patchedDependencies: - '@wyw-in-js/transform@0.5.0': - hash: zicb4vap2prvslgwedcxhpcmvy - path: patches/@wyw-in-js__transform@0.5.0.patch - importers: .: @@ -128,8 +123,8 @@ importers: specifier: ^20.1.0 version: 20.1.0 '@pigment-css/react': - specifier: workspace:^ - version: link:packages/pigment-css-react + specifier: ^0.0.9 + version: 0.0.9(@types/react@18.2.55)(react@18.2.0) '@playwright/test': specifier: 1.43.1 version: 1.43.1 @@ -333,10 +328,7 @@ importers: version: 1.10.0 terser-webpack-plugin: specifier: ^5.3.10 - version: 5.3.10(esbuild@0.19.11)(webpack@5.91.0) - tsup: - specifier: ^8.0.2 - version: 8.0.2(postcss@8.4.38)(typescript@5.4.5) + version: 5.3.10(webpack@5.91.0) tsx: specifier: ^4.7.2 version: 4.7.2 @@ -345,7 +337,7 @@ importers: version: 5.4.5 webpack: specifier: ^5.91.0 - version: 5.91.0(esbuild@0.19.11)(webpack-cli@5.1.4) + version: 5.91.0(webpack-cli@5.1.4) webpack-bundle-analyzer: specifier: ^4.10.2 version: 4.10.2 @@ -359,8 +351,8 @@ importers: apps/local-ui-lib: dependencies: '@pigment-css/react': - specifier: file:../../packages/pigment-css-react - version: file:packages/pigment-css-react(@types/react@18.2.55)(react@18.2.0) + specifier: ^0.0.9 + version: 0.0.9(@types/react@18.2.55)(react@18.2.0) apps/pigment-css-next-app: dependencies: @@ -389,8 +381,8 @@ importers: specifier: workspace:^ version: link:../../packages/mui-utils/build '@pigment-css/react': - specifier: workspace:^ - version: link:../../packages/pigment-css-react + specifier: ^0.0.9 + version: 0.0.9(@types/react@18.2.55)(react@18.2.0) local-ui-lib: specifier: workspace:^ version: link:../local-ui-lib @@ -405,8 +397,8 @@ importers: version: 18.2.0(react@18.2.0) devDependencies: '@pigment-css/nextjs-plugin': - specifier: workspace:^ - version: link:../../packages/pigment-css-nextjs-plugin + specifier: ^0.0.9 + version: 0.0.9(@types/react@18.2.55)(next@14.2.2)(react@18.2.0) '@types/node': specifier: ^18.19.31 version: 18.19.31 @@ -444,8 +436,8 @@ importers: specifier: workspace:^ version: link:../../packages/mui-utils/build '@pigment-css/react': - specifier: workspace:^ - version: link:../../packages/pigment-css-react + specifier: ^0.0.9 + version: 0.0.9(@types/react@18.2.55)(react@18.2.0) clsx: specifier: ^2.1.0 version: 2.1.0 @@ -475,8 +467,8 @@ importers: specifier: ^7.24.1 version: 7.24.1(@babel/core@7.24.4) '@pigment-css/vite-plugin': - specifier: workspace:^ - version: link:../../packages/pigment-css-vite-plugin + specifier: ^0.0.9 + version: 0.0.9(@types/react@18.2.55)(react@18.2.0)(vite@5.2.8) '@types/react': specifier: 18.2.55 version: 18.2.55 @@ -578,7 +570,7 @@ importers: version: 0.16.2(@emotion/react@11.11.4)(react@18.2.0) webpack: specifier: ^5.91.0 - version: 5.91.0(esbuild@0.19.11)(webpack-cli@5.1.4) + version: 5.91.0(webpack-cli@5.1.4) docs: dependencies: @@ -2147,187 +2139,6 @@ importers: specifier: ^11.2.0 version: 11.2.0 - packages/pigment-css-nextjs-plugin: - dependencies: - '@pigment-css/unplugin': - specifier: workspace:^ - version: link:../pigment-css-unplugin - devDependencies: - next: - specifier: ^13.5.1 - version: 13.5.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) - - packages/pigment-css-react: - dependencies: - '@babel/core': - specifier: ^7.24.4 - version: 7.24.4 - '@babel/helper-module-imports': - specifier: ^7.24.3 - version: 7.24.3 - '@babel/helper-plugin-utils': - specifier: ^7.24.0 - version: 7.24.0 - '@babel/parser': - specifier: ^7.24.4 - version: 7.24.4 - '@babel/types': - specifier: ^7.24.0 - version: 7.24.0 - '@emotion/css': - specifier: ^11.11.2 - version: 11.11.2 - '@emotion/is-prop-valid': - specifier: ^1.2.2 - version: 1.2.2 - '@emotion/react': - specifier: ^11.11.4 - version: 11.11.4(@types/react@18.2.55)(react@18.2.0) - '@emotion/serialize': - specifier: ^1.1.4 - version: 1.1.4 - '@emotion/styled': - specifier: ^11.11.5 - version: 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) - '@mui/system': - specifier: workspace:^ - version: link:../mui-system/build - '@wyw-in-js/processor-utils': - specifier: ^0.5.0 - version: 0.5.0 - '@wyw-in-js/shared': - specifier: ^0.5.0 - version: 0.5.0 - '@wyw-in-js/transform': - specifier: ^0.5.0 - version: 0.5.0(patch_hash=zicb4vap2prvslgwedcxhpcmvy) - clsx: - specifier: ^2.1.0 - version: 2.1.0 - cssesc: - specifier: ^3.0.0 - version: 3.0.0 - csstype: - specifier: ^3.1.3 - version: 3.1.3 - lodash: - specifier: ^4.17.21 - version: 4.17.21 - stylis: - specifier: ^4.3.1 - version: 4.3.1 - stylis-plugin-rtl: - specifier: ^2.1.1 - version: 2.1.1(stylis@4.3.1) - devDependencies: - '@babel/plugin-syntax-jsx': - specifier: ^7.24.1 - version: 7.24.1(@babel/core@7.24.4) - '@types/babel__core': - specifier: ^7.20.5 - version: 7.20.5 - '@types/babel__helper-module-imports': - specifier: ^7.18.3 - version: 7.18.3 - '@types/babel__helper-plugin-utils': - specifier: ^7.10.3 - version: 7.10.3 - '@types/chai': - specifier: ^4.3.14 - version: 4.3.14 - '@types/cssesc': - specifier: ^3.0.2 - version: 3.0.2 - '@types/lodash': - specifier: ^4.17.0 - version: 4.17.0 - '@types/mocha': - specifier: ^10.0.6 - version: 10.0.6 - '@types/node': - specifier: ^18.19.31 - version: 18.19.31 - '@types/react': - specifier: 18.2.55 - version: 18.2.55 - '@types/stylis': - specifier: ^4.2.5 - version: 4.2.5 - chai: - specifier: ^4.4.1 - version: 4.4.1 - prettier: - specifier: ^3.2.5 - version: 3.2.5 - prop-types: - specifier: ^15.8.1 - version: 15.8.1 - react: - specifier: ^18.2.0 - version: 18.2.0 - - packages/pigment-css-unplugin: - dependencies: - '@babel/core': - specifier: ^7.24.4 - version: 7.24.4 - '@pigment-css/react': - specifier: workspace:^ - version: link:../pigment-css-react - '@wyw-in-js/shared': - specifier: ^0.5.0 - version: 0.5.0 - '@wyw-in-js/transform': - specifier: ^0.5.0 - version: 0.5.0(patch_hash=zicb4vap2prvslgwedcxhpcmvy) - babel-plugin-define-var: - specifier: ^0.1.0 - version: 0.1.0 - unplugin: - specifier: ^1.7.1 - version: 1.7.1 - devDependencies: - '@types/babel__core': - specifier: ^7.20.5 - version: 7.20.5 - '@types/chai': - specifier: ^4.3.14 - version: 4.3.14 - '@types/mocha': - specifier: ^10.0.6 - version: 10.0.6 - chai: - specifier: ^4.4.1 - version: 4.4.1 - - packages/pigment-css-vite-plugin: - dependencies: - '@babel/core': - specifier: ^7.24.4 - version: 7.24.4 - '@babel/preset-typescript': - specifier: ^7.24.1 - version: 7.24.1(@babel/core@7.24.4) - '@pigment-css/react': - specifier: workspace:^ - version: link:../pigment-css-react - '@wyw-in-js/shared': - specifier: ^0.5.0 - version: 0.5.0 - '@wyw-in-js/transform': - specifier: ^0.5.0 - version: 0.5.0(patch_hash=zicb4vap2prvslgwedcxhpcmvy) - babel-plugin-define-var: - specifier: ^0.1.0 - version: 0.1.0 - devDependencies: - '@types/babel__core': - specifier: ^7.20.5 - version: 7.20.5 - vite: - specifier: ^5.2.8 - version: 5.2.8(@types/node@18.19.31) - packages/react-docgen-types: devDependencies: ast-types: @@ -2567,7 +2378,7 @@ importers: version: 1.6.28 webpack: specifier: ^5.91.0 - version: 5.91.0(esbuild@0.19.11)(webpack-cli@5.1.4) + version: 5.91.0(webpack-cli@5.1.4) yargs: specifier: ^17.7.2 version: 17.7.2 @@ -4443,7 +4254,6 @@ packages: '@emotion/serialize': 1.1.4 '@emotion/sheet': 1.2.2 '@emotion/utils': 1.2.1 - dev: false /@emotion/hash@0.9.1: resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==} @@ -4575,6 +4385,7 @@ packages: cpu: [ppc64] os: [aix] requiresBuild: true + dev: true optional: true /@esbuild/aix-ppc64@0.20.2: @@ -4592,6 +4403,7 @@ packages: cpu: [arm64] os: [android] requiresBuild: true + dev: true optional: true /@esbuild/android-arm64@0.20.2: @@ -4609,6 +4421,7 @@ packages: cpu: [arm] os: [android] requiresBuild: true + dev: true optional: true /@esbuild/android-arm@0.20.2: @@ -4626,6 +4439,7 @@ packages: cpu: [x64] os: [android] requiresBuild: true + dev: true optional: true /@esbuild/android-x64@0.20.2: @@ -4643,6 +4457,7 @@ packages: cpu: [arm64] os: [darwin] requiresBuild: true + dev: true optional: true /@esbuild/darwin-arm64@0.20.2: @@ -4660,6 +4475,7 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true + dev: true optional: true /@esbuild/darwin-x64@0.20.2: @@ -4677,6 +4493,7 @@ packages: cpu: [arm64] os: [freebsd] requiresBuild: true + dev: true optional: true /@esbuild/freebsd-arm64@0.20.2: @@ -4694,6 +4511,7 @@ packages: cpu: [x64] os: [freebsd] requiresBuild: true + dev: true optional: true /@esbuild/freebsd-x64@0.20.2: @@ -4711,6 +4529,7 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-arm64@0.20.2: @@ -4728,6 +4547,7 @@ packages: cpu: [arm] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-arm@0.20.2: @@ -4745,6 +4565,7 @@ packages: cpu: [ia32] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-ia32@0.20.2: @@ -4762,6 +4583,7 @@ packages: cpu: [loong64] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-loong64@0.20.2: @@ -4779,6 +4601,7 @@ packages: cpu: [mips64el] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-mips64el@0.20.2: @@ -4796,6 +4619,7 @@ packages: cpu: [ppc64] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-ppc64@0.20.2: @@ -4813,6 +4637,7 @@ packages: cpu: [riscv64] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-riscv64@0.20.2: @@ -4830,6 +4655,7 @@ packages: cpu: [s390x] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-s390x@0.20.2: @@ -4847,6 +4673,7 @@ packages: cpu: [x64] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-x64@0.20.2: @@ -4864,6 +4691,7 @@ packages: cpu: [x64] os: [netbsd] requiresBuild: true + dev: true optional: true /@esbuild/netbsd-x64@0.20.2: @@ -4881,6 +4709,7 @@ packages: cpu: [x64] os: [openbsd] requiresBuild: true + dev: true optional: true /@esbuild/openbsd-x64@0.20.2: @@ -4898,6 +4727,7 @@ packages: cpu: [x64] os: [sunos] requiresBuild: true + dev: true optional: true /@esbuild/sunos-x64@0.20.2: @@ -4915,6 +4745,7 @@ packages: cpu: [arm64] os: [win32] requiresBuild: true + dev: true optional: true /@esbuild/win32-arm64@0.20.2: @@ -4932,6 +4763,7 @@ packages: cpu: [ia32] os: [win32] requiresBuild: true + dev: true optional: true /@esbuild/win32-ia32@0.20.2: @@ -4949,6 +4781,7 @@ packages: cpu: [x64] os: [win32] requiresBuild: true + dev: true optional: true /@esbuild/win32-x64@0.20.2: @@ -5737,6 +5570,22 @@ packages: react: 18.2.0 dev: false + /@mui/private-theming@6.0.0-alpha.3(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-zRdwVf8RpuM0MEqMveoJ0sV48eMWvutkcY/pt9nX21jXD9kaxOCuQyT6oNrXF7ZlBDOi/NXfKRDgkQfj+kwxDQ==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@types/react': 18.2.55 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.4 + '@mui/utils': 6.0.0-alpha.3(@types/react@18.2.55)(react@18.2.0) + '@types/react': 18.2.55 + prop-types: 15.8.1 + react: 18.2.0 + /@mui/styled-engine@5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.2.0): resolution: {integrity: sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==} engines: {node: '>=12.0.0'} @@ -5759,6 +5608,27 @@ packages: react: 18.2.0 dev: false + /@mui/styled-engine@6.0.0-alpha.3(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.2.0): + resolution: {integrity: sha512-tQ7xa3mJI6MZJnmm0O/Y+2z4LBSnnvMw0jfEawBSP6vRdN31kiCx8bj/J6asg9uWkCQ7FtNbzq9at7HQlWjGXA==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@emotion/react': ^11.4.1 + '@emotion/styled': ^11.3.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + dependencies: + '@babel/runtime': 7.24.4 + '@emotion/cache': 11.11.0 + '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) + csstype: 3.1.3 + prop-types: 15.8.1 + react: 18.2.0 + /@mui/system@5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.55)(react@18.2.0): resolution: {integrity: sha512-auXLXzUaCSSOLqJXmsAaq7P96VPRXg2Rrz6OHNV7lr+kB8lobUF+/N84Vd9C4G/wvCXYPs5TYuuGBRhcGbiBGg==} engines: {node: '>=12.0.0'} @@ -5789,6 +5659,35 @@ packages: react: 18.2.0 dev: false + /@mui/system@6.0.0-alpha.3(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-/UktEPqLfer6OSBLE3TI5EoDvLDtoBidGels9Fe66Pqox14WV12xllWdSbp6lSBU2jvk3fqodOfcFkzDZKB5Ug==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@emotion/react': ^11.5.0 + '@emotion/styled': ^11.3.0 + '@types/react': 18.2.55 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.4 + '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) + '@mui/private-theming': 6.0.0-alpha.3(@types/react@18.2.55)(react@18.2.0) + '@mui/styled-engine': 6.0.0-alpha.3(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.2.0) + '@mui/types': 7.2.14(@types/react@18.2.55) + '@mui/utils': 6.0.0-alpha.3(@types/react@18.2.55)(react@18.2.0) + '@types/react': 18.2.55 + clsx: 2.1.0 + csstype: 3.1.3 + prop-types: 15.8.1 + react: 18.2.0 + /@mui/types@7.2.14(@types/react@18.2.55): resolution: {integrity: sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==} peerDependencies: @@ -5798,7 +5697,6 @@ packages: optional: true dependencies: '@types/react': 18.2.55 - dev: false /@mui/utils@5.15.14(@types/react@18.2.55)(react@18.2.0): resolution: {integrity: sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==} @@ -5818,6 +5716,23 @@ packages: react-is: 18.2.0 dev: false + /@mui/utils@6.0.0-alpha.3(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-DBuCy0LmpKFBX6KcZpNve8T3oZmbdZABN0ixJIvDRdoxTG86divvx1CcA71YJojZD3FhRWb0d/XxtMAzn4qIvg==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@types/react': 18.2.55 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.4 + '@types/prop-types': 15.7.12 + '@types/react': 18.2.55 + prop-types: 15.8.1 + react: 18.2.0 + react-is: 18.2.0 + /@mui/x-charts@6.19.8(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-cjwsCJrUPDlMytJHBV+g3gDoSRURiphjclZs8sRnkZ+h4QbHn24K5QkK4bxEj7aCkO2HVJmDE0aqYEg4BnWCOA==} engines: {node: '>=14.0.0'} @@ -6146,7 +6061,6 @@ packages: /@next/env@14.2.2: resolution: {integrity: sha512-sk72qRfM1Q90XZWYRoJKu/UWlTgihrASiYw/scb15u+tyzcze3bOuJ/UV6TBOQEeUaxOkRqGeuGUdiiuxc5oqw==} - dev: false /@next/eslint-plugin-next@14.2.2: resolution: {integrity: sha512-q+Ec2648JtBpKiu/FSJm8HAsFXlNvioHeBCbTP12T1SGcHYwhqHULSfQgFkPgHDu3kzNp2Kem4J54bK4rPQ5SQ==} @@ -6168,7 +6082,6 @@ packages: cpu: [arm64] os: [darwin] requiresBuild: true - dev: false optional: true /@next/swc-darwin-x64@13.5.1: @@ -6185,7 +6098,6 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true - dev: false optional: true /@next/swc-linux-arm64-gnu@13.5.1: @@ -6202,7 +6114,6 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: false optional: true /@next/swc-linux-arm64-musl@13.5.1: @@ -6219,7 +6130,6 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: false optional: true /@next/swc-linux-x64-gnu@13.5.1: @@ -6236,7 +6146,6 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: false optional: true /@next/swc-linux-x64-musl@13.5.1: @@ -6253,7 +6162,6 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: false optional: true /@next/swc-win32-arm64-msvc@13.5.1: @@ -6270,7 +6178,6 @@ packages: cpu: [arm64] os: [win32] requiresBuild: true - dev: false optional: true /@next/swc-win32-ia32-msvc@13.5.1: @@ -6287,7 +6194,6 @@ packages: cpu: [ia32] os: [win32] requiresBuild: true - dev: false optional: true /@next/swc-win32-x64-msvc@13.5.1: @@ -6304,7 +6210,6 @@ packages: cpu: [x64] os: [win32] requiresBuild: true - dev: false optional: true /@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3: @@ -6886,6 +6791,83 @@ packages: '@octokit/openapi-types': 18.0.0 dev: true + /@pigment-css/nextjs-plugin@0.0.9(@types/react@18.2.55)(next@14.2.2)(react@18.2.0): + resolution: {integrity: sha512-RqCWwQpvAwZVCMK2KmgtZ2zlAaZmv0K5yhP+II02AKJgTEVxQ+6kfZ8b4a+1EIKgcrvbubOuB3eKvpK0V39N8A==} + peerDependencies: + next: ^12.0.0 || ^13.0.0 || ^14.0.0 + dependencies: + '@pigment-css/unplugin': 0.0.9(@types/react@18.2.55)(react@18.2.0) + next: 14.2.2(@babel/core@7.24.4)(@playwright/test@1.43.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) + transitivePeerDependencies: + - '@types/react' + - react + - supports-color + dev: true + + /@pigment-css/react@0.0.9(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-mGiZ+Dvy01+HJMQKdtDJWn+ZGuq22o4Drh9Q5o3lVOU+GPrsR6LEWW8HQZ63WAWpSPsXtXRsWyudgIVO+oHQmQ==} + peerDependencies: + react: ^17.0.0 || ^18.0.0 + dependencies: + '@babel/core': 7.24.4 + '@babel/helper-module-imports': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/parser': 7.24.4 + '@babel/types': 7.24.0 + '@emotion/css': 11.11.2 + '@emotion/is-prop-valid': 1.2.2 + '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) + '@emotion/serialize': 1.1.4 + '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) + '@mui/system': 6.0.0-alpha.3(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.55)(react@18.2.0) + '@mui/utils': 6.0.0-alpha.3(@types/react@18.2.55)(react@18.2.0) + '@wyw-in-js/processor-utils': 0.5.1 + '@wyw-in-js/shared': 0.5.1 + '@wyw-in-js/transform': 0.5.1 + clsx: 2.1.0 + cssesc: 3.0.0 + csstype: 3.1.3 + lodash: 4.17.21 + react: 18.2.0 + stylis: 4.3.1 + stylis-plugin-rtl: 2.1.1(stylis@4.3.1) + transitivePeerDependencies: + - '@types/react' + - supports-color + + /@pigment-css/unplugin@0.0.9(@types/react@18.2.55)(react@18.2.0): + resolution: {integrity: sha512-0d8HK2t1iYXUHhp7qDRcer7CdFh4wA9f6mxvJ+Eb/NHcrb5Zpe29AuZ8250RnK7Keep2QmLQdVFsIMzp0vBg/g==} + dependencies: + '@babel/core': 7.24.4 + '@pigment-css/react': 0.0.9(@types/react@18.2.55)(react@18.2.0) + '@wyw-in-js/shared': 0.5.1 + '@wyw-in-js/transform': 0.5.1 + babel-plugin-define-var: 0.1.0 + unplugin: 1.10.1 + transitivePeerDependencies: + - '@types/react' + - react + - supports-color + dev: true + + /@pigment-css/vite-plugin@0.0.9(@types/react@18.2.55)(react@18.2.0)(vite@5.2.8): + resolution: {integrity: sha512-GMyzdj7dIngj+XFShn7FpqVmu6rZcI0q6tpMUvO669Bl7mB9ZSZZDV7c4GWVXoQs3xXSEFnta3ntAC0Xkjwq6g==} + peerDependencies: + vite: ^4.0.0 || ^5.0.0 + dependencies: + '@babel/core': 7.24.4 + '@babel/preset-typescript': 7.24.1(@babel/core@7.24.4) + '@pigment-css/react': 0.0.9(@types/react@18.2.55)(react@18.2.0) + '@wyw-in-js/shared': 0.5.1 + '@wyw-in-js/transform': 0.5.1 + babel-plugin-define-var: 0.1.0 + vite: 5.2.8(@types/node@18.19.31) + transitivePeerDependencies: + - '@types/react' + - react + - supports-color + dev: true + /@pkgjs/parseargs@0.11.0: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} @@ -7835,7 +7817,6 @@ packages: /@swc/counter@0.1.3: resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==} - dev: false /@swc/helpers@0.5.2: resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==} @@ -7847,7 +7828,6 @@ packages: dependencies: '@swc/counter': 0.1.3 tslib: 2.6.2 - dev: false /@szmarczak/http-timer@4.0.6: resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==} @@ -8033,19 +8013,6 @@ packages: '@babel/types': 7.24.0 dev: true - /@types/babel__helper-module-imports@7.18.3: - resolution: {integrity: sha512-2pyr9Vlriessj2KI85SEF7qma8vA3vzquQMw3wn6kL5lsfjH/YxJ1Noytk4/FJElpYybUbyaC37CVfEgfyme9A==} - dependencies: - '@types/babel__core': 7.20.5 - '@types/babel__traverse': 7.20.5 - dev: true - - /@types/babel__helper-plugin-utils@7.10.3: - resolution: {integrity: sha512-FcLBBPXInqKfULB2nvOBskQPcnSMZ0s1Y2q76u9H1NPPWaLcTeq38xBeKfF/RBUECK333qeaqRdYoPSwW7rTNQ==} - dependencies: - '@types/babel__core': 7.20.5 - dev: true - /@types/babel__template@7.4.1: resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==} dependencies: @@ -8109,10 +8076,6 @@ packages: resolution: {integrity: sha512-DZyHAz716ZUctpqkUU2COwUoZ4gI6mZK2Q1oIz/fvNS6XHVpKSJgDnE7vRxZUBn9vjJHDVelCVW0dkshKOLFsA==} dev: true - /@types/cssesc@3.0.2: - resolution: {integrity: sha512-Qii6nTRktvtI380EloxH/V7MwgrYxkPgBI+NklUjQuhzgAd1AqT3QDJd+eD+0doRADgfwvtagLRo7JFa7aMHXg==} - dev: true - /@types/debug@4.1.12: resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} dependencies: @@ -8748,7 +8711,7 @@ packages: webpack: 5.x.x webpack-cli: 5.x.x dependencies: - webpack: 5.91.0(esbuild@0.19.11)(webpack-cli@5.1.4) + webpack: 5.91.0(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0) /@webpack-cli/info@2.0.2(webpack-cli@5.1.4)(webpack@5.91.0): @@ -8758,7 +8721,7 @@ packages: webpack: 5.x.x webpack-cli: 5.x.x dependencies: - webpack: 5.91.0(esbuild@0.19.11)(webpack-cli@5.1.4) + webpack: 5.91.0(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0) /@webpack-cli/serve@2.0.5(webpack-cli@5.1.4)(webpack@5.91.0): @@ -8772,21 +8735,20 @@ packages: webpack-dev-server: optional: true dependencies: - webpack: 5.91.0(esbuild@0.19.11)(webpack-cli@5.1.4) + webpack: 5.91.0(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0) - /@wyw-in-js/processor-utils@0.5.0: - resolution: {integrity: sha512-3sRwuDTMy2GmD+44bhCTcBasCrjBexzYRzhxkmMrX49cpVDmQOH+4O7kX5OMRbmzMXe6Z5MsnxIlDlm3bJlcww==} + /@wyw-in-js/processor-utils@0.5.1: + resolution: {integrity: sha512-02kE/J+yABu7P+7djqcHyCkBiZV/SW7wgK65yikVVn/t5FNF9u6rZxIKWjrioeeODy5kKWFGzGyFFa3utPZoIA==} engines: {node: '>=16.0.0'} dependencies: '@babel/generator': 7.24.4 - '@wyw-in-js/shared': 0.5.0 + '@wyw-in-js/shared': 0.5.1 transitivePeerDependencies: - supports-color - dev: false - /@wyw-in-js/shared@0.5.0: - resolution: {integrity: sha512-W6Uic3cqRs75XZfXGOYH/0fADbl3Wz/kqnNaowgyNTdTN7/9vdlqk/D/gMT5WGolj4t418+rYe2FHHs0LdlmvA==} + /@wyw-in-js/shared@0.5.1: + resolution: {integrity: sha512-EXMP8oxXwAR4SMGgGcii8H/vahExT/e89ctm71KDbTNjG+AlQwzC3unyhMmxB5Jj2a0qnS8QTl4UuyHZ3HZeoQ==} engines: {node: '>=16.0.0'} dependencies: debug: 4.3.4(supports-color@8.1.1) @@ -8794,10 +8756,9 @@ packages: minimatch: 9.0.3 transitivePeerDependencies: - supports-color - dev: false - /@wyw-in-js/transform@0.5.0(patch_hash=zicb4vap2prvslgwedcxhpcmvy): - resolution: {integrity: sha512-tpa2/FsB30fdXB1E+9MmfxQYbRgLv/+VMKzpBKNraDH39zwnA2eGGAEho5gpqK40cEV7NH6zhVbaBcEnV0HQyw==} + /@wyw-in-js/transform@0.5.1: + resolution: {integrity: sha512-ob0iORbQbRJgRiDvU4bYDvPrKbJ+rFW2+V+pz9gpaf2VWrO+fTF0jIB3SnPB14XYCHs6bMWhfH6kzlDjaj8whg==} engines: {node: '>=16.0.0'} dependencies: '@babel/core': 7.24.4 @@ -8807,8 +8768,8 @@ packages: '@babel/template': 7.24.0 '@babel/traverse': 7.24.1 '@babel/types': 7.24.0 - '@wyw-in-js/processor-utils': 0.5.0 - '@wyw-in-js/shared': 0.5.0 + '@wyw-in-js/processor-utils': 0.5.1 + '@wyw-in-js/shared': 0.5.1 babel-merge: 3.0.0(@babel/core@7.24.4) cosmiconfig: 8.2.0 happy-dom: 12.10.3 @@ -8817,8 +8778,6 @@ packages: ts-invariant: 0.10.3 transitivePeerDependencies: - supports-color - dev: false - patched: true /@xtuc/ieee754@1.2.0: resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==} @@ -9538,7 +9497,7 @@ packages: '@babel/core': 7.24.4 find-cache-dir: 4.0.0 schema-utils: 4.2.0 - webpack: 5.91.0(esbuild@0.19.11)(webpack-cli@5.1.4) + webpack: 5.91.0(webpack-cli@5.1.4) dev: true /babel-merge@3.0.0(@babel/core@7.24.4): @@ -9550,12 +9509,11 @@ packages: '@babel/core': 7.24.4 deepmerge: 2.2.1 object.omit: 3.0.0 - dev: false /babel-plugin-define-var@0.1.0: resolution: {integrity: sha512-WcK43U4uz+9G35Wvdnyri4Tcg8Ux9/hSbQC4ckpfrHFQp8Cuz1BIQK5NswuGxT3T8cc3d4e55wDeSO4dViOugg==} engines: {node: '>=10'} - dev: false + dev: true /babel-plugin-istanbul@6.1.1: resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==} @@ -9886,16 +9844,6 @@ packages: semver: 7.6.0 dev: true - /bundle-require@4.0.2(esbuild@0.19.11): - resolution: {integrity: sha512-jwzPOChofl67PSTW2SGubV9HBQAhhR2i6nskiOThauo9dzwDUgOWQScFVaJkjEfYX+UXiD+LEx8EblQMc2wIag==} - engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} - peerDependencies: - esbuild: '>=0.17' - dependencies: - esbuild: 0.19.11 - load-tsconfig: 0.2.5 - dev: true - /busboy@1.6.0: resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==} engines: {node: '>=10.16.0'} @@ -9934,11 +9882,6 @@ packages: yargs-parser: 20.2.9 dev: false - /cac@6.7.14: - resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==} - engines: {node: '>=8'} - dev: true - /cacache@17.1.3: resolution: {integrity: sha512-jAdjGxmPxZh0IipMdR7fK/4sDSrHMLUV0+GvVUsjwyGNKHsh79kW/otg+GkbXwl6Uzvy9wsvHOX4nUoWldeZMg==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -10413,7 +10356,6 @@ packages: /clsx@2.1.0: resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==} engines: {node: '>=6'} - dev: false /cmd-shim@6.0.1: resolution: {integrity: sha512-S9iI9y0nKR4hwEQsVWpyxld/6kRfGepGfzff83FcaiEBpmvlbA2nnGe7Cylgrx2f/p1P5S5wpRm9oL8z1PbS3Q==} @@ -10568,7 +10510,7 @@ packages: dependencies: schema-utils: 4.2.0 serialize-javascript: 6.0.2 - webpack: 5.91.0(esbuild@0.19.11)(webpack-cli@5.1.4) + webpack: 5.91.0(webpack-cli@5.1.4) dev: true /compression@1.7.4: @@ -10983,7 +10925,6 @@ packages: /css.escape@1.5.1: resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==} - dev: false /cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} @@ -11301,7 +11242,6 @@ packages: /deepmerge@2.2.1: resolution: {integrity: sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==} engines: {node: '>=0.10.0'} - dev: false /deepmerge@4.3.1: resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} @@ -11931,6 +11871,7 @@ packages: '@esbuild/win32-arm64': 0.19.11 '@esbuild/win32-ia32': 0.19.11 '@esbuild/win32-x64': 0.19.11 + dev: true /esbuild@0.20.2: resolution: {integrity: sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==} @@ -12076,7 +12017,7 @@ packages: lodash: 4.17.21 resolve: 2.0.0-next.5 semver: 5.7.2 - webpack: 5.91.0(esbuild@0.19.11)(webpack-cli@5.1.4) + webpack: 5.91.0(webpack-cli@5.1.4) transitivePeerDependencies: - supports-color dev: true @@ -13441,7 +13382,6 @@ packages: webidl-conversions: 7.0.0 whatwg-encoding: 2.0.0 whatwg-mimetype: 3.0.0 - dev: false /hard-rejection@2.1.0: resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==} @@ -13644,7 +13584,7 @@ packages: lodash: 4.17.21 pretty-error: 4.0.0 tapable: 2.2.1 - webpack: 5.91.0(esbuild@0.19.11)(webpack-cli@5.1.4) + webpack: 5.91.0(webpack-cli@5.1.4) dev: true /htmlparser2@6.1.0: @@ -14068,7 +14008,6 @@ packages: engines: {node: '>=0.10.0'} dependencies: is-plain-object: 2.0.4 - dev: false /is-extglob@2.1.1: resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} @@ -14588,11 +14527,6 @@ packages: '@sideway/pinpoint': 2.0.0 dev: false - /joycon@3.1.1: - resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==} - engines: {node: '>=10'} - dev: true - /js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} @@ -15079,7 +15013,7 @@ packages: dependencies: glob: 7.2.3 minimatch: 3.1.2 - webpack: 5.91.0(esbuild@0.19.11)(webpack-cli@5.1.4) + webpack: 5.91.0(webpack-cli@5.1.4) webpack-merge: 4.2.2 dev: true @@ -15350,11 +15284,6 @@ packages: type-fest: 0.6.0 dev: true - /load-tsconfig@0.2.5: - resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==} - engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} - dev: true - /loader-runner@4.3.0: resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==} engines: {node: '>=6.11.5'} @@ -15516,10 +15445,6 @@ packages: resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==} dev: true - /lodash.sortby@4.7.0: - resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==} - dev: true - /lodash.throttle@4.1.1: resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==} dev: false @@ -16566,7 +16491,6 @@ packages: transitivePeerDependencies: - '@babel/core' - babel-plugin-macros - dev: false /nice-napi@1.0.2: resolution: {integrity: sha512-px/KnJAJZf5RuBGcfD+Sp2pAKq0ytz8j+1NehvgIGFkvtvFrDM3T8E4x/JJODXK9WZow8RRGrbA9QQ3hs+pDhA==} @@ -17120,7 +17044,6 @@ packages: engines: {node: '>=0.10.0'} dependencies: is-extendable: 1.0.1 - dev: false /object.values@1.1.7: resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==} @@ -18301,7 +18224,7 @@ packages: dependencies: loader-utils: 2.0.4 schema-utils: 3.3.0 - webpack: 5.91.0(esbuild@0.19.11)(webpack-cli@5.1.4) + webpack: 5.91.0(webpack-cli@5.1.4) dev: true /rc@1.2.8: @@ -19914,14 +19837,6 @@ packages: /source-map@0.7.4: resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==} engines: {node: '>= 8'} - dev: false - - /source-map@0.8.0-beta.0: - resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==} - engines: {node: '>= 8'} - dependencies: - whatwg-url: 7.1.0 - dev: true /sourcemap-codec@1.4.8: resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==} @@ -20374,7 +20289,6 @@ packages: dependencies: cssjanus: 2.1.0 stylis: 4.3.1 - dev: false /stylis@4.2.0: resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==} @@ -20578,7 +20492,7 @@ packages: rimraf: 2.6.3 dev: false - /terser-webpack-plugin@5.3.10(esbuild@0.19.11)(webpack@5.91.0): + /terser-webpack-plugin@5.3.10(webpack@5.91.0): resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==} engines: {node: '>= 10.13.0'} peerDependencies: @@ -20595,12 +20509,11 @@ packages: optional: true dependencies: '@jridgewell/trace-mapping': 0.3.25 - esbuild: 0.19.11 jest-worker: 27.5.1 schema-utils: 3.3.0 serialize-javascript: 6.0.2 terser: 5.29.2 - webpack: 5.91.0(esbuild@0.19.11)(webpack-cli@5.1.4) + webpack: 5.91.0(webpack-cli@5.1.4) /terser@5.29.2: resolution: {integrity: sha512-ZiGkhUBIM+7LwkNjXYJq8svgkd+QK3UUr0wJqY4MieaezBSAIPgbSPZyIx0idM6XWK5CMzSWa8MJIzmRcB8Caw==} @@ -20750,12 +20663,6 @@ packages: /tr46@0.0.3: resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==} - /tr46@1.0.1: - resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==} - dependencies: - punycode: 2.3.1 - dev: true - /tr46@5.0.0: resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==} engines: {node: '>=18'} @@ -20803,7 +20710,6 @@ packages: engines: {node: '>=8'} dependencies: tslib: 2.6.2 - dev: false /tsconfig-paths@3.15.0: resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==} @@ -20838,46 +20744,6 @@ packages: engines: {node: '>=0.6.x'} dev: false - /tsup@8.0.2(postcss@8.4.38)(typescript@5.4.5): - resolution: {integrity: sha512-NY8xtQXdH7hDUAZwcQdY/Vzlw9johQsaqf7iwZ6g1DOUlFYQ5/AtVAjTvihhEyeRlGo4dLRVHtrRaL35M1daqQ==} - engines: {node: '>=18'} - hasBin: true - peerDependencies: - '@microsoft/api-extractor': ^7.36.0 - '@swc/core': ^1 - postcss: ^8.4.12 - typescript: '>=4.5.0' - peerDependenciesMeta: - '@microsoft/api-extractor': - optional: true - '@swc/core': - optional: true - postcss: - optional: true - typescript: - optional: true - dependencies: - bundle-require: 4.0.2(esbuild@0.19.11) - cac: 6.7.14 - chokidar: 3.6.0 - debug: 4.3.4(supports-color@8.1.1) - esbuild: 0.19.11 - execa: 5.1.1 - globby: 11.1.0 - joycon: 3.1.1 - postcss: 8.4.38 - postcss-load-config: 4.0.1(postcss@8.4.38) - resolve-from: 5.0.0 - rollup: 4.13.0 - source-map: 0.8.0-beta.0 - sucrase: 3.34.0 - tree-kill: 1.2.2 - typescript: 5.4.5 - transitivePeerDependencies: - - supports-color - - ts-node - dev: true - /tsx@4.7.2: resolution: {integrity: sha512-BCNd4kz6fz12fyrgCTEdZHGJ9fWTGeUzXmQysh0RVocDY3h4frk05ZNCXSy4kIenF7y/QnrdiVpTsyNRn6vlAw==} engines: {node: '>=18.0.0'} @@ -21156,14 +21022,15 @@ packages: resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==} engines: {node: '>= 0.8'} - /unplugin@1.7.1: - resolution: {integrity: sha512-JqzORDAPxxs8ErLV4x+LL7bk5pk3YlcWqpSNsIkAZj972KzFZLClc/ekppahKkOczGkwIG6ElFgdOgOlK4tXZw==} + /unplugin@1.10.1: + resolution: {integrity: sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==} + engines: {node: '>=14.0.0'} dependencies: acorn: 8.11.3 chokidar: 3.6.0 webpack-sources: 3.2.3 webpack-virtual-modules: 0.6.1 - dev: false + dev: true /unzipper@0.10.11: resolution: {integrity: sha512-+BrAq2oFqWod5IESRjL3S8baohbevGcVA+teAIOYWM3pDVdseogqbzhhvvmiyQrUNKFUnDMtELW3X8ykbyDCJw==} @@ -21461,14 +21328,9 @@ packages: /webidl-conversions@3.0.1: resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} - /webidl-conversions@4.0.2: - resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==} - dev: true - /webidl-conversions@7.0.0: resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==} engines: {node: '>=12'} - dev: false /webpack-bundle-analyzer@4.10.2: resolution: {integrity: sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==} @@ -21520,7 +21382,7 @@ packages: import-local: 3.1.0 interpret: 3.1.1 rechoir: 0.8.0 - webpack: 5.91.0(esbuild@0.19.11)(webpack-cli@5.1.4) + webpack: 5.91.0(webpack-cli@5.1.4) webpack-bundle-analyzer: 4.10.2 webpack-merge: 5.9.0 @@ -21543,9 +21405,9 @@ packages: /webpack-virtual-modules@0.6.1: resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==} - dev: false + dev: true - /webpack@5.91.0(esbuild@0.19.11)(webpack-cli@5.1.4): + /webpack@5.91.0(webpack-cli@5.1.4): resolution: {integrity: sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==} engines: {node: '>=10.13.0'} hasBin: true @@ -21576,7 +21438,7 @@ packages: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(esbuild@0.19.11)(webpack@5.91.0) + terser-webpack-plugin: 5.3.10(webpack@5.91.0) watchpack: 2.4.1 webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack@5.91.0) webpack-sources: 3.2.3 @@ -21590,7 +21452,6 @@ packages: engines: {node: '>=12'} dependencies: iconv-lite: 0.6.3 - dev: false /whatwg-encoding@3.1.1: resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==} @@ -21606,7 +21467,6 @@ packages: /whatwg-mimetype@3.0.0: resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==} engines: {node: '>=12'} - dev: false /whatwg-mimetype@4.0.0: resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==} @@ -21627,14 +21487,6 @@ packages: tr46: 0.0.3 webidl-conversions: 3.0.1 - /whatwg-url@7.1.0: - resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==} - dependencies: - lodash.sortby: 4.7.0 - tr46: 1.0.1 - webidl-conversions: 4.0.2 - dev: true - /which-boxed-primitive@1.0.2: resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==} dependencies: @@ -22046,36 +21898,3 @@ packages: /zwitch@1.0.5: resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==} dev: false - - file:packages/pigment-css-react(@types/react@18.2.55)(react@18.2.0): - 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 - dependencies: - '@babel/core': 7.24.4 - '@babel/helper-module-imports': 7.24.3 - '@babel/helper-plugin-utils': 7.24.0 - '@babel/parser': 7.24.4 - '@babel/types': 7.24.0 - '@emotion/css': 11.11.2 - '@emotion/is-prop-valid': 1.2.2 - '@emotion/react': 11.11.4(@types/react@18.2.55)(react@18.2.0) - '@emotion/serialize': 1.1.4 - '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) - '@mui/system': link:packages/mui-system/build - '@wyw-in-js/processor-utils': 0.5.0 - '@wyw-in-js/shared': 0.5.0 - '@wyw-in-js/transform': 0.5.0(patch_hash=zicb4vap2prvslgwedcxhpcmvy) - clsx: 2.1.0 - cssesc: 3.0.0 - csstype: 3.1.3 - lodash: 4.17.21 - react: 18.2.0 - stylis: 4.3.1 - stylis-plugin-rtl: 2.1.1(stylis@4.3.1) - transitivePeerDependencies: - - '@types/react' - - supports-color - dev: false diff --git a/scripts/pigment-license.mjs b/scripts/pigment-license.mjs deleted file mode 100644 index 121cccded534c1..00000000000000 --- a/scripts/pigment-license.mjs +++ /dev/null @@ -1,11 +0,0 @@ -import * as path from 'node:path'; -import fse from 'fs-extra'; -import { getWorkspaceRoot } from './utils.mjs'; - -async function run() { - const licenseFile = path.join(getWorkspaceRoot(), 'LICENSE'); - const cwd = process.cwd(); - await fse.copyFile(licenseFile, path.join(cwd, 'LICENSE')); -} - -run(); diff --git a/tsconfig.json b/tsconfig.json index 7fa1f4d5fb5964..e0d1b0c02e34a7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -42,12 +42,6 @@ "@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-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-internal/docs-utils/src"], "@mui/internal-scripts/typescript-to-proptypes": [ "./packages-internal/scripts/typescript-to-proptypes/src" diff --git a/tsup.config.ts b/tsup.config.ts deleted file mode 100644 index 255be9ede538e7..00000000000000 --- a/tsup.config.ts +++ /dev/null @@ -1,36 +0,0 @@ -import * as path from 'node:path'; -import fs from 'node:fs'; -import { defineConfig } from 'tsup'; - -const pkgJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json'), 'utf8')); - -const licenseText = `/** - * ${pkgJson.name} v${pkgJson.version} - * - * @license ${pkgJson.license} - * This source code is licensed under the ${pkgJson.license} license found in the - * LICENSE file in the root directory of this source tree. - */ - `; - -export default defineConfig({ - entry: ['src/index.ts'], - outDir: 'build', - splitting: true, - sourcemap: true, - clean: true, - format: ['cjs', 'esm'], - treeshake: true, - cjsInterop: true, - dts: true, - silent: true, - banner: { - js: licenseText, - }, - env: { - PACKAGE_NAME: pkgJson.name, - }, - loader: { - '.js': 'jsx', - }, -}); diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index f5d6df1e58de0e..2bbaf1863cc74f 100644 --- a/webpackBaseConfig.js +++ b/webpackBaseConfig.js @@ -23,7 +23,6 @@ module.exports = { '@mui/utils': path.resolve(__dirname, './packages/mui-utils/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-css-react/src'), '@mui/internal-docs-utils': path.resolve(__dirname, './packages-internal/docs-utils/src'), '@mui/internal-scripts/typescript-to-proptypes': path.resolve( __dirname, From 61e3f764c22c14b1e25453abe04371399a78adcc Mon Sep 17 00:00:00 2001 From: Miguel Romero Date: Tue, 23 Apr 2024 08:00:24 -0700 Subject: [PATCH 02/10] [docs][material-ui] Add missing backticks to HTML tag in the installation page (#41972) Signed-off-by: Miguel Romero Co-authored-by: ZeeshanTamboli --- docs/data/material/getting-started/installation/installation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/getting-started/installation/installation.md b/docs/data/material/getting-started/installation/installation.md index 5be405621bd99a..b740437dafa801 100644 --- a/docs/data/material/getting-started/installation/installation.md +++ b/docs/data/material/getting-started/installation/installation.md @@ -108,7 +108,7 @@ Fontsource can be configured to load specific subsets, weights and styles. Mater ### Google Web Fonts -To install Roboto through the Google Web Fonts CDN, add the following code inside your project's tag: +To install Roboto through the Google Web Fonts CDN, add the following code inside your project's `` tag: ```html From 6365c523d21dd251f7ce5fad37a208daa92089a9 Mon Sep 17 00:00:00 2001 From: Zeeshan Tamboli Date: Tue, 23 Apr 2024 21:53:32 +0530 Subject: [PATCH 03/10] [test] Update browser versions in karma config (#42008) --- .../src/Autocomplete/Autocomplete.test.js | 6 +++--- test/karma.conf.js | 16 ++++++---------- test/karma.conf.profile.js | 17 +++++++---------- 3 files changed, 16 insertions(+), 23 deletions(-) diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index 9446aa9aed4a29..f6a04adaebb858 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -1529,9 +1529,9 @@ describe('', () => { //