diff --git a/apps/website/docs/react/ahead-of-time-compilation/with-babel.md b/apps/website/docs/react/ahead-of-time-compilation/with-babel.md index bff405335..f3964b673 100644 --- a/apps/website/docs/react/ahead-of-time-compilation/with-babel.md +++ b/apps/website/docs/react/ahead-of-time-compilation/with-babel.md @@ -13,14 +13,14 @@ import TabItem from '@theme/TabItem'; ```shell -yarn add --dev @griffel/babel-preset +yarn add --dev @griffel/babel-preset @griffel/tag-processor ``` ```shell -npm install --save-dev @griffel/babel-preset +npm install --save-dev @griffel/babel-preset @griffel/tag-processor ``` diff --git a/apps/website/docs/react/ahead-of-time-compilation/with-webpack.md b/apps/website/docs/react/ahead-of-time-compilation/with-webpack.md index 2c1096553..82068c6d8 100644 --- a/apps/website/docs/react/ahead-of-time-compilation/with-webpack.md +++ b/apps/website/docs/react/ahead-of-time-compilation/with-webpack.md @@ -13,14 +13,14 @@ import TabItem from '@theme/TabItem'; ```shell -yarn add --dev @griffel/webpack-loader +yarn add --dev @griffel/tag-processor @griffel/webpack-loader ``` ```shell -npm install --save-dev @griffel/webpack-loader +npm install --save-dev @griffel/tag-processor @griffel/webpack-loader ``` diff --git a/change/@griffel-babel-preset-b40a43d0-1b08-4469-8ac1-c1d56a93523d.json b/change/@griffel-babel-preset-b40a43d0-1b08-4469-8ac1-c1d56a93523d.json new file mode 100644 index 000000000..6c9c8f966 --- /dev/null +++ b/change/@griffel-babel-preset-b40a43d0-1b08-4469-8ac1-c1d56a93523d.json @@ -0,0 +1,7 @@ +{ + "type": "major", + "comment": "BREAKING: migrate to to wyw-in-js", + "packageName": "@griffel/babel-preset", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@griffel-react-0d6fd156-25c5-453b-a0d6-633a6c4adcb8.json b/change/@griffel-react-0d6fd156-25c5-453b-a0d6-633a6c4adcb8.json new file mode 100644 index 000000000..dd2c7f0dc --- /dev/null +++ b/change/@griffel-react-0d6fd156-25c5-453b-a0d6-633a6c4adcb8.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: add meta to package.json for @griffel/tag-processor", + "packageName": "@griffel/react", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@griffel-webpack-loader-294e1c0f-f12b-4129-b5dc-27cdebd726d0.json b/change/@griffel-webpack-loader-294e1c0f-f12b-4129-b5dc-27cdebd726d0.json new file mode 100644 index 000000000..971163a6c --- /dev/null +++ b/change/@griffel-webpack-loader-294e1c0f-f12b-4129-b5dc-27cdebd726d0.json @@ -0,0 +1,7 @@ +{ + "type": "major", + "comment": "BREAKING: migrate to to wyw-in-js", + "packageName": "@griffel/webpack-loader", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/e2e/nextjs/project.json b/e2e/nextjs/project.json index bff67292e..72f0ec2c9 100644 --- a/e2e/nextjs/project.json +++ b/e2e/nextjs/project.json @@ -3,7 +3,7 @@ "$schema": "../../node_modules/nx/schemas/project-schema.json", "sourceRoot": "e2e/nextjs/src", "projectType": "library", - "implicitDependencies": ["@griffel/webpack-loader"], + "implicitDependencies": ["@griffel/tag-processor", "@griffel/webpack-loader"], "targets": { "test": { "executor": "nx:run-commands", diff --git a/e2e/nextjs/src/test.ts b/e2e/nextjs/src/test.ts index 6d87c36f4..78766976f 100644 --- a/e2e/nextjs/src/test.ts +++ b/e2e/nextjs/src/test.ts @@ -26,6 +26,7 @@ async function performTest() { packLocalPackage(rootDir, tempDir, '@griffel/style-types'), packLocalPackage(rootDir, tempDir, '@griffel/core'), packLocalPackage(rootDir, tempDir, '@griffel/react'), + packLocalPackage(rootDir, tempDir, '@griffel/tag-processor'), packLocalPackage(rootDir, tempDir, '@griffel/webpack-extraction-plugin'), packLocalPackage(rootDir, tempDir, '@griffel/webpack-loader'), packLocalPackage(rootDir, tempDir, '@griffel/next-extraction-plugin'), diff --git a/package.json b/package.json index aec4b7ba4..d53a4453b 100644 --- a/package.json +++ b/package.json @@ -47,10 +47,12 @@ "@nrwl/web": "15.3.3", "@nrwl/workspace": "15.3.3", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10", + "@rspack/cli": "^0.3.6", "@storybook/addon-essentials": "6.5.15", "@storybook/builder-webpack5": "6.5.15", "@storybook/manager-webpack5": "6.5.15", "@storybook/react": "6.5.15", + "@swc/core": "^1.3.19", "@testing-library/jest-dom": "5.16.1", "@testing-library/react": "13.4.0", "@tsconfig/docusaurus": "^1.0.4", @@ -149,15 +151,10 @@ "@babel/template": "^7.22.15", "@babel/traverse": "^7.23.2", "@emotion/hash": "^0.9.0", - "@linaria/babel-preset": "^3.0.0-beta.24", - "@linaria/shaker": "^3.0.0-beta.22", - "@rspack/cli": "^0.3.6", - "@swc/core": "^1.3.19", "@typescript-eslint/utils": "^5.47.0", "ajv": "^8.4.0", "browserslist": "^4.19.1", "csstype": "^3.1.3", - "enhanced-resolve": "^5.8.2", "rtl-css-js": "^1.16.1", "source-map-js": "1.0.2", "stylis": "^4.2.0", diff --git a/packages/babel-preset/README.md b/packages/babel-preset/README.md index aa5635278..50e8a9fa5 100644 --- a/packages/babel-preset/README.md +++ b/packages/babel-preset/README.md @@ -22,9 +22,9 @@ A Babel preset that performs build time transforms for [`@griffel/react`](../rea ## Install ```bash -yarn add --dev @griffel/babel-preset +yarn add --dev @griffel/babel-preset @griffel/tag-processor # or -npm install --save-dev @griffel/babel-preset +npm install --save-dev @griffel/babel-preset @griffel/tag-processor ``` ## When to use it? @@ -50,22 +50,27 @@ import { makeStyles } from 'custom-package'; import { createStyles } from 'custom-package'; ``` -By default, preset handles imports from `@griffel/react` & `@fluentui/react-components`, to handle imports from custom packages settings should be tweaked: +By default, preset handles imports from `@griffel/react` & `@fluentui/react-components`, to handle imports from custom packages settings you need to include meta information to a matching `package.json`: ```json { - "presets": [ - [ - "@griffel", - { - "modules": [{ "moduleSource": "custom-package", "importName": "makeStyles" }] - } - ] - ] + "name": "custom-package", + "version": "1.0.0", + "linaria": { + "tags": { + "makeStyles": "@griffel/tag-processor/make-styles", + "makeResetStyles": "@griffel/tag-processor/make-reset-styles" + } + } } ``` -> **Note**: "custom-package" should re-export `__styles` function from `@griffel/react` +> **Note**: "custom-package" should re-export following functions from `@griffel/react`: +> +> - `__styles` +> - `__css` +> - `__resetStyles` +> - `__resetCSS` ### Configuring Babel settings @@ -157,9 +162,9 @@ const useStyles = makeStyles({ roughly to ```js -import { __styles } from '@griffel/react'; +import { __styles as _styles } from '@griffel/react'; -const useStyles = __styles(/* resolved styles */); +const useStyles = _styles(/* resolved styles */); ``` ## Access CSS output from code @@ -218,7 +223,7 @@ However, the concepts are not coupled to the repo setup. ### Module evaluation -The preset uses tools from [linaria](https://github.com/callstack/linaria) to evaluate runtime calls of `makeStyles`. +The preset reuses `@linaria/babel-preset` from [linaria](https://github.com/callstack/linaria) to evaluate runtime calls of `makeStyles` and `makeResetStyles`. [Linaria's debugging documentation can help here](https://github.com/callstack/linaria/blob/master/CONTRIBUTING.md#debugging-and-deep-dive-into-babel-plugin). Debugging output can be activated with following environment variables: @@ -232,9 +237,3 @@ On Windows it's required to set environment variables via [`set`](https://docs.m ```sh $ cross-env DEBUG=linaria\* LINARIA_LOG=debug yarn build ``` - -The debug output will include: - -- Prepared code -- Evaluated code -- AST that indicates what code has been shaken with `@linaria/shaker` diff --git a/packages/babel-preset/__fixtures__/assets-multiple-declarations/output.ts b/packages/babel-preset/__fixtures__/assets-multiple-declarations/output.ts index 56fa34f7a..32aed5e39 100644 --- a/packages/babel-preset/__fixtures__/assets-multiple-declarations/output.ts +++ b/packages/babel-preset/__fixtures__/assets-multiple-declarations/output.ts @@ -1,15 +1,13 @@ +import { __styles as _styles } from '@griffel/react'; import _asset2 from './empty.jpg'; import _asset from './blank.jpg'; -import { __styles } from '@griffel/react'; -import blank from './blank.jpg'; -import empty from './empty.jpg'; -export const useStyles = __styles( +export const useStyles = /*#__PURE__*/ _styles( { root: { - Bcmaq0h: 'fp00rh9', + Bcmaq0h: 'f1surbjy', }, }, { - d: [`.fp00rh9{background-image:url(${_asset}),url(${_asset2});}`], + d: [`.f1surbjy{background-image:url(${_asset}),url(${_asset2});}`], }, ); diff --git a/packages/babel-preset/__fixtures__/assets-reset-styles/output.ts b/packages/babel-preset/__fixtures__/assets-reset-styles/output.ts index f582824f6..611acf347 100644 --- a/packages/babel-preset/__fixtures__/assets-reset-styles/output.ts +++ b/packages/babel-preset/__fixtures__/assets-reset-styles/output.ts @@ -1,11 +1,9 @@ -import _asset2 from './empty.jpg'; +import { __resetStyles as _resetStyles } from '@griffel/react'; +import _asset3 from './empty.jpg'; +import _asset2 from './blank.jpg'; import _asset from './blank.jpg'; -import { __resetStyles } from '@griffel/react'; -import blank from './blank.jpg'; -import blankDuplicate from './blank.jpg'; -import empty from './empty.jpg'; -export const useStyles = __resetStyles('ra9m047', null, [ - `.ra9m047{background-image:url(${_asset});}`, - `.ra9m047:hover{background-image:url(${_asset});}`, - `.ra9m047:focus{background-image:url(${_asset2});}`, +export const useStyles = /*#__PURE__*/ _resetStyles('rzkd6zb', null, [ + `.rzkd6zb{background-image:url(${_asset});}`, + `.rzkd6zb:hover{background-image:url(${_asset2});}`, + `.rzkd6zb:focus{background-image:url(${_asset3});}`, ]); diff --git a/packages/babel-preset/__fixtures__/assets-urls/output.ts b/packages/babel-preset/__fixtures__/assets-urls/output.ts index 082fd705e..260058ea3 100644 --- a/packages/babel-preset/__fixtures__/assets-urls/output.ts +++ b/packages/babel-preset/__fixtures__/assets-urls/output.ts @@ -1,5 +1,5 @@ -import { __styles } from '@griffel/react'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { httpUrl: { Bcmaq0h: 'f405sdg', diff --git a/packages/babel-preset/__fixtures__/assets/output.ts b/packages/babel-preset/__fixtures__/assets/output.ts index 652af3b2d..b5c908aa8 100644 --- a/packages/babel-preset/__fixtures__/assets/output.ts +++ b/packages/babel-preset/__fixtures__/assets/output.ts @@ -1,30 +1,26 @@ -import _asset3 from './a.svg'; +import { __styles as _styles } from '@griffel/react'; import _asset2 from './empty.jpg'; import _asset from './blank.jpg'; -import { __styles } from '@griffel/react'; -import blank from './blank.jpg'; -import blankDuplicate from './blank.jpg'; -import empty from './empty.jpg'; -export const useStyles = __styles( +export const useStyles = /*#__PURE__*/ _styles( { rootA: { - Bcmaq0h: 'fnwsaxv', + Bcmaq0h: 'f1lg9ji5', }, rootB: { - Bcmaq0h: 'fnwsaxv', + Bcmaq0h: 'f1lg9ji5', }, rootC: { - Bcmaq0h: 'f1ryfumh', + Bcmaq0h: 'feire57', }, assetWithHash: { - Bhu2qc9: 'fv04sme', + Bhu2qc9: 'f12vvth1', }, }, { d: [ - `.fnwsaxv{background-image:url(${_asset});}`, - `.f1ryfumh{background-image:url(${_asset2});}`, - `.fv04sme{filter:url(${_asset3}#a);}`, + `.f1lg9ji5{background-image:url(${_asset});}`, + `.feire57{background-image:url(${_asset2});}`, + `.f12vvth1{filter:url(./a.svg#a);}`, ], }, ); diff --git a/packages/babel-preset/__fixtures__/at-rules/output.ts b/packages/babel-preset/__fixtures__/at-rules/output.ts index 6310605e7..0da41e64d 100644 --- a/packages/babel-preset/__fixtures__/at-rules/output.ts +++ b/packages/babel-preset/__fixtures__/at-rules/output.ts @@ -1,5 +1,5 @@ -import { __styles } from '@griffel/react'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { root: { cvzfql: ['f13wceqr', 'fmtq1hn'], diff --git a/packages/babel-preset/__fixtures__/config-babel-options/output.ts b/packages/babel-preset/__fixtures__/config-babel-options/output.ts index 658f15b66..2b7acf8df 100644 --- a/packages/babel-preset/__fixtures__/config-babel-options/output.ts +++ b/packages/babel-preset/__fixtures__/config-babel-options/output.ts @@ -1,13 +1,5 @@ -import { __styles } from '@griffel/react'; -const func = () => { - // This assignment has no sense, but it will prevent us from evaluation in AST - // This fixture uses "colorRenamePlugin.js" in transformPlugin's config so input we should get a different color - const color = 'red'; - return { - color, - }; -}; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { root: { sj55zd: 'f163i14w', diff --git a/packages/babel-preset/__fixtures__/config-evaluation-rules/output.ts b/packages/babel-preset/__fixtures__/config-evaluation-rules/output.ts index 303604072..2b7acf8df 100644 --- a/packages/babel-preset/__fixtures__/config-evaluation-rules/output.ts +++ b/packages/babel-preset/__fixtures__/config-evaluation-rules/output.ts @@ -1,6 +1,5 @@ -import { __styles } from '@griffel/react'; -import { colorRed } from './consts'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { root: { sj55zd: 'f163i14w', diff --git a/packages/babel-preset/__fixtures__/config-evaluation-rules/sampleEvaluator.js b/packages/babel-preset/__fixtures__/config-evaluation-rules/sampleEvaluator.js index 8871cf21f..2c2a3fb9c 100644 --- a/packages/babel-preset/__fixtures__/config-evaluation-rules/sampleEvaluator.js +++ b/packages/babel-preset/__fixtures__/config-evaluation-rules/sampleEvaluator.js @@ -1,12 +1,19 @@ // @ts-check -/** @type {import("@linaria/babel-preset").Evaluator} */ -const sampleEvaluator = () => { - // Evaluators transform input code to something that will be evaluated by Node later. In evaluatePathsInVM() we expect - // that results will be available as "exports.__mkPreval", this evaluator mocks it - const result = `exports.__mkPreval = [{ root: { color: 'blue' } }]`; +/** @type {import("@linaria/utils").Evaluator} */ +const sampleEvaluator = (babelOptions, ast) => { + // Evaluators transform input code to something that will be evaluated by Node + // later. Linaria expects that results will be available as + // "exports.__linariaPreval", this evaluator mocks it + const result = ` + exports.__linariaPreval = { + _exp: () => ({ + root: { color: 'blue' } + }) + }; + `; - return [result, null]; + return [ast, result, null]; }; module.exports.default = sampleEvaluator; diff --git a/packages/babel-preset/__fixtures__/duplicated-imports/code.ts b/packages/babel-preset/__fixtures__/duplicated-imports/code.ts index 8c4eb21f0..968db4043 100644 --- a/packages/babel-preset/__fixtures__/duplicated-imports/code.ts +++ b/packages/babel-preset/__fixtures__/duplicated-imports/code.ts @@ -1,12 +1,10 @@ -// @ts-expect-error This module does not exist, but will be resolved via aliases -import { createStylesA } from 'custom-package'; -// @ts-expect-error This module does not exist, but will be resolved via aliases -import { createStylesB } from 'custom-package'; +import { makeStyles as makeStylesA } from '@griffel/react'; +import { makeStyles as makeStylesB } from '@griffel/react'; -export const useClassesA = createStylesA({ +export const useClassesA = makeStylesA({ root: { color: 'red' }, }); -export const useClassesB = createStylesB({ +export const useClassesB = makeStylesB({ root: { color: 'yellow' }, }); diff --git a/packages/babel-preset/__fixtures__/duplicated-imports/output.ts b/packages/babel-preset/__fixtures__/duplicated-imports/output.ts index cd944f8b2..ff0abe6d0 100644 --- a/packages/babel-preset/__fixtures__/duplicated-imports/output.ts +++ b/packages/babel-preset/__fixtures__/duplicated-imports/output.ts @@ -1,8 +1,6 @@ -// @ts-expect-error This module does not exist, but will be resolved via aliases -import { __styles } from 'custom-package'; -// @ts-expect-error This module does not exist, but will be resolved via aliases -import { createStylesB } from 'custom-package'; -export const useClassesA = __styles( +import { __styles as _styles2 } from '@griffel/react'; +import { __styles as _styles } from '@griffel/react'; +export const useClassesA = /*#__PURE__*/ _styles( { root: { sj55zd: 'fe3e8s9', @@ -12,8 +10,13 @@ export const useClassesA = __styles( d: ['.fe3e8s9{color:red;}'], }, ); -export const useClassesB = createStylesB({ - root: { - color: 'yellow', +export const useClassesB = /*#__PURE__*/ _styles2( + { + root: { + sj55zd: 'f1aqe04n', + }, }, -}); + { + d: ['.f1aqe04n{color:yellow;}'], + }, +); diff --git a/packages/babel-preset/__fixtures__/error-argument-count/fixture.js b/packages/babel-preset/__fixtures__/error-argument-count/fixture.js deleted file mode 100644 index 1f0d00fd9..000000000 --- a/packages/babel-preset/__fixtures__/error-argument-count/fixture.js +++ /dev/null @@ -1,4 +0,0 @@ -import { makeStyles } from '@griffel/react'; - -// This file is .js intentionally to avoid TS compiler errors -export const useStyles = makeStyles({ root: { color: 'red' } }, 'foo'); diff --git a/packages/babel-preset/__fixtures__/function-mixin/output.ts b/packages/babel-preset/__fixtures__/function-mixin/output.ts index 51ced1db5..f48f0faf6 100644 --- a/packages/babel-preset/__fixtures__/function-mixin/output.ts +++ b/packages/babel-preset/__fixtures__/function-mixin/output.ts @@ -1,6 +1,5 @@ -import { __styles } from '@griffel/react'; -import { createMixin } from './mixins'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { avatar: { sj55zd: 'f1817uup', diff --git a/packages/babel-preset/__fixtures__/import-alias/output.ts b/packages/babel-preset/__fixtures__/import-alias/output.ts index 27d3dfbc6..44ef1b6c7 100644 --- a/packages/babel-preset/__fixtures__/import-alias/output.ts +++ b/packages/babel-preset/__fixtures__/import-alias/output.ts @@ -1,5 +1,5 @@ -import { __styles } from '@griffel/react'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { root: { sj55zd: 'fe3e8s9', diff --git a/packages/babel-preset/__fixtures__/import-custom-module/code.ts b/packages/babel-preset/__fixtures__/import-custom-module/code.ts deleted file mode 100644 index 05a61939e..000000000 --- a/packages/babel-preset/__fixtures__/import-custom-module/code.ts +++ /dev/null @@ -1,6 +0,0 @@ -// @ts-expect-error This module does not exist, but will be resolved via aliases -import { makeStyles } from 'custom-package'; - -export const useStyles = makeStyles({ - root: { color: 'red' }, -}); diff --git a/packages/babel-preset/__fixtures__/import-custom-module/output.ts b/packages/babel-preset/__fixtures__/import-custom-module/output.ts deleted file mode 100644 index e53499e0b..000000000 --- a/packages/babel-preset/__fixtures__/import-custom-module/output.ts +++ /dev/null @@ -1,12 +0,0 @@ -// @ts-expect-error This module does not exist, but will be resolved via aliases -import { __styles } from 'custom-package'; -export const useStyles = __styles( - { - root: { - sj55zd: 'fe3e8s9', - }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); diff --git a/packages/babel-preset/__fixtures__/import-custom-name/code.ts b/packages/babel-preset/__fixtures__/import-custom-name/code.ts deleted file mode 100644 index fe1f8436b..000000000 --- a/packages/babel-preset/__fixtures__/import-custom-name/code.ts +++ /dev/null @@ -1,6 +0,0 @@ -// @ts-expect-error This module does not exist, but will be resolved via aliases -import { createStyles } from 'custom-package'; - -export const useStyles = createStyles({ - root: { color: 'red' }, -}); diff --git a/packages/babel-preset/__fixtures__/import-custom-name/output.ts b/packages/babel-preset/__fixtures__/import-custom-name/output.ts deleted file mode 100644 index e53499e0b..000000000 --- a/packages/babel-preset/__fixtures__/import-custom-name/output.ts +++ /dev/null @@ -1,12 +0,0 @@ -// @ts-expect-error This module does not exist, but will be resolved via aliases -import { __styles } from 'custom-package'; -export const useStyles = __styles( - { - root: { - sj55zd: 'fe3e8s9', - }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); diff --git a/packages/babel-preset/__fixtures__/keyframes/output.ts b/packages/babel-preset/__fixtures__/keyframes/output.ts index 10655ab89..1edc6aebc 100644 --- a/packages/babel-preset/__fixtures__/keyframes/output.ts +++ b/packages/babel-preset/__fixtures__/keyframes/output.ts @@ -1,5 +1,5 @@ -import { __styles } from '@griffel/react'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { single: { Bv12yb3: ['f1g6ul6r', 'f1fp4ujf'], diff --git a/packages/babel-preset/__fixtures__/multiple-declarations/output.ts b/packages/babel-preset/__fixtures__/multiple-declarations/output.ts index 7a796c441..990a3a308 100644 --- a/packages/babel-preset/__fixtures__/multiple-declarations/output.ts +++ b/packages/babel-preset/__fixtures__/multiple-declarations/output.ts @@ -1,5 +1,6 @@ -import { __styles } from '@griffel/react'; -export const useStyles1 = __styles( +import { __styles as _styles2 } from '@griffel/react'; +import { __styles as _styles } from '@griffel/react'; +export const useStyles1 = /*#__PURE__*/ _styles( { root: { sj55zd: 'fe3e8s9', @@ -9,7 +10,7 @@ export const useStyles1 = __styles( d: ['.fe3e8s9{color:red;}'], }, ); -export const useStyles2 = __styles( +export const useStyles2 = /*#__PURE__*/ _styles2( { root: { sj55zd: 'fka9v86', diff --git a/packages/babel-preset/__fixtures__/non-existing-module-call/code.ts b/packages/babel-preset/__fixtures__/non-existing-module-call/code.ts deleted file mode 100644 index 82a5a97f7..000000000 --- a/packages/babel-preset/__fixtures__/non-existing-module-call/code.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { makeStyles } from '@griffel/react'; -import { createModule } from './module'; - -export const useStyles = makeStyles({ - container: { - color: 'red', - }, -}); - -createModule().baz(); diff --git a/packages/babel-preset/__fixtures__/non-existing-module-call/module.ts b/packages/babel-preset/__fixtures__/non-existing-module-call/module.ts deleted file mode 100644 index 3158365a5..000000000 --- a/packages/babel-preset/__fixtures__/non-existing-module-call/module.ts +++ /dev/null @@ -1,13 +0,0 @@ -type FakeModule = { - foo: () => void; - bar: () => void; - baz: () => void; -}; - -export function createModule(): FakeModule { - return { - foo: () => {}, - bar: () => {}, - // this implementation intentionally missing "baz" property to throw on calls in runtime - } as unknown as FakeModule; -} diff --git a/packages/babel-preset/__fixtures__/non-existing-module-call/output.ts b/packages/babel-preset/__fixtures__/non-existing-module-call/output.ts deleted file mode 100644 index f735a9172..000000000 --- a/packages/babel-preset/__fixtures__/non-existing-module-call/output.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { __styles } from '@griffel/react'; -import { createModule } from './module'; -export const useStyles = __styles( - { - container: { - sj55zd: 'fe3e8s9', - }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); -createModule().baz(); diff --git a/packages/babel-preset/__fixtures__/object-computed-keys/output.ts b/packages/babel-preset/__fixtures__/object-computed-keys/output.ts index 9e8cd4cff..7a7340c6f 100644 --- a/packages/babel-preset/__fixtures__/object-computed-keys/output.ts +++ b/packages/babel-preset/__fixtures__/object-computed-keys/output.ts @@ -1,6 +1,5 @@ -import { __styles } from '@griffel/react'; -const rootSlot = 'root'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { root: { sj55zd: 'fe3e8s9', diff --git a/packages/babel-preset/__fixtures__/object-imported-keys/output.ts b/packages/babel-preset/__fixtures__/object-imported-keys/output.ts index 3640bc8c4..98d4b5708 100644 --- a/packages/babel-preset/__fixtures__/object-imported-keys/output.ts +++ b/packages/babel-preset/__fixtures__/object-imported-keys/output.ts @@ -1,6 +1,5 @@ -import { __styles } from '@griffel/react'; -import { className, selector } from './consts'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { root: { B0egftl: 'f1wgwx3x', diff --git a/packages/babel-preset/__fixtures__/object-mixins/output.ts b/packages/babel-preset/__fixtures__/object-mixins/output.ts index 9d6f1d206..7cb95b6ae 100644 --- a/packages/babel-preset/__fixtures__/object-mixins/output.ts +++ b/packages/babel-preset/__fixtures__/object-mixins/output.ts @@ -1,6 +1,5 @@ -import { __styles } from '@griffel/react'; -import { flexStyles, gridStyles, typography } from './mixins'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { root: { mc9l5x: 'f22iagw', diff --git a/packages/babel-preset/__fixtures__/object-nesting/output.ts b/packages/babel-preset/__fixtures__/object-nesting/output.ts index d1304b8cc..d5555b4b5 100644 --- a/packages/babel-preset/__fixtures__/object-nesting/output.ts +++ b/packages/babel-preset/__fixtures__/object-nesting/output.ts @@ -1,6 +1,5 @@ -import { __styles } from '@griffel/react'; -import { colorBlue } from './consts'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { root: { mc9l5x: 'f22iagw', diff --git a/packages/babel-preset/__fixtures__/object-sequence-expr/code.ts b/packages/babel-preset/__fixtures__/object-sequence-expr/code.ts index dab6d2abf..27f2cf785 100644 --- a/packages/babel-preset/__fixtures__/object-sequence-expr/code.ts +++ b/packages/babel-preset/__fixtures__/object-sequence-expr/code.ts @@ -1,4 +1,5 @@ -import { makeStyles, GriffelStyle } from '@griffel/react'; +import { makeStyles } from '@griffel/react'; +import type { GriffelStyle } from '@griffel/react'; const switchClassName = 'fui-Switch'; let _a: Record; diff --git a/packages/babel-preset/__fixtures__/object-sequence-expr/output.ts b/packages/babel-preset/__fixtures__/object-sequence-expr/output.ts index 4da492c9c..1398f6832 100644 --- a/packages/babel-preset/__fixtures__/object-sequence-expr/output.ts +++ b/packages/babel-preset/__fixtures__/object-sequence-expr/output.ts @@ -1,7 +1,7 @@ -import { __styles, GriffelStyle } from '@griffel/react'; -const switchClassName = 'fui-Switch'; +import { __styles as _styles } from '@griffel/react'; +import type { GriffelStyle } from '@griffel/react'; let _a: Record; -export const useStyles = __styles( +export const useStyles = /*#__PURE__*/ _styles( { root: { ozcac4: 'f1cm6cy7', diff --git a/packages/babel-preset/__fixtures__/object-variables/output.ts b/packages/babel-preset/__fixtures__/object-variables/output.ts index 4d0f53c0c..703a35dcd 100644 --- a/packages/babel-preset/__fixtures__/object-variables/output.ts +++ b/packages/babel-preset/__fixtures__/object-variables/output.ts @@ -1,7 +1,5 @@ -import { __styles } from '@griffel/react'; -import { colorGreen, theme } from './vars'; -const colorRed = 'red'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { root: { sj55zd: 'fe3e8s9', diff --git a/packages/babel-preset/__fixtures__/object/output.ts b/packages/babel-preset/__fixtures__/object/output.ts index 3fbb29473..5297e9d31 100644 --- a/packages/babel-preset/__fixtures__/object/output.ts +++ b/packages/babel-preset/__fixtures__/object/output.ts @@ -1,5 +1,5 @@ -import { __styles } from '@griffel/react'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { root: { sj55zd: 'fe3e8s9', diff --git a/packages/babel-preset/__fixtures__/require-custom-module/code.ts b/packages/babel-preset/__fixtures__/require-custom-module/code.ts deleted file mode 100644 index 21ca02b1d..000000000 --- a/packages/babel-preset/__fixtures__/require-custom-module/code.ts +++ /dev/null @@ -1,10 +0,0 @@ -const react_make_styles_1 = require('custom-package'); - -export const useStyles = react_make_styles_1.makeStyles({ - root: { - fontSize: '14px', - lineHeight: 1, - }, -}); - -console.log(useStyles); diff --git a/packages/babel-preset/__fixtures__/require-custom-module/output.ts b/packages/babel-preset/__fixtures__/require-custom-module/output.ts deleted file mode 100644 index 6fd3af32f..000000000 --- a/packages/babel-preset/__fixtures__/require-custom-module/output.ts +++ /dev/null @@ -1,13 +0,0 @@ -const react_make_styles_1 = require('custom-package'); -export const useStyles = react_make_styles_1.__styles( - { - root: { - Be2twd7: 'fses1vf', - Bg96gwp: 'fp6vxd', - }, - }, - { - d: ['.fses1vf{font-size:14px;}', '.fp6vxd{line-height:1;}'], - }, -); -console.log(useStyles); diff --git a/packages/babel-preset/__fixtures__/require-reset-styles/code.ts b/packages/babel-preset/__fixtures__/require-reset-styles/code.ts index 2194b3342..9aa8f0ae0 100644 --- a/packages/babel-preset/__fixtures__/require-reset-styles/code.ts +++ b/packages/babel-preset/__fixtures__/require-reset-styles/code.ts @@ -1,6 +1,7 @@ -const react_make_styles_1 = require('@griffel/react'); - -export const useStyles = react_make_styles_1.makeResetStyles({ +const react_make_styles_2 = require('@griffel/react'); +const useResetStyles = react_make_styles_2.makeResetStyles({ fontSize: '14px', lineHeight: 1, }); + +exports.useResetStyles = useResetStyles; diff --git a/packages/babel-preset/__fixtures__/require-reset-styles/output.ts b/packages/babel-preset/__fixtures__/require-reset-styles/output.ts index 99637e266..2bf1728df 100644 --- a/packages/babel-preset/__fixtures__/require-reset-styles/output.ts +++ b/packages/babel-preset/__fixtures__/require-reset-styles/output.ts @@ -1,4 +1,3 @@ -const react_make_styles_1 = require('@griffel/react'); -export const useStyles = react_make_styles_1.__resetStyles('r1qlvv59', null, [ - '.r1qlvv59{font-size:14px;line-height:1;}', -]); +var _resetStyles = require('@griffel/react').__resetStyles; +const useResetStyles = /*#__PURE__*/ _resetStyles('r1qlvv59', null, ['.r1qlvv59{font-size:14px;line-height:1;}']); +exports.useResetStyles = useResetStyles; diff --git a/packages/babel-preset/__fixtures__/require/code.ts b/packages/babel-preset/__fixtures__/require/code.ts index 6d560d7ea..689b5b7e7 100644 --- a/packages/babel-preset/__fixtures__/require/code.ts +++ b/packages/babel-preset/__fixtures__/require/code.ts @@ -1,10 +1,9 @@ const react_make_styles_1 = require('@griffel/react'); - -export const useStyles = react_make_styles_1.makeStyles({ +const useStyles = react_make_styles_1.makeStyles({ root: { fontSize: '14px', lineHeight: 1, }, }); -console.log(useStyles); +exports.useStyles = useStyles; diff --git a/packages/babel-preset/__fixtures__/require/output.ts b/packages/babel-preset/__fixtures__/require/output.ts index e217c3f33..c3b4f1ad6 100644 --- a/packages/babel-preset/__fixtures__/require/output.ts +++ b/packages/babel-preset/__fixtures__/require/output.ts @@ -1,5 +1,5 @@ -const react_make_styles_1 = require('@griffel/react'); -export const useStyles = react_make_styles_1.__styles( +var _styles = require('@griffel/react').__styles; +const useStyles = /*#__PURE__*/ _styles( { root: { Be2twd7: 'fses1vf', @@ -10,4 +10,4 @@ export const useStyles = react_make_styles_1.__styles( d: ['.fses1vf{font-size:14px;}', '.fp6vxd{line-height:1;}'], }, ); -console.log(useStyles); +exports.useStyles = useStyles; diff --git a/packages/babel-preset/__fixtures__/reset-styles-at-rules/output.ts b/packages/babel-preset/__fixtures__/reset-styles-at-rules/output.ts index 2495b0f62..1fafb830f 100644 --- a/packages/babel-preset/__fixtures__/reset-styles-at-rules/output.ts +++ b/packages/babel-preset/__fixtures__/reset-styles-at-rules/output.ts @@ -1,5 +1,5 @@ -import { __resetStyles } from '@griffel/react'; -export const useStyles = __resetStyles('rjrhw4c', null, { +import { __resetStyles as _resetStyles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _resetStyles('rjrhw4c', null, { r: ['.rjrhw4c{color:red;}'], s: ['@supports (display: flex){.rjrhw4c{color:pink;}}', '@media (min-width: 100px){.rjrhw4c{color:blue;}}'], }); diff --git a/packages/babel-preset/__fixtures__/reset-styles/output.ts b/packages/babel-preset/__fixtures__/reset-styles/output.ts index 4101e2fc9..74d412f80 100644 --- a/packages/babel-preset/__fixtures__/reset-styles/output.ts +++ b/packages/babel-preset/__fixtures__/reset-styles/output.ts @@ -1,5 +1,5 @@ -import { __resetStyles } from '@griffel/react'; -export const useStyles = __resetStyles('rjefjbm', 'r7z97ji', [ +import { __resetStyles as _resetStyles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _resetStyles('rjefjbm', 'r7z97ji', [ '.rjefjbm{color:red;padding-left:4px;}', '.r7z97ji{color:red;padding-right:4px;}', ]); diff --git a/packages/babel-preset/__fixtures__/rules-with-metadata/output.ts b/packages/babel-preset/__fixtures__/rules-with-metadata/output.ts index f4541c5d5..66b27a1af 100644 --- a/packages/babel-preset/__fixtures__/rules-with-metadata/output.ts +++ b/packages/babel-preset/__fixtures__/rules-with-metadata/output.ts @@ -1,5 +1,5 @@ -import { __styles } from '@griffel/react'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { media: { Bulngiv: 'fr5o61b', diff --git a/packages/babel-preset/__fixtures__/shared-mixins/output.ts b/packages/babel-preset/__fixtures__/shared-mixins/output.ts index 62b5e43d3..8d8408893 100644 --- a/packages/babel-preset/__fixtures__/shared-mixins/output.ts +++ b/packages/babel-preset/__fixtures__/shared-mixins/output.ts @@ -1,6 +1,5 @@ -import { __styles } from '@griffel/react'; -import { sharedStyles } from './mixins'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { root: { mc9l5x: 'f22iagw', diff --git a/packages/babel-preset/__fixtures__/tokens/output.ts b/packages/babel-preset/__fixtures__/tokens/output.ts index d8744efb4..1d88c1ef7 100644 --- a/packages/babel-preset/__fixtures__/tokens/output.ts +++ b/packages/babel-preset/__fixtures__/tokens/output.ts @@ -1,6 +1,5 @@ -import { __styles } from '@griffel/react'; -import { tokens } from './tokens'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { root: { De3pzq: 'f1734hy', diff --git a/packages/babel-preset/__fixtures__/unsupported-css-properties/output.ts b/packages/babel-preset/__fixtures__/unsupported-css-properties/output.ts index f7330031a..f5930e731 100644 --- a/packages/babel-preset/__fixtures__/unsupported-css-properties/output.ts +++ b/packages/babel-preset/__fixtures__/unsupported-css-properties/output.ts @@ -1,5 +1,5 @@ -import { __styles } from '@griffel/react'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { root: {}, }, diff --git a/packages/babel-preset/package.json b/packages/babel-preset/package.json index 9bacfe397..80c81685b 100644 --- a/packages/babel-preset/package.json +++ b/packages/babel-preset/package.json @@ -9,15 +9,14 @@ }, "dependencies": { "@babel/core": "^7.23.2", - "@babel/generator": "^7.23.0", - "@babel/helper-plugin-utils": "^7.22.5", - "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.2", - "@griffel/core": "^1.15.1", "@linaria/babel-preset": "^3.0.0-beta.24", "@linaria/shaker": "^3.0.0-beta.22", + "@griffel/core": "^1.15.1", "ajv": "^8.4.0", "stylis": "^4.2.0", "tslib": "^2.1.0" + }, + "peerDependencies": { + "@griffel/tag-processor": "^0.0.1" } } diff --git a/packages/babel-preset/src/assets/absolutePathToRelative.test.ts b/packages/babel-preset/src/assets/absolutePathToRelative.test.ts deleted file mode 100644 index 1cd41fda4..000000000 --- a/packages/babel-preset/src/assets/absolutePathToRelative.test.ts +++ /dev/null @@ -1,62 +0,0 @@ -import * as path from 'path'; -import { absolutePathToRelative } from './absolutePathToRelative'; - -describe('absolutePathToRelative', () => { - it('handles POSIX paths', () => { - expect( - absolutePathToRelative( - path.posix, - '/home/projects/foo', - '/home/projects/foo/src/styles/Component.styles.ts', - 'assets/image.png', - ), - ).toBe('../../assets/image.png'); - - expect( - absolutePathToRelative( - path.posix, - '/home/projects/foo', - '/home/projects/foo/src/styles/Component.styles.ts', - 'src/styles/Component.png', - ), - ).toBe('./Component.png'); - - expect( - absolutePathToRelative( - path.posix, - '/home/projects/foo', - '/home/projects/foo/packages/components/src/index.styles.ts', - 'packages/components/src/images/Component.png', - ), - ).toBe('./images/Component.png'); - }); - - it('handles Windows paths', () => { - expect( - absolutePathToRelative( - path.win32, - 'C:\\Users\\Foo\\projects', - 'C:\\Users\\Foo\\projects\\src\\styles\\Component.styles.ts', - 'assets/image.png', - ), - ).toBe('../../assets/image.png'); - - expect( - absolutePathToRelative( - path.win32, - 'C:\\Users\\Foo\\projects', - 'C:\\Users\\Foo\\projects\\src\\styles\\Component.styles.ts', - 'src/styles/Component.png', - ), - ).toBe('./Component.png'); - - expect( - absolutePathToRelative( - path.win32, - 'C:\\Users\\Foo\\projects', - 'C:\\Users\\Foo\\projects\\packages\\components\\src\\index.styles.ts', - 'packages/components/src/images/Component.png', - ), - ).toBe('./images/Component.png'); - }); -}); diff --git a/packages/babel-preset/src/assets/absolutePathToRelative.ts b/packages/babel-preset/src/assets/absolutePathToRelative.ts deleted file mode 100644 index db7c23073..000000000 --- a/packages/babel-preset/src/assets/absolutePathToRelative.ts +++ /dev/null @@ -1,19 +0,0 @@ -export function absolutePathToRelative( - path: typeof import('path'), - projectRoot: string, - filename: string, - assetPath: string, -) { - const fileDirectory = path.dirname(filename); - const absoluteAssetPath = path.resolve(projectRoot, assetPath); - - let relativeAssetPath = path.relative(fileDirectory, absoluteAssetPath); - - if (!relativeAssetPath.startsWith('..' + path.sep)) { - relativeAssetPath = './' + relativeAssetPath; - } - - // Normalize paths to be POSIX-like as bundlers don't handle Windows paths - // "path.posix" does not make sense there as there is no "windows-to-posix-path" function - return relativeAssetPath.split(path.sep).join(path.posix.sep); -} diff --git a/packages/babel-preset/src/assets/isAssetUrl.test.ts b/packages/babel-preset/src/assets/isAssetUrl.test.ts deleted file mode 100644 index 4747dedc5..000000000 --- a/packages/babel-preset/src/assets/isAssetUrl.test.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { isAssetUrl } from './isAssetUrl'; - -describe('isAssetUrl', () => { - it('handles remote URLs', () => { - expect(isAssetUrl('data://example.com')).toBe(false); - expect(isAssetUrl('http://example.com')).toBe(false); - expect(isAssetUrl('https://example.com')).toBe(false); - expect(isAssetUrl('//example.com')).toBe(false); - expect(isAssetUrl('#svg-part')).toBe(false); - }); - - it('handles assets URLs', () => { - expect(isAssetUrl('../file.jpg')).toBe(true); - expect(isAssetUrl('./file.jpg')).toBe(true); - }); - - it('handles quotes around URLs', () => { - expect(isAssetUrl('"//example.com"')).toBe(false); - expect(isAssetUrl("'//example.com'")).toBe(false); - - expect(isAssetUrl('"./file.jpg"')).toBe(true); - expect(isAssetUrl("'./file.jpg'")).toBe(true); - }); -}); diff --git a/packages/babel-preset/src/assets/isAssetUrl.ts b/packages/babel-preset/src/assets/isAssetUrl.ts deleted file mode 100644 index 165ab36ae..000000000 --- a/packages/babel-preset/src/assets/isAssetUrl.ts +++ /dev/null @@ -1,11 +0,0 @@ -export function isAssetUrl(value: string): boolean { - const url = value.replace(/^['|"]/, ''); - const isRemoteUrl = - url.startsWith('data:') || - url.startsWith('http:') || - url.startsWith('https:') || - url.startsWith('//') /* Urls without protocol (use the same protocol as current page) */ || - url.startsWith('#'); - - return !isRemoteUrl; -} diff --git a/packages/babel-preset/src/assets/normalizeStyleRules.test.ts b/packages/babel-preset/src/assets/normalizeStyleRules.test.ts deleted file mode 100644 index 6076f617e..000000000 --- a/packages/babel-preset/src/assets/normalizeStyleRules.test.ts +++ /dev/null @@ -1,151 +0,0 @@ -import * as path from 'path'; -import { normalizeStyleRule, normalizeStyleRules } from './normalizeStyleRules'; - -describe('normalizeStyleRule', () => { - it('handles rules without quotes', () => { - expect( - normalizeStyleRule( - path.posix, - '/home/projects/foo', - '/home/projects/foo/src/styles/Component.styles.ts', - 'url(../../assets/image.png)', - ), - ).toBe('url(assets/image.png)'); - }); - - it('handles rules with quotes', () => { - expect( - normalizeStyleRule( - path.posix, - '/home/projects/foo', - '/home/projects/foo/src/styles/Component.styles.ts', - "url('../../assets/image.png')", - ), - ).toBe('url(assets/image.png)'); - expect( - normalizeStyleRule( - path.posix, - '/home/projects/foo', - '/home/projects/foo/src/styles/Component.styles.ts', - 'url("../../assets/image.png")', - ), - ).toBe('url(assets/image.png)'); - }); - - it('keeps data-url', () => { - expect( - normalizeStyleRule( - path.posix, - '/home/projects/foo', - '/home/projects/foo/src/styles/Component.styles.ts', - 'url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2Q==)', - ), - ).toBe('url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2Q==)'); - }); - - it('handles Windows paths', () => { - expect( - normalizeStyleRule( - path.win32, - 'C:\\Users\\Foo\\projects\\bar', - 'C:\\Users\\Foo\\projects\\bar\\src\\styles\\Component.styles.ts', - 'url(../../assets/image.png)', - ), - ).toBe('url(assets/image.png)'); - }); -}); - -describe('normalizeStyleRules', () => { - it('handles rules without metadata', () => { - expect( - normalizeStyleRules( - path.posix, - '/home/projects/foo', - '/home/projects/foo/src/styles/Component.styles.ts', - - { - root: { - color: 'red', - backgroundImage: 'url(../../assets/image.jpg)', - overflowY: ['hidden', 'scroll'], - - ':hover': { - backgroundImage: 'url(../../assets/hoverImage.jpg)', - }, - - '@media screen and (max-width: 100px)': { - '& .foo': { - backgroundImage: 'url(../../assets/mediaImage.jpg)', - }, - }, - }, - }, - ), - ).toEqual({ - root: { - color: 'red', - backgroundImage: 'url(assets/image.jpg)', - overflowY: ['hidden', 'scroll'], - - ':hover': { - backgroundImage: 'url(assets/hoverImage.jpg)', - }, - - '@media screen and (max-width: 100px)': { - '& .foo': { - backgroundImage: 'url(assets/mediaImage.jpg)', - }, - }, - }, - }); - }); - - it('handles multiple URLs', () => { - expect( - normalizeStyleRules( - path.posix, - '/home/projects/foo', - '/home/projects/foo/src/styles/Component.styles.ts', - - { - root: { - // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds - backgroundImage: [ - 'url(../../assets/firefox.png),', - 'url(../../assets/bubbles.png),', - 'linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0))', - ].join(' '), - }, - }, - ), - ).toEqual({ - root: { - backgroundImage: [ - 'url(assets/firefox.png),', - 'url(assets/bubbles.png),', - 'linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0))', - ].join(' '), - }, - }); - }); - - it('handles keyframe arrays', () => { - expect( - normalizeStyleRules( - path.posix, - '/home/projects/foo', - '/home/projects/foo/src/styles/Component.styles.ts', - - { - root: { - animationName: [{ from: { height: '20px' }, to: { height: '10px' } }], - }, - }, - ), - ).toEqual({ - root: { - animationName: [{ from: { height: '20px' }, to: { height: '10px' } }], - }, - }); - }); -}); diff --git a/packages/babel-preset/src/assets/normalizeStyleRules.ts b/packages/babel-preset/src/assets/normalizeStyleRules.ts deleted file mode 100644 index c56fd8dd2..000000000 --- a/packages/babel-preset/src/assets/normalizeStyleRules.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { GriffelAnimation, GriffelStyle } from '@griffel/core'; -import { tokenize } from 'stylis'; - -import { isAssetUrl } from './isAssetUrl'; - -/** - * Linaria v3 emits relative paths for assets, we normalize these paths to be relative from the project root to be the - * same if an assets was used in different files. - */ -export function normalizeAssetPath(path: typeof import('path'), projectRoot: string, filename: string, asset: string) { - const absoluteAssetPath = path.resolve(path.dirname(filename), asset); - - // Normalize paths to be POSIX-like to be independent of an execution environment - return path.relative(projectRoot, absoluteAssetPath).split(path.sep).join(path.posix.sep); -} - -export function normalizeStyleRule( - path: typeof import('path'), - projectRoot: string, - filename: string, - ruleValue: string | number, -) { - if (typeof ruleValue === 'number' || ruleValue.indexOf('url(') === -1) { - return ruleValue; - } - - return tokenize(ruleValue).reduce((result, token, index, array) => { - if (token === 'url') { - const url = array[index + 1].slice(1, -1); - - if (isAssetUrl(url)) { - array[index + 1] = `(${normalizeAssetPath( - path, - projectRoot, - filename, - // Quotes in URL are optional, so we can also normalize them as we know that it's a file path - // https://www.w3.org/TR/CSS2/syndata.html#value-def-uri - url.replace(/^['|"](.+)['|"]$/, '$1'), - )})`; - } else { - // Always replace with normalized value, so @griffel/core can de-duplicate them. - array[index + 1] = `(${url})`; - } - } - - return result + token; - }, ''); -} - -export function normalizeStyleRules( - path: typeof import('path'), - projectRoot: string, - filename: string, - stylesBySlots: Record | GriffelStyle, -): Record { - return Object.fromEntries( - Object.entries(stylesBySlots).map(([key, value]) => { - if (typeof value === 'undefined') { - return [key, value]; - } - - // Fallback values or keyframes - if (Array.isArray(value)) { - return [ - key, - value.map(rule => { - if (typeof rule === 'object') { - return normalizeStyleRules(path, projectRoot, filename, rule as GriffelAnimation); - } - - return normalizeStyleRule(path, projectRoot, filename, rule); - }), - ]; - } - - // Nested objects - if (typeof value === 'object') { - return [key, normalizeStyleRules(path, projectRoot, filename, value as unknown as GriffelStyle)]; - } - - return [key, normalizeStyleRule(path, projectRoot, filename, value)]; - }), - ); -} diff --git a/packages/babel-preset/src/assets/replaceAssetsWithImports.ts b/packages/babel-preset/src/assets/replaceAssetsWithImports.ts deleted file mode 100644 index fb64fa2df..000000000 --- a/packages/babel-preset/src/assets/replaceAssetsWithImports.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { NodePath, traverse, types as t } from '@babel/core'; -import * as path from 'path'; -import { tokenize } from 'stylis'; - -import { absolutePathToRelative } from './absolutePathToRelative'; -import { isAssetUrl } from './isAssetUrl'; - -/** - * Replaces assets used in styles with imports and template literals. - * - * @example - * "['.foo { background-image: url(image.png) }" - * // to - * import _asset from 'image.png' - * `['.foo { background-image: url(${_asset}) }` - */ -export function replaceAssetsWithImports( - projectRoot: string, - filename: string, - programPath: NodePath, - pathToUpdate: NodePath, -) { - const assetIdentifiers = new Map(); - - function getAssetIdentifier(assetPath: string): t.Identifier { - if (!assetIdentifiers.has(assetPath)) { - assetIdentifiers.set(assetPath, programPath.scope.generateUidIdentifier('asset')); - } - - return assetIdentifiers.get(assetPath) as t.Identifier; - } - - function buildTemplateLiteralFromValue(value: string): t.TemplateLiteral { - const tokens = tokenize(value); - - const quasis: t.TemplateElement[] = []; - const expressions: t.Identifier[] = []; - - let acc = ''; - - for (let i = 0, l = tokens.length; i < l; i++) { - acc += tokens[i]; - - if (tokens[i] === 'url') { - const url = tokens[i + 1].slice(1, -1); - - if (isAssetUrl(url)) { - // Handle `filter: url(./a.svg#id)` - const [pathname, hash] = url.split('#'); - - quasis.push(t.templateElement({ raw: acc + '(' }, false)); - expressions.push(getAssetIdentifier(pathname)); - - acc = `${hash ? `#${hash}` : ''})`; - i++; - } - } - } - - quasis.push(t.templateElement({ raw: acc }, true)); - - return t.templateLiteral(quasis, expressions); - } - - traverse( - pathToUpdate.node, - { - StringLiteral(literalPath) { - const value = literalPath.node.value; - - if (value.indexOf('url(') === -1) { - return; - } - - literalPath.replaceWith(buildTemplateLiteralFromValue(value)); - }, - }, - programPath.scope, - programPath, - ); - - for (const [importPath, identifier] of assetIdentifiers.entries()) { - const relativePath = absolutePathToRelative(path, projectRoot, filename, importPath); - - programPath.unshiftContainer( - 'body', - t.importDeclaration([t.importDefaultSpecifier(identifier)], t.stringLiteral(relativePath)), - ); - } -} diff --git a/packages/babel-preset/src/transformPlugin.test.ts b/packages/babel-preset/src/index.test.ts similarity index 83% rename from packages/babel-preset/src/transformPlugin.test.ts rename to packages/babel-preset/src/index.test.ts index 49ee88ca0..65e95ba6b 100644 --- a/packages/babel-preset/src/transformPlugin.test.ts +++ b/packages/babel-preset/src/index.test.ts @@ -15,11 +15,7 @@ pluginTester({ babelOptions: { parserOpts: { plugins: ['typescript'], - }, - }, - pluginOptions: { - babelOptions: { - presets: ['@babel/typescript'], + sourceType: 'unambiguous', }, }, formatResult: code => @@ -41,9 +37,6 @@ pluginTester({ title: 'duplicated imports', fixture: path.resolve(fixturesDir, 'duplicated-imports', 'code.ts'), outputFixture: path.resolve(fixturesDir, 'duplicated-imports', 'output.ts'), - pluginOptions: { - modules: [{ moduleSource: 'custom-package', importName: 'createStylesA' }], - }, }, { title: 'at rules', @@ -55,11 +48,6 @@ pluginTester({ fixture: path.resolve(fixturesDir, 'multiple-declarations', 'code.ts'), outputFixture: path.resolve(fixturesDir, 'multiple-declarations', 'output.ts'), }, - { - title: 'call of non existing module', - fixture: path.resolve(fixturesDir, 'non-existing-module-call', 'code.ts'), - outputFixture: path.resolve(fixturesDir, 'non-existing-module-call', 'output.ts'), - }, { title: 'syntax: animationName', fixture: path.resolve(fixturesDir, 'keyframes', 'code.ts'), @@ -151,9 +139,9 @@ pluginTester({ title: 'config: babelOptions', fixture: path.resolve(fixturesDir, 'config-babel-options', 'code.ts'), outputFixture: path.resolve(fixturesDir, 'config-babel-options', 'output.ts'), - pluginOptions: { + presetOptions: { babelOptions: { - plugins: ['./packages/babel-preset/__fixtures__/config-babel-options/colorRenamePlugin'], + plugins: [path.resolve(fixturesDir, 'config-babel-options', 'colorRenamePlugin.js')], }, }, }, @@ -161,12 +149,8 @@ pluginTester({ title: 'config: evaluationRules', fixture: path.resolve(fixturesDir, 'config-evaluation-rules', 'code.ts'), outputFixture: path.resolve(fixturesDir, 'config-evaluation-rules', 'output.ts'), - pluginOptions: { - evaluationRules: [ - { - action: 'sampleEvaluator', - }, - ], + presetOptions: { + evaluationRules: [{ action: 'sampleEvaluator' }], }, }, @@ -197,36 +181,11 @@ pluginTester({ fixture: path.resolve(fixturesDir, 'import-alias', 'code.ts'), outputFixture: path.resolve(fixturesDir, 'import-alias', 'output.ts'), }, - { - title: 'imports: custom module', - fixture: path.resolve(fixturesDir, 'import-custom-module', 'code.ts'), - outputFixture: path.resolve(fixturesDir, 'import-custom-module', 'output.ts'), - pluginOptions: { - modules: [{ moduleSource: 'custom-package', importName: 'makeStyles' }], - }, - }, - { - title: 'imports: custom module name', - fixture: path.resolve(fixturesDir, 'import-custom-name', 'code.ts'), - outputFixture: path.resolve(fixturesDir, 'import-custom-name', 'output.ts'), - pluginOptions: { - modules: [{ moduleSource: 'custom-package', importName: 'createStyles' }], - }, - }, { title: 'imports: require()', fixture: path.resolve(fixturesDir, 'require', 'code.ts'), outputFixture: path.resolve(fixturesDir, 'require', 'output.ts'), }, - { - title: 'imports: require() with custom module', - fixture: path.resolve(fixturesDir, 'require-custom-module', 'code.ts'), - outputFixture: path.resolve(fixturesDir, 'require-custom-module', 'output.ts'), - pluginOptions: { - modules: [{ moduleSource: 'custom-package', importName: 'makeStyles' }], - }, - }, - { title: 'imports: require() for makeResetStyles', fixture: path.resolve(fixturesDir, 'require-reset-styles', 'code.ts'), @@ -240,6 +199,7 @@ pluginTester({ title: 'errors: unsupported shorthand CSS properties', fixture: path.resolve(fixturesDir, 'unsupported-css-properties', 'fixture.ts'), outputFixture: path.resolve(fixturesDir, 'unsupported-css-properties', 'output.ts'), + setup() { const consoleSpy = jest.spyOn(console, 'error').mockImplementation(); @@ -248,15 +208,10 @@ pluginTester({ }; }, }, - { - title: 'errors: throws on invalid argument count', - fixture: path.resolve(fixturesDir, 'error-argument-count', 'fixture.js'), - error: /function accepts only a single param/, - }, { title: 'errors: throws on invalid config', fixture: path.resolve(fixturesDir, 'error-config-babel-options', 'fixture.ts'), - pluginOptions: { + presetOptions: { babelOptions: { plugins: {}, }, @@ -265,8 +220,11 @@ pluginTester({ }, ], - plugin: transformPlugin, - pluginName: '@griffel/babel-plugin-transform', + preset: griffelPreset, + presetName: '@griffel/babel-preset', + presetOptions: { + babelOptions: { presets: ['@babel/preset-typescript'] }, + }, }); // TODO use the plugin tester and all existing fixtures once there is support for that diff --git a/packages/babel-preset/src/index.ts b/packages/babel-preset/src/index.ts index e104771b6..e119e098f 100644 --- a/packages/babel-preset/src/index.ts +++ b/packages/babel-preset/src/index.ts @@ -1,17 +1,20 @@ -import { transformPlugin } from './transformPlugin'; - import type { ConfigAPI } from '@babel/core'; +import linariaPreset, { PluginOptions } from '@linaria/babel-preset'; + +import { validateOptions } from './validateOptions'; import type { BabelPluginOptions, BabelPluginMetadata } from './types'; export { default as shakerEvaluator } from '@linaria/shaker'; -export { EvalCache, Module } from '@linaria/babel-preset'; export { configSchema } from './schema'; -export type { Evaluator, EvalRule } from '@linaria/babel-preset'; +export type { Evaluator, EvalRule } from '@linaria/utils'; export type { BabelPluginOptions, BabelPluginMetadata }; -export default function griffelPreset(babel: ConfigAPI, options: BabelPluginOptions) { - return { - plugins: [[transformPlugin, options]], - }; +export default function griffelPreset(babel: ConfigAPI, options: BabelPluginOptions = {}) { + const { babelOptions, evaluationRules } = validateOptions(options); + + return linariaPreset(babel, { + babelOptions, + rules: evaluationRules, + } as PluginOptions); } diff --git a/packages/babel-preset/src/schema.ts b/packages/babel-preset/src/schema.ts index 71d1ae8f8..43463fb1b 100644 --- a/packages/babel-preset/src/schema.ts +++ b/packages/babel-preset/src/schema.ts @@ -9,21 +9,6 @@ export const configSchema: JSONSchema7 = { generateMetadata: { type: 'boolean', }, - modules: { - type: 'array', - items: { - type: 'object', - required: ['moduleSource', 'importName'], - properties: { - moduleSource: { - type: 'string', - }, - importName: { - type: 'string', - }, - }, - }, - }, babelOptions: { type: 'object', properties: { @@ -48,9 +33,6 @@ export const configSchema: JSONSchema7 = { }, }, }, - projectRoot: { - type: 'string', - }, }, additionalProperties: false, }; diff --git a/packages/babel-preset/src/transformPlugin.ts b/packages/babel-preset/src/transformPlugin.ts deleted file mode 100644 index c0dde9f58..000000000 --- a/packages/babel-preset/src/transformPlugin.ts +++ /dev/null @@ -1,485 +0,0 @@ -import { NodePath, PluginObj, PluginPass, types as t } from '@babel/core'; -import { declare } from '@babel/helper-plugin-utils'; -import { Module } from '@linaria/babel-preset'; -import shakerEvaluator from '@linaria/shaker'; -import { - resolveStyleRulesForSlots, - GriffelStyle, - resolveResetStyleRules, - CSSRulesByBucket, - CSSClassesMapBySlot, - normalizeCSSBucketEntry, -} from '@griffel/core'; -import * as path from 'path'; - -import { normalizeStyleRules } from './assets/normalizeStyleRules'; -import { replaceAssetsWithImports } from './assets/replaceAssetsWithImports'; -import { dedupeCSSRules } from './utils/dedupeCSSRules'; -import { evaluatePaths } from './utils/evaluatePaths'; -import { BabelPluginOptions, BabelPluginMetadata } from './types'; -import { validateOptions } from './validateOptions'; - -type FunctionKinds = 'makeStyles' | 'makeResetStyles'; - -type BabelPluginState = PluginPass & { - importDeclarationPaths?: NodePath[]; - requireDeclarationPath?: NodePath; - - definitionPaths?: { - /** The name of the resulting hook from a Griffel call */ - declaratorId: string; - /** The type of Griffel call */ - functionKind: FunctionKinds; - /** The code path of the Griffel call */ - path: NodePath; - }[]; - calleePaths?: NodePath[]; - cssEntries?: BabelPluginMetadata['cssEntries']; - cssResetEntries?: BabelPluginMetadata['cssResetEntries']; -}; - -function getDefinitionPathFromCallExpression( - functionKind: FunctionKinds, - callExpression: NodePath, -): NodePath { - const argumentPaths = callExpression.get('arguments'); - const hasValidArguments = Array.isArray(argumentPaths) && argumentPaths.length === 1; - - if (!hasValidArguments) { - throw callExpression.buildCodeFrameError(`${functionKind}() function accepts only a single param`); - } - - const definitionsPath = argumentPaths[0]; - - if (definitionsPath.isExpression() || definitionsPath.isSpreadElement()) { - return definitionsPath; - } - - throw definitionsPath.buildCodeFrameError(`${functionKind}() function accepts only expressions and spreads`); -} - -/** - * Gets a kind of passed callee. - */ -function getCalleeFunctionKind( - path: NodePath, - modules: NonNullable, -): FunctionKinds | null { - for (const module of modules) { - if (path.referencesImport(module.moduleSource, module.importName)) { - return 'makeStyles'; - } - - if (path.referencesImport(module.moduleSource, module.resetImportName || 'makeResetStyles')) { - return 'makeResetStyles'; - } - } - - return null; -} - -/** - * Gets the id of the parent variable declarator - */ -function getParentDeclaratorId(path: NodePath | NodePath): string { - const declarator = path.findParent(p => p.isVariableDeclarator()); - if (declarator?.isVariableDeclarator()) { - const id = declarator.get('id'); - if (id.isIdentifier()) { - return id.node.name; - } - } - - return 'unknownHook'; -} - -/** - * Extracts CSS rules from evaluated reset styles to metadata - */ -function buildCSSResetEntriesMetadata( - state: Required, - cssRules: string[] | CSSRulesByBucket, - declaratorId: string, -) { - const cssRulesByBucket: CSSRulesByBucket = Array.isArray(cssRules) ? { d: cssRules } : cssRules; - state.cssResetEntries[declaratorId] ??= []; - state.cssResetEntries[declaratorId] = Object.values(cssRulesByBucket).flatMap(bucketEntries => { - return bucketEntries.map(bucketEntry => { - if (Array.isArray(bucketEntry)) { - throw new Error( - `CSS rules in buckets for "makeResetStyles()" should not contain arrays, got: ${JSON.stringify( - bucketEntry, - )})}`, - ); - } - - return bucketEntry; - }); - }); -} - -/** - * Extracts CSS rules from evaluated styles to metadata - */ -function buildCSSEntriesMetadata( - state: Required, - classnamesMapping: CSSClassesMapBySlot, - cssRulesByBucket: CSSRulesByBucket, - declaratorId: string, -) { - const classesBySlot: Record = Object.fromEntries( - Object.entries(classnamesMapping).map(([slot, cssClassesMap]) => { - return [ - slot, - Object.values(cssClassesMap).flatMap(cssClasses => (Array.isArray(cssClasses) ? cssClasses : [cssClasses])), - ]; - }), - ); - - const cssRules: string[] = Object.values(cssRulesByBucket).flatMap(cssRulesByBucket => { - return cssRulesByBucket.map(bucketEntry => { - const [cssRule] = normalizeCSSBucketEntry(bucketEntry); - return cssRule; - }); - }); - - state.cssEntries[declaratorId] = Object.fromEntries( - Object.entries(classesBySlot).map(([slot, cssClasses]) => { - return [ - slot, - cssClasses.map(cssClass => { - return cssRules.find(rule => rule.includes(cssClass))!; - }), - ]; - }), - ); -} - -/** - * Checks if import statement import makeStyles(). - */ -function hasMakeStylesImport( - path: NodePath, - modules: NonNullable, -): boolean { - return Boolean(modules.find(module => path.node.source.value === module.moduleSource)); -} - -/** - * Checks that passed declarator imports makesStyles(). - * - * @example react_make_styles_1 = require('@griffel/react') - */ -function isRequireDeclarator( - path: NodePath, - modules: NonNullable, -): boolean { - const initPath = path.get('init'); - - if (!initPath.isCallExpression()) { - return false; - } - - if (initPath.get('callee').isIdentifier({ name: 'require' })) { - const args = initPath.get('arguments'); - - if (Array.isArray(args) && args.length === 1) { - const moduleNamePath = args[0]; - - if (moduleNamePath.isStringLiteral()) { - return Boolean(modules.find(module => moduleNamePath.node.value === module.moduleSource)); - } - } - } - - return false; -} - -export const transformPlugin = declare, PluginObj>((api, options) => { - api.assertVersion(7); - - const pluginOptions: Required = { - babelOptions: {}, - generateMetadata: false, - modules: [ - { moduleSource: '@griffel/react', importName: 'makeStyles' }, - { moduleSource: '@fluentui/react-components', importName: 'makeStyles' }, - ], - evaluationRules: [ - { action: shakerEvaluator }, - { - test: /[/\\]node_modules[/\\]/, - action: 'ignore', - }, - ], - projectRoot: process.cwd(), - - ...options, - }; - - validateOptions(pluginOptions); - - return { - name: '@griffel/babel-plugin-transform', - - pre() { - this.importDeclarationPaths = []; - this.definitionPaths = []; - this.calleePaths = []; - this.cssEntries = {}; - this.cssResetEntries = {}; - - if (pluginOptions.generateMetadata) { - Object.assign(this.file.metadata, { - cssResetEntries: {}, - cssEntries: {}, - } as BabelPluginMetadata); - } - }, - - visitor: { - Program: { - enter(programPath, state) { - if (typeof state.filename === 'undefined') { - throw new Error( - [ - '@griffel/babel-preset: This preset requires "filename" option to be specified by Babel. ', - "It's automatically done by Babel and our loaders/plugins. ", - "If you're facing this issue, please check your setup.\n\n", - 'See: https://babeljs.io/docs/en/options#filename', - ].join(''), - ); - } - - // Invalidate cache for module evaluation to get fresh modules - Module.invalidate(); - }, - - exit(programPath, state) { - if (state.importDeclarationPaths!.length === 0 && !state.requireDeclarationPath) { - return; - } - - if (state.definitionPaths) { - // Runs Babel AST processing or module evaluation for Node once for all arguments of makeStyles() calls once - evaluatePaths( - programPath, - state.file.opts.filename!, - state.definitionPaths.map(p => p.path), - pluginOptions, - ); - - state.definitionPaths.forEach(definitionPath => { - const callExpressionPath = definitionPath.path.findParent(parentPath => - parentPath.isCallExpression(), - ) as NodePath; - const evaluationResult = definitionPath.path.evaluate(); - - if (!evaluationResult.confident) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const deoptPath = (evaluationResult as any).deopt as NodePath | undefined; - throw (deoptPath || definitionPath.path).buildCodeFrameError( - 'Evaluation of a code fragment failed, this is a bug, please report it', - ); - } - - if (definitionPath.functionKind === 'makeStyles') { - const stylesBySlots: Record = evaluationResult.value; - const [classnamesMapping, cssRulesByBucket] = resolveStyleRulesForSlots( - // Heads up! - // Style rules should be normalized *before* they will be resolved to CSS rules to have deterministic - // results across different build targets. - normalizeStyleRules( - path, - pluginOptions.projectRoot, - // Presence of "state.filename" is validated on `Program.enter()` - state.filename as string, - stylesBySlots, - ), - ); - const uniqueCSSRules = dedupeCSSRules(cssRulesByBucket); - - if (pluginOptions.generateMetadata) { - buildCSSEntriesMetadata( - state as Required, - classnamesMapping, - uniqueCSSRules, - definitionPath.declaratorId, - ); - } - - (callExpressionPath.get('arguments.0') as NodePath).remove(); - callExpressionPath.pushContainer('arguments', [ - t.valueToNode(classnamesMapping), - t.valueToNode(uniqueCSSRules), - ]); - } - - if (definitionPath.functionKind === 'makeResetStyles') { - const styles: GriffelStyle = evaluationResult.value; - const [ltrClassName, rtlClassName, cssRules] = resolveResetStyleRules( - // Heads up! - // Style rules should be normalized *before* they will be resolved to CSS rules to have deterministic - // results across different build targets. - normalizeStyleRules( - path, - pluginOptions.projectRoot, - // Presence of "state.filename" is validated on `Program.enter()` - state.filename as string, - styles, - ), - ); - - if (pluginOptions.generateMetadata) { - buildCSSResetEntriesMetadata( - state as Required, - cssRules, - definitionPath.declaratorId, - ); - } - - (callExpressionPath.get('arguments.0') as NodePath).remove(); - callExpressionPath.pushContainer('arguments', [ - t.valueToNode(ltrClassName), - t.valueToNode(rtlClassName), - t.valueToNode(cssRules), - ]); - } - - replaceAssetsWithImports(pluginOptions.projectRoot, state.filename!, programPath, callExpressionPath); - }); - - if (pluginOptions.generateMetadata) { - Object.assign(this.file.metadata, { - cssResetEntries: state.cssResetEntries ?? {}, - cssEntries: state.cssEntries ?? {}, - } as BabelPluginMetadata); - } - } - - state.importDeclarationPaths!.forEach(importDeclarationPath => { - const specifiers = importDeclarationPath.get('specifiers'); - const source = importDeclarationPath.get('source'); - - specifiers.forEach(specifier => { - if (specifier.isImportSpecifier()) { - const importedPath = specifier.get('imported'); - - for (const module of pluginOptions.modules) { - if (module.moduleSource !== source.node.value) { - // 👆 "moduleSource" should match "importDeclarationPath.source" to skip unrelated ".importName" - continue; - } - - if (importedPath.isIdentifier({ name: module.importName })) { - specifier.replaceWith(t.identifier('__styles')); - } else if (importedPath.isIdentifier({ name: module.resetImportName || 'makeResetStyles' })) { - specifier.replaceWith(t.identifier('__resetStyles')); - } - } - } - }); - }); - - if (state.calleePaths) { - state.calleePaths.forEach(calleePath => { - if (calleePath.node.name === 'makeResetStyles') { - calleePath.replaceWith(t.identifier('__resetStyles')); - return; - } - - calleePath.replaceWith(t.identifier('__styles')); - }); - } - }, - }, - - // eslint-disable-next-line @typescript-eslint/naming-convention - ImportDeclaration(path, state) { - if (hasMakeStylesImport(path, pluginOptions.modules)) { - state.importDeclarationPaths!.push(path); - } - }, - - // eslint-disable-next-line @typescript-eslint/naming-convention - VariableDeclarator(path, state) { - if (isRequireDeclarator(path, pluginOptions.modules)) { - state.requireDeclarationPath = path; - } - }, - - // eslint-disable-next-line @typescript-eslint/naming-convention - CallExpression(path, state) { - /** - * Handles case when `makeStyles()` is `CallExpression`. - * - * @example makeStyles({}) - */ - if (state.importDeclarationPaths!.length === 0) { - return; - } - - const calleePath = path.get('callee'); - - if (calleePath.isIdentifier()) { - const functionKind = getCalleeFunctionKind(calleePath, pluginOptions.modules); - const declaratorId = getParentDeclaratorId(path); - - if (functionKind) { - state.definitionPaths!.push({ - declaratorId, - functionKind, - path: getDefinitionPathFromCallExpression(functionKind, path), - }); - state.calleePaths!.push(calleePath); - } - } - }, - - // eslint-disable-next-line @typescript-eslint/naming-convention - MemberExpression(expressionPath, state) { - /** - * Handles case when `makeStyles()` is inside `MemberExpression`. - * - * @example module.makeStyles({}) - */ - if (!state.requireDeclarationPath) { - return; - } - - const objectPath = expressionPath.get('object'); - const propertyPath = expressionPath.get('property'); - - if (!objectPath.isIdentifier({ name: (state.requireDeclarationPath.node.id as t.Identifier).name })) { - return; - } - - let functionKind: FunctionKinds | null = null; - - if (propertyPath.isIdentifier({ name: 'makeStyles' })) { - functionKind = 'makeStyles'; - } else if (propertyPath.isIdentifier({ name: 'makeResetStyles' })) { - functionKind = 'makeResetStyles'; - } - - if (!functionKind) { - return; - } - - const parentPath = expressionPath.parentPath; - - if (!parentPath.isCallExpression()) { - return; - } - - const declaratorId = getParentDeclaratorId(expressionPath); - state.definitionPaths!.push({ - functionKind, - declaratorId, - path: getDefinitionPathFromCallExpression(functionKind, parentPath), - }); - state.calleePaths!.push(propertyPath as NodePath); - }, - }, - }; -}); diff --git a/packages/babel-preset/src/types.ts b/packages/babel-preset/src/types.ts index 3107cb28a..ec2c62ce8 100644 --- a/packages/babel-preset/src/types.ts +++ b/packages/babel-preset/src/types.ts @@ -1,5 +1,5 @@ import type { TransformOptions } from '@babel/core'; -import type { EvalRule } from '@linaria/babel-preset'; +import type { EvalRule } from '@linaria/utils'; export type BabelPluginOptions = { /** @@ -22,14 +22,6 @@ export type BabelPluginOptions = { /** The set of rules that defines how the matched files will be transformed during the evaluation. */ evaluationRules?: EvalRule[]; - - /** - * Defined the of the project. Is used to have a deterministic path for asset paths, usually should be equal to Git - * root. - * - * @default process.cwd() - */ - projectRoot?: string; }; export type BabelPluginMetadata = { diff --git a/packages/babel-preset/src/utils/dedupeCSSRules.test.ts b/packages/babel-preset/src/utils/dedupeCSSRules.test.ts deleted file mode 100644 index 6ccb02622..000000000 --- a/packages/babel-preset/src/utils/dedupeCSSRules.test.ts +++ /dev/null @@ -1,37 +0,0 @@ -import type { CSSRulesByBucket } from '@griffel/core'; -import { dedupeCSSRules } from './dedupeCSSRules'; - -describe('dedupeCSSRules', () => { - it('dedupes simple rules', () => { - const rules: CSSRulesByBucket = { - d: ['.foo { color: red; }', '.foo { color: red; }', '.baz { color: pink }'], - }; - - expect(dedupeCSSRules(rules)).toMatchObject({ - d: ['.foo { color: red; }', '.baz { color: pink }'], - }); - }); - - it('dedupes rules with metadata', () => { - const rules: CSSRulesByBucket = { - m: [ - ['@media (min-width: 480px) { .foo { color: red; } }', { m: '(min-width: 480px)' }], - ['@media (min-width: 480px) { .baz { color: pink; } }', { m: '(min-width: 480px)' }], - - ['@media (min-width: 600px) { .foo { color: red; } }', { m: '(min-width: 600px)' }], - ['@media (min-width: 600px) { .foo { color: red; } }', { m: '(min-width: 600px)' }], - ['@media (min-width: 600px) { .baz { color: pink; } }', { m: '(min-width: 600px)' }], - ], - }; - - expect(dedupeCSSRules(rules)).toMatchObject({ - m: [ - ['@media (min-width: 480px) { .foo { color: red; } }', { m: '(min-width: 480px)' }], - ['@media (min-width: 480px) { .baz { color: pink; } }', { m: '(min-width: 480px)' }], - - ['@media (min-width: 600px) { .foo { color: red; } }', { m: '(min-width: 600px)' }], - ['@media (min-width: 600px) { .baz { color: pink; } }', { m: '(min-width: 600px)' }], - ], - }); - }); -}); diff --git a/packages/babel-preset/src/utils/dedupeCSSRules.ts b/packages/babel-preset/src/utils/dedupeCSSRules.ts deleted file mode 100644 index 16ca498da..000000000 --- a/packages/babel-preset/src/utils/dedupeCSSRules.ts +++ /dev/null @@ -1,22 +0,0 @@ -import type { CSSRulesByBucket } from '@griffel/core'; - -/** - * Rules that are returned by `resolveStyles()` are not deduplicated. - * It's critical to filter out duplicates for build-time transform to avoid duplicated rules in a bundle. - */ -export function dedupeCSSRules(cssRulesByBucket: CSSRulesByBucket): CSSRulesByBucket { - return Object.fromEntries( - Object.entries(cssRulesByBucket).map(([styleBucketName, cssBucketEntries]) => { - if (styleBucketName === 'm') { - return [ - styleBucketName, - cssBucketEntries.filter( - (entryA, index, entries) => entries.findIndex(entryB => entryA[0] === entryB[0]) === index, - ), - ]; - } - - return [styleBucketName, [...new Set(cssBucketEntries)]]; - }), - ); -} diff --git a/packages/babel-preset/src/utils/evaluatePaths.ts b/packages/babel-preset/src/utils/evaluatePaths.ts deleted file mode 100644 index 0ace2eca3..000000000 --- a/packages/babel-preset/src/utils/evaluatePaths.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { NodePath, types as t } from '@babel/core'; - -import type { BabelPluginOptions } from '../types'; -import { evaluatePathsInVM } from './evaluatePathsInVM'; - -/** - * Checks if passed paths can be evaluated by Babel, if no - fallbacks to Node evaluation. - * The goal there is to ensure that all paths are pure and can be safely evaluated later by Babel. - */ -export function evaluatePaths( - program: NodePath, - filename: string, - paths: NodePath[], - pluginOptions: Required, -): void { - const pathsToBeEvaluatedInVM: NodePath[] = []; - - for (let i = 0; i < paths.length; i++) { - const result = paths[i].evaluate(); - - // Optimistic case, we were able to resolve a path without evaluation in Node environment 🎉 - if (result.confident) { - // Heads up! - // We don't need to do any replacements there as after resolving all style objects will be evaluated again - continue; - } - - pathsToBeEvaluatedInVM.push(paths[i]); - } - - if (pathsToBeEvaluatedInVM.length > 0) { - evaluatePathsInVM(program, filename, pathsToBeEvaluatedInVM, pluginOptions); - } -} diff --git a/packages/babel-preset/src/utils/evaluatePathsInVM.test.ts b/packages/babel-preset/src/utils/evaluatePathsInVM.test.ts deleted file mode 100644 index cba10532b..000000000 --- a/packages/babel-preset/src/utils/evaluatePathsInVM.test.ts +++ /dev/null @@ -1,16 +0,0 @@ -import * as Babel from '@babel/core'; -import generator from '@babel/generator'; - -import { expressionTpl } from './evaluatePathsInVM'; - -describe('expressionTpl', () => { - it('returns an expression based on a template', () => { - const expression = Babel.types.identifier('foo'); - - const result = expressionTpl({ expression, wrapName: 'wrap' }); - const resultCode = generator(result).code; - - expect(Babel.types.isCallExpression(result)).toBe(true); - expect(resultCode).toMatchInlineSnapshot(`"wrap(() => foo)"`); - }); -}); diff --git a/packages/babel-preset/src/utils/evaluatePathsInVM.ts b/packages/babel-preset/src/utils/evaluatePathsInVM.ts deleted file mode 100644 index e9fed30ff..000000000 --- a/packages/babel-preset/src/utils/evaluatePathsInVM.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { NodePath, types as t } from '@babel/core'; -import { Scope } from '@babel/traverse'; -import * as template from '@babel/template'; -import generator from '@babel/generator'; -import { Module, StrictOptions } from '@linaria/babel-preset'; - -import type { BabelPluginOptions } from '../types'; - -const EVAL_EXPORT_NAME = '__mkPreval'; - -function evaluate(code: string, filename: string, pluginOptions: Required) { - const options: StrictOptions = { - displayName: false, - evaluate: true, - - rules: pluginOptions.evaluationRules, - babelOptions: { - ...pluginOptions.babelOptions, - - // This instance of Babel should ignore all user's configs and apply only our transformPlugin - configFile: false, - babelrc: false, - }, - }; - const mod = new Module(filename, options); - - mod.evaluate(code, [EVAL_EXPORT_NAME]); - - return (mod.exports as { [EVAL_EXPORT_NAME]: unknown[] })[EVAL_EXPORT_NAME]; -} - -function findFreeName(scope: Scope, name: string): string { - // By default `name` is used as a name of the function … - let nextName = name; - let idx = 0; - while (scope.hasBinding(nextName, false)) { - // … but if there is an already defined variable with this name … - // … we are trying to use a name like wrap_N - idx += 1; - nextName = `wrap_${idx}`; - } - - return nextName; -} - -const expressionWrapperTpl = template.statement(` - const %%wrapName%% = (fn) => { - try { - return fn(); - } catch (e) { - return e; - } - }; -`); - -export const expressionTpl = template.expression(`%%wrapName%%(() => %%expression%%)`); -const exportsPrevalTpl = template.statement(`exports.${EVAL_EXPORT_NAME} = %%expressions%%`); - -/** - * Creates a new program that includes required imports and wrappers to return resolved values. - */ -function addPreval(path: NodePath, lazyDeps: Array): t.Program { - // Constant for "__mkPreval" with all dependencies - const wrapName = findFreeName(path.scope, '_wrap'); - const programNode = path.node; - - return t.program( - [ - ...programNode.body, - - expressionWrapperTpl({ wrapName }), - exportsPrevalTpl({ - expressions: t.arrayExpression(lazyDeps.map(expression => expressionTpl({ expression, wrapName }))), - }), - ], - programNode.directives, - programNode.sourceType, - programNode.interpreter, - ); -} - -/** - * Evaluates passed paths in Node environment to resolve all lazy values. - */ -export function evaluatePathsInVM( - program: NodePath, - filename: string, - nodePaths: NodePath[], - pluginOptions: Required, -): void { - const pathsToEvaluate = nodePaths.map(nodePath => { - // spreads ("...fooBar") can't be executed directly, so they are wrapped with an object ("{...fooBar}") - if (nodePath.isSpreadElement()) { - return t.objectExpression([nodePath.node as t.SpreadElement]); - } - - return nodePath.node; - }); - - // Linaria also performs hoisting of identifiers, we don't need this as all makeStyles() calls should be top level - const modifiedProgram = addPreval(program, pathsToEvaluate); - - const { code } = generator(modifiedProgram); - const results = evaluate(code, filename, pluginOptions); - - for (let i = 0; i < nodePaths.length; i++) { - const nodePath = nodePaths[i]; - - nodePath.replaceWith(t.valueToNode(results[i])); - } -} diff --git a/packages/babel-preset/src/validateOptions.test.ts b/packages/babel-preset/src/validateOptions.test.ts index fc7c594f5..2f0d8419b 100644 --- a/packages/babel-preset/src/validateOptions.test.ts +++ b/packages/babel-preset/src/validateOptions.test.ts @@ -1,28 +1,10 @@ -import type { Evaluator } from '@linaria/babel-preset'; +import type { File } from '@babel/types'; +import type { Evaluator } from '@linaria/utils'; import { validateOptions } from './validateOptions'; import { BabelPluginOptions } from './types'; describe('validateOptions', () => { - describe('modules', () => { - it('passes on valid options', () => { - const pluginOptions: BabelPluginOptions = { - modules: [{ moduleSource: 'react-make-styles', importName: 'makeStyles' }], - }; - - expect(() => validateOptions(pluginOptions)).not.toThrow(); - }); - - it('throws on wrong options', () => { - const pluginOptions = { modules: {} }; - - // @ts-expect-error Invalid options are passed for testing purposes - expect(() => validateOptions(pluginOptions)).toThrowErrorMatchingInlineSnapshot( - `"Validation failed for passed config: data/modules must be array"`, - ); - }); - }); - describe('babelOptions', () => { it('passes on valid options', () => { const pluginOptions: BabelPluginOptions = { @@ -56,7 +38,7 @@ describe('validateOptions', () => { describe('evaluationRules', () => { it('passes on valid options', () => { - const noopEvaluator: Evaluator = () => ['foo', null]; + const noopEvaluator: Evaluator = () => [null as unknown as File, 'foo', null]; const pluginOptions: BabelPluginOptions = { evaluationRules: [ { action: noopEvaluator }, diff --git a/packages/babel-preset/src/validateOptions.ts b/packages/babel-preset/src/validateOptions.ts index 1d92bb8b2..461872fec 100644 --- a/packages/babel-preset/src/validateOptions.ts +++ b/packages/babel-preset/src/validateOptions.ts @@ -8,10 +8,12 @@ const ajv = new Ajv(); /** * Validates options for transformPlugin with a schema. */ -export function validateOptions(pluginOptions: BabelPluginOptions): void { +export function validateOptions(pluginOptions: BabelPluginOptions): BabelPluginOptions { const valid = ajv.validate(configSchema, pluginOptions); if (!valid) { throw new Error(`Validation failed for passed config: ${ajv.errorsText(ajv.errors)}`); } + + return pluginOptions; } diff --git a/packages/babel-preset/tsconfig.spec.json b/packages/babel-preset/tsconfig.spec.json index 0321a8aa6..82af2525c 100644 --- a/packages/babel-preset/tsconfig.spec.json +++ b/packages/babel-preset/tsconfig.spec.json @@ -9,6 +9,7 @@ "include": [ "__fixtures__/**/code.ts", "__fixtures__/**/fixture.ts", + "__fixtures__/config-evaluation-rules/sampleEvaluator.js", "**/*.test.ts", "**/*.spec.ts", "**/*.test.tsx", diff --git a/packages/react/package.json b/packages/react/package.json index 643c9adbc..6d8bc316a 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -8,6 +8,12 @@ "url": "https://github.com/microsoft/griffel" }, "sideEffects": false, + "linaria": { + "tags": { + "makeStyles": "@griffel/tag-processor/make-styles", + "makeResetStyles": "@griffel/tag-processor/make-reset-styles" + } + }, "dependencies": { "@griffel/core": "^1.15.1", "tslib": "^2.1.0" diff --git a/packages/webpack-loader/README.md b/packages/webpack-loader/README.md index b8e0a2af3..d005dc92d 100644 --- a/packages/webpack-loader/README.md +++ b/packages/webpack-loader/README.md @@ -19,9 +19,9 @@ A loader for Webpack 5 that performs build time transforms for [`@griffel/react` ## Install ```bash -yarn add --dev @griffel/webpack-loader +yarn add --dev @griffel/tag-processor @griffel/webpack-loader # or -npm install --save-dev @griffel/webpack-loader +npm install --save-dev @griffel/tag-processor @griffel/webpack-loader ``` ## When to use it? @@ -92,35 +92,21 @@ module.exports = { ```js import { makeStyles, makeResetStyles } from 'custom-package'; -// 👇 custom import names are also supported -import { createStyles } from 'custom-package'; ``` -By default, the Webpack loader handles imports from `@griffel/react`. The webpack loader can be re-configured to handle re-exports of Griffel from custom packages. The `makeStyles` function itself can also be renamed in this case. - -```js -module.exports = { - module: { - rules: [ - { - test: /\.(js|jsx)$/, - exclude: /node_modules/, - use: { - loader: '@griffel/webpack-loader', - options: { - modules: [ - { - moduleSource: 'custom-package', - importName: 'makeStyles', - resetImportName: 'makeResetStyles', - }, - ], - }, - }, - }, - ], - }, -}; +By default, the Webpack loader handles imports from `@griffel/react` & `@fluentui/react-components`, to handle imports from custom packages settings you need to include meta information to a matching `package.json`: + +```json +{ + "name": "custom-package", + "version": "1.0.0", + "linaria": { + "tags": { + "makeStyles": "@griffel/tag-processor/make-styles", + "makeResetStyles": "@griffel/tag-processor/make-reset-styles" + } + } +} ``` > **Note**: "custom-package" should re-export following functions from `@griffel/react`: diff --git a/packages/webpack-loader/__fixtures__/config-babel-options/code.ts b/packages/webpack-loader/__fixtures__/config-babel-options/code.ts new file mode 100644 index 000000000..35a2ad07e --- /dev/null +++ b/packages/webpack-loader/__fixtures__/config-babel-options/code.ts @@ -0,0 +1,6 @@ +import { makeStyles } from '@griffel/react'; +import { colors } from './tokens'; + +export const useStyles = makeStyles({ + root: { color: colors.red }, +}); diff --git a/packages/webpack-loader/__fixtures__/config-babel-options/output.ts b/packages/webpack-loader/__fixtures__/config-babel-options/output.ts new file mode 100644 index 000000000..44ef1b6c7 --- /dev/null +++ b/packages/webpack-loader/__fixtures__/config-babel-options/output.ts @@ -0,0 +1,11 @@ +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( + { + root: { + sj55zd: 'fe3e8s9', + }, + }, + { + d: ['.fe3e8s9{color:red;}'], + }, +); diff --git a/packages/webpack-loader/__fixtures__/config-babel-options/tokens.ts b/packages/webpack-loader/__fixtures__/config-babel-options/tokens.ts new file mode 100644 index 000000000..077096252 --- /dev/null +++ b/packages/webpack-loader/__fixtures__/config-babel-options/tokens.ts @@ -0,0 +1 @@ +export const colors: Record<'red', string> = { red: 'red' }; diff --git a/packages/webpack-loader/__fixtures__/config-modules/code.ts b/packages/webpack-loader/__fixtures__/config-modules/code.ts deleted file mode 100644 index 8357320ae..000000000 --- a/packages/webpack-loader/__fixtures__/config-modules/code.ts +++ /dev/null @@ -1,6 +0,0 @@ -// @ts-expect-error This is a fake module, will be resolved by Webpack aliases -import { makeStyles } from 'react-make-styles'; - -export const styles = makeStyles({ - root: { backgroundColor: 'red' }, -}); diff --git a/packages/webpack-loader/__fixtures__/config-modules/output.ts b/packages/webpack-loader/__fixtures__/config-modules/output.ts deleted file mode 100644 index fdd5b2392..000000000 --- a/packages/webpack-loader/__fixtures__/config-modules/output.ts +++ /dev/null @@ -1,12 +0,0 @@ -// @ts-expect-error This is a fake module, will be resolved by Webpack aliases -import { __styles } from 'react-make-styles'; -export const styles = __styles( - { - root: { - De3pzq: 'f3xbvq9', - }, - }, - { - d: ['.f3xbvq9{background-color:red;}'], - }, -); diff --git a/packages/webpack-loader/__fixtures__/empty/output.ts b/packages/webpack-loader/__fixtures__/empty/output.ts index f7330031a..f5930e731 100644 --- a/packages/webpack-loader/__fixtures__/empty/output.ts +++ b/packages/webpack-loader/__fixtures__/empty/output.ts @@ -1,5 +1,5 @@ -import { __styles } from '@griffel/react'; -export const useStyles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _styles( { root: {}, }, diff --git a/packages/webpack-loader/__fixtures__/error-argument-count/code.ts b/packages/webpack-loader/__fixtures__/error-argument-count/code.ts deleted file mode 100644 index b04fbcd97..000000000 --- a/packages/webpack-loader/__fixtures__/error-argument-count/code.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { makeStyles } from '@griffel/react'; - -// @ts-expect-error Invalid arguments for "makeStyles" function -export const useStyles = makeStyles({ root: { color: 'red' } }, 'foo'); diff --git a/packages/webpack-loader/__fixtures__/error-argument-count/error.ts b/packages/webpack-loader/__fixtures__/error-argument-count/error.ts deleted file mode 100644 index f687a24a7..000000000 --- a/packages/webpack-loader/__fixtures__/error-argument-count/error.ts +++ /dev/null @@ -1 +0,0 @@ -export default /makeStyles\(\) function accepts only a single param/; diff --git a/packages/webpack-loader/__fixtures__/error-config/code.ts b/packages/webpack-loader/__fixtures__/error-config/code.ts deleted file mode 100644 index 5d70d13b8..000000000 --- a/packages/webpack-loader/__fixtures__/error-config/code.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { makeStyles } from '@griffel/react'; - -export const useStyles = makeStyles({ root: { color: 'red' } }); diff --git a/packages/webpack-loader/__fixtures__/error-config/error.ts b/packages/webpack-loader/__fixtures__/error-config/error.ts deleted file mode 100644 index 77b57681f..000000000 --- a/packages/webpack-loader/__fixtures__/error-config/error.ts +++ /dev/null @@ -1 +0,0 @@ -export default /Loader has been initialized using an options object that does not match the API schema/; diff --git a/packages/webpack-loader/__fixtures__/error-syntax/code.txt b/packages/webpack-loader/__fixtures__/error-syntax/code.txt deleted file mode 100644 index c71bbc16e..000000000 --- a/packages/webpack-loader/__fixtures__/error-syntax/code.txt +++ /dev/null @@ -1,6 +0,0 @@ -// This file is .txt intentionally to avoid Prettier formatting -import { makeStyles } from '@griffel/react'; - -const styles = makeStyles({ - root: { color: 'red' }, -} diff --git a/packages/webpack-loader/__fixtures__/error-syntax/error.ts b/packages/webpack-loader/__fixtures__/error-syntax/error.ts deleted file mode 100644 index 14647cf21..000000000 --- a/packages/webpack-loader/__fixtures__/error-syntax/error.ts +++ /dev/null @@ -1 +0,0 @@ -export default /Module build failed/; diff --git a/packages/webpack-loader/__fixtures__/function/output.ts b/packages/webpack-loader/__fixtures__/function/output.ts index f227f4c15..e38a3bc7c 100644 --- a/packages/webpack-loader/__fixtures__/function/output.ts +++ b/packages/webpack-loader/__fixtures__/function/output.ts @@ -1,5 +1,5 @@ -import { __styles } from '@griffel/react'; -export const styles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const styles = /*#__PURE__*/ _styles( { root: { sj55zd: 'fe3e8s9', diff --git a/packages/webpack-loader/__fixtures__/object/output.ts b/packages/webpack-loader/__fixtures__/object/output.ts index 3f3ef2479..acf11e401 100644 --- a/packages/webpack-loader/__fixtures__/object/output.ts +++ b/packages/webpack-loader/__fixtures__/object/output.ts @@ -1,6 +1,5 @@ -import { __styles } from '@griffel/react'; -import { tokens } from './tokens'; -export const styles = __styles( +import { __styles as _styles } from '@griffel/react'; +export const styles = /*#__PURE__*/ _styles( { root: { sj55zd: 'fl9q5hc', diff --git a/packages/webpack-loader/__fixtures__/react-component/code.ts b/packages/webpack-loader/__fixtures__/react-component/code.ts new file mode 100644 index 000000000..24d1a07ad --- /dev/null +++ b/packages/webpack-loader/__fixtures__/react-component/code.ts @@ -0,0 +1,12 @@ +import { makeStyles } from '@griffel/react'; +import * as React from 'react'; + +const useStyles = makeStyles({ + root: { color: 'red' }, +}); + +export default function Component() { + const classes = useStyles(); + + return React.createElement('div', { className: classes.root }); +} diff --git a/packages/webpack-loader/__fixtures__/react-component/output.ts b/packages/webpack-loader/__fixtures__/react-component/output.ts new file mode 100644 index 000000000..deecd1848 --- /dev/null +++ b/packages/webpack-loader/__fixtures__/react-component/output.ts @@ -0,0 +1,18 @@ +import { __styles as _styles } from '@griffel/react'; +import * as React from 'react'; +const useStyles = /*#__PURE__*/ _styles( + { + root: { + sj55zd: 'fe3e8s9', + }, + }, + { + d: ['.fe3e8s9{color:red;}'], + }, +); +export default function Component() { + const classes = useStyles(); + return React.createElement('div', { + className: classes.root, + }); +} diff --git a/packages/webpack-loader/__fixtures__/reset/output.ts b/packages/webpack-loader/__fixtures__/reset/output.ts index 908b64601..a176e7560 100644 --- a/packages/webpack-loader/__fixtures__/reset/output.ts +++ b/packages/webpack-loader/__fixtures__/reset/output.ts @@ -1,6 +1,5 @@ -import { __resetStyles } from '@griffel/react'; -import { tokens } from './tokens'; -export const useStyles = __resetStyles('rgwtdav', 'r133dp1', [ +import { __resetStyles as _resetStyles } from '@griffel/react'; +export const useStyles = /*#__PURE__*/ _resetStyles('rgwtdav', 'r133dp1', [ '.rgwtdav{color:var(--colorBrandStroke1);padding-left:4px;}', '.r133dp1{color:var(--colorBrandStroke1);padding-right:4px;}', ]); diff --git a/packages/webpack-loader/__fixtures__/webpack-aliases/output.ts b/packages/webpack-loader/__fixtures__/webpack-aliases/output.ts index 06a3744a4..1c4e424fa 100644 --- a/packages/webpack-loader/__fixtures__/webpack-aliases/output.ts +++ b/packages/webpack-loader/__fixtures__/webpack-aliases/output.ts @@ -1,8 +1,5 @@ -import { __styles } from '@griffel/react'; -// @ts-expect-error This module will be resolved via aliases -import color from 'non-existing-color-module'; -import { tokens } from './tokens'; -export const styles = __styles( +import { __styles as _styles } from '@griffel/react'; // @ts-expect-error This module will be resolved via aliases +export const styles = /*#__PURE__*/ _styles( { root: { De3pzq: 'f1bh81bl', diff --git a/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/code.ts b/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/code.ts deleted file mode 100644 index daf6f7f70..000000000 --- a/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/code.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { makeStyles } from '@griffel/react'; -import color from './color'; - -export const styles = makeStyles({ - root: { - backgroundColor: color, - }, -}); diff --git a/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/color.jsx b/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/color.jsx deleted file mode 100644 index 7d549441c..000000000 --- a/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/color.jsx +++ /dev/null @@ -1,3 +0,0 @@ -const color = 'blue'; - -export default color; diff --git a/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/output.ts b/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/output.ts deleted file mode 100644 index 3e9985bc9..000000000 --- a/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/output.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { __styles } from '@griffel/react'; -import color from './color'; -export const styles = __styles( - { - root: { - De3pzq: 'f1bh81bl', - }, - }, - { - d: ['.f1bh81bl{background-color:blue;}'], - }, -); diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-options/code.ts b/packages/webpack-loader/__fixtures__/webpack-resolve-options/code.ts deleted file mode 100644 index daf6f7f70..000000000 --- a/packages/webpack-loader/__fixtures__/webpack-resolve-options/code.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { makeStyles } from '@griffel/react'; -import color from './color'; - -export const styles = makeStyles({ - root: { - backgroundColor: color, - }, -}); diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-options/color.ts b/packages/webpack-loader/__fixtures__/webpack-resolve-options/color.ts deleted file mode 100644 index 7d549441c..000000000 --- a/packages/webpack-loader/__fixtures__/webpack-resolve-options/color.ts +++ /dev/null @@ -1,3 +0,0 @@ -const color = 'blue'; - -export default color; diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-options/output.ts b/packages/webpack-loader/__fixtures__/webpack-resolve-options/output.ts deleted file mode 100644 index 3e9985bc9..000000000 --- a/packages/webpack-loader/__fixtures__/webpack-resolve-options/output.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { __styles } from '@griffel/react'; -import color from './color'; -export const styles = __styles( - { - root: { - De3pzq: 'f1bh81bl', - }, - }, - { - d: ['.f1bh81bl{background-color:blue;}'], - }, -); diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/output.ts b/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/output.ts index 22cb5aea9..d75789a45 100644 --- a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/output.ts +++ b/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/output.ts @@ -1,8 +1,7 @@ -import { __styles } from '@griffel/react'; -import { tokens } from './tokens'; +import { __styles as _styles } from '@griffel/react'; // @ts-expect-error This module will be resolved via aliases -import color from 'non-existing-color-module'; -export const styles = __styles( + +export const styles = /*#__PURE__*/ _styles( { root: { De3pzq: 'f1bh81bl', diff --git a/packages/webpack-loader/package.json b/packages/webpack-loader/package.json index c1f1bdc9f..7a97effc9 100644 --- a/packages/webpack-loader/package.json +++ b/packages/webpack-loader/package.json @@ -9,11 +9,9 @@ }, "dependencies": { "@babel/core": "^7.23.2", - "@griffel/babel-preset": "^1.5.5", - "enhanced-resolve": "^5.8.2", "tslib": "^2.1.0" }, "peerDependencies": { - "webpack": "^5" + "@griffel/tag-processor": "^0.0.1" } } diff --git a/packages/webpack-loader/src/schema.ts b/packages/webpack-loader/src/schema.ts index 3b20bc5e5..790f9d850 100644 --- a/packages/webpack-loader/src/schema.ts +++ b/packages/webpack-loader/src/schema.ts @@ -1,46 +1,28 @@ import type { JSONSchema7 } from 'json-schema'; -import { configSchema } from '@griffel/babel-preset'; export const optionsSchema: JSONSchema7 = { - ...configSchema, properties: { - ...configSchema.properties, - inheritResolveOptions: { - type: 'array', - items: { type: 'string', enum: ['alias', 'modules', 'plugins', 'conditionNames', 'extensions'] }, - }, - webpackResolveOptions: { + babelOptions: { type: 'object', properties: { - alias: { - oneOf: [ - { - type: 'object', - properties: { - alias: { oneOf: [{ type: 'string' }, { enum: [false] }, { type: 'array', items: { type: 'string' } }] }, - name: { type: 'string' }, - onlyModule: { type: 'boolean' }, - }, - required: ['alias', 'name'], - }, - { - type: 'object', - patternProperties: { - ['.*']: { - oneOf: [{ type: 'string' }, { enum: [false] }, { type: 'array', items: { type: 'string' } }], - }, - }, - }, - ], - }, - conditionNames: { type: 'array', items: { type: 'string' } }, - extensions: { type: 'array', items: { type: 'string' } }, - modules: { type: 'array', items: { type: 'string' } }, plugins: { - oneOf: [ - { type: 'string', enum: ['...'] }, - { type: 'object', additionalProperties: true }, - ], + type: 'array', + }, + presets: { + type: 'array', + }, + }, + }, + evaluationRules: { + type: 'array', + items: { + type: 'object', + required: ['action'], + properties: { + action: { + anyOf: [{}, { type: 'string' }, { const: 'ignore' }], + }, + test: {}, }, }, }, diff --git a/packages/webpack-loader/src/transformSync.ts b/packages/webpack-loader/src/transformSync.ts deleted file mode 100644 index 4709d1748..000000000 --- a/packages/webpack-loader/src/transformSync.ts +++ /dev/null @@ -1,57 +0,0 @@ -import * as Babel from '@babel/core'; -import griffelPreset, { BabelPluginOptions } from '@griffel/babel-preset'; - -export type TransformOptions = { - filename: string; - - inputSourceMap: Babel.TransformOptions['inputSourceMap']; - enableSourceMaps: boolean; - - pluginOptions: BabelPluginOptions; -}; - -export type TransformResult = { - code: string; - sourceMap: NonNullable | undefined; -}; - -/** - * Transforms passed source code with Babel, uses user's config for parsing, but ignores it for transforms. - */ -export function transformSync(sourceCode: string, options: TransformOptions): TransformResult { - // Parse the code first so Babel will use user's babel config for parsing - // During transforms we don't want to use user's config - const babelAST = Babel.parseSync(sourceCode, { - caller: { name: 'griffel' }, - - filename: options.filename, - inputSourceMap: options.inputSourceMap, - sourceMaps: options.enableSourceMaps, - }); - - if (babelAST === null) { - throw new Error(`Failed to create AST for "${options.filename}" due unknown Babel error...`); - } - - const babelFileResult = Babel.transformFromAstSync(babelAST, sourceCode, { - // Ignore all user's configs and apply only our plugin - babelrc: false, - configFile: false, - presets: [[griffelPreset, options.pluginOptions]], - - filename: options.filename, - - sourceMaps: options.enableSourceMaps, - sourceFileName: options.filename, - inputSourceMap: options.inputSourceMap, - }); - - if (babelFileResult === null) { - throw new Error(`Failed to transform "${options.filename}" due unknown Babel error...`); - } - - return { - code: babelFileResult.code as string, - sourceMap: babelFileResult.map === null ? undefined : babelFileResult.map, - }; -} diff --git a/packages/webpack-loader/src/webpackLoader.test.ts b/packages/webpack-loader/src/webpackLoader.test.ts index 4dc73fa41..bc9015115 100644 --- a/packages/webpack-loader/src/webpackLoader.test.ts +++ b/packages/webpack-loader/src/webpackLoader.test.ts @@ -5,11 +5,10 @@ import * as prettier from 'prettier'; import * as webpack from 'webpack'; import { merge } from 'webpack-merge'; -import type { WebpackLoaderOptions } from './webpackLoader'; import { shouldTransformSourceCode } from './webpackLoader'; type CompileOptions = { - loaderOptions?: WebpackLoaderOptions; + loaderOptions?: Record; webpackConfig?: webpack.Configuration; }; @@ -35,7 +34,7 @@ async function compileSourceWithWebpack(entryPath: string, options: CompileOptio module: { rules: [ { - test: /\.(ts|tsx|txt)$/, + test: /\.ts$/, include: path.dirname(entryPath), use: { loader: path.resolve(__dirname, './index.ts'), @@ -174,74 +173,35 @@ function testFixture(fixtureName: string, options: CompileOptions = {}) { } describe('shouldTransformSourceCode', () => { - describe('handles defaults', () => { + describe('handles functions', () => { it('makeStyles', () => { - expect(shouldTransformSourceCode(`import { makeStyles } from "@griffel/react"`, undefined)).toBe(true); - expect(shouldTransformSourceCode(`import { Button } from "@fluentui/react"`, undefined)).toBe(false); + expect(shouldTransformSourceCode(`import { makeStyles } from "@griffel/react"`)).toBe(true); + expect(shouldTransformSourceCode(`import { Button } from "@fluentui/react"`)).toBe(false); }); it('makeResetStyles', () => { - expect(shouldTransformSourceCode(`import { makeResetStyles } from "@griffel/react"`, undefined)).toBe(true); - expect(shouldTransformSourceCode(`import { Button } from "@fluentui/react"`, undefined)).toBe(false); - }); - }); - - describe('handles options', () => { - it('makeStyles', () => { - expect( - shouldTransformSourceCode(`import { makeStyles } from "@griffel/react"`, [ - { moduleSource: '@griffel/react', importName: 'makeStyles' }, - ]), - ).toBe(true); - expect( - shouldTransformSourceCode(`import { createStyles } from "make-styles"`, [ - { moduleSource: 'make-styles', importName: 'createStyles' }, - ]), - ).toBe(true); - - expect( - shouldTransformSourceCode(`import { Button } from "@fluentui/react"`, [ - { moduleSource: '@griffel/react', importName: 'makeStyles' }, - ]), - ).toBe(false); - }); - - it('makeResetStyles', () => { - expect( - shouldTransformSourceCode(`import { makeResetStyles } from "@griffel/react"`, [ - { moduleSource: '@griffel/react', importName: 'makeStyles', resetImportName: 'makeResetStyles' }, - ]), - ).toBe(true); - expect( - shouldTransformSourceCode(`import { createResetStyles } from "make-styles"`, [ - { moduleSource: 'make-styles', importName: 'makeStyles', resetImportName: 'createResetStyles' }, - ]), - ).toBe(true); - - expect( - shouldTransformSourceCode(`import { Button } from "@fluentui/react"`, [ - { moduleSource: '@griffel/react', importName: 'makeStyles', resetImportName: 'makeResetStyles' }, - ]), - ).toBe(false); + expect(shouldTransformSourceCode(`import { makeResetStyles } from "@griffel/react"`)).toBe(true); + expect(shouldTransformSourceCode(`import { Button } from "@fluentui/react"`)).toBe(false); }); }); }); describe('webpackLoader', () => { + jest.setTimeout(15000); + // Integration fixtures for base functionality, all scenarios are tested in "@griffel/babel-preset" testFixture('object'); testFixture('function'); testFixture('reset'); testFixture('empty'); - // Integration fixtures for config functionality - testFixture('config-modules', { + testFixture('react-component'); + + // Assets that options.babelOptions works + testFixture('config-babel-options', { loaderOptions: { - modules: [{ moduleSource: 'react-make-styles', importName: 'makeStyles' }], - }, - webpackConfig: { - externals: { - 'react-make-styles': 'Griffel', + babelOptions: { + presets: ['@babel/preset-typescript'], }, }, }); @@ -257,27 +217,6 @@ describe('webpackLoader', () => { }, }); - // Asserts that "inheritResolveOptions" are handled properly - testFixture('webpack-inherit-resolve-options', { - loaderOptions: { - inheritResolveOptions: ['extensions'], - }, - webpackConfig: { - resolve: { - extensions: ['.ts', '.jsx'], - }, - }, - }); - - // Asserts that "webpackResolveOptions" are handled properly - testFixture('webpack-resolve-options', { - loaderOptions: { - webpackResolveOptions: { - extensions: ['.ts', '.jsx'], - }, - }, - }); - // Asserts that aliases are resolved properly in Babel plugin with resolve plugins testFixture('webpack-resolve-plugins', { webpackConfig: { @@ -308,18 +247,4 @@ describe('webpackLoader', () => { }, }, }); - - // Asserts handling errors from Babel plugin - testFixture('error-argument-count'); - // Asserts errors in loader's config - testFixture('error-config', { - loaderOptions: { - babelOptions: { - // @ts-expect-error "plugins" should be an array, an object is passed to test schema - plugins: {}, - }, - }, - }); - // Asserts errors in loader functionality - testFixture('error-syntax'); }); diff --git a/packages/webpack-loader/src/webpackLoader.ts b/packages/webpack-loader/src/webpackLoader.ts index 24a0e5e28..9f45789be 100644 --- a/packages/webpack-loader/src/webpackLoader.ts +++ b/packages/webpack-loader/src/webpackLoader.ts @@ -1,138 +1,24 @@ -import { BabelPluginOptions, EvalCache, Module } from '@griffel/babel-preset'; -import * as enhancedResolve from 'enhanced-resolve'; -import * as path from 'path'; -import * as webpack from 'webpack'; +import linariaLoader from '@linaria/webpack-loader'; -import { transformSync, TransformResult, TransformOptions } from './transformSync'; -import { optionsSchema } from './schema'; +export function shouldTransformSourceCode(source: string | Buffer): boolean { + const code = Buffer.isBuffer(source) ? source.toString('utf8') : source; -export type WebpackLoaderOptions = BabelPluginOptions & { - inheritResolveOptions?: ('alias' | 'modules' | 'plugins' | 'conditionNames' | 'extensions')[]; - webpackResolveOptions?: Pick< - Required['resolve'], - 'alias' | 'modules' | 'plugins' | 'conditionNames' | 'extensions' - >; -}; - -type WebpackLoaderParams = Parameters>; - -export function shouldTransformSourceCode( - sourceCode: string, - modules: WebpackLoaderOptions['modules'] | undefined, -): boolean { - // Fallback to "makeStyles" if options were not provided - const imports = modules - ? modules.flatMap(module => [module.importName, module.resetImportName || 'makeResetStyles']).join('|') - : 'makeStyles|makeResetStyles'; - - return new RegExp(`\\b(${imports}|makeResetStyles)`).test(sourceCode); -} - -/** - * Webpack can also pass sourcemaps as a string or null, Babel accepts only objects, boolean and undefined. - * See https://github.com/babel/babel-loader/pull/889. - */ -function parseSourceMap(inputSourceMap: WebpackLoaderParams[1]): TransformOptions['inputSourceMap'] { - try { - if (typeof inputSourceMap === 'string') { - return JSON.parse(inputSourceMap) as TransformOptions['inputSourceMap']; - } - - if (inputSourceMap === null) { - return undefined; - } - - return inputSourceMap as TransformOptions['inputSourceMap']; - } catch (err) { - return undefined; - } + return new RegExp(`\\b(makeStyles|makeResetStyles)`).test(code); } export function webpackLoader( - this: webpack.LoaderContext, - sourceCode: WebpackLoaderParams[0], - inputSourceMap: WebpackLoaderParams[1], -) { + this: ThisParameterType, + ...args: Parameters +): void { // Loaders are cacheable by default, but there are edge cases/bugs when caching does not work until it's specified: // https://github.com/webpack/webpack/issues/14946 this.cacheable(); - const { - inheritResolveOptions = ['alias', 'modules', 'plugins'], - webpackResolveOptions, - ...babelConfig - } = this.getOptions(optionsSchema); - // Early return to handle cases when makeStyles() calls are not present, allows to avoid expensive invocation of Babel - if (!shouldTransformSourceCode(sourceCode, babelConfig.modules)) { - this.callback(null, sourceCode, inputSourceMap); - return; - } - - EvalCache.clearForFile(this.resourcePath); - - const resolveOptionsDefaults: webpack.ResolveOptions = { - conditionNames: ['require'], - extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], - }; - // ⚠ "this._compilation" limits loaders compatibility, however there seems to be no other way to access Webpack's - // resolver. - // There is this.resolve(), but it's asynchronous. Another option is to read the webpack.config.js, but it won't work - // for programmatic usage. This API is used by many loaders/plugins, so hope we're safe for a while - const resolveOptionsFromWebpackConfig: webpack.ResolveOptions = this._compilation?.options.resolve || {}; - - const resolveSync = enhancedResolve.create.sync({ - ...resolveOptionsDefaults, - ...Object.fromEntries( - inheritResolveOptions.map(resolveOptionKey => [ - resolveOptionKey, - resolveOptionsFromWebpackConfig[resolveOptionKey], - ]), - ), - ...webpackResolveOptions, - }); - - const originalResolveFilename = Module._resolveFilename; - - let result: TransformResult | null = null; - let error: Error | null = null; - - try { - // We are evaluating modules in Babel plugin to resolve expressions (function calls, imported constants, etc.) in - // makeStyles() calls, see evaluatePathsInVM.ts. - // Webpack's config can define own module resolution, Babel plugin should use Webpack's resolution to properly - // resolve paths. - Module._resolveFilename = (id, { filename }) => { - const resolvedPath = resolveSync(path.dirname(filename), id); - - if (!resolvedPath) { - throw new Error(`enhanced-resolve: Failed to resolve module "${id}"`); - } - - this.addDependency(resolvedPath); - - return resolvedPath; - }; - - result = transformSync(sourceCode, { - filename: path.relative(process.cwd(), this.resourcePath), - - enableSourceMaps: this.sourceMap || false, - inputSourceMap: parseSourceMap(inputSourceMap), - - pluginOptions: babelConfig, - }); - } catch (err) { - error = err as Error; - } finally { - // Restore original behaviour - Module._resolveFilename = originalResolveFilename; - } - - if (result) { - this.callback(null, result.code, result.sourceMap); + if (!shouldTransformSourceCode(args[0])) { + this.callback(null, args[0], args[1]); return; } - this.callback(error); + return linariaLoader.apply(this, args); } diff --git a/yarn.lock b/yarn.lock index 4ecea5669..2ea5cdb52 100644 --- a/yarn.lock +++ b/yarn.lock @@ -223,7 +223,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.0.1, @babel/core@npm:^7.1.0, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.15.0, @babel/core@npm:^7.15.5, @babel/core@npm:^7.18.2, @babel/core@npm:^7.18.6, @babel/core@npm:^7.20.2, @babel/core@npm:^7.23.2, @babel/core@npm:^7.7.5": +"@babel/core@npm:^7.0.1, @babel/core@npm:^7.1.0, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.15.0, @babel/core@npm:^7.15.5, @babel/core@npm:^7.18.6, @babel/core@npm:^7.20.2, @babel/core@npm:^7.23.2, @babel/core@npm:^7.7.5": version: 7.23.2 resolution: "@babel/core@npm:7.23.2" dependencies: @@ -246,7 +246,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:>=7, @babel/generator@npm:^7.12.11, @babel/generator@npm:^7.12.5, @babel/generator@npm:^7.17.9, @babel/generator@npm:^7.18.7, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.5, @babel/generator@npm:^7.7.2": +"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.12.5, @babel/generator@npm:^7.17.9, @babel/generator@npm:^7.18.7, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.5, @babel/generator@npm:^7.7.2": version: 7.23.5 resolution: "@babel/generator@npm:7.23.5" dependencies: @@ -445,7 +445,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.13.0, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.16.7, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.18.9, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3": +"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.13.0, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.16.7, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3": version: 7.22.5 resolution: "@babel/helper-plugin-utils@npm:7.22.5" checksum: ab220db218089a2aadd0582f5833fd17fa300245999f5f8784b10f5a75267c4e808592284a29438a0da365e702f05acb369f99e1c915c02f9f9210ec60eab8ea @@ -631,18 +631,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-proposal-export-namespace-from@npm:>=7": - version: 7.18.9 - resolution: "@babel/plugin-proposal-export-namespace-from@npm:7.18.9" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.18.9" - "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 84ff22bacc5d30918a849bfb7e0e90ae4c5b8d8b65f2ac881803d1cf9068dffbe53bd657b0e4bc4c20b4db301b1c85f1e74183cf29a0dd31e964bd4e97c363ef - languageName: node - linkType: hard - "@babel/plugin-proposal-nullish-coalescing-operator@npm:^7.12.1": version: 7.18.6 resolution: "@babel/plugin-proposal-nullish-coalescing-operator@npm:7.18.6" @@ -786,7 +774,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-dynamic-import@npm:>=7, @babel/plugin-syntax-dynamic-import@npm:^7.8.3": +"@babel/plugin-syntax-dynamic-import@npm:^7.8.3": version: 7.8.3 resolution: "@babel/plugin-syntax-dynamic-import@npm:7.8.3" dependencies: @@ -1287,7 +1275,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-modules-commonjs@npm:^7.18.2, @babel/plugin-transform-modules-commonjs@npm:^7.23.0": +"@babel/plugin-transform-modules-commonjs@npm:^7.23.0": version: 7.23.0 resolution: "@babel/plugin-transform-modules-commonjs@npm:7.23.0" dependencies: @@ -1556,7 +1544,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-runtime@npm:>=7, @babel/plugin-transform-runtime@npm:^7.15.0, @babel/plugin-transform-runtime@npm:^7.18.6": +"@babel/plugin-transform-runtime@npm:^7.15.0, @babel/plugin-transform-runtime@npm:^7.18.6": version: 7.18.6 resolution: "@babel/plugin-transform-runtime@npm:7.18.6" dependencies: @@ -1606,7 +1594,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-template-literals@npm:>=7, @babel/plugin-transform-template-literals@npm:^7.12.1, @babel/plugin-transform-template-literals@npm:^7.22.5": +"@babel/plugin-transform-template-literals@npm:^7.12.1, @babel/plugin-transform-template-literals@npm:^7.22.5": version: 7.22.5 resolution: "@babel/plugin-transform-template-literals@npm:7.22.5" dependencies: @@ -1689,7 +1677,7 @@ __metadata: languageName: node linkType: hard -"@babel/preset-env@npm:>=7, @babel/preset-env@npm:^7.0.0, @babel/preset-env@npm:^7.12.11, @babel/preset-env@npm:^7.15.0, @babel/preset-env@npm:^7.15.6, @babel/preset-env@npm:^7.18.6": +"@babel/preset-env@npm:^7.0.0, @babel/preset-env@npm:^7.12.11, @babel/preset-env@npm:^7.15.0, @babel/preset-env@npm:^7.15.6, @babel/preset-env@npm:^7.18.6": version: 7.23.2 resolution: "@babel/preset-env@npm:7.23.2" dependencies: @@ -1877,7 +1865,7 @@ __metadata: languageName: node linkType: hard -"@babel/template@npm:>=7, @babel/template@npm:^7.12.7, @babel/template@npm:^7.22.15, @babel/template@npm:^7.22.5, @babel/template@npm:^7.3.3": +"@babel/template@npm:^7.12.7, @babel/template@npm:^7.22.15, @babel/template@npm:^7.22.5, @babel/template@npm:^7.3.3": version: 7.22.15 resolution: "@babel/template@npm:7.22.15" dependencies: @@ -1888,7 +1876,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:>=7, @babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.12.11, @babel/traverse@npm:^7.12.9, @babel/traverse@npm:^7.13.0, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.17.9, @babel/traverse@npm:^7.18.8, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.2": +"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.12.11, @babel/traverse@npm:^7.12.9, @babel/traverse@npm:^7.13.0, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.17.9, @babel/traverse@npm:^7.18.8, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.2": version: 7.23.2 resolution: "@babel/traverse@npm:7.23.2" dependencies: @@ -3575,82 +3563,6 @@ __metadata: languageName: node linkType: hard -"@linaria/babel-preset@npm:^3.0.0-beta.22, @linaria/babel-preset@npm:^3.0.0-beta.24": - version: 3.0.0-beta.24 - resolution: "@linaria/babel-preset@npm:3.0.0-beta.24" - dependencies: - "@babel/core": "npm:^7.18.2" - "@babel/generator": "npm:>=7" - "@babel/plugin-proposal-export-namespace-from": "npm:>=7" - "@babel/plugin-syntax-dynamic-import": "npm:>=7" - "@babel/plugin-transform-modules-commonjs": "npm:^7.18.2" - "@babel/template": "npm:>=7" - "@babel/traverse": "npm:>=7" - "@linaria/core": "npm:3.0.0-beta.22" - "@linaria/logger": "npm:3.0.0-beta.20" - "@linaria/utils": "npm:3.0.0-beta.20" - cosmiconfig: "npm:^5.1.0" - find-up: "npm:^5.0.0" - source-map: "npm:^0.7.3" - stylis: "npm:^3.5.4" - checksum: 3e733e3078185671981980709edb1a3215078f1acd750d8f5d941a60dd622f8008cb399e99ad70cd56a2836d03e6eabb5ad034005243e67c7673c1e5bfd23330 - languageName: node - linkType: hard - -"@linaria/core@npm:3.0.0-beta.22": - version: 3.0.0-beta.22 - resolution: "@linaria/core@npm:3.0.0-beta.22" - dependencies: - "@linaria/logger": "npm:^3.0.0-beta.20" - "@linaria/utils": "npm:^3.0.0-beta.20" - checksum: 28500821088940c63f69db30d5db3986bacdbe32889b9382dba00ccc0670e038d91ec0058ce8f12880e0e22ff58094997bd6454a310f1557c26d061a6e9d93d7 - languageName: node - linkType: hard - -"@linaria/logger@npm:3.0.0-beta.20, @linaria/logger@npm:^3.0.0-beta.20": - version: 3.0.0-beta.20 - resolution: "@linaria/logger@npm:3.0.0-beta.20" - dependencies: - debug: "npm:^4.1.1" - picocolors: "npm:^1.0.0" - checksum: c5c1fbe593d9110fcbf7309517530fbda419c42c4258e0854f05619f917641724718919693a0a12eb50250bace9857435f29f4de8b056e1dc5f40c01eb074a7a - languageName: node - linkType: hard - -"@linaria/preeval@npm:^3.0.0-beta.22": - version: 3.0.0-beta.22 - resolution: "@linaria/preeval@npm:3.0.0-beta.22" - dependencies: - "@linaria/babel-preset": "npm:^3.0.0-beta.22" - checksum: 8f44f8d322459f7fb199dd0192cfcc9b91dcd2d6d7fc82a4a1f12ea01c0e442fbf2fea9d1dad6156046a91921e7e2ca32f72c1bf246061409faec451ab8f9676 - languageName: node - linkType: hard - -"@linaria/shaker@npm:^3.0.0-beta.22": - version: 3.0.0-beta.22 - resolution: "@linaria/shaker@npm:3.0.0-beta.22" - dependencies: - "@babel/core": "npm:^7.18.2" - "@babel/generator": "npm:>=7" - "@babel/plugin-transform-runtime": "npm:>=7" - "@babel/plugin-transform-template-literals": "npm:>=7" - "@babel/preset-env": "npm:>=7" - "@linaria/babel-preset": "npm:^3.0.0-beta.22" - "@linaria/logger": "npm:^3.0.0-beta.20" - "@linaria/preeval": "npm:^3.0.0-beta.22" - babel-plugin-transform-react-remove-prop-types: "npm:^0.4.24" - ts-invariant: "npm:^0.10.3" - checksum: 0b4f54c2c85a982049b97ab588bf4660df3c79361d837fce2efbe2a97056a1f0ff3aa79a32465f19e092523f49bd8d4a98a810728912d00cbc1c140a66bc6828 - languageName: node - linkType: hard - -"@linaria/utils@npm:3.0.0-beta.20, @linaria/utils@npm:^3.0.0-beta.20": - version: 3.0.0-beta.20 - resolution: "@linaria/utils@npm:3.0.0-beta.20" - checksum: dbf2170bf89a06fd7158b979069ca0a445a56baeebe258109a2490d4709dacc5c4b1a3628cd179ba991478809907847e0460c0c32ac92f3d427f9056e2b8c152 - languageName: node - linkType: hard - "@mdx-js/mdx@npm:^1.6.22": version: 1.6.22 resolution: "@mdx-js/mdx@npm:1.6.22" @@ -8904,13 +8816,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-transform-react-remove-prop-types@npm:^0.4.24": - version: 0.4.24 - resolution: "babel-plugin-transform-react-remove-prop-types@npm:0.4.24" - checksum: 4ce1755af02375f0764683f9703ef47607e33ee57cefd348f054208e06a52b1517e43180c1c448046338a149853f2c9d7f63f27d5b27c74db5df74fba117f040 - languageName: node - linkType: hard - "babel-plugin-transform-typescript-metadata@npm:^0.3.1": version: 0.3.2 resolution: "babel-plugin-transform-typescript-metadata@npm:0.3.2" @@ -9631,31 +9536,6 @@ __metadata: languageName: node linkType: hard -"caller-callsite@npm:^2.0.0": - version: 2.0.0 - resolution: "caller-callsite@npm:2.0.0" - dependencies: - callsites: "npm:^2.0.0" - checksum: b685e9d126d9247b320cfdfeb3bc8da0c4be28d8fb98c471a96bc51aab3130099898a2fe3bf0308f0fe048d64c37d6d09f563958b9afce1a1e5e63d879c128a2 - languageName: node - linkType: hard - -"caller-path@npm:^2.0.0": - version: 2.0.0 - resolution: "caller-path@npm:2.0.0" - dependencies: - caller-callsite: "npm:^2.0.0" - checksum: 3e12ccd0c71ec10a057aac69e3ec175b721ca858c640df021ef0d25999e22f7c1d864934b596b7d47038e9b56b7ec315add042abbd15caac882998b50102fb12 - languageName: node - linkType: hard - -"callsites@npm:^2.0.0": - version: 2.0.0 - resolution: "callsites@npm:2.0.0" - checksum: be2f67b247df913732b7dec1ec0bbfcdbaea263e5a95968b19ec7965affae9496b970e3024317e6d4baa8e28dc6ba0cec03f46fdddc2fdcc51396600e53c2623 - languageName: node - linkType: hard - "callsites@npm:^3.0.0": version: 3.1.0 resolution: "callsites@npm:3.1.0" @@ -10640,18 +10520,6 @@ __metadata: languageName: node linkType: hard -"cosmiconfig@npm:^5.1.0": - version: 5.2.1 - resolution: "cosmiconfig@npm:5.2.1" - dependencies: - import-fresh: "npm:^2.0.0" - is-directory: "npm:^0.3.1" - js-yaml: "npm:^3.13.1" - parse-json: "npm:^4.0.0" - checksum: 1d617668e1367b8d66617fb8a1bd8c13e9598534959ac0cc86195b1b0cbe7afbba2b9faa300c60b9d9d35409cf4f064b0f6e377f4ea036434e5250c69c76932f - languageName: node - linkType: hard - "cosmiconfig@npm:^6.0.0": version: 6.0.0 resolution: "cosmiconfig@npm:6.0.0" @@ -12377,7 +12245,7 @@ __metadata: languageName: node linkType: hard -"enhanced-resolve@npm:5.12.0, enhanced-resolve@npm:^5.0.0, enhanced-resolve@npm:^5.10.0, enhanced-resolve@npm:^5.7.0, enhanced-resolve@npm:^5.8.2": +"enhanced-resolve@npm:5.12.0, enhanced-resolve@npm:^5.0.0, enhanced-resolve@npm:^5.10.0, enhanced-resolve@npm:^5.7.0": version: 5.12.0 resolution: "enhanced-resolve@npm:5.12.0" dependencies: @@ -14850,8 +14718,6 @@ __metadata: "@docusaurus/theme-mermaid": "npm:2.3.1" "@emotion/css": "npm:^11.9.0" "@emotion/hash": "npm:^0.9.0" - "@linaria/babel-preset": "npm:^3.0.0-beta.24" - "@linaria/shaker": "npm:^3.0.0-beta.22" "@nrwl/cli": "npm:15.3.3" "@nrwl/eslint-plugin-nx": "npm:15.3.3" "@nrwl/jest": "npm:15.3.3" @@ -14907,7 +14773,6 @@ __metadata: csstype: "npm:^3.1.3" d3-scale-chromatic: "npm:^3.0.0" doctoc: "npm:2.2.1" - enhanced-resolve: "npm:^5.8.2" esbuild: "npm:^0.14.43" esbuild-plugin-alias: "npm:^0.2.1" esbuild-plugin-import-glob: "npm:^0.1.1" @@ -15768,16 +15633,6 @@ __metadata: languageName: node linkType: hard -"import-fresh@npm:^2.0.0": - version: 2.0.0 - resolution: "import-fresh@npm:2.0.0" - dependencies: - caller-path: "npm:^2.0.0" - resolve-from: "npm:^3.0.0" - checksum: 610255f9753cc6775df00be08e9f43691aa39f7703e3636c45afe22346b8b545e600ccfe100c554607546fc8e861fa149a0d1da078c8adedeea30fff326eef79 - languageName: node - linkType: hard - "import-fresh@npm:^3.0.0, import-fresh@npm:^3.1.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0": version: 3.3.0 resolution: "import-fresh@npm:3.3.0" @@ -16213,13 +16068,6 @@ __metadata: languageName: node linkType: hard -"is-directory@npm:^0.3.1": - version: 0.3.1 - resolution: "is-directory@npm:0.3.1" - checksum: dce9a9d3981e38f2ded2a80848734824c50ee8680cd09aa477bef617949715cfc987197a2ca0176c58a9fb192a1a0d69b535c397140d241996a609d5906ae524 - languageName: node - linkType: hard - "is-docker@npm:^2.0.0, is-docker@npm:^2.1.1": version: 2.2.1 resolution: "is-docker@npm:2.2.1" @@ -17749,7 +17597,7 @@ __metadata: languageName: node linkType: hard -"json-parse-better-errors@npm:^1.0.1, json-parse-better-errors@npm:^1.0.2": +"json-parse-better-errors@npm:^1.0.2": version: 1.0.2 resolution: "json-parse-better-errors@npm:1.0.2" checksum: 5553232045359b767b0f2039a6777fede1a8d7dca1a0ffb1f9ef73a7519489ae7f566b2e040f2b4c38edb8e35e37ae07af7f0a52420902f869ee0dbf5dc6c784 @@ -20546,16 +20394,6 @@ __metadata: languageName: node linkType: hard -"parse-json@npm:^4.0.0": - version: 4.0.0 - resolution: "parse-json@npm:4.0.0" - dependencies: - error-ex: "npm:^1.3.1" - json-parse-better-errors: "npm:^1.0.1" - checksum: 0fe227d410a61090c247e34fa210552b834613c006c2c64d9a05cfe9e89cf8b4246d1246b1a99524b53b313e9ac024438d0680f67e33eaed7e6f38db64cfe7b5 - languageName: node - linkType: hard - "parse-json@npm:^5.0.0, parse-json@npm:^5.2.0": version: 5.2.0 resolution: "parse-json@npm:5.2.0" @@ -23014,13 +22852,6 @@ __metadata: languageName: node linkType: hard -"resolve-from@npm:^3.0.0": - version: 3.0.0 - resolution: "resolve-from@npm:3.0.0" - checksum: c4189f1592a777f7d51c1ff6153df18b5d062c831fb0c623b4b87736c8a73c08e4eaab19e807399287040791f3e7aa0877f05f9d86739d3ef1ef0c727e9fe06c - languageName: node - linkType: hard - "resolve-from@npm:^4.0.0": version: 4.0.0 resolution: "resolve-from@npm:4.0.0" @@ -24874,13 +24705,6 @@ __metadata: languageName: node linkType: hard -"stylis@npm:^3.5.4": - version: 3.5.4 - resolution: "stylis@npm:3.5.4" - checksum: 2fbf68d21c2057ce3990fe5881a569ce1e8811704fca55184023dd29a65c1789de74d66e4e16ca36851897ffa3ca245b8314ce56ea4b976b16367872ed5806df - languageName: node - linkType: hard - "stylis@npm:^4.0.13, stylis@npm:^4.1.2, stylis@npm:^4.2.0": version: 4.2.0 resolution: "stylis@npm:4.2.0" @@ -25497,15 +25321,6 @@ __metadata: languageName: node linkType: hard -"ts-invariant@npm:^0.10.3": - version: 0.10.3 - resolution: "ts-invariant@npm:0.10.3" - dependencies: - tslib: "npm:^2.1.0" - checksum: bb07d56fe4aae69d8860e0301dfdee2d375281159054bc24bf1e49e513fb0835bf7f70a11351344d213a79199c5e695f37ebbf5a447188a377ce0cd81d91ddb5 - languageName: node - linkType: hard - "ts-jest@npm:28.0.8": version: 28.0.8 resolution: "ts-jest@npm:28.0.8"