diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 1f264cd42..06fe9a399 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -127,9 +127,7 @@ yarn nx run-many --target=type-check --all - `@griffel/core` - Core runtime and compilation logic - `@griffel/react` - React bindings and hooks -- `@griffel/webpack-loader` - Webpack build-time transforms - `@griffel/vite-plugin` - Vite build-time transforms -- `@griffel/next-extraction-plugin` - Next.js CSS extraction - `@griffel/devtools` - Browser extension for debugging - `@griffel/eslint-plugin` - ESLint rules for Griffel usage diff --git a/README.md b/README.md index 0d2fec06b..bf0cb8cb9 100644 --- a/README.md +++ b/README.md @@ -22,13 +22,13 @@ Griffel ([_German for stylus/pen_](https://en.wiktionary.org/wiki/Griffel)) is C 🚀   Zero config start: Griffel has both runtime & build time implementations -🔥   Optional [build time transforms](./packages/webpack-loader) to improve performance +🔥   Optional [build time transforms](./packages/webpack-plugin) to improve performance 💪   Type-safe styles via [csstype](https://github.com/frenic/csstype) 🧩   Uses Atomic CSS to reuse styles and avoid specificity issues with CSS -📝   _Experimental_ CSS extraction with [Webpack plugin](./packages/webpack-extraction-plugin) +📝   CSS extraction with [Webpack plugin](./packages/webpack-plugin) 🐞   Debug using [Griffel DevTools extension](https://chrome.google.com/webstore/detail/griffel-devtools/bejhagjehnpgagkaaeehdpdadmffbigb) 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..262f182c9 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/webpack-plugin ``` ```shell -npm install --save-dev @griffel/webpack-loader +npm install --save-dev @griffel/webpack-plugin ``` @@ -30,7 +30,7 @@ npm install --save-dev @griffel/webpack-loader Webpack documentation: [Loaders](https://webpack.js.org/loaders/) -Within your webpack configuration object, you'll need to add the `@griffel/webpack-loader` to the list of modules, like so: +Within your webpack configuration object, you'll need to add the `@griffel/webpack-plugin` loader to the list of modules, like so: ```js module.exports = { @@ -40,7 +40,7 @@ module.exports = { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { - loader: '@griffel/webpack-loader', + loader: '@griffel/webpack-plugin/loader', }, }, @@ -49,7 +49,7 @@ module.exports = { test: /\.(ts|tsx)$/, exclude: /node_modules/, use: { - loader: '@griffel/webpack-loader', + loader: '@griffel/webpack-plugin/loader', options: { babelOptions: { presets: ['@babel/preset-typescript'], @@ -72,7 +72,7 @@ module.exports = { test: /\.styles.ts$/, exclude: /node_modules/, use: { - loader: '@griffel/webpack-loader', + loader: '@griffel/webpack-plugin/loader', options: { babelOptions: { presets: ['@babel/preset-typescript'], @@ -99,7 +99,7 @@ module.exports = { exclude: /node_modules/, use: [ { - loader: '@griffel/webpack-loader', + loader: '@griffel/webpack-plugin/loader', }, ], }); @@ -110,7 +110,7 @@ module.exports = { exclude: /node_modules/, use: [ { - loader: '@griffel/webpack-loader', + loader: '@griffel/webpack-plugin/loader', options: { babelOptions: { presets: ['next/babel'], @@ -127,4 +127,4 @@ module.exports = { ## Configuration -Please check [the README](https://github.com/microsoft/griffel/tree/main/packages/webpack-loader) of `@griffel/webpack-loader` to check how to configure module evaluation and imports. +Please check [the README](https://github.com/microsoft/griffel/tree/main/packages/webpack-plugin) of `@griffel/webpack-plugin` to check how to configure module evaluation and imports. diff --git a/apps/website/docs/react/css-extraction/with-nextjs.md b/apps/website/docs/react/css-extraction/with-nextjs.md deleted file mode 100644 index d44bbca22..000000000 --- a/apps/website/docs/react/css-extraction/with-nextjs.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -sidebar_position: 3 ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -# With Next.js - -## Install - - - - -```shell -yarn add --dev @griffel/next-extraction-plugin -``` - - - - -```shell -npm install --save-dev @griffel/next-extraction-plugin -``` - - - - -## Usage - -:::info - -Please configure [`@griffel/webpack-loader`](/react/ahead-of-time-compilation/with-webpack) first. - -::: - -In `next.config.js` file you'll need to add the next-plugin from `@griffel/webpack-extraction-plugin` like so: - -```js -// next.config.js -const { withGriffelCSSExtraction } = require('@griffel/next-extraction-plugin'); - -module.exports = withGriffelCSSExtraction()({ - webpack(config) { - config.module.rules.unshift({ - test: /\.(js|jsx)$/, - exclude: /node_modules/, - use: [ - { - loader: '@griffel/webpack-loader', - }, - ], - }); - - // If your project uses TypeScript - config.module.rules.unshift({ - test: /\.(ts|tsx)$/, - exclude: /node_modules/, - use: [ - { - loader: '@griffel/webpack-loader', - options: { - babelOptions: { - presets: ['next/babel'], - }, - }, - }, - ], - }); - - return config; - }, -}); -``` diff --git a/apps/website/docs/react/css-extraction/with-webpack.md b/apps/website/docs/react/css-extraction/with-webpack.md index 9e78b96fb..df8aa1d61 100644 --- a/apps/website/docs/react/css-extraction/with-webpack.md +++ b/apps/website/docs/react/css-extraction/with-webpack.md @@ -13,14 +13,14 @@ import TabItem from '@theme/TabItem'; ```shell -yarn add --dev @griffel/webpack-extraction-plugin +yarn add --dev @griffel/webpack-plugin ``` ```shell -npm install --save-dev @griffel/webpack-extraction-plugin +npm install --save-dev @griffel/webpack-plugin ``` @@ -28,16 +28,10 @@ npm install --save-dev @griffel/webpack-extraction-plugin ## Usage -:::info - -Please configure [`@griffel/webpack-loader`](/react/ahead-of-time-compilation/with-webpack) first. - -::: - -Within your Webpack configuration object, you'll need to add the loader and the plugin from `@griffel/webpack-extraction-plugin` like so: +Within your Webpack configuration object, you'll need to add the loader and the plugin from `@griffel/webpack-plugin` like so: ```js -const { GriffelCSSExtractionPlugin } = require('@griffel/webpack-extraction-plugin'); +const { GriffelPlugin } = require('@griffel/webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { @@ -48,20 +42,7 @@ module.exports = { // Apply "exclude" only if your dependencies **do not use** Griffel // exclude: /node_modules/, use: { - loader: GriffelCSSExtractionPlugin.loader, - }, - }, - // Add "@griffel/webpack-loader" if you use Griffel directly in your project - { - test: /\.(ts|tsx)$/, - exclude: /node_modules/, - use: { - loader: '@griffel/webpack-loader', - options: { - babelOptions: { - presets: ['@babel/preset-typescript'], - }, - }, + loader: '@griffel/webpack-plugin/loader', }, }, // "css-loader" is required to handle produced CSS assets by Griffel @@ -72,7 +53,7 @@ module.exports = { }, ], }, - plugins: [new MiniCssExtractPlugin(), new GriffelCSSExtractionPlugin()], + plugins: [new MiniCssExtractPlugin(), new GriffelPlugin()], }; ``` @@ -84,10 +65,10 @@ module.exports = { ::: -For better performance (to process less files) consider using `include` for `GriffelCSSExtractionPlugin.loader`: +For better performance (to process less files) consider using `include` for `@griffel/webpack-plugin/loader`: ```js -const { GriffelCSSExtractionPlugin } = require('@griffel/webpack-extraction-plugin'); +const { GriffelPlugin } = require('@griffel/webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { @@ -101,7 +82,7 @@ module.exports = { // see https://webpack.js.org/configuration/module/#condition ], use: { - loader: GriffelCSSExtractionPlugin.loader, + loader: '@griffel/webpack-plugin/loader', }, }, ], @@ -116,9 +97,6 @@ If you use `mini-css-extract-plugin`, you may need to set it to `false` to remov ``` WARNING in chunk griffel [mini-css-extract-plugin] Conflicting order. Following module has been added: -* css ./node_modules/css-loader/dist/cjs.js!./node_modules/@griffel/webpack-extraction-plugin/virtual-loader/index.js?style=%2F**%20%40griffel%3Acss-start%20%5Bd%5D%20**%2F%0A.fm40iov%7Bcolor%3A%23ccc%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A!./src/foo-module/baz.js - despite it was not able to fulfill desired ordering with these modules: -* css ./node_modules/css-loader/dist/cjs.js!./node_modules/@griffel/webpack-extraction-plugin/virtual-loader/index.js?style=%2F**%20%40griffel%3Acss-start%20%5Bd%5D%20**%2F%0A.f1e30ogq%7Bcolor%3Ablueviolet%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A!./src/foo-module/qux.js - couldn't fulfill desired order of chunk group(s) ``` diff --git a/e2e/nextjs/project.json b/e2e/nextjs/project.json index 29c88ad31..a94c0f646 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/webpack-plugin"], "targets": { "test": { "executor": "nx:run-commands", diff --git a/e2e/nextjs/src/assets/next.config.js b/e2e/nextjs/src/assets/next.config.js index 57453d796..7a31cc826 100644 --- a/e2e/nextjs/src/assets/next.config.js +++ b/e2e/nextjs/src/assets/next.config.js @@ -7,7 +7,7 @@ module.exports = withGriffelCSSExtraction()({ exclude: /node_modules/, use: [ { - loader: '@griffel/webpack-loader', + loader: '@griffel/webpack-plugin/loader', }, ], }); @@ -18,7 +18,7 @@ module.exports = withGriffelCSSExtraction()({ exclude: /node_modules/, use: [ { - loader: '@griffel/webpack-loader', + loader: '@griffel/webpack-plugin/loader', options: { babelOptions: { presets: ['next/babel'], diff --git a/e2e/nextjs/src/test.ts b/e2e/nextjs/src/test.ts index c87d71cdc..09e40bdb4 100644 --- a/e2e/nextjs/src/test.ts +++ b/e2e/nextjs/src/test.ts @@ -27,8 +27,9 @@ async function performTest() { packLocalPackage(rootDir, tempDir, '@griffel/core'), packLocalPackage(rootDir, tempDir, '@griffel/react'), packLocalPackage(rootDir, tempDir, '@griffel/babel-preset'), - packLocalPackage(rootDir, tempDir, '@griffel/webpack-extraction-plugin'), - packLocalPackage(rootDir, tempDir, '@griffel/webpack-loader'), + packLocalPackage(rootDir, tempDir, '@griffel/transform-shaker'), + packLocalPackage(rootDir, tempDir, '@griffel/transform'), + packLocalPackage(rootDir, tempDir, '@griffel/webpack-plugin'), packLocalPackage(rootDir, tempDir, '@griffel/next-extraction-plugin'), ]); diff --git a/e2e/rspack/README.md b/e2e/rspack/README.md index bdf1a2dde..9aa184d76 100644 --- a/e2e/rspack/README.md +++ b/e2e/rspack/README.md @@ -1,3 +1,3 @@ This test package was created to ensure that AOT & CSS extraction remains compatible with Rspack. -The test uses `@griffel/webpack-loader` & `@griffel/webpack-extraction-plugin` and the recommended config from our docs. +The test uses `@griffel/webpack-plugin` and the recommended config from our docs. diff --git a/e2e/rspack/project.json b/e2e/rspack/project.json index a5ce4e01e..d8296cdfa 100644 --- a/e2e/rspack/project.json +++ b/e2e/rspack/project.json @@ -3,7 +3,7 @@ "$schema": "../../node_modules/nx/schemas/project-schema.json", "sourceRoot": "e2e/rspack/src", "projectType": "library", - "implicitDependencies": ["@griffel/webpack-loader"], + "implicitDependencies": ["@griffel/webpack-plugin"], "targets": { "test": { "executor": "nx:run-commands", diff --git a/e2e/rspack/src/assets/rspack.config.js b/e2e/rspack/src/assets/rspack.config.js index e2b46f448..75309635f 100644 --- a/e2e/rspack/src/assets/rspack.config.js +++ b/e2e/rspack/src/assets/rspack.config.js @@ -1,7 +1,6 @@ // @ts-check -const { GriffelCSSExtractionPlugin } = require('@griffel/webpack-extraction-plugin'); -const path = require('path'); +const { GriffelPlugin } = require('@griffel/webpack-plugin'); /** * @type {import('@rspack/core').Configuration} @@ -22,17 +21,11 @@ const config = { { test: /\.js$/, exclude: /node_modules/, - use: [{ loader: GriffelCSSExtractionPlugin.loader }, { loader: '@griffel/webpack-loader' }], + use: [{ loader: '@griffel/webpack-plugin/loader' }], }, ], }, - plugins: [/** @type {any} */ (new GriffelCSSExtractionPlugin())], - resolve: { - alias: { - 'fake-module': path.resolve(__dirname, 'src', 'Component.js'), - 'fake-colors': path.resolve(__dirname, 'src', 'colors.js'), - }, - }, + plugins: [/** @type {any} */ (new GriffelPlugin())], }; module.exports = config; diff --git a/e2e/rspack/src/assets/src/Component.js b/e2e/rspack/src/assets/src/Component.js index 3fa3da096..bcda77aea 100644 --- a/e2e/rspack/src/assets/src/Component.js +++ b/e2e/rspack/src/assets/src/Component.js @@ -1,6 +1,5 @@ import { makeResetStyles, makeStyles } from '@griffel/react'; -// @ts-expect-error It's a fake module resolved via aliases -import { colors } from 'fake-colors'; +import { colors } from './colors.js'; const useClasses = makeStyles({ root: { diff --git a/e2e/rspack/src/assets/src/index.js b/e2e/rspack/src/assets/src/index.js index 63b7c27e0..fe97f0f0e 100644 --- a/e2e/rspack/src/assets/src/index.js +++ b/e2e/rspack/src/assets/src/index.js @@ -1,4 +1,3 @@ -// @ts-expect-error It's a fake module resolved via aliases -import { Component } from 'fake-module'; +import { Component } from './Component.js'; console.log(Component); diff --git a/e2e/rspack/src/test.ts b/e2e/rspack/src/test.ts index b532efc4f..1cda86713 100644 --- a/e2e/rspack/src/test.ts +++ b/e2e/rspack/src/test.ts @@ -26,9 +26,9 @@ async function performTest() { packLocalPackage(rootDir, tempDir, '@griffel/style-types'), packLocalPackage(rootDir, tempDir, '@griffel/core'), packLocalPackage(rootDir, tempDir, '@griffel/react'), - packLocalPackage(rootDir, tempDir, '@griffel/babel-preset'), - packLocalPackage(rootDir, tempDir, '@griffel/webpack-extraction-plugin'), - packLocalPackage(rootDir, tempDir, '@griffel/webpack-loader'), + packLocalPackage(rootDir, tempDir, '@griffel/transform-shaker'), + packLocalPackage(rootDir, tempDir, '@griffel/transform'), + packLocalPackage(rootDir, tempDir, '@griffel/webpack-plugin'), ]); const rspackVersion = (await sh(`yarn rspack --version`, rootDir, true)).trim(); diff --git a/packages/babel-preset/README.md b/packages/babel-preset/README.md index c9b78d156..3f1ffdd5d 100644 --- a/packages/babel-preset/README.md +++ b/packages/babel-preset/README.md @@ -19,7 +19,7 @@ A Babel preset that performs build time transforms for [`@griffel/react`](../rea > [!CAUTION] -> We don't recommend to use this preset directly, it's intended to be used by other tools like [webpack loader](../webpack-loader) or [Vite plugin](../vite-plugin). +> We don't recommend to use this preset directly, it's intended to be used by other tools like [webpack plugin](../webpack-plugin). ## Install diff --git a/packages/next-extraction-plugin/.eslintrc.json b/packages/next-extraction-plugin/.eslintrc.json deleted file mode 100644 index 9d9c0db55..000000000 --- a/packages/next-extraction-plugin/.eslintrc.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": ["../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": {} - }, - { - "files": ["*.ts", "*.tsx"], - "rules": {} - }, - { - "files": ["*.js", "*.jsx"], - "rules": {} - } - ] -} diff --git a/packages/next-extraction-plugin/CHANGELOG.json b/packages/next-extraction-plugin/CHANGELOG.json deleted file mode 100644 index 05013850e..000000000 --- a/packages/next-extraction-plugin/CHANGELOG.json +++ /dev/null @@ -1,917 +0,0 @@ -{ - "name": "@griffel/next-extraction-plugin", - "entries": [ - { - "date": "Fri, 06 Mar 2026 15:56:28 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.15", - "version": "0.1.15", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/next-extraction-plugin", - "commit": "f422dee59ffc7ad2f4e5396def5dae5c9785cf24", - "comment": "chore: hoist common tsconfig strict options to base config" - } - ], - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.5.14", - "commit": "75914de37870943b9f2d483be421efe9cad8872f" - } - ] - } - }, - { - "date": "Fri, 06 Mar 2026 08:17:05 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.14", - "version": "0.1.14", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/next-extraction-plugin", - "commit": "5370788cea69e6e6e66a21e3bcc7031791d69811", - "comment": "fix: work with Next.js 15" - }, - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.5.13", - "commit": "832ca3b88650bb8fa8b20499ade2e679518bc934" - } - ] - } - }, - { - "date": "Tue, 05 Aug 2025 16:25:42 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.13", - "version": "0.1.13", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/next-extraction-plugin", - "commit": "fce8acbe447eb79df31918e5fd56f264ee1a3440", - "comment": "chore: bump nx to 21.3.8" - } - ], - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.5.12", - "commit": "04c09e10c83c712def41323320eb798c78638487" - } - ] - } - }, - { - "date": "Mon, 28 Jul 2025 09:12:30 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.12", - "version": "0.1.12", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/next-extraction-plugin", - "commit": "a588a6c1f301e598557a8a1255f6069ccbbb2534", - "comment": "chore: apply release" - } - ], - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.5.11", - "commit": "230887b0ab80fb2db29ed04687f15d14d0200396" - } - ] - } - }, - { - "date": "Tue, 22 Apr 2025 10:05:48 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.11", - "version": "0.1.11", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.5.10", - "commit": "d25d0967a81daac6fd8640961836b806ecfc7fe8" - } - ] - } - }, - { - "date": "Thu, 23 Jan 2025 12:09:03 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.10", - "version": "0.1.10", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.5.9", - "commit": "78b2b5f231e3032de8aa1b5c5794a2a4317df42e" - } - ] - } - }, - { - "date": "Wed, 22 Jan 2025 13:44:43 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.9", - "version": "0.1.9", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.5.8", - "commit": "fa0a08b0452669a9bc4e0f83b2dbcd85b97f733e" - } - ] - } - }, - { - "date": "Tue, 12 Nov 2024 09:58:11 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.8", - "version": "0.1.8", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.5.7", - "commit": "4dd2eec22aaff93dead8429c4a35496de7dab438" - } - ] - } - }, - { - "date": "Thu, 31 Oct 2024 16:16:50 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.7", - "version": "0.1.7", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.5.6", - "commit": "00ba8831f3b895c1600e8211895c0d2b99c13365" - } - ] - } - }, - { - "date": "Mon, 29 Jul 2024 07:31:53 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.6", - "version": "0.1.6", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.5.5", - "commit": "aa24116ea5cf763ee7f56363067a5c386c4c2222" - } - ] - } - }, - { - "date": "Wed, 10 Jul 2024 14:36:29 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.5", - "version": "0.1.5", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.5.4", - "commit": "15496655df98b9d8e8f505b461cc6dbd12e3122e" - } - ] - } - }, - { - "date": "Wed, 22 May 2024 08:24:17 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.4", - "version": "0.1.4", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.5.3", - "commit": "6ae570dbbd711a5e95184004f5d4d98a8ffa2df3" - } - ] - } - }, - { - "date": "Thu, 02 May 2024 14:07:14 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.3", - "version": "0.1.3", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.5.2", - "commit": "9745935b1bd28b02ee7c19d9195883e8454f0810" - } - ] - } - }, - { - "date": "Tue, 19 Mar 2024 11:33:53 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.2", - "version": "0.1.2", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.5.1", - "commit": "95326c52b330ad9d286fad926f2aa26914c39061" - } - ] - } - }, - { - "date": "Fri, 26 Jan 2024 10:01:06 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.1", - "version": "0.1.1", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.5.0", - "commit": "b7180a73848f6c3aa277716d5c3411024d946197" - } - ] - } - }, - { - "date": "Tue, 23 Jan 2024 11:03:15 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.0", - "version": "0.1.0", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/next-extraction-plugin", - "commit": "9c0b1acf69a4645331d1623b1f0b5484ce5d2cc9", - "comment": "chore: bump to Nx@15.9.7" - } - ] - } - }, - { - "date": "Fri, 12 Jan 2024 11:08:40 GMT", - "tag": "@griffel/next-extraction-plugin_v0.1.0", - "version": "0.1.0", - "comments": { - "minor": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/next-extraction-plugin", - "commit": "f134bc6056599a78cf27b71dec854224a162ee22", - "comment": "chore: require Next.js 13 or 14" - }, - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.4.5", - "commit": "0d2e5506d6b9bc9d7e4a102b88c2bb25eff9a34d" - } - ], - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/next-extraction-plugin", - "commit": "5f2a0e43eb2ff94914904b54bd474cd1af948b6f", - "comment": "chore: improve checks on .rules" - } - ] - } - }, - { - "date": "Thu, 30 Nov 2023 16:42:15 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.36", - "version": "0.0.36", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.4.4", - "commit": "7d72d1eb3439ef8423fe958035a1525da1822750" - } - ] - } - }, - { - "date": "Mon, 13 Nov 2023 15:16:05 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.35", - "version": "0.0.35", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.4.3", - "commit": "dbbdcb6cdacb4ee3200b0dbb4a6e4da7fd443805" - } - ] - } - }, - { - "date": "Thu, 09 Nov 2023 14:35:07 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.34", - "version": "0.0.34", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.4.2", - "commit": "8f213a0c040ee833b268cb2558adf976773ac14d" - } - ] - } - }, - { - "date": "Mon, 30 Oct 2023 14:08:55 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.33", - "version": "0.0.33", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.4.1", - "commit": "f001ae503d75d7ddcf70d0633e2f51111b70ed45" - } - ] - } - }, - { - "date": "Wed, 18 Oct 2023 09:11:01 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.32", - "version": "0.0.32", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.4.0", - "commit": "c2d669493849f4c117624862379f05c25d7f1b40" - } - ] - } - }, - { - "date": "Tue, 03 Oct 2023 19:09:32 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.31", - "version": "0.0.31", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.22", - "commit": "1476e34bd093df1132181acfebbb8c51922d5c8b" - } - ] - } - }, - { - "date": "Fri, 15 Sep 2023 08:08:43 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.30", - "version": "0.0.30", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.21", - "commit": "744403e2d046701dc82b02460a60e1680bb60f2e" - } - ] - } - }, - { - "date": "Fri, 01 Sep 2023 12:27:27 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.29", - "version": "0.0.29", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.20", - "commit": "64613e2b35984a40f1e1de4229409669d3499bfb" - } - ] - } - }, - { - "date": "Mon, 28 Aug 2023 17:17:47 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.28", - "version": "0.0.28", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.19", - "commit": "5865f8ac8953dc0caa5dc47807e8bc9cc6487dae" - } - ] - } - }, - { - "date": "Mon, 31 Jul 2023 12:18:47 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.27", - "version": "0.0.27", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.18", - "commit": "fa5f0d726cbdca1cc583ccc7af4578a7f3f6599f" - } - ] - } - }, - { - "date": "Mon, 31 Jul 2023 09:05:33 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.26", - "version": "0.0.26", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.17", - "commit": "1d0df068e80f3cb602651f1875edbd625d221c47" - } - ] - } - }, - { - "date": "Wed, 19 Jul 2023 07:32:54 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.25", - "version": "0.0.25", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.16", - "commit": "47f4df96449fc23545eab7c58ede2e55610c637c" - } - ] - } - }, - { - "date": "Thu, 13 Jul 2023 11:31:22 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.24", - "version": "0.0.24", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.15", - "commit": "2f75c38dada524264284c2a92c57437309dcf491" - } - ] - } - }, - { - "date": "Thu, 29 Jun 2023 12:49:54 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.23", - "version": "0.0.23", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.14", - "commit": "105857b021ee1d471efc29037a20601fb80bc72a" - } - ] - } - }, - { - "date": "Wed, 28 Jun 2023 16:07:13 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.22", - "version": "0.0.22", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.13", - "commit": "d551a7f5a11b4123d1b353cab37e85058de17eb4" - } - ] - } - }, - { - "date": "Tue, 27 Jun 2023 14:18:04 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.21", - "version": "0.0.21", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.12", - "commit": "02499fc94501e5f859aef982db3d9a23bc2a13bc" - } - ] - } - }, - { - "date": "Tue, 25 Apr 2023 14:34:44 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.20", - "version": "0.0.20", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.11", - "commit": "b7b8ccddbc7681cdb9894d7415cd51ea29320145" - } - ] - } - }, - { - "date": "Fri, 14 Apr 2023 07:58:49 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.19", - "version": "0.0.19", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.10", - "commit": "ff7edd54e829fbeb5453383fe6a19009e44b64b2" - } - ] - } - }, - { - "date": "Wed, 29 Mar 2023 12:45:13 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.18", - "version": "0.0.18", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.9", - "commit": "9ad8031fa6346e97d5d444b26d7bdf380f9c69c1" - } - ] - } - }, - { - "date": "Tue, 28 Mar 2023 13:04:53 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.17", - "version": "0.0.17", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.8", - "commit": "a0b6a6c16329b9ab79a603cbcfbbee7de80dba0e" - } - ] - } - }, - { - "date": "Thu, 02 Mar 2023 14:51:11 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.16", - "version": "0.0.16", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/next-extraction-plugin", - "commit": "d8e62d7756c8bd3908e2ce5a95ee0a842fc7df9d", - "comment": "chore: bump Nx" - } - ], - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/next-extraction-plugin", - "commit": "3edb840d4139d81744620d8bded738d814cd71f5", - "comment": "chore: remove @griffel/core from peerDependencies" - }, - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.7", - "commit": "3edb840d4139d81744620d8bded738d814cd71f5" - } - ] - } - }, - { - "date": "Fri, 10 Feb 2023 10:23:25 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.15", - "version": "0.0.15", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/next-extraction-plugin", - "commit": "bb07d370d3084b9bd7f2941fd82be79fa6c99b4b", - "comment": "chore: update tsconfig files" - } - ], - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.6", - "commit": "5837c739ee141a9099a031449870dbca46ce648d" - }, - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/core to v1.9.2", - "commit": "5837c739ee141a9099a031449870dbca46ce648d" - } - ] - } - }, - { - "date": "Wed, 01 Feb 2023 10:47:40 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.14", - "version": "0.0.14", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.5", - "commit": "15fa8433ef03cb28b8f528960ae335e9e2231eeb" - } - ] - } - }, - { - "date": "Thu, 26 Jan 2023 14:06:28 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.13", - "version": "0.0.13", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.4", - "commit": "d87ba30b4f07fc759c0abb18ff86fd57dd79296f" - }, - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/core to v1.9.1", - "commit": "d87ba30b4f07fc759c0abb18ff86fd57dd79296f" - } - ] - } - }, - { - "date": "Tue, 20 Dec 2022 11:48:33 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.12", - "version": "0.0.12", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.3", - "commit": "7d2e3ba8656afccb6cf0b56e7b7f6cce0ae9fd15" - }, - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/core to v1.9.0", - "commit": "7d2e3ba8656afccb6cf0b56e7b7f6cce0ae9fd15" - } - ] - } - }, - { - "date": "Fri, 09 Dec 2022 11:15:19 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.11", - "version": "0.0.11", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.2", - "commit": "9b94a45ba5bd526460dd97aaea103cf64d9d5450" - }, - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/core to v1.8.3", - "commit": "9b94a45ba5bd526460dd97aaea103cf64d9d5450" - } - ] - } - }, - { - "date": "Wed, 30 Nov 2022 17:14:53 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.10", - "version": "0.0.10", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.1", - "commit": "f985b6dc5e3576f5aacce45752755d06cff7ef70" - } - ] - } - }, - { - "date": "Wed, 30 Nov 2022 09:32:24 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.9", - "version": "0.0.9", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.3.0", - "commit": "f5c9ec05b8892ef7388e876671b475daf64b28b6" - } - ] - } - }, - { - "date": "Thu, 24 Nov 2022 10:05:12 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.8", - "version": "0.0.8", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.2.2", - "commit": "fc3403a602d5dd0b206ceeb48ca689cb2fdf6d37" - }, - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/core to v1.8.2", - "commit": "fc3403a602d5dd0b206ceeb48ca689cb2fdf6d37" - } - ] - } - }, - { - "date": "Wed, 26 Oct 2022 11:06:03 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.7", - "version": "0.0.7", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.2.1", - "commit": "f9fb5726c89abff0c7f5e07c6e1d1c8e0ebbcde6" - }, - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/core to v1.8.1", - "commit": "f9fb5726c89abff0c7f5e07c6e1d1c8e0ebbcde6" - } - ] - } - }, - { - "date": "Thu, 13 Oct 2022 08:36:18 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.6", - "version": "0.0.6", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.2.0", - "commit": "32d9b0bfa4372343d710368b6bed1cc5185a6684" - }, - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/core to v1.8.0", - "commit": "32d9b0bfa4372343d710368b6bed1cc5185a6684" - } - ] - } - }, - { - "date": "Wed, 05 Oct 2022 14:28:43 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.5", - "version": "0.0.5", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.1.8", - "commit": "9173966f4f1c69556f68351e6361d9302c674621" - }, - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/core to v1.7.0", - "commit": "9173966f4f1c69556f68351e6361d9302c674621" - } - ] - } - }, - { - "date": "Tue, 04 Oct 2022 08:44:33 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.4", - "version": "0.0.4", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.1.7", - "commit": "6828b9b754d65621e12a8fbff54c9f486eab032e" - }, - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/core to v1.6.1", - "commit": "6828b9b754d65621e12a8fbff54c9f486eab032e" - } - ] - } - }, - { - "date": "Tue, 16 Aug 2022 11:16:00 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.3", - "version": "0.0.3", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.1.6", - "commit": "545253c7bd0c84f3c72803b6b88946e617922714" - }, - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/core to v1.6.0", - "commit": "545253c7bd0c84f3c72803b6b88946e617922714" - } - ] - } - }, - { - "date": "Fri, 05 Aug 2022 09:44:44 GMT", - "tag": "@griffel/next-extraction-plugin_v0.0.2", - "version": "0.0.2", - "comments": { - "patch": [ - { - "author": "dwlad90@gmail.com", - "package": "@griffel/next-extraction-plugin", - "commit": "81c9176d20ecefdeca14c94fb4705563f5faeba2", - "comment": "feat: export GriffelCSSExtractionPluginOptions type" - }, - { - "author": "beachball", - "package": "@griffel/next-extraction-plugin", - "comment": "Bump @griffel/webpack-extraction-plugin to v0.1.5", - "commit": "81c9176d20ecefdeca14c94fb4705563f5faeba2" - } - ] - } - } - ] -} diff --git a/packages/next-extraction-plugin/CHANGELOG.md b/packages/next-extraction-plugin/CHANGELOG.md deleted file mode 100644 index 76f9c95f1..000000000 --- a/packages/next-extraction-plugin/CHANGELOG.md +++ /dev/null @@ -1,431 +0,0 @@ -# Change Log - @griffel/next-extraction-plugin - -This log was last generated on Fri, 06 Mar 2026 15:56:28 GMT and should not be manually modified. - - - -## 0.1.15 - -Fri, 06 Mar 2026 15:56:28 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.5.14 - -## 0.1.14 - -Fri, 06 Mar 2026 08:17:05 GMT - -### Patches - -- fix: work with Next.js 15 (olfedias@microsoft.com) -- Bump @griffel/webpack-extraction-plugin to v0.5.13 - -## 0.1.13 - -Tue, 05 Aug 2025 16:25:42 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.5.12 - -## 0.1.12 - -Mon, 28 Jul 2025 09:12:30 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.5.11 - -## 0.1.11 - -Tue, 22 Apr 2025 10:05:48 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.5.10 - -## 0.1.10 - -Thu, 23 Jan 2025 12:09:03 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.5.9 - -## 0.1.9 - -Wed, 22 Jan 2025 13:44:43 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.5.8 - -## 0.1.8 - -Tue, 12 Nov 2024 09:58:11 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.5.7 - -## 0.1.7 - -Thu, 31 Oct 2024 16:16:50 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.5.6 - -## 0.1.6 - -Mon, 29 Jul 2024 07:31:53 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.5.5 - -## 0.1.5 - -Wed, 10 Jul 2024 14:36:29 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.5.4 - -## 0.1.4 - -Wed, 22 May 2024 08:24:17 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.5.3 - -## 0.1.3 - -Thu, 02 May 2024 14:07:14 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.5.2 - -## 0.1.2 - -Tue, 19 Mar 2024 11:33:53 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.5.1 - -## 0.1.1 - -Fri, 26 Jan 2024 10:01:06 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.5.0 - -## 0.1.0 - -Fri, 12 Jan 2024 11:08:40 GMT - -### Minor changes - -- chore: require Next.js 13 or 14 (olfedias@microsoft.com) -- Bump @griffel/webpack-extraction-plugin to v0.4.5 - -### Patches - -- chore: improve checks on .rules (olfedias@microsoft.com) - -## 0.0.36 - -Thu, 30 Nov 2023 16:42:15 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.4.4 - -## 0.0.35 - -Mon, 13 Nov 2023 15:16:05 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.4.3 - -## 0.0.34 - -Thu, 09 Nov 2023 14:35:07 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.4.2 - -## 0.0.33 - -Mon, 30 Oct 2023 14:08:55 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.4.1 - -## 0.0.32 - -Wed, 18 Oct 2023 09:11:01 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.4.0 - -## 0.0.31 - -Tue, 03 Oct 2023 19:09:32 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.22 - -## 0.0.30 - -Fri, 15 Sep 2023 08:08:43 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.21 - -## 0.0.29 - -Fri, 01 Sep 2023 12:27:27 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.20 - -## 0.0.28 - -Mon, 28 Aug 2023 17:17:47 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.19 - -## 0.0.27 - -Mon, 31 Jul 2023 12:18:47 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.18 - -## 0.0.26 - -Mon, 31 Jul 2023 09:05:33 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.17 - -## 0.0.25 - -Wed, 19 Jul 2023 07:32:54 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.16 - -## 0.0.24 - -Thu, 13 Jul 2023 11:31:22 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.15 - -## 0.0.23 - -Thu, 29 Jun 2023 12:49:54 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.14 - -## 0.0.22 - -Wed, 28 Jun 2023 16:07:13 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.13 - -## 0.0.21 - -Tue, 27 Jun 2023 14:18:04 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.12 - -## 0.0.20 - -Tue, 25 Apr 2023 14:34:44 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.11 - -## 0.0.19 - -Fri, 14 Apr 2023 07:58:49 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.10 - -## 0.0.18 - -Wed, 29 Mar 2023 12:45:13 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.9 - -## 0.0.17 - -Tue, 28 Mar 2023 13:04:53 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.8 - -## 0.0.16 - -Thu, 02 Mar 2023 14:51:11 GMT - -### Patches - -- chore: remove @griffel/core from peerDependencies (olfedias@microsoft.com) -- Bump @griffel/webpack-extraction-plugin to v0.3.7 - -## 0.0.15 - -Fri, 10 Feb 2023 10:23:25 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.6 -- Bump @griffel/core to v1.9.2 - -## 0.0.14 - -Wed, 01 Feb 2023 10:47:40 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.5 - -## 0.0.13 - -Thu, 26 Jan 2023 14:06:28 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.4 -- Bump @griffel/core to v1.9.1 - -## 0.0.12 - -Tue, 20 Dec 2022 11:48:33 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.3 -- Bump @griffel/core to v1.9.0 - -## 0.0.11 - -Fri, 09 Dec 2022 11:15:19 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.2 -- Bump @griffel/core to v1.8.3 - -## 0.0.10 - -Wed, 30 Nov 2022 17:14:53 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.1 - -## 0.0.9 - -Wed, 30 Nov 2022 09:32:24 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.3.0 - -## 0.0.8 - -Thu, 24 Nov 2022 10:05:12 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.2.2 -- Bump @griffel/core to v1.8.2 - -## 0.0.7 - -Wed, 26 Oct 2022 11:06:03 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.2.1 -- Bump @griffel/core to v1.8.1 - -## 0.0.6 - -Thu, 13 Oct 2022 08:36:18 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.2.0 -- Bump @griffel/core to v1.8.0 - -## 0.0.5 - -Wed, 05 Oct 2022 14:28:43 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.1.8 -- Bump @griffel/core to v1.7.0 - -## 0.0.4 - -Tue, 04 Oct 2022 08:44:33 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.1.7 -- Bump @griffel/core to v1.6.1 - -## 0.0.3 - -Tue, 16 Aug 2022 11:16:00 GMT - -### Patches - -- Bump @griffel/webpack-extraction-plugin to v0.1.6 -- Bump @griffel/core to v1.6.0 - -## 0.0.2 - -Fri, 05 Aug 2022 09:44:44 GMT - -### Patches - -- feat: export GriffelCSSExtractionPluginOptions type (dwlad90@gmail.com) -- Bump @griffel/webpack-extraction-plugin to v0.1.5 diff --git a/packages/next-extraction-plugin/README.md b/packages/next-extraction-plugin/README.md deleted file mode 100644 index 558b4a7a5..000000000 --- a/packages/next-extraction-plugin/README.md +++ /dev/null @@ -1,70 +0,0 @@ -# Next plugin to perform CSS extraction in Griffel - -A plugin for NextJS 12.0.5 and newer that adds [`@griffel/webpack-extraction-plugin`](../webpack-extraction-plugin) to webpack loaders pipeline. - - - - -- [Install](#install) -- [Usage](#usage) - - - -## Install - -```bash -yarn add --dev @griffel/next-extraction-plugin -# or -npm install --save-dev @griffel/next-extraction-plugin -``` - -Please install `@griffel/webpack-loader` if you haven't done so already: - -```bash -yarn add --dev @griffel/webpack-loader -# or -npm install --save-dev @griffel/webpack-loader -``` - -For more details please check [README of `@griffel/webpack-loader`](../webpack-loader/README.md). - -## Usage - -In `next.config.js` file you'll need to add the next-plugin from `@griffel/webpack-extraction-plugin` like so: - -```js -// next.config.js -const { withGriffelCSSExtraction } = require('@griffel/next-extraction-plugin'); - -module.exports = withGriffelCSSExtraction()({ - webpack(config) { - config.module.rules.unshift({ - test: /\.(js|jsx)$/, - exclude: /node_modules/, - use: [ - { - loader: '@griffel/webpack-loader', - }, - ], - }); - - // If your project uses TypeScript - config.module.rules.unshift({ - test: /\.(ts|tsx)$/, - exclude: /node_modules/, - use: [ - { - loader: '@griffel/webpack-loader', - options: { - babelOptions: { - presets: ['next/babel'], - }, - }, - }, - ], - }); - - return config; - }, -}); -``` diff --git a/packages/next-extraction-plugin/jest.config.ts b/packages/next-extraction-plugin/jest.config.ts deleted file mode 100644 index 878908829..000000000 --- a/packages/next-extraction-plugin/jest.config.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable */ -export default { - displayName: 'next-extraction-plugin', - preset: '../../jest.preset.js', - globals: {}, - testEnvironment: 'node', - transform: { - '^.+\\.[tj]sx?$': [ - 'ts-jest', - { - tsconfig: '/tsconfig.spec.json', - }, - ], - }, - moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], - coverageDirectory: '../../coverage/packages/next-extraction-plugin', -}; diff --git a/packages/next-extraction-plugin/package.json b/packages/next-extraction-plugin/package.json deleted file mode 100644 index 1f4bdac03..000000000 --- a/packages/next-extraction-plugin/package.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "@griffel/next-extraction-plugin", - "version": "0.1.15", - "description": "NextJS plugin that add Griffel's CSS extraction to webpack loaders pipeline", - "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/microsoft/griffel" - }, - "dependencies": { - "@griffel/webpack-extraction-plugin": "^0.5.14", - "browserslist": "^4.19.1", - "tslib": "^2.1.0" - }, - "peerDependencies": { - "next": ">=13" - } -} diff --git a/packages/next-extraction-plugin/project.json b/packages/next-extraction-plugin/project.json deleted file mode 100644 index 5daf93f80..000000000 --- a/packages/next-extraction-plugin/project.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "name": "@griffel/next-extraction-plugin", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "packages/next-extraction-plugin/src", - "projectType": "library", - "tags": [], - "targets": { - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"] - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/packages/next-extraction-plugin"], - "options": { - "jestConfig": "packages/next-extraction-plugin/jest.config.ts" - } - }, - "build": { - "executor": "@nx/js:tsc", - "outputs": ["{options.outputPath}"], - "options": { - "outputPath": "dist/packages/next-extraction-plugin", - "tsConfig": "packages/next-extraction-plugin/tsconfig.lib.json", - "skipTypeField": true, - "packageJson": "packages/next-extraction-plugin/package.json", - "main": "packages/next-extraction-plugin/src/index.ts", - "assets": ["packages/next-extraction-plugin/*.md"] - } - }, - "type-check": { - "executor": "nx:run-commands", - "options": { - "cwd": "packages/next-extraction-plugin", - "commands": [ - { - "command": "tsc -b --pretty" - } - ] - }, - "outputs": [] - } - } -} diff --git a/packages/next-extraction-plugin/src/index.ts b/packages/next-extraction-plugin/src/index.ts deleted file mode 100644 index a2e4df820..000000000 --- a/packages/next-extraction-plugin/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { withGriffelCSSExtraction } from './lib/next-extraction-plugin'; diff --git a/packages/next-extraction-plugin/src/lib/next-extraction-plugin.spec.ts b/packages/next-extraction-plugin/src/lib/next-extraction-plugin.spec.ts deleted file mode 100644 index bef34b4ab..000000000 --- a/packages/next-extraction-plugin/src/lib/next-extraction-plugin.spec.ts +++ /dev/null @@ -1,126 +0,0 @@ -import { withGriffelCSSExtraction } from './next-extraction-plugin'; - -import type { NextConfig } from 'next'; -import type { WebpackConfigContext } from 'next/dist/server/config-shared'; -import type { Configuration, RuleSetRule } from 'webpack'; - -const getNextConfig: () => NextConfig = () => ({ - webpack: config => { - return config; - }, -}); - -const getWebpackConfig: () => Configuration = () => ({ - module: { - rules: [ - { - oneOf: [ - { - test: /.css/, - }, - ], - }, - ], - }, - plugins: [], -}); - -const options = { - defaultLoaders: {}, - dev: false, - dir: '/', - isServer: true, - buildId: 'griffel', -} as WebpackConfigContext; - -describe('nextExtractionPlugin', () => { - it('should work', () => { - const config = withGriffelCSSExtraction({})({}); - - expect(config).toBeInstanceOf(Object); - expect(config.webpack).toBeInstanceOf(Function); - }); - - it('should failed with next@5 and lower', () => { - const config = withGriffelCSSExtraction({})({}); - - if (config?.webpack) { - const result = () => config.webpack?.({}, {} as WebpackConfigContext); - expect(result).toThrow(Error); - } - }); - - it('should call custom webpack config', () => { - // eslint-disable-next-line @typescript-eslint/no-empty-function - const nextConfig = getNextConfig(); - const consoleSpy = jest.spyOn(nextConfig, 'webpack'); - - const config = withGriffelCSSExtraction({})(nextConfig); - - if (config?.webpack) config?.webpack({}, options); - - expect(consoleSpy).toHaveBeenCalled(); - }); - - it('should extract css when mode is prod', () => { - const nextConfig = getNextConfig(); - const webpackConfig = getWebpackConfig(); - - const config = withGriffelCSSExtraction({})(nextConfig); - - expect(webpackConfig.plugins?.length).toEqual(0); - expect(webpackConfig.module?.rules?.length).toEqual(1); - expect((webpackConfig.module?.rules?.[0] as RuleSetRule)?.oneOf?.length).toEqual(1); - - config.webpack?.(webpackConfig, { ...options }); - - expect(webpackConfig.plugins?.length).toEqual(1); - expect(webpackConfig.module?.rules?.length).toEqual(2); - expect((webpackConfig.module?.rules?.[1] as RuleSetRule)?.oneOf?.length).toEqual(2); - }); - - it('should extend webpack loader rule', () => { - const nextConfig = getNextConfig(); - const webpackConfig = getWebpackConfig(); - - // @ts-expect-error - pass 'test' param isn't legal - const config = withGriffelCSSExtraction({ extractLoaderRuleAttrs: { test: /\.(jsx)$/, exclude: /node_modules/ } })( - nextConfig, - ); - - config.webpack?.(webpackConfig, { ...options }); - - const rule = webpackConfig.module?.rules?.[0] as RuleSetRule; - - expect(rule?.exclude).toEqual(/node_modules/); - expect(rule?.test).toEqual(/\.(tsx|ts|js|jsx)$/); - expect(rule?.use).toHaveLength(1); - }); - - it("should't extract css when mode is dev", () => { - const nextConfig = getNextConfig(); - const webpackConfig = getWebpackConfig(); - - const config = withGriffelCSSExtraction({})(nextConfig); - - config.webpack?.(webpackConfig, { ...options, dev: true }); - - expect(webpackConfig.plugins?.length).toEqual(0); - expect(webpackConfig.module?.rules?.length).toEqual(1); - expect((webpackConfig.module?.rules?.[0] as RuleSetRule)?.oneOf?.length).toEqual(1); - }); - - it("should't extract css if native css loader isn't exist", () => { - const nextConfig = getNextConfig(); - const webpackConfig = getWebpackConfig(); - - webpackConfig.module!.rules!.length = 0; - - const config = withGriffelCSSExtraction({})(nextConfig); - - config.webpack?.(webpackConfig, { ...options, dev: true }); - - expect(webpackConfig.plugins?.length).toEqual(0); - expect(webpackConfig.module?.rules?.length).toEqual(0); - }); -}); diff --git a/packages/next-extraction-plugin/src/lib/next-extraction-plugin.ts b/packages/next-extraction-plugin/src/lib/next-extraction-plugin.ts deleted file mode 100644 index 40116c406..000000000 --- a/packages/next-extraction-plugin/src/lib/next-extraction-plugin.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { GriffelCSSExtractionPlugin } from '@griffel/webpack-extraction-plugin'; -import * as browserslist from 'browserslist'; -import { lazyPostCSS } from 'next/dist/build/webpack/config/blocks/css'; -import { getGlobalCssLoader } from 'next/dist/build/webpack/config/blocks/css/loaders'; - -import type { GriffelCSSExtractionPluginOptions } from '@griffel/webpack-extraction-plugin'; -import type { NextConfig } from 'next'; -import type { ConfigurationContext } from 'next/dist/build/webpack/config/utils'; -import type { Configuration, RuleSetRule } from 'webpack'; - -type GriffelNextExtractionPluginOptions = GriffelCSSExtractionPluginOptions & { - extractLoaderRuleAttrs?: Omit; -}; - -function getSupportedBrowsers(dir: string, isDevelopment: boolean) { - let browsers: string[] | undefined; - try { - browsers = browserslist.loadConfig({ - path: dir, - env: isDevelopment ? 'development' : 'production', - }); - } catch { - // Prevent error on build time - } - - return browsers; -} - -export const withGriffelCSSExtraction = - ({ - extractLoaderRuleAttrs: webpackLoaderRules = {}, - ...webpackPluginOptions - }: GriffelNextExtractionPluginOptions = {}) => - (nextConfig: NextConfig = {}) => - Object.assign({}, nextConfig, { - webpack(config: Configuration & ConfigurationContext, options) { - const { dir, dev, isServer } = options; - - if (!options.defaultLoaders) { - throw new Error( - 'This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade', - ); - } - - // The @Griffel compiler must run on source code, which means it must be - // configured as the last loader in webpack so that it runs before any - // other transformation. - - if (typeof nextConfig.webpack === 'function') { - // eslint-disable-next-line no-param-reassign - config = nextConfig.webpack(config, options); - } - - if (dev) { - // not push @griffel/webpack-extraction-plugin if dev build - return config; - } - - const cssRules = ( - config.module?.rules?.find( - rule => - typeof rule === 'object' && - rule !== null && - Array.isArray(rule.oneOf) && - rule.oneOf.some( - setRule => - setRule && - setRule.test instanceof RegExp && - typeof setRule.test.test === 'function' && - setRule.test.test('filename.css'), - ), - ) as RuleSetRule - )?.oneOf; - - if (cssRules) { - config?.module?.rules?.unshift({ - ...webpackLoaderRules, - test: /\.(tsx|ts|js|jsx)$/, - use: [ - { - loader: GriffelCSSExtractionPlugin.loader, - }, - ], - }); - - cssRules.unshift({ - test: /griffel\.css$/i, - sideEffects: true, - use: getGlobalCssLoader( - { - assetPrefix: config.assetPrefix, - isClient: !isServer, - isServer, - isDevelopment: dev, - experimental: nextConfig.experimental || {}, - } as ConfigurationContext, - () => lazyPostCSS(dir, getSupportedBrowsers(dir, dev), undefined, undefined), - [], - ), - }); - - if (!Array.isArray(config?.plugins)) { - config.plugins = []; - } - - config.plugins.push(new GriffelCSSExtractionPlugin(webpackPluginOptions)); - } - - return config; - }, - } as NextConfig); diff --git a/packages/next-extraction-plugin/tsconfig.json b/packages/next-extraction-plugin/tsconfig.json deleted file mode 100644 index b5371dfd3..000000000 --- a/packages/next-extraction-plugin/tsconfig.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "allowJs": true, - "checkJs": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/packages/next-extraction-plugin/tsconfig.lib.json b/packages/next-extraction-plugin/tsconfig.lib.json deleted file mode 100644 index 0a5aff6ef..000000000 --- a/packages/next-extraction-plugin/tsconfig.lib.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "module": "commonjs", - "outDir": "../../dist/out-tsc", - "declaration": true, - "types": ["node", "environment"] - }, - "exclude": ["**/*.spec.ts", "**/*.test.ts", "jest.config.ts"], - "include": ["**/*.ts"] -} diff --git a/packages/next-extraction-plugin/tsconfig.spec.json b/packages/next-extraction-plugin/tsconfig.spec.json deleted file mode 100644 index 1470336f4..000000000 --- a/packages/next-extraction-plugin/tsconfig.spec.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "jsx": "react", - "outDir": "../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node", "environment", "static-assets"] - }, - "include": [ - "__fixtures__/**/*/code.ts", - "**/*.test.ts", - "**/*.spec.ts", - "**/*.test.tsx", - "**/*.spec.tsx", - "**/*.test.js", - "**/*.spec.js", - "**/*.test.jsx", - "**/*.spec.jsx", - "**/*.d.ts", - "jest.config.ts" - ] -} diff --git a/packages/postcss-syntax/.babelrc b/packages/postcss-syntax/.babelrc deleted file mode 100644 index fc2ad0f36..000000000 --- a/packages/postcss-syntax/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": [["@nx/js/babel", { "useBuiltIns": "usage" }]] -} diff --git a/packages/postcss-syntax/jest.config.ts b/packages/postcss-syntax/jest.config.ts deleted file mode 100644 index 750bd9414..000000000 --- a/packages/postcss-syntax/jest.config.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable */ -export default { - displayName: 'eslint-plugin', - preset: '../../jest.preset.js', - globals: {}, - testEnvironment: 'node', - transform: { - '^.+\\.[tj]sx?$': [ - 'ts-jest', - { - tsconfig: '/tsconfig.spec.json', - }, - ], - }, - moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], - coverageDirectory: '../../coverage/packages/eslint-plugin', -}; diff --git a/packages/postcss-syntax/package.json b/packages/postcss-syntax/package.json index 9089a4633..7a1b6648f 100644 --- a/packages/postcss-syntax/package.json +++ b/packages/postcss-syntax/package.json @@ -7,11 +7,18 @@ "type": "git", "url": "https://github.com/microsoft/griffel" }, + "type": "module", + "main": "./src/index.mjs", + "types": "./src/index.d.mts", + "exports": { + ".": { + "types": "./src/index.d.mts", + "default": "./src/index.mjs" + }, + "./package.json": "./package.json" + }, "dependencies": { - "@babel/core": "^7.23.2", - "@babel/helper-plugin-utils": "^7.22.5", - "@griffel/babel-preset": "^1.8.1", + "@griffel/transform": "^2.0.0", "postcss": "^8.4.29" - }, - "main": "./src/index.js" + } } diff --git a/packages/postcss-syntax/project.json b/packages/postcss-syntax/project.json index 5d9e39520..e92bcfea6 100644 --- a/packages/postcss-syntax/project.json +++ b/packages/postcss-syntax/project.json @@ -10,10 +10,10 @@ "outputs": ["{options.outputFile}"] }, "test": { - "executor": "@nx/jest:jest", + "executor": "@nx/vitest:test", "outputs": ["{workspaceRoot}/coverage/packages/postcss-syntax"], "options": { - "jestConfig": "packages/postcss-syntax/jest.config.ts" + "config": "packages/postcss-syntax/vitest.config.mts" } }, "build": { @@ -24,7 +24,7 @@ "tsConfig": "packages/postcss-syntax/tsconfig.lib.json", "skipTypeField": true, "packageJson": "packages/postcss-syntax/package.json", - "main": "packages/postcss-syntax/src/index.ts", + "main": "packages/postcss-syntax/src/index.mts", "assets": [ "packages/postcss-syntax/README.md", { @@ -38,7 +38,7 @@ "type-check": { "executor": "nx:run-commands", "options": { - "cwd": "packages/babel-preset", + "cwd": "packages/postcss-syntax", "commands": [ { "command": "tsc -b --pretty" diff --git a/packages/postcss-syntax/src/constants.ts b/packages/postcss-syntax/src/constants.mts similarity index 100% rename from packages/postcss-syntax/src/constants.ts rename to packages/postcss-syntax/src/constants.mts diff --git a/packages/postcss-syntax/src/createSyntax.mts b/packages/postcss-syntax/src/createSyntax.mts new file mode 100644 index 000000000..e955485cd --- /dev/null +++ b/packages/postcss-syntax/src/createSyntax.mts @@ -0,0 +1,19 @@ +import type { ModuleConfig } from './transform-sync.mjs'; +import type * as postcss from 'postcss'; + +import { parse } from './parse.mjs'; +import { stringify } from './stringify.mjs'; + +/** + * Creates a custom syntax with configured options + * @param options - Options to configure the transform + * @returns a postcss custom syntax + */ +export function createSyntax(options: { modules?: ModuleConfig[] }): postcss.Syntax { + const extendedParse: postcss.Parser = (css, opts) => parse(css, { ...opts, ...options }); + + return { + stringify, + parse: extendedParse, + }; +} diff --git a/packages/postcss-syntax/src/createSyntax.ts b/packages/postcss-syntax/src/createSyntax.ts deleted file mode 100644 index 4ec8ad1c7..000000000 --- a/packages/postcss-syntax/src/createSyntax.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type { BabelPluginOptions } from '@griffel/babel-preset'; -import type * as postcss from 'postcss'; - -import { parse } from './parse'; -import { stringify } from './stringify'; - -/** - * Creates a custom syntax with configured options for @griffel/babel-preset - * @param options - Options to configure @griffel/babel-preset - * @returns a postcss custom syntax - */ -export function createSyntax(options: BabelPluginOptions): postcss.Syntax { - const extendedParse: postcss.Parser = (css, opts) => parse(css, { ...opts, ...options }); - - return { - stringify, - parse: extendedParse, - }; -} diff --git a/packages/postcss-syntax/src/index.mts b/packages/postcss-syntax/src/index.mts new file mode 100644 index 000000000..b326c5991 --- /dev/null +++ b/packages/postcss-syntax/src/index.mts @@ -0,0 +1,12 @@ +import { parse } from './parse.mjs'; +import { stringify } from './stringify.mjs'; + +export { parse, stringify }; +export { createSyntax } from './createSyntax.mjs'; + +export default { + parse, + stringify, +}; + +export { GRIFFEL_DECLARATOR_LOCATION_RAW, GRIFFEL_SLOT_LOCATION_RAW } from './constants.mjs'; diff --git a/packages/postcss-syntax/src/index.ts b/packages/postcss-syntax/src/index.ts deleted file mode 100644 index 822eb4843..000000000 --- a/packages/postcss-syntax/src/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { parse } from './parse'; -import { stringify } from './stringify'; - -export { parse, stringify }; -export { createSyntax } from './createSyntax'; - -export default { - parse, - stringify, -}; - -export { GRIFFEL_DECLARATOR_LOCATION_RAW, GRIFFEL_SLOT_LOCATION_RAW } from './constants'; diff --git a/packages/postcss-syntax/src/location-preset.ts b/packages/postcss-syntax/src/location-preset.ts deleted file mode 100644 index a65eedf99..000000000 --- a/packages/postcss-syntax/src/location-preset.ts +++ /dev/null @@ -1,206 +0,0 @@ -import type { PluginObj, PluginPass, types as t, ConfigAPI } from '@babel/core'; -import { declare } from '@babel/helper-plugin-utils'; -import type { BabelPluginOptions } from '@griffel/babel-preset'; - -export type CommentDirective = [/** directive */ string, /** value */ string]; -export type CommentDirectivesBySlot = Record; -export type CommentDirectivesByHookDeclarator = Record; - -export type LocationsBySlot = Record; -export type LocationsByHookDeclarator = Record; - -export type ResetCommentDirectivesByHookDeclarator = Record; - -export type ResetLocationsByHookDeclarator = Record; - -export interface LocationPluginState extends PluginPass { - callExpressionLocations?: Record; - locations?: LocationsByHookDeclarator; - commentDirectives?: CommentDirectivesByHookDeclarator; - - resetCommentDirectives?: ResetCommentDirectivesByHookDeclarator; - resetLocations?: ResetLocationsByHookDeclarator; -} - -export interface LocationPluginMetadata { - callExpressionLocations: Record; - locations: LocationsByHookDeclarator; - commentDirectives: CommentDirectivesByHookDeclarator; - - resetCommentDirectives: ResetCommentDirectivesByHookDeclarator; - resetLocations: ResetLocationsByHookDeclarator; -} - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface LocationPluginOptions extends Pick {} - -/** - * A plugin that parses Griffel code and returns code locations mapped to respective styles and slots - */ -const plugin = declare>((api, options) => { - api.assertVersion(7); - - const { - modules = [ - { moduleSource: '@griffel/react', importName: 'makeStyles', resetImportName: 'makeResetStyles' }, - { moduleSource: '@fluentui/react-components', importName: 'makeStyles', resetImportName: 'makeResetStyles' }, - ], - } = options; - - const functionKinds = modules.map(moduleEntry => { - return moduleEntry.importName ?? 'makeStyles'; - }); - - const resetFunctionKinds = modules.map(moduleEntry => { - return moduleEntry.resetImportName ?? 'makeResetStyles'; - }); - - return { - name: '@griffel/slot-location-plugin', - - pre() { - this.callExpressionLocations = {}; - this.locations = {}; - this.resetLocations = {}; - this.commentDirectives = {}; - this.resetCommentDirectives = {}; - }, - - visitor: { - Program: { - exit() { - Object.assign(this.file.metadata, { - callExpressionLocations: this.callExpressionLocations, - locations: this.locations, - resetLocations: this.resetLocations, - commentDirectives: this.commentDirectives, - resetCommentDirectives: this.resetCommentDirectives, - } as LocationPluginMetadata); - }, - }, - - CallExpression(path, state) { - const callee = path.get('callee'); - const declarator = path.findParent(p => p.isVariableDeclarator()); - - if (!declarator?.isVariableDeclarator()) { - return; - } - - const id = declarator.get('id'); - const declaratorId = id.isIdentifier() ? id.node.name : 'unknown'; - - if (!callee.isIdentifier()) { - return; - } - - // Technically we should check if these function kinds are from Griffel - // but since we only collect locations, the plugin is idempotent and we - // it's safe enough to avoid doing that check - if (functionKinds.includes(callee.node.name)) { - if (path.node.loc) { - state.callExpressionLocations ??= {}; - state.callExpressionLocations[declaratorId] = { - ...path.node.loc, - }; - } - - const locations = path.get('arguments')[0]; - if (!locations.isObjectExpression()) { - return; - } - - const properties = locations.get('properties'); - properties.forEach(property => { - if (!property.isObjectProperty()) { - return; - } - - const key = property.get('key'); - if (!key.isIdentifier()) { - return; - } - - if (!property.node.loc) { - return; - } - - state.locations ??= {}; - state.locations[declaratorId] ??= {}; - state.locations[declaratorId][key.node.name] = { - ...property.node.loc, - }; - - const commentDirectives = parseCommentDirectives(property.node.leadingComments); - if (commentDirectives) { - state.commentDirectives ??= {}; - state.commentDirectives[declaratorId] ??= {}; - state.commentDirectives[declaratorId][key.node.name] = commentDirectives; - } - }); - } - - if (resetFunctionKinds.includes(callee.node.name)) { - if (path.node.loc) { - state.callExpressionLocations ??= {}; - state.callExpressionLocations[declaratorId] = { - ...path.node.loc, - }; - } - - state.resetLocations ??= {}; - const resetStyles = path.get('arguments')[0]; - if (!resetStyles.isObjectExpression()) { - return; - } - - if (!resetStyles.node.loc) { - return; - } - - state.resetLocations[declaratorId] = resetStyles.node.loc; - - // For reset styles we only care about the comment directives on the variable declaration - // The leading commment can either be attached to a variable declaration of an export declaration (i.e. export const useResetStyles = ...) - const parentDeclaration = - path.findParent(p => p.isExportNamedDeclaration()) ?? path.findParent(p => p.isVariableDeclaration()); - if (parentDeclaration) { - const commentDirectives = parseCommentDirectives(parentDeclaration.node.leadingComments); - if (commentDirectives) { - state.resetCommentDirectives ??= {}; - state.resetCommentDirectives[declaratorId] = commentDirectives; - } - } - } - }, - }, - }; -}); - -function parseCommentDirectives(leadingComments: t.Comment[] | null | undefined): CommentDirective[] | null { - if (!leadingComments) { - return null; - } - - const entries = leadingComments - // We don't support comment blocks - .filter(comment => comment.type === 'CommentLine') - .map(comment => { - const commentValue = comment.value.trim(); - if (!commentValue.startsWith('griffel-')) { - return; - } - - const tokens = commentValue.split(' '); - return [tokens[0], tokens[1]]; - }) - .filter(Boolean) as [string, string][]; - - return entries; -} - -export default (babel: ConfigAPI, options: LocationPluginOptions) => { - return { - plugins: [[plugin, options]], - }; -}; diff --git a/packages/postcss-syntax/src/parse.ts b/packages/postcss-syntax/src/parse.mts similarity index 80% rename from packages/postcss-syntax/src/parse.ts rename to packages/postcss-syntax/src/parse.mts index b7c68babc..2b07da93c 100644 --- a/packages/postcss-syntax/src/parse.ts +++ b/packages/postcss-syntax/src/parse.mts @@ -1,19 +1,21 @@ import * as postcss from 'postcss'; -import transformSync from './transform-sync'; +import transformSync from './transform-sync.mjs'; import { GRIFFEL_DECLARATOR_LOCATION_RAW, GRIFFEL_DECLARATOR_RAW, GRIFFEL_SLOT_LOCATION_RAW, GRIFFEL_SLOT_RAW, GRIFFEL_SRC_RAW, -} from './constants'; -import type { BabelPluginOptions } from '@griffel/babel-preset'; -import type { CommentDirective } from './location-preset'; +} from './constants.mjs'; +import type { TransformMetadata, ModuleConfig } from './transform-sync.mjs'; +import type { CommentDirective } from '@griffel/transform'; import * as os from 'os'; export type PostCSSParserOptions = Pick, 'from' | 'map'>; -export interface ParserOptions extends Pick, BabelPluginOptions { +export interface ParserOptions extends Pick { + modules?: ModuleConfig[]; + /** * Throws error when griffel parsing fails * @default false @@ -27,13 +29,13 @@ export interface ParserOptions extends Pick, Babel */ export const parse = (css: string | { toString(): string }, opts?: ParserOptions) => { const { from: filename = 'postcss-syntax.styles.ts', silenceParseErrors = false } = opts ?? {}; - const griffelPluginOptions = extractGriffelBabelPluginOptions(opts); + const pluginOptions = extractPluginOptions(opts); const code = css.toString(); const cssRuleSlotNames: string[] = []; const cssRules: string[] = []; - const parseResult = parseGriffelStyles(code, filename, griffelPluginOptions, silenceParseErrors); + const parseResult = parseGriffelStyles(code, filename, pluginOptions, silenceParseErrors); if (!parseResult) { const root = postcss.parse(`/* Failed to parse griffel styles: ${filename} */`, { from: filename }); root.raws[GRIFFEL_SRC_RAW] = code; @@ -100,9 +102,9 @@ export const parse = (css: string | { toString(): string }, opts?: ParserOptions function parseGriffelStyles( code: string, filename: string, - pluginOpts: BabelPluginOptions, + pluginOpts: { modules?: ModuleConfig[]; generateMetadata?: boolean }, silenceParseErrors: boolean, -) { +): TransformMetadata | null { try { const { metadata } = transformSync(code, { filename, @@ -112,7 +114,7 @@ function parseGriffelStyles( }, }); - return metadata; + return metadata ?? null; } catch (error) { console.warn('Failed to parse Griffel styles'); console.warn(error); @@ -133,24 +135,13 @@ function getIgnoredRulesFromDirectives(commentDirectives: CommentDirective[]) { ); } -const extractGriffelBabelPluginOptions = (opts: ParserOptions = {}) => { - const { babelOptions, evaluationRules, generateMetadata, modules } = opts; - const babelPluginOptions: BabelPluginOptions = {}; - if (babelOptions) { - babelPluginOptions.babelOptions = babelOptions; - } - - if (evaluationRules) { - babelPluginOptions.evaluationRules = evaluationRules; - } - - if (generateMetadata) { - babelPluginOptions.generateMetadata = generateMetadata; - } +const extractPluginOptions = (opts: ParserOptions = {}) => { + const { modules } = opts; + const pluginOptions: { modules?: ModuleConfig[] } = {}; if (modules) { - babelPluginOptions.modules = modules; + pluginOptions.modules = modules; } - return babelPluginOptions; + return pluginOptions; }; diff --git a/packages/postcss-syntax/src/parse.test.ts b/packages/postcss-syntax/src/parse.test.mts similarity index 95% rename from packages/postcss-syntax/src/parse.test.ts rename to packages/postcss-syntax/src/parse.test.mts index 59c333688..0d9e5c057 100644 --- a/packages/postcss-syntax/src/parse.test.ts +++ b/packages/postcss-syntax/src/parse.test.mts @@ -1,3 +1,4 @@ +import { describe, it, expect } from 'vitest'; import type postcss from 'postcss'; import { GRIFFEL_DECLARATOR_LOCATION_RAW, @@ -5,9 +6,9 @@ import { GRIFFEL_SLOT_LOCATION_RAW, GRIFFEL_SLOT_RAW, GRIFFEL_SRC_RAW, -} from './constants'; -import { parse } from './parse'; -import { stringify } from './stringify'; +} from './constants.mjs'; +import { parse } from './parse.mjs'; +import { stringify } from './stringify.mjs'; describe('parse', () => { describe('makeStyles', () => { @@ -123,7 +124,7 @@ import { makeStyles } from "@griffel/react"; export const useStyles = makeStyles({ slot1: { - background: \`linear-gradient(#e66465, + background: \`linear-gradient(#e66465, #9198e5)\`, }, @@ -135,7 +136,7 @@ export const useStyles = makeStyles({ const root = parse(fixture, { from: 'fixture.styles.ts' }); expect(root.toString()).toMatchInlineSnapshot(` - ".f1qmhkic{background:linear-gradient(#e66465, #9198e5);} + ".f1bph55t{background:linear-gradient(#e66465, #9198e5);} .f163i14w{color:blue;}" `); @@ -146,13 +147,13 @@ export const useStyles = makeStyles({ if (slot === 'slot1') { expect(node.raw(GRIFFEL_SLOT_LOCATION_RAW)).toEqual({ start: { line: 5, column: 2, index: 87 }, - end: { line: 8, column: 3, index: 159 }, + end: { line: 8, column: 3, index: 158 }, }); } if (slot === 'slot2') { expect(node.raw(GRIFFEL_SLOT_LOCATION_RAW)).toEqual({ - start: { line: 10, column: 2, index: 164 }, - end: { line: 12, column: 3, index: 195 }, + start: { line: 10, column: 2, index: 163 }, + end: { line: 12, column: 3, index: 194 }, }); } }); @@ -303,7 +304,7 @@ export const useStyles = makeStyles({ } }) `; - expect(() => parse(fixture, { from: 'fixture.styles.ts' })).toThrow('Unterminated string constant'); + expect(() => parse(fixture, { from: 'fixture.styles.ts' })).toThrow('Unterminated string'); }); }); @@ -373,7 +374,7 @@ import { makeResetStyles } from "@griffel/react"; export const useResetStyles1 = makeResetStyles({ color: "red", - background: \`linear-gradient(#e66465, + background: \`linear-gradient(#e66465, #9198e5)\`, }); export const useResetStyles2 = makeResetStyles({ @@ -387,14 +388,14 @@ export const useResetStyles2 = makeResetStyles({ if (declarator === 'useResetStyles1') { expect(node.raw(GRIFFEL_DECLARATOR_LOCATION_RAW)).toEqual({ start: { line: 4, column: 47, index: 99 }, - end: { line: 8, column: 1, index: 174 }, + end: { line: 8, column: 1, index: 173 }, }); } if (declarator === 'useResetStyles2') { expect(node.raw(GRIFFEL_DECLARATOR_LOCATION_RAW)).toEqual({ - start: { line: 9, column: 47, index: 224 }, - end: { line: 11, column: 1, index: 243 }, + start: { line: 9, column: 47, index: 223 }, + end: { line: 11, column: 1, index: 242 }, }); } }); diff --git a/packages/postcss-syntax/src/stringify.ts b/packages/postcss-syntax/src/stringify.mts similarity index 88% rename from packages/postcss-syntax/src/stringify.ts rename to packages/postcss-syntax/src/stringify.mts index 192d3ab72..d502cb4c6 100644 --- a/packages/postcss-syntax/src/stringify.ts +++ b/packages/postcss-syntax/src/stringify.mts @@ -1,5 +1,5 @@ import type * as postcss from 'postcss'; -import { GRIFFEL_SRC_RAW } from './constants'; +import { GRIFFEL_SRC_RAW } from './constants.mjs'; export const stringify: postcss.Stringifier = root => { const originalSource = root.raw(GRIFFEL_SRC_RAW); diff --git a/packages/postcss-syntax/src/transform-sync.mts b/packages/postcss-syntax/src/transform-sync.mts new file mode 100644 index 000000000..c5e0ecdc2 --- /dev/null +++ b/packages/postcss-syntax/src/transform-sync.mts @@ -0,0 +1,60 @@ +import NativeModule from 'node:module'; +import { transformSync as griffelTransformSync } from '@griffel/transform'; +import type { TransformOptions as GriffelTransformOptions, TransformMetadata, ModuleConfig } from '@griffel/transform'; + +export type { TransformMetadata, ModuleConfig }; + +export type TransformOptions = { + filename: string; + pluginOptions: { + modules?: ModuleConfig[]; + generateMetadata?: boolean; + evaluationRules?: GriffelTransformOptions['evaluationRules']; + }; +}; + +const EXTRA_EXTENSIONS = ['.ts', '.tsx', '.jsx', '.cjs']; + +const nodeResolve: GriffelTransformOptions['resolveModule'] = (id, opts) => { + const extensions = (NativeModule as unknown as { _extensions: Record void> })._extensions; + const added: string[] = []; + + try { + for (const ext of EXTRA_EXTENSIONS) { + if (!(ext in extensions)) { + extensions[ext] = () => {}; + added.push(ext); + } + } + + return { + path: (NativeModule as unknown as { _resolveFilename: (id: string, options: unknown) => string })._resolveFilename( + id, + opts, + ), + builtin: false, + }; + } finally { + for (const ext of added) { + delete extensions[ext]; + } + } +}; + +export default function transformSync(sourceCode: string, options: TransformOptions) { + const { filename, pluginOptions } = options; + const { modules, generateMetadata = false, evaluationRules } = pluginOptions; + + const result = griffelTransformSync(sourceCode, { + filename, + resolveModule: nodeResolve, + generateMetadata, + ...(modules && { modules }), + ...(evaluationRules && { evaluationRules }), + }); + + return { + metadata: result.metadata, + code: result.code, + }; +} diff --git a/packages/postcss-syntax/src/transform-sync.test.ts b/packages/postcss-syntax/src/transform-sync.test.mts similarity index 76% rename from packages/postcss-syntax/src/transform-sync.test.ts rename to packages/postcss-syntax/src/transform-sync.test.mts index 3c80f8d2e..0642b2f36 100644 --- a/packages/postcss-syntax/src/transform-sync.test.ts +++ b/packages/postcss-syntax/src/transform-sync.test.mts @@ -1,4 +1,5 @@ -import transformSync, { type TransformOptions } from './transform-sync'; +import { describe, it, expect } from 'vitest'; +import transformSync, { type TransformOptions } from './transform-sync.mjs'; describe('transformSync', () => { it('should parse TS and return metadata that contains css location', () => { @@ -21,19 +22,16 @@ describe('transformSync', () => { const options: TransformOptions = { filename: 'test.styles.ts', pluginOptions: { - babelOptions: { - presets: ['@babel/preset-typescript'], - }, generateMetadata: true, }, }; const result = transformSync(sourceCode, options); - expect(result.metadata.cssEntries).toMatchInlineSnapshot(` - Object { - "useStyles": Object { - "root": Array [ + expect(result.metadata!.cssEntries).toMatchInlineSnapshot(` + { + "useStyles": { + "root": [ ".fe3e8s9{color:red;}", ".fcnqdeg{background-color:green;}", ".fvjh0tl{margin-top:4px;}", @@ -41,18 +39,16 @@ describe('transformSync', () => { }, } `); - expect(result.metadata.locations).toMatchInlineSnapshot(` - Object { - "useStyles": Object { - "root": Object { - "end": Position { + expect(result.metadata!.locations).toMatchInlineSnapshot(` + { + "useStyles": { + "root": { + "end": { "column": 7, "index": 317, "line": 14, }, - "filename": undefined, - "identifierName": undefined, - "start": Position { + "start": { "column": 6, "index": 227, "line": 10, @@ -99,30 +95,27 @@ describe('transformSync', () => { const options: TransformOptions = { filename: 'test.styles.ts', pluginOptions: { - babelOptions: { - presets: ['@babel/preset-typescript'], - }, generateMetadata: true, }, }; const result = transformSync(sourceCode, options); - expect(result.metadata.commentDirectives).toMatchInlineSnapshot(` - Object { - "useStyles": Object { - "foo": Array [ - Array [ + expect(result.metadata!.commentDirectives).toMatchInlineSnapshot(` + { + "useStyles": { + "foo": [ + [ "griffel-csslint-disable", "foo", ], ], - "root": Array [ - Array [ + "root": [ + [ "griffel-csslint-disable", "foo", ], - Array [ + [ "griffel-csslint-disable", "bar", ], @@ -131,20 +124,20 @@ describe('transformSync', () => { } `); - expect(result.metadata.resetCommentDirectives).toMatchInlineSnapshot(` - Object { - "useResetStyles": Array [ - Array [ + expect(result.metadata!.resetCommentDirectives).toMatchInlineSnapshot(` + { + "useResetStyles": [ + [ "griffel-csslint-disable", "foo", ], ], - "useResetStylesExportedLater": Array [ - Array [ + "useResetStylesExportedLater": [ + [ "griffel-csslint-disable", "foo", ], - Array [ + [ "griffel-csslint-disable", "bar", ], @@ -176,26 +169,23 @@ describe('transformSync', () => { const options: TransformOptions = { filename: 'test.styles.ts', pluginOptions: { - babelOptions: { - presets: ['@babel/preset-typescript'], - }, generateMetadata: true, }, }; const result = transformSync(sourceCode, options); - expect(result.metadata.cssEntries).toMatchInlineSnapshot(` - Object { - "useStyles1": Object { - "root": Array [ + expect(result.metadata!.cssEntries).toMatchInlineSnapshot(` + { + "useStyles1": { + "root": [ ".fe3e8s9{color:red;}", ".fcnqdeg{background-color:green;}", ".fvjh0tl{margin-top:4px;}", ], }, - "useStyles2": Object { - "root": Array [ + "useStyles2": { + "root": [ ".fe3e8s9{color:red;}", ".fcnqdeg{background-color:green;}", ".fvjh0tl{margin-top:4px;}", @@ -203,30 +193,30 @@ describe('transformSync', () => { }, } `); - expect(result.metadata.callExpressionLocations).toEqual({ + expect(result.metadata!.callExpressionLocations).toEqual({ useStyles1: { - end: { - column: 50, - index: 383, - line: 17, - }, start: { column: 32, index: 365, line: 17, }, - }, - useStyles2: { end: { column: 50, - index: 435, - line: 18, + index: 383, + line: 17, }, + }, + useStyles2: { start: { column: 32, index: 417, line: 18, }, + end: { + column: 50, + index: 435, + line: 18, + }, }, }); }); @@ -249,49 +239,46 @@ describe('transformSync', () => { const options: TransformOptions = { filename: 'test.styles.ts', pluginOptions: { - babelOptions: { - presets: ['@babel/preset-typescript'], - }, generateMetadata: true, }, }; const result = transformSync(sourceCode, options); - expect(result.metadata.cssResetEntries).toMatchInlineSnapshot(` - Object { - "useResetStyles1": Array [ + expect(result.metadata!.cssResetEntries).toMatchInlineSnapshot(` + { + "useResetStyles1": [ ".rv6h41g{color:red;background-color:green;margin-top:4px;}", ], - "useResetStyles2": Array [ + "useResetStyles2": [ ".rv6h41g{color:red;background-color:green;margin-top:4px;}", ], } `); - expect(result.metadata.callExpressionLocations).toEqual({ + expect(result.metadata!.callExpressionLocations).toEqual({ useResetStyles1: { - end: { - column: 60, - index: 362, - line: 12, - }, start: { column: 37, index: 339, line: 12, }, - }, - useResetStyles2: { end: { column: 60, - index: 424, - line: 13, + index: 362, + line: 12, }, + }, + useResetStyles2: { start: { column: 37, index: 401, line: 13, }, + end: { + column: 60, + index: 424, + line: 13, + }, }, }); }); diff --git a/packages/postcss-syntax/src/transform-sync.ts b/packages/postcss-syntax/src/transform-sync.ts deleted file mode 100644 index 20e36fc94..000000000 --- a/packages/postcss-syntax/src/transform-sync.ts +++ /dev/null @@ -1,36 +0,0 @@ -import * as Babel from '@babel/core'; -import type { BabelPluginMetadata, BabelPluginOptions } from '@griffel/babel-preset'; -import griffelPreset from '@griffel/babel-preset'; -import type { LocationPluginMetadata } from './location-preset'; -import locationPreset from './location-preset'; - -export type TransformOptions = { - filename: string; - pluginOptions: BabelPluginOptions; -}; - -/** - * Transforms passed source code with Babel, uses user's config for parsing, but ignores it for transforms. - */ -export default function transformSync(sourceCode: string, options: TransformOptions) { - const { plugins, presets } = options.pluginOptions.babelOptions ?? { plugins: [], presets: [] }; - const babelFileResult = Babel.transformSync(sourceCode, { - // Ignore all user's configs and apply only our plugin - babelrc: false, - configFile: false, - plugins, - presets: [...(presets ?? []), [griffelPreset, options.pluginOptions], [locationPreset, options.pluginOptions]], - - filename: options.filename, - sourceFileName: options.filename, - }); - - if (babelFileResult === null) { - throw new Error(`Failed to transform "${options.filename}" due unknown Babel error...`); - } - - return { - metadata: babelFileResult.metadata as unknown as BabelPluginMetadata & LocationPluginMetadata, - code: babelFileResult.code, - }; -} diff --git a/packages/postcss-syntax/tsconfig.lib.json b/packages/postcss-syntax/tsconfig.lib.json index 0a5aff6ef..3babdab47 100644 --- a/packages/postcss-syntax/tsconfig.lib.json +++ b/packages/postcss-syntax/tsconfig.lib.json @@ -1,11 +1,12 @@ { "extends": "./tsconfig.json", "compilerOptions": { - "module": "commonjs", + "module": "ESNext", + "moduleResolution": "bundler", "outDir": "../../dist/out-tsc", "declaration": true, "types": ["node", "environment"] }, - "exclude": ["**/*.spec.ts", "**/*.test.ts", "jest.config.ts"], - "include": ["**/*.ts"] + "exclude": ["**/*.spec.mts", "**/*.test.mts", "vitest.config.mts"], + "include": ["**/*.mts"] } diff --git a/packages/postcss-syntax/tsconfig.spec.json b/packages/postcss-syntax/tsconfig.spec.json index bc9c667a0..bfd24e857 100644 --- a/packages/postcss-syntax/tsconfig.spec.json +++ b/packages/postcss-syntax/tsconfig.spec.json @@ -2,19 +2,9 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node", "environment"] + "module": "ESNext", + "moduleResolution": "bundler", + "types": ["node", "environment"] }, - "include": [ - "**/*.test.ts", - "**/*.spec.ts", - "**/*.test.tsx", - "**/*.spec.tsx", - "**/*.test.js", - "**/*.spec.js", - "**/*.test.jsx", - "**/*.spec.jsx", - "**/*.d.ts", - "jest.config.ts" - ] + "include": ["**/*.test.mts", "**/*.spec.mts", "**/*.d.mts", "vitest.config.mts"] } diff --git a/packages/postcss-syntax/vitest.config.mts b/packages/postcss-syntax/vitest.config.mts new file mode 100644 index 000000000..b4678b29d --- /dev/null +++ b/packages/postcss-syntax/vitest.config.mts @@ -0,0 +1,19 @@ +import { defineConfig } from 'vitest/config'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; + +export default defineConfig({ + root: __dirname, + cacheDir: '../../node_modules/.vite/packages/postcss-syntax', + plugins: [nxViteTsPaths()], + test: { + watch: false, + globals: true, + environment: 'node', + include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + reporters: ['default'], + coverage: { + reportsDirectory: '../../coverage/packages/postcss-syntax', + provider: 'v8', + }, + }, +}); diff --git a/packages/transform-shaker/package.json b/packages/transform-shaker/package.json index 3431d5fdd..0eb52168d 100644 --- a/packages/transform-shaker/package.json +++ b/packages/transform-shaker/package.json @@ -8,10 +8,12 @@ "url": "https://github.com/microsoft/griffel" }, "type": "module", + "main": "./src/index.js", + "types": "./src/index.d.ts", "exports": { ".": { - "node": "./transform-shaker.js", - "types": "./index.d.mts" + "types": "./src/index.d.ts", + "default": "./src/index.js" }, "./package.json": "./package.json" }, diff --git a/packages/transform-shaker/project.json b/packages/transform-shaker/project.json index 7e017c20f..9c49f36e3 100644 --- a/packages/transform-shaker/project.json +++ b/packages/transform-shaker/project.json @@ -17,12 +17,22 @@ } }, "build": { - "executor": "@nx/vite:build", + "executor": "@nx/js:tsc", "outputs": ["{options.outputPath}"], "options": { "outputPath": "dist/packages/transform-shaker", - "compiler": "swc", - "format": ["esm"] + "tsConfig": "packages/transform-shaker/tsconfig.lib.json", + "skipTypeField": true, + "packageJson": "packages/transform-shaker/package.json", + "main": "packages/transform-shaker/src/index.ts", + "assets": [ + "packages/transform-shaker/README.md", + { + "glob": "LICENSE.md", + "input": ".", + "output": "." + } + ] } }, "type-check": { diff --git a/packages/transform-shaker/tsconfig.lib.json b/packages/transform-shaker/tsconfig.lib.json index 4ed42b2e1..e52065737 100644 --- a/packages/transform-shaker/tsconfig.lib.json +++ b/packages/transform-shaker/tsconfig.lib.json @@ -1,6 +1,8 @@ { "extends": "./tsconfig.json", "compilerOptions": { + "module": "ESNext", + "moduleResolution": "bundler", "outDir": "../../dist/out-tsc", "declaration": true, "types": ["node"] diff --git a/packages/transform-shaker/vite.config.ts b/packages/transform-shaker/vite.config.ts deleted file mode 100644 index 7f0cdef7b..000000000 --- a/packages/transform-shaker/vite.config.ts +++ /dev/null @@ -1,46 +0,0 @@ -/// -import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; -import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin'; -import { defineConfig } from 'vite'; -import dts from 'vite-plugin-dts'; -import { readFileSync } from 'node:fs'; -import { join, resolve } from 'node:path'; - -const packageJson = JSON.parse(readFileSync(join(__dirname, 'package.json'), 'utf-8')); - -const dependencies: string[] = Object.keys(packageJson.dependencies || {}); -const external = ([/node:/] as (string | RegExp)[]).concat(dependencies); - -export default defineConfig(() => ({ - root: __dirname, - cacheDir: '../../node_modules/.vite/packages/transform-shaker', - plugins: [ - nxViteTsPaths(), - nxCopyAssetsPlugin(['*.md']), - dts({ entryRoot: 'src', tsconfigPath: join(__dirname, 'tsconfig.lib.json'), pathsToAliases: false }), - ], - build: { - emptyOutDir: true, - lib: { - entry: resolve(__dirname, 'src/index.ts'), - formats: ['es' as const], - target: 'node20' as const, - }, - rollupOptions: { - external, - }, - minify: false, - }, - test: { - watch: false, - globals: true, - passWithNoTests: true, - environment: 'node', - include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], - reporters: ['default'], - coverage: { - reportsDirectory: '../../coverage/packages/transform-shaker', - provider: 'v8' as const, - }, - }, -})); diff --git a/packages/transform-shaker/vitest.config.mts b/packages/transform-shaker/vitest.config.mts new file mode 100644 index 000000000..05078158b --- /dev/null +++ b/packages/transform-shaker/vitest.config.mts @@ -0,0 +1,20 @@ +import { defineConfig } from 'vitest/config'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; + +export default defineConfig({ + root: __dirname, + cacheDir: '../../node_modules/.vite/packages/transform-shaker', + plugins: [nxViteTsPaths()], + test: { + watch: false, + globals: true, + passWithNoTests: true, + environment: 'node', + include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + reporters: ['default'], + coverage: { + reportsDirectory: '../../coverage/packages/transform-shaker', + provider: 'v8', + }, + }, +}); diff --git a/packages/transform/package.json b/packages/transform/package.json index a5bfba035..7825c5c7a 100644 --- a/packages/transform/package.json +++ b/packages/transform/package.json @@ -8,10 +8,12 @@ "url": "https://github.com/microsoft/griffel" }, "type": "module", + "main": "./src/index.mjs", + "types": "./src/index.d.mts", "exports": { ".": { - "node": "./transform.js", - "types": "./index.d.mts" + "types": "./src/index.d.mts", + "default": "./src/index.mjs" }, "./package.json": "./package.json" }, diff --git a/packages/transform/project.json b/packages/transform/project.json index b945f9777..8ed24e6f5 100644 --- a/packages/transform/project.json +++ b/packages/transform/project.json @@ -17,12 +17,22 @@ } }, "build": { - "executor": "@nx/vite:build", + "executor": "@nx/js:tsc", "outputs": ["{options.outputPath}"], "options": { "outputPath": "dist/packages/transform", - "compiler": "swc", - "format": ["esm"] + "tsConfig": "packages/transform/tsconfig.lib.json", + "skipTypeField": true, + "packageJson": "packages/transform/package.json", + "main": "packages/transform/src/index.mts", + "assets": [ + "packages/transform/README.md", + { + "glob": "LICENSE.md", + "input": ".", + "output": "." + } + ] } }, "type-check": { diff --git a/packages/transform/src/index.mts b/packages/transform/src/index.mts index bc23d6079..2ff1a058f 100644 --- a/packages/transform/src/index.mts +++ b/packages/transform/src/index.mts @@ -11,3 +11,4 @@ export { transformSync, type TransformOptions, type TransformResult } from './tr export { DEOPT, type Deopt } from './evaluation/astEvaluator.mjs'; export type { AstEvaluatorPlugin, AstEvaluatorContext, TransformPerfIssue } from './evaluation/types.mjs'; export { fluentTokensPlugin } from './evaluation/fluentTokensPlugin.mjs'; +export type { TransformMetadata, SourceLocation, CommentDirective, ModuleConfig } from './types.mjs'; diff --git a/packages/transform/src/transformSync.mts b/packages/transform/src/transformSync.mts index 5675edf3e..ecdb7cecd 100644 --- a/packages/transform/src/transformSync.mts +++ b/packages/transform/src/transformSync.mts @@ -21,7 +21,7 @@ import { batchEvaluator } from './evaluation/batchEvaluator.mjs'; import { fluentTokensPlugin } from './evaluation/fluentTokensPlugin.mjs'; import type { AstEvaluatorPlugin } from './evaluation/types.mjs'; import { dedupeCSSRules } from './utils/dedupeCSSRules.mjs'; -import type { StyleCall } from './types.mjs'; +import type { StyleCall, ModuleConfig, SourceLocation, CommentDirective, TransformMetadata } from './types.mjs'; export type TransformOptions = { filename: string; @@ -38,7 +38,7 @@ export type TransformOptions = { generateMetadata?: boolean; /** Defines set of modules and imports handled by a transformPlugin. */ - modules?: string[]; + modules?: (string | ModuleConfig)[]; /** The set of rules that defines how the matched files will be transformed during the evaluation. */ evaluationRules?: EvalRule[]; @@ -59,6 +59,7 @@ export type TransformResult = { usedProcessing: boolean; usedVMForEvaluation: boolean; perfIssues?: TransformPerfIssue[]; + metadata?: TransformMetadata; }; type FunctionKinds = 'makeStyles' | 'makeResetStyles' | 'makeStaticStyles'; @@ -167,6 +168,79 @@ function concatCSSRulesByBucket(bucketA: CSSRulesByBucket = {}, bucketB: CSSRule return bucketA; } +function normalizeModules(modules: (string | ModuleConfig)[]): ModuleConfig[] { + return modules.map(m => { + if (typeof m === 'string') { + return { moduleSource: m, importName: 'makeStyles', resetImportName: 'makeResetStyles', staticImportName: 'makeStaticStyles' }; + } + return { + moduleSource: m.moduleSource, + importName: m.importName ?? 'makeStyles', + resetImportName: m.resetImportName ?? 'makeResetStyles', + staticImportName: m.staticImportName ?? 'makeStaticStyles', + }; + }); +} + +/** + * Builds a lookup map: (moduleSource, importedName) → FunctionKinds + */ +function buildImportLookup(configs: ModuleConfig[]): Map { + const lookup = new Map(); + for (const cfg of configs) { + lookup.set(`${cfg.moduleSource}\0${cfg.importName}`, 'makeStyles'); + lookup.set(`${cfg.moduleSource}\0${cfg.resetImportName}`, 'makeResetStyles'); + lookup.set(`${cfg.moduleSource}\0${cfg.staticImportName}`, 'makeStaticStyles'); + } + return lookup; +} + +function buildLineStarts(source: string): number[] { + const starts = [0]; + for (let i = 0; i < source.length; i++) { + if (source[i] === '\n') { + starts.push(i + 1); + } + } + return starts; +} + +function offsetToLocation(lineStarts: number[], offset: number): { line: number; column: number; index: number } { + // Binary search for the line + let lo = 0; + let hi = lineStarts.length - 1; + while (lo < hi) { + const mid = (lo + hi + 1) >> 1; + if (lineStarts[mid] <= offset) { + lo = mid; + } else { + hi = mid - 1; + } + } + return { line: lo + 1, column: offset - lineStarts[lo], index: offset }; +} + +function makeSourceLocation(lineStarts: number[], start: number, end: number): SourceLocation { + return { start: offsetToLocation(lineStarts, start), end: offsetToLocation(lineStarts, end) }; +} + +function parseCommentDirectives( + comments: { type: string; value: string; start: number; end: number }[], + rangeStart: number, + rangeEnd: number, +): CommentDirective[] | null { + const entries: CommentDirective[] = []; + for (const comment of comments) { + if (comment.type !== 'Line') continue; + if (comment.start < rangeStart || comment.start >= rangeEnd) continue; + const value = comment.value.trim(); + if (!value.startsWith('griffel-')) continue; + const tokens = value.split(' '); + entries.push([tokens[0], tokens[1]]); + } + return entries.length > 0 ? entries : null; +} + /** * Transforms passed source code with oxc-parser and oxc-walker instead of Babel. */ @@ -178,7 +252,7 @@ export function transformSync(sourceCode: string, options: TransformOptions): Tr resolveModule, classNameHashSalt = '', generateMetadata = false, - modules = ['@griffel/core', '@griffel/react', '@fluentui/react-components'], + modules: rawModules = ['@griffel/core', '@griffel/react', '@fluentui/react-components'], evaluationRules = [{ action: perfIssues ? wrapWithPerfIssues(shakerEvaluator, perfIssues) : shakerEvaluator }], astEvaluationPlugins = [fluentTokensPlugin], } = options; @@ -187,6 +261,10 @@ export function transformSync(sourceCode: string, options: TransformOptions): Tr throw new Error('Transform error: "filename" option is required'); } + const normalizedModules = normalizeModules(rawModules); + const importLookup = buildImportLookup(normalizedModules); + const moduleSources = new Set(normalizedModules.map(m => m.moduleSource)); + const parseResult = parseSync(filename, sourceCode); if (parseResult.errors.length > 0) { @@ -206,8 +284,8 @@ export function transformSync(sourceCode: string, options: TransformOptions): Tr // Quick bail-out: if no Griffel imports exist, skip the AST walk entirely const hasGriffelImports = parseResult.module.staticImports.some( si => - modules.includes(si.moduleRequest.value) && - si.entries.some(e => e.importName.kind === 'Name' && RUNTIME_IDENTIFIERS.has(e.importName.name as FunctionKinds)), + moduleSources.has(si.moduleRequest.value) && + si.entries.some(e => e.importName.kind === 'Name' && importLookup.has(`${si.moduleRequest.value}\0${e.importName.name}`)), ); if (!hasGriffelImports) { @@ -218,6 +296,14 @@ export function transformSync(sourceCode: string, options: TransformOptions): Tr const cssEntries: Record> = {}; const cssResetEntries: Record = {}; + const callExpressionLocations: Record = {}; + const locations: Record> = {}; + const resetLocations: Record = {}; + const commentDirectives: Record> = {}; + const resetCommentDirectives: Record = {}; + + const lineStarts = generateMetadata ? buildLineStarts(sourceCode) : []; + let cssRulesByBucket: CSSRulesByBucket = {}; // ----- @@ -238,7 +324,7 @@ export function transformSync(sourceCode: string, options: TransformOptions): Tr const importSource = declaration.importNode.source.value; - if (!modules.includes(importSource)) { + if (!moduleSources.has(importSource)) { return; } @@ -248,14 +334,13 @@ export function transformSync(sourceCode: string, options: TransformOptions): Tr return; } - const importedName = imported.name; + const lookupKey = `${importSource}\0${imported.name}`; + const functionKind = importLookup.get(lookupKey); - if (!RUNTIME_IDENTIFIERS.has(importedName as FunctionKinds)) { + if (!functionKind) { return; } - const functionKind = importedName as FunctionKinds; - if (node.arguments.length !== 1) { throw new Error(`${functionKind}() function accepts only a single param`); } @@ -270,6 +355,7 @@ export function transformSync(sourceCode: string, options: TransformOptions): Tr // Find the variable declarator to get the hook name let declaratorId = 'unknownHook'; let current: Node | null = parent; + let variableDeclaratorNode: Node | null = null; while (current) { if (!current) { @@ -278,6 +364,7 @@ export function transformSync(sourceCode: string, options: TransformOptions): Tr if (current.type === 'VariableDeclarator' && current.id.type === 'Identifier') { declaratorId = current.id.name; + variableDeclaratorNode = current; break; } @@ -305,6 +392,57 @@ export function transformSync(sourceCode: string, options: TransformOptions): Tr importId: node.callee.name, }); + + // --- Metadata collection --- + if (generateMetadata) { + callExpressionLocations[declaratorId] = makeSourceLocation(lineStarts, node.start, node.end); + + if (functionKind === 'makeStyles' && argument.type === 'ObjectExpression') { + locations[declaratorId] ??= {}; + commentDirectives[declaratorId] ??= {}; + + const properties = argument.properties; + for (let pi = 0; pi < properties.length; pi++) { + const prop = properties[pi]; + if (prop.type !== 'Property') continue; + const key = prop.key; + if (key.type !== 'Identifier') continue; + + locations[declaratorId][key.name] = makeSourceLocation(lineStarts, prop.start, prop.end); + + // Collect comment directives between previous property end and this property start + const rangeStart = pi === 0 ? argument.start : properties[pi - 1].end; + const directives = parseCommentDirectives(parseResult.comments, rangeStart, prop.start); + if (directives) { + commentDirectives[declaratorId][key.name] = directives; + } + } + } + + if (functionKind === 'makeResetStyles') { + if (argument.type === 'ObjectExpression') { + resetLocations[declaratorId] = makeSourceLocation(lineStarts, argument.start, argument.end); + } + + // Collect comment directives from before the VariableDeclaration or ExportNamedDeclaration parent + // Find the top-level statement that contains this call expression + const containingStatement = programAst.body.find( + stmt => stmt.start <= node.start && stmt.end >= node.end, + ); + + if (containingStatement) { + let rangeStart = 0; + for (const bodyNode of programAst.body) { + if (bodyNode.start >= containingStatement.start) break; + rangeStart = bodyNode.end; + } + const directives = parseCommentDirectives(parseResult.comments, rangeStart, containingStatement.start); + if (directives) { + resetCommentDirectives[declaratorId] = directives; + } + } + } + } } }, }); @@ -338,10 +476,9 @@ export function transformSync(sourceCode: string, options: TransformOptions): Tr { const stylesBySlots = evaluationResult as Record; const [classnamesMapping, resolvedCSSRules] = resolveStyleRulesForSlots(stylesBySlots, classNameHashSalt); - const uniqueCSSRules = dedupeCSSRules(cssRulesByBucket); if (generateMetadata) { - buildCSSEntriesMetadata(cssEntries, classnamesMapping, uniqueCSSRules, styleCall.declaratorId); + buildCSSEntriesMetadata(cssEntries, classnamesMapping, resolvedCSSRules, styleCall.declaratorId); } // Replace the function call arguments @@ -411,5 +548,16 @@ export function transformSync(sourceCode: string, options: TransformOptions): Tr usedProcessing: true, usedVMForEvaluation, perfIssues, + ...(generateMetadata && { + metadata: { + cssEntries, + cssResetEntries, + callExpressionLocations, + locations, + resetLocations, + commentDirectives, + resetCommentDirectives, + }, + }), }; } diff --git a/packages/transform/src/types.mts b/packages/transform/src/types.mts index 892ebbedb..2d81d8ab7 100644 --- a/packages/transform/src/types.mts +++ b/packages/transform/src/types.mts @@ -11,3 +11,27 @@ export interface StyleCall { callEnd: number; importId: string; } + +export interface SourceLocation { + start: { line: number; column: number; index: number }; + end: { line: number; column: number; index: number }; +} + +export type CommentDirective = [string, string]; + +export interface TransformMetadata { + cssEntries: Record>; + cssResetEntries: Record; + callExpressionLocations: Record; + locations: Record>; + resetLocations: Record; + commentDirectives: Record>; + resetCommentDirectives: Record; +} + +export interface ModuleConfig { + moduleSource: string; + importName?: string; + resetImportName?: string; + staticImportName?: string; +} diff --git a/packages/transform/tsconfig.lib.json b/packages/transform/tsconfig.lib.json index a99a4ea5c..6d2b82de4 100644 --- a/packages/transform/tsconfig.lib.json +++ b/packages/transform/tsconfig.lib.json @@ -1,6 +1,8 @@ { "extends": "./tsconfig.json", "compilerOptions": { + "module": "ESNext", + "moduleResolution": "bundler", "outDir": "../../dist/out-tsc", "declaration": true, "types": ["node", "environment"] diff --git a/packages/transform/vite.config.ts b/packages/transform/vite.config.ts deleted file mode 100644 index b965b0f6c..000000000 --- a/packages/transform/vite.config.ts +++ /dev/null @@ -1,49 +0,0 @@ -/// -import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; -import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin'; -import { defineConfig } from 'vite'; -import dts from 'vite-plugin-dts'; -import { readFileSync } from 'node:fs'; -import { join, resolve } from 'node:path'; - -const packageJson = JSON.parse(readFileSync(join(__dirname, 'package.json'), 'utf-8')); - -const dependencies: string[] = Object.keys(packageJson.dependencies || {}); -const external = ([/node:/] as (string | RegExp)[]).concat(dependencies); - -export default defineConfig(() => ({ - root: __dirname, - cacheDir: '../../node_modules/.vite/packages/transform', - plugins: [ - nxViteTsPaths(), - nxCopyAssetsPlugin(['*.md']), - dts({ entryRoot: 'src', tsconfigPath: join(__dirname, 'tsconfig.lib.json'), pathsToAliases: false }), - ], - // Uncomment this if you are using workers. - // worker: { - // plugins: [ nxViteTsPaths() ], - // }, - build: { - emptyOutDir: true, - lib: { - entry: resolve(__dirname, 'src/index.mts'), - formats: ['es' as const], - target: 'node20' as const, - }, - rollupOptions: { - external, - }, - minify: false, - }, - test: { - watch: false, - globals: true, - environment: 'node', - include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], - reporters: ['default'], - coverage: { - reportsDirectory: '../../coverage/packages/transform', - provider: 'v8' as const, - }, - }, -})); diff --git a/packages/transform/vitest.config.mts b/packages/transform/vitest.config.mts new file mode 100644 index 000000000..b0432da6c --- /dev/null +++ b/packages/transform/vitest.config.mts @@ -0,0 +1,19 @@ +import { defineConfig } from 'vitest/config'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; + +export default defineConfig({ + root: __dirname, + cacheDir: '../../node_modules/.vite/packages/transform', + plugins: [nxViteTsPaths()], + test: { + watch: false, + globals: true, + environment: 'node', + include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + reporters: ['default'], + coverage: { + reportsDirectory: '../../coverage/packages/transform', + provider: 'v8', + }, + }, +}); diff --git a/packages/webpack-extraction-plugin/.eslintrc.json b/packages/webpack-extraction-plugin/.eslintrc.json deleted file mode 100644 index 712601a2b..000000000 --- a/packages/webpack-extraction-plugin/.eslintrc.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": ["../../.eslintrc.json"], - "ignorePatterns": ["!**/*", "__fixtures__/**/*/output.ts"], - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": {} - }, - { - "files": ["*.ts", "*.tsx"], - "rules": {} - }, - { - "files": ["*.js", "*.jsx"], - "rules": {} - } - ] -} diff --git a/packages/webpack-extraction-plugin/CHANGELOG.json b/packages/webpack-extraction-plugin/CHANGELOG.json deleted file mode 100644 index a2668972b..000000000 --- a/packages/webpack-extraction-plugin/CHANGELOG.json +++ /dev/null @@ -1,1113 +0,0 @@ -{ - "name": "@griffel/webpack-extraction-plugin", - "entries": [ - { - "date": "Fri, 06 Mar 2026 15:56:28 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.5.14", - "version": "0.5.14", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "f422dee59ffc7ad2f4e5396def5dae5c9785cf24", - "comment": "chore: hoist common tsconfig strict options to base config" - } - ], - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.20.1", - "commit": "75914de37870943b9f2d483be421efe9cad8872f" - } - ] - } - }, - { - "date": "Fri, 06 Mar 2026 08:17:05 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.5.13", - "version": "0.5.13", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "8899f13b7545a0a64c7ee0f48bdd84d962095e0b", - "comment": "fix: use Symbol.for() instead of Symbol() for GriffelCssLoaderContextKey" - }, - { - "author": "hochelmartin@gmail.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "7df55abb5486fe5d5cd0a0c4731d4aaee9bbe7c8", - "comment": "feat: add makeStaticStyles AOT/CSS extraction support" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.20.0", - "commit": "832ca3b88650bb8fa8b20499ade2e679518bc934" - } - ] - } - }, - { - "date": "Tue, 05 Aug 2025 16:25:42 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.5.12", - "version": "0.5.12", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "04c09e10c83c712def41323320eb798c78638487", - "comment": "fix: improve classNameHashSalt validation logic" - } - ] - } - }, - { - "date": "Mon, 28 Jul 2025 09:12:30 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.5.11", - "version": "0.5.11", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "a588a6c1f301e598557a8a1255f6069ccbbb2534", - "comment": "chore: apply release" - } - ], - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "230887b0ab80fb2db29ed04687f15d14d0200396", - "comment": "feat: add \"classNameHashSalt\" validation" - } - ] - } - }, - { - "date": "Tue, 22 Apr 2025 10:05:48 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.5.10", - "version": "0.5.10", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.19.2", - "commit": "d25d0967a81daac6fd8640961836b806ecfc7fe8" - } - ] - } - }, - { - "date": "Thu, 23 Jan 2025 12:09:03 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.5.9", - "version": "0.5.9", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.19.1", - "commit": "78b2b5f231e3032de8aa1b5c5794a2a4317df42e" - } - ] - } - }, - { - "date": "Wed, 22 Jan 2025 13:44:43 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.5.8", - "version": "0.5.8", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.19.0", - "commit": "fa0a08b0452669a9bc4e0f83b2dbcd85b97f733e" - } - ] - } - }, - { - "date": "Tue, 12 Nov 2024 09:58:11 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.5.7", - "version": "0.5.7", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.18.2", - "commit": "4dd2eec22aaff93dead8429c4a35496de7dab438" - } - ] - } - }, - { - "date": "Thu, 31 Oct 2024 16:16:50 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.5.6", - "version": "0.5.6", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.18.1", - "commit": "00ba8831f3b895c1600e8211895c0d2b99c13365" - } - ] - } - }, - { - "date": "Mon, 29 Jul 2024 07:31:53 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.5.5", - "version": "0.5.5", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.18.0", - "commit": "aa24116ea5cf763ee7f56363067a5c386c4c2222" - } - ] - } - }, - { - "date": "Wed, 10 Jul 2024 14:36:29 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.5.4", - "version": "0.5.4", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "82ce7a8ffd3f08e89a042982a42f42b056610a2b", - "comment": "chore: improve compat with Rspack" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.17.1", - "commit": "15496655df98b9d8e8f505b461cc6dbd12e3122e" - } - ] - } - }, - { - "date": "Wed, 22 May 2024 08:24:17 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.5.3", - "version": "0.5.3", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.17.0", - "commit": "6ae570dbbd711a5e95184004f5d4d98a8ffa2df3" - } - ] - } - }, - { - "date": "Thu, 02 May 2024 14:07:14 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.5.2", - "version": "0.5.2", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "e514e2f9e83d9ee62290eaa262bece8bb0956e34", - "comment": "chore: add support for priority in CSS rules" - }, - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "11bab861ec8214f53d4d958398a4cb50f71e085e", - "comment": "fix: fix sorting of buckets in sortCSSRules()" - }, - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "7d27e6075f2d0647256fcc489e1e369696347e05", - "comment": "chore: improve CSS generation" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.16.0", - "commit": "9745935b1bd28b02ee7c19d9195883e8454f0810" - } - ] - } - }, - { - "date": "Tue, 19 Mar 2024 11:33:53 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.5.1", - "version": "0.5.1", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.15.3", - "commit": "95326c52b330ad9d286fad926f2aa26914c39061" - } - ] - } - }, - { - "date": "Fri, 26 Jan 2024 10:01:06 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.5.0", - "version": "0.5.0", - "comments": { - "minor": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "b7180a73848f6c3aa277716d5c3411024d946197", - "comment": "feat: add \"unstable_attachToEntryPoint\" option" - } - ] - } - }, - { - "date": "Tue, 23 Jan 2024 11:03:15 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.4.5", - "version": "0.4.5", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "9c0b1acf69a4645331d1623b1f0b5484ce5d2cc9", - "comment": "chore: bump to Nx@15.9.7" - } - ] - } - }, - { - "date": "Fri, 12 Jan 2024 11:08:40 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.4.5", - "version": "0.4.5", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "1594e428f0902da615ff8d9e86ae4512ce9f0389", - "comment": "chore: enable \"@typescript-eslint/consistent-type-imports\" lint rule" - } - ], - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.15.2", - "commit": "0d2e5506d6b9bc9d7e4a102b88c2bb25eff9a34d" - } - ] - } - }, - { - "date": "Thu, 30 Nov 2023 16:42:15 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.4.4", - "version": "0.4.4", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.15.1", - "commit": "7d72d1eb3439ef8423fe958035a1525da1822750" - } - ] - } - }, - { - "date": "Mon, 13 Nov 2023 15:16:05 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.4.3", - "version": "0.4.3", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "dbbdcb6cdacb4ee3200b0dbb4a6e4da7fd443805", - "comment": "fix: replace null inputSourceMap with undefined" - } - ] - } - }, - { - "date": "Thu, 09 Nov 2023 14:35:07 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.4.2", - "version": "0.4.2", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.15.0", - "commit": "8f213a0c040ee833b268cb2558adf976773ac14d" - } - ] - } - }, - { - "date": "Mon, 30 Oct 2023 14:08:55 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.4.1", - "version": "0.4.1", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "d286d4776d846609a051e273d42dc507f1946204", - "comment": "chore: bump Babel dependencies" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.14.4", - "commit": "f001ae503d75d7ddcf70d0633e2f51111b70ed45" - } - ] - } - }, - { - "date": "Wed, 18 Oct 2023 09:11:01 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.4.0", - "version": "0.4.0", - "comments": { - "minor": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "c2d669493849f4c117624862379f05c25d7f1b40", - "comment": "feat(webpack-extraction-plugin): add compat for Rspack" - } - ] - } - }, - { - "date": "Tue, 03 Oct 2023 19:09:32 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.22", - "version": "0.3.22", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.14.3", - "commit": "1476e34bd093df1132181acfebbb8c51922d5c8b" - } - ] - } - }, - { - "date": "Fri, 15 Sep 2023 08:08:43 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.21", - "version": "0.3.21", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.14.2", - "commit": "744403e2d046701dc82b02460a60e1680bb60f2e" - } - ] - } - }, - { - "date": "Fri, 01 Sep 2023 12:27:27 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.20", - "version": "0.3.20", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "64613e2b35984a40f1e1de4229409669d3499bfb", - "comment": "chore: refactor tests for @griffel/webpack-extraction-plugin" - } - ], - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "6780f10dba48187e5699cdf2ff2884e651fc58dc", - "comment": "chore: remove experimental_resetModuleIndexes" - } - ] - } - }, - { - "date": "Mon, 28 Aug 2023 17:17:47 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.19", - "version": "0.3.19", - "comments": { - "patch": [ - { - "author": "miclo@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "5865f8ac8953dc0caa5dc47807e8bc9cc6487dae", - "comment": "chore: stop inlining the styles in the virtual CSS module request" - } - ] - } - }, - { - "date": "Mon, 31 Jul 2023 12:18:47 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.18", - "version": "0.3.18", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.14.1", - "commit": "fa5f0d726cbdca1cc583ccc7af4578a7f3f6599f" - } - ] - } - }, - { - "date": "Mon, 31 Jul 2023 09:05:33 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.17", - "version": "0.3.17", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "9e29013645e396ee9af1189641936fa6670a3133", - "comment": "fix: do not emit empty CSS files" - }, - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "c33da85cf8d176e47fd07012c41574a735753528", - "comment": "chore: add support for different buckets in makeResetStyles" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.14.0", - "commit": "1d0df068e80f3cb602651f1875edbd625d221c47" - } - ] - } - }, - { - "date": "Wed, 19 Jul 2023 07:32:54 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.16", - "version": "0.3.16", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.13.1", - "commit": "47f4df96449fc23545eab7c58ede2e55610c637c" - } - ] - } - }, - { - "date": "Thu, 13 Jul 2023 11:31:22 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.15", - "version": "0.3.15", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.13.0", - "commit": "2f75c38dada524264284c2a92c57437309dcf491" - } - ] - } - }, - { - "date": "Thu, 29 Jun 2023 12:49:54 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.14", - "version": "0.3.14", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.12.2", - "commit": "105857b021ee1d471efc29037a20601fb80bc72a" - } - ] - } - }, - { - "date": "Wed, 28 Jun 2023 16:07:13 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.13", - "version": "0.3.13", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.12.1", - "commit": "d551a7f5a11b4123d1b353cab37e85058de17eb4" - } - ] - } - }, - { - "date": "Tue, 27 Jun 2023 14:18:04 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.12", - "version": "0.3.12", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "02499fc94501e5f859aef982db3d9a23bc2a13bc", - "comment": "feat: add experimental_resetModuleIndexes" - }, - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "31bb2215926d5224ed2bd50fe9a61677a756a02f", - "comment": "chore: bump stylis" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.12.0", - "commit": "02499fc94501e5f859aef982db3d9a23bc2a13bc" - } - ] - } - }, - { - "date": "Tue, 25 Apr 2023 14:34:44 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.11", - "version": "0.3.11", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "b7b8ccddbc7681cdb9894d7415cd51ea29320145", - "comment": "fix: cleanup imports properly" - } - ] - } - }, - { - "date": "Fri, 14 Apr 2023 07:58:49 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.10", - "version": "0.3.10", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.11.0", - "commit": "ff7edd54e829fbeb5453383fe6a19009e44b64b2" - } - ] - } - }, - { - "date": "Wed, 29 Mar 2023 12:45:13 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.9", - "version": "0.3.9", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.10.1", - "commit": "9ad8031fa6346e97d5d444b26d7bdf380f9c69c1" - } - ] - } - }, - { - "date": "Tue, 28 Mar 2023 13:04:53 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.8", - "version": "0.3.8", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "37bd6399e99ed84bde568d6577a2c737aaeb0444", - "comment": "chore(extraction-plugin): redo chunk attachment" - }, - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "a0b6a6c16329b9ab79a603cbcfbbee7de80dba0e", - "comment": "chore(extraction-plugin): use ESM imports" - }, - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "fe0d1a828e3a3085054674305454cd0174ef0661", - "comment": "chore(extraction-plugin): re-implement unstable_keepOriginalCode" - } - ] - } - }, - { - "date": "Thu, 02 Mar 2023 14:51:11 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.7", - "version": "0.3.7", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "d8e62d7756c8bd3908e2ce5a95ee0a842fc7df9d", - "comment": "chore: bump Nx" - } - ], - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "3edb840d4139d81744620d8bded738d814cd71f5", - "comment": "chore: move @griffel/core to dependencies" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.10.0", - "commit": "3edb840d4139d81744620d8bded738d814cd71f5" - } - ] - } - }, - { - "date": "Fri, 10 Feb 2023 10:23:25 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.6", - "version": "0.3.6", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "5837c739ee141a9099a031449870dbca46ce648d", - "comment": "refactor: update how griffel chunk is attached" - }, - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "86750111d8c8a0334c5f725b56595d72dc586ecd", - "comment": "fix: handling modules with SplitChunksPlugin" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.9.2", - "commit": "5837c739ee141a9099a031449870dbca46ce648d" - } - ], - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "bb07d370d3084b9bd7f2941fd82be79fa6c99b4b", - "comment": "chore: update tsconfig files" - } - ] - } - }, - { - "date": "Wed, 01 Feb 2023 10:47:40 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.5", - "version": "0.3.5", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "15fa8433ef03cb28b8f528960ae335e9e2231eeb", - "comment": "fix: avoid conflicts with SplitChunksPlugin" - } - ] - } - }, - { - "date": "Thu, 26 Jan 2023 14:06:28 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.4", - "version": "0.3.4", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "d87ba30b4f07fc759c0abb18ff86fd57dd79296f", - "comment": "feat: implement \"unstable_keepOriginalCode\" for extraction plugin" - }, - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "bd0d13ae15ccd09c045287f246438b7cf02d5f81", - "comment": "fix: properly handle @media in __resetStyles()" - }, - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "bde2d2d9e9eb5e6db7c4198f353d7d4971fc5f77", - "comment": "fix: support aliased imports" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.9.1", - "commit": "d87ba30b4f07fc759c0abb18ff86fd57dd79296f" - } - ], - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "a2bb5ea56637aa20872d683a178a49e91f6a02c8", - "comment": "chore: use typings for @babel/helper-module-imports" - } - ] - } - }, - { - "date": "Tue, 20 Dec 2022 11:48:33 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.3", - "version": "0.3.3", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.9.0", - "commit": "7d2e3ba8656afccb6cf0b56e7b7f6cce0ae9fd15" - } - ] - } - }, - { - "date": "Fri, 09 Dec 2022 11:15:19 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.2", - "version": "0.3.2", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "7d3fa72250eb487aa760135b078d7b84fa6683ad", - "comment": "fix: avoid empty CSS imports" - }, - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "6c3c1e3738c2f5bad96a99f68df9a64099989cb2", - "comment": "chore: remove loader-utils & schema-utils from dependencies" - }, - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "9b94a45ba5bd526460dd97aaea103cf64d9d5450", - "comment": "chore: remove path magic in extraction process" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.8.3", - "commit": "9b94a45ba5bd526460dd97aaea103cf64d9d5450" - } - ] - } - }, - { - "date": "Wed, 30 Nov 2022 17:14:53 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.1", - "version": "0.3.1", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "ac04890efdb16a99bc2d3c8eae2b7cfe514b6288", - "comment": "chore: update loader-utils dependency" - }, - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "569eb09804b9fd45c1b5869fa78f0e7d8e12c181", - "comment": "fix: don't throw in the plugin" - } - ] - } - }, - { - "date": "Wed, 30 Nov 2022 09:32:24 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.3.0", - "version": "0.3.0", - "comments": { - "minor": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "f5c9ec05b8892ef7388e876671b475daf64b28b6", - "comment": "chore: rework plugin to avoid dependency on splitChunks.cacheGroups" - } - ] - } - }, - { - "date": "Thu, 24 Nov 2022 10:05:12 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.2.2", - "version": "0.2.2", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "ebd004e9e8935e099c1873bf2d4841c773bb8417", - "comment": "fix: use style buckets in CSS extraction" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.8.2", - "commit": "fc3403a602d5dd0b206ceeb48ca689cb2fdf6d37" - } - ] - } - }, - { - "date": "Wed, 26 Oct 2022 11:06:03 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.2.1", - "version": "0.2.1", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.8.1", - "commit": "f9fb5726c89abff0c7f5e07c6e1d1c8e0ebbcde6" - } - ] - } - }, - { - "date": "Thu, 13 Oct 2022 08:36:18 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.2.0", - "version": "0.2.0", - "comments": { - "minor": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "635096302c6e9a8b18e51745c1fadec5ab4674d5", - "comment": "feat: add support for makeResetStyles" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.8.0", - "commit": "32d9b0bfa4372343d710368b6bed1cc5185a6684" - } - ], - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "32d9b0bfa4372343d710368b6bed1cc5185a6684", - "comment": "fix: handle multiple url()" - } - ] - } - }, - { - "date": "Wed, 05 Oct 2022 14:28:43 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.1.8", - "version": "0.1.8", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.7.0", - "commit": "9173966f4f1c69556f68351e6361d9302c674621" - } - ] - } - }, - { - "date": "Tue, 04 Oct 2022 08:44:33 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.1.7", - "version": "0.1.7", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "926fe7376dc15a55d2262ce2d32e895f752adbc2", - "comment": "chore: adopt API changes from @griffel/core" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.6.1", - "commit": "6828b9b754d65621e12a8fbff54c9f486eab032e" - } - ] - } - }, - { - "date": "Tue, 16 Aug 2022 11:16:00 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.1.6", - "version": "0.1.6", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.6.0", - "commit": "545253c7bd0c84f3c72803b6b88946e617922714" - } - ] - } - }, - { - "date": "Fri, 05 Aug 2022 09:44:44 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.1.5", - "version": "0.1.5", - "comments": { - "patch": [ - { - "author": "dwlad90@gmail.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "81c9176d20ecefdeca14c94fb4705563f5faeba2", - "comment": "feat: add NextJS plugin for CSS extraction" - } - ] - } - }, - { - "date": "Wed, 03 Aug 2022 13:28:05 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.1.4", - "version": "0.1.4", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "7eb59c4270491c9220f45e7109d17ea6099697f5", - "comment": "fix: assets handling in Windows env" - } - ] - } - }, - { - "date": "Wed, 27 Jul 2022 13:03:12 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.1.3", - "version": "0.1.3", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "379e56e840a16928e7e8cc2fe48ed98e57f596ec", - "comment": "fix: handle asset imports" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.5.1", - "commit": "2b80f0c1fae8d5dc0ae66d072f499e25bd6042c4" - } - ] - } - }, - { - "date": "Tue, 19 Jul 2022 10:20:09 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.1.2", - "version": "0.1.2", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "0b9668e0b23af26d0d48a93327e740a474b19fa7", - "comment": "fix: handle comments in output" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.5.0", - "commit": "9b1d23a654c1af9ccde3aa4807b70dff2cdf58d7" - } - ] - } - }, - { - "date": "Tue, 28 Jun 2022 15:47:33 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.1.1", - "version": "0.1.1", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "feffd3c775fcd4f9c4af34ed845ef5e1fc016a27", - "comment": "fix: improve getElementReference() to handle multiple childen" - } - ] - } - }, - { - "date": "Tue, 28 Jun 2022 09:50:50 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.1.0", - "version": "0.1.0", - "comments": { - "minor": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-extraction-plugin", - "commit": "604926fc2fdd4596cd122b92b82a3f5e5d40d23d", - "comment": "chore: initial release" - }, - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.4.1", - "commit": "604926fc2fdd4596cd122b92b82a3f5e5d40d23d" - } - ] - } - }, - { - "date": "Thu, 23 Jun 2022 08:37:05 GMT", - "tag": "@griffel/webpack-extraction-plugin_v0.0.1", - "version": "0.0.1", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-extraction-plugin", - "comment": "Bump @griffel/core to v1.4.0", - "commit": "6b98eb67f7b4399bcc9bd66607e296640449ae98" - } - ] - } - } - ] -} diff --git a/packages/webpack-extraction-plugin/CHANGELOG.md b/packages/webpack-extraction-plugin/CHANGELOG.md deleted file mode 100644 index 17c053fd9..000000000 --- a/packages/webpack-extraction-plugin/CHANGELOG.md +++ /dev/null @@ -1,494 +0,0 @@ -# Change Log - @griffel/webpack-extraction-plugin - -This log was last generated on Fri, 06 Mar 2026 15:56:28 GMT and should not be manually modified. - - - -## 0.5.14 - -Fri, 06 Mar 2026 15:56:28 GMT - -### Patches - -- Bump @griffel/core to v1.20.1 - -## 0.5.13 - -Fri, 06 Mar 2026 08:17:05 GMT - -### Patches - -- fix: use Symbol.for() instead of Symbol() for GriffelCssLoaderContextKey (olfedias@microsoft.com) -- feat: add makeStaticStyles AOT/CSS extraction support (hochelmartin@gmail.com) -- Bump @griffel/core to v1.20.0 - -## 0.5.12 - -Tue, 05 Aug 2025 16:25:42 GMT - -### Patches - -- fix: improve classNameHashSalt validation logic (olfedias@microsoft.com) - -## 0.5.11 - -Mon, 28 Jul 2025 09:12:30 GMT - -### Patches - -- feat: add "classNameHashSalt" validation (olfedias@microsoft.com) - -## 0.5.10 - -Tue, 22 Apr 2025 10:05:48 GMT - -### Patches - -- Bump @griffel/core to v1.19.2 - -## 0.5.9 - -Thu, 23 Jan 2025 12:09:03 GMT - -### Patches - -- Bump @griffel/core to v1.19.1 - -## 0.5.8 - -Wed, 22 Jan 2025 13:44:43 GMT - -### Patches - -- Bump @griffel/core to v1.19.0 - -## 0.5.7 - -Tue, 12 Nov 2024 09:58:11 GMT - -### Patches - -- Bump @griffel/core to v1.18.2 - -## 0.5.6 - -Thu, 31 Oct 2024 16:16:50 GMT - -### Patches - -- Bump @griffel/core to v1.18.1 - -## 0.5.5 - -Mon, 29 Jul 2024 07:31:53 GMT - -### Patches - -- Bump @griffel/core to v1.18.0 - -## 0.5.4 - -Wed, 10 Jul 2024 14:36:29 GMT - -### Patches - -- chore: improve compat with Rspack (olfedias@microsoft.com) -- Bump @griffel/core to v1.17.1 - -## 0.5.3 - -Wed, 22 May 2024 08:24:17 GMT - -### Patches - -- Bump @griffel/core to v1.17.0 - -## 0.5.2 - -Thu, 02 May 2024 14:07:14 GMT - -### Patches - -- chore: add support for priority in CSS rules (olfedias@microsoft.com) -- fix: fix sorting of buckets in sortCSSRules() (olfedias@microsoft.com) -- chore: improve CSS generation (olfedias@microsoft.com) -- Bump @griffel/core to v1.16.0 - -## 0.5.1 - -Tue, 19 Mar 2024 11:33:53 GMT - -### Patches - -- Bump @griffel/core to v1.15.3 - -## 0.5.0 - -Fri, 26 Jan 2024 10:01:06 GMT - -### Minor changes - -- feat: add "unstable_attachToEntryPoint" option (olfedias@microsoft.com) - -## 0.4.5 - -Fri, 12 Jan 2024 11:08:40 GMT - -### Patches - -- Bump @griffel/core to v1.15.2 - -## 0.4.4 - -Thu, 30 Nov 2023 16:42:15 GMT - -### Patches - -- Bump @griffel/core to v1.15.1 - -## 0.4.3 - -Mon, 13 Nov 2023 15:16:05 GMT - -### Patches - -- fix: replace null inputSourceMap with undefined (olfedias@microsoft.com) - -## 0.4.2 - -Thu, 09 Nov 2023 14:35:07 GMT - -### Patches - -- Bump @griffel/core to v1.15.0 - -## 0.4.1 - -Mon, 30 Oct 2023 14:08:55 GMT - -### Patches - -- chore: bump Babel dependencies (olfedias@microsoft.com) -- Bump @griffel/core to v1.14.4 - -## 0.4.0 - -Wed, 18 Oct 2023 09:11:01 GMT - -### Minor changes - -- feat(webpack-extraction-plugin): add compat for Rspack (olfedias@microsoft.com) - -## 0.3.22 - -Tue, 03 Oct 2023 19:09:32 GMT - -### Patches - -- Bump @griffel/core to v1.14.3 - -## 0.3.21 - -Fri, 15 Sep 2023 08:08:43 GMT - -### Patches - -- Bump @griffel/core to v1.14.2 - -## 0.3.20 - -Fri, 01 Sep 2023 12:27:27 GMT - -### Patches - -- chore: remove experimental_resetModuleIndexes (olfedias@microsoft.com) - -## 0.3.19 - -Mon, 28 Aug 2023 17:17:47 GMT - -### Patches - -- chore: stop inlining the styles in the virtual CSS module request (miclo@microsoft.com) - -## 0.3.18 - -Mon, 31 Jul 2023 12:18:47 GMT - -### Patches - -- Bump @griffel/core to v1.14.1 - -## 0.3.17 - -Mon, 31 Jul 2023 09:05:33 GMT - -### Patches - -- fix: do not emit empty CSS files (olfedias@microsoft.com) -- chore: add support for different buckets in makeResetStyles (olfedias@microsoft.com) -- Bump @griffel/core to v1.14.0 - -## 0.3.16 - -Wed, 19 Jul 2023 07:32:54 GMT - -### Patches - -- Bump @griffel/core to v1.13.1 - -## 0.3.15 - -Thu, 13 Jul 2023 11:31:22 GMT - -### Patches - -- Bump @griffel/core to v1.13.0 - -## 0.3.14 - -Thu, 29 Jun 2023 12:49:54 GMT - -### Patches - -- Bump @griffel/core to v1.12.2 - -## 0.3.13 - -Wed, 28 Jun 2023 16:07:13 GMT - -### Patches - -- Bump @griffel/core to v1.12.1 - -## 0.3.12 - -Tue, 27 Jun 2023 14:18:04 GMT - -### Patches - -- feat: add experimental_resetModuleIndexes (olfedias@microsoft.com) -- chore: bump stylis (olfedias@microsoft.com) -- Bump @griffel/core to v1.12.0 - -## 0.3.11 - -Tue, 25 Apr 2023 14:34:44 GMT - -### Patches - -- fix: cleanup imports properly (olfedias@microsoft.com) - -## 0.3.10 - -Fri, 14 Apr 2023 07:58:49 GMT - -### Patches - -- Bump @griffel/core to v1.11.0 - -## 0.3.9 - -Wed, 29 Mar 2023 12:45:13 GMT - -### Patches - -- Bump @griffel/core to v1.10.1 - -## 0.3.8 - -Tue, 28 Mar 2023 13:04:53 GMT - -### Patches - -- chore(extraction-plugin): redo chunk attachment (olfedias@microsoft.com) -- chore(extraction-plugin): use ESM imports (olfedias@microsoft.com) -- chore(extraction-plugin): re-implement unstable_keepOriginalCode (olfedias@microsoft.com) - -## 0.3.7 - -Thu, 02 Mar 2023 14:51:11 GMT - -### Patches - -- chore: move @griffel/core to dependencies (olfedias@microsoft.com) -- Bump @griffel/core to v1.10.0 - -## 0.3.6 - -Fri, 10 Feb 2023 10:23:25 GMT - -### Patches - -- refactor: update how griffel chunk is attached (olfedias@microsoft.com) -- fix: handling modules with SplitChunksPlugin (olfedias@microsoft.com) -- Bump @griffel/core to v1.9.2 - -## 0.3.5 - -Wed, 01 Feb 2023 10:47:40 GMT - -### Patches - -- fix: avoid conflicts with SplitChunksPlugin (olfedias@microsoft.com) - -## 0.3.4 - -Thu, 26 Jan 2023 14:06:28 GMT - -### Patches - -- feat: implement "unstable_keepOriginalCode" for extraction plugin (olfedias@microsoft.com) -- fix: properly handle @media in __resetStyles() (olfedias@microsoft.com) -- fix: support aliased imports (olfedias@microsoft.com) -- Bump @griffel/core to v1.9.1 - -## 0.3.3 - -Tue, 20 Dec 2022 11:48:33 GMT - -### Patches - -- Bump @griffel/core to v1.9.0 - -## 0.3.2 - -Fri, 09 Dec 2022 11:15:19 GMT - -### Patches - -- fix: avoid empty CSS imports (olfedias@microsoft.com) -- chore: remove loader-utils & schema-utils from dependencies (olfedias@microsoft.com) -- chore: remove path magic in extraction process (olfedias@microsoft.com) -- Bump @griffel/core to v1.8.3 - -## 0.3.1 - -Wed, 30 Nov 2022 17:14:53 GMT - -### Patches - -- chore: update loader-utils dependency (olfedias@microsoft.com) -- fix: don't throw in the plugin (olfedias@microsoft.com) - -## 0.3.0 - -Wed, 30 Nov 2022 09:32:24 GMT - -### Minor changes - -- chore: rework plugin to avoid dependency on splitChunks.cacheGroups (olfedias@microsoft.com) - -## 0.2.2 - -Thu, 24 Nov 2022 10:05:12 GMT - -### Patches - -- fix: use style buckets in CSS extraction (olfedias@microsoft.com) -- Bump @griffel/core to v1.8.2 - -## 0.2.1 - -Wed, 26 Oct 2022 11:06:03 GMT - -### Patches - -- Bump @griffel/core to v1.8.1 - -## 0.2.0 - -Thu, 13 Oct 2022 08:36:18 GMT - -### Minor changes - -- feat: add support for makeResetStyles (olfedias@microsoft.com) -- Bump @griffel/core to v1.8.0 - -### Patches - -- fix: handle multiple url() (olfedias@microsoft.com) - -## 0.1.8 - -Wed, 05 Oct 2022 14:28:43 GMT - -### Patches - -- Bump @griffel/core to v1.7.0 - -## 0.1.7 - -Tue, 04 Oct 2022 08:44:33 GMT - -### Patches - -- chore: adopt API changes from @griffel/core (olfedias@microsoft.com) -- Bump @griffel/core to v1.6.1 - -## 0.1.6 - -Tue, 16 Aug 2022 11:16:00 GMT - -### Patches - -- Bump @griffel/core to v1.6.0 - -## 0.1.5 - -Fri, 05 Aug 2022 09:44:44 GMT - -### Patches - -- feat: add NextJS plugin for CSS extraction (dwlad90@gmail.com) - -## 0.1.4 - -Wed, 03 Aug 2022 13:28:05 GMT - -### Patches - -- fix: assets handling in Windows env (olfedias@microsoft.com) - -## 0.1.3 - -Wed, 27 Jul 2022 13:03:12 GMT - -### Patches - -- fix: handle asset imports (olfedias@microsoft.com) -- Bump @griffel/core to v1.5.1 - -## 0.1.2 - -Tue, 19 Jul 2022 10:20:09 GMT - -### Patches - -- fix: handle comments in output (olfedias@microsoft.com) -- Bump @griffel/core to v1.5.0 - -## 0.1.1 - -Tue, 28 Jun 2022 15:47:33 GMT - -### Patches - -- fix: improve getElementReference() to handle multiple childen (olfedias@microsoft.com) - -## 0.1.0 - -Tue, 28 Jun 2022 09:50:50 GMT - -### Minor changes - -- chore: initial release (olfedias@microsoft.com) -- Bump @griffel/core to v1.4.1 - -## 0.0.1 - -Thu, 23 Jun 2022 08:37:05 GMT - -### Patches - -- Bump @griffel/core to v1.4.0 diff --git a/packages/webpack-extraction-plugin/README.md b/packages/webpack-extraction-plugin/README.md deleted file mode 100644 index 8b737cc40..000000000 --- a/packages/webpack-extraction-plugin/README.md +++ /dev/null @@ -1,139 +0,0 @@ -# Webpack plugin to perform CSS extraction in Griffel - -> ⚠️ **Note** This package is experimental, API may change. - -A plugin for Webpack 5 that performs CSS extraction for [`@griffel/react`](../react). - - - - - -- [Install](#install) -- [When to use it?](#when-to-use-it) -- [How it works?](#how-it-works) -- [Usage](#usage) - - [`ignoreOrder` option](#ignoreorder-option) - - - -## Install - -```bash -yarn add --dev @griffel/webpack-extraction-plugin -# or -npm install --save-dev @griffel/webpack-extraction-plugin -``` - -## When to use it? - -It's designed to be used only in applications. - -## How it works? - -This plugin relies on assets transformed by [`@griffel/webpack-loader`](../webpack-loader). Usage of these utilities is a **prerequisite**. - -The plugin transforms code to remove generated CSS from JavaScript files and create CSS assets. - -_Currently, all CSS rules will be extracted to a single CSS file i.e. [code splitting](https://webpack.js.org/guides/code-splitting/) for extracted CSS **will not work**._ - -## Usage - -Webpack documentation: - -- [Loaders](https://webpack.js.org/loaders/) -- [Plugins](https://webpack.js.org/concepts/plugins/) - -> Please configure [`@griffel/webpack-loader`](../webpack-loader) first. - -Within your Webpack configuration object, you'll need to add the loader and the plugin from `@griffel/webpack-extraction-plugin` like so: - -```js -const { GriffelCSSExtractionPlugin } = require('@griffel/webpack-extraction-plugin'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); - -module.exports = { - module: { - rules: [ - { - test: /\.(js|ts|tsx)$/, - // Apply "exclude" only if your dependencies **do not use** Griffel - // exclude: /node_modules/, - use: { - loader: GriffelCSSExtractionPlugin.loader, - }, - }, - // Add "@griffel/webpack-loader" if you use Griffel directly in your project - { - test: /\.(ts|tsx)$/, - exclude: /node_modules/, - use: { - loader: '@griffel/webpack-loader', - }, - }, - // "css-loader" is required to handle produced CSS assets by Griffel - // you can use "MiniCssExtractPlugin.loader" to handle CSS insertion - { - test: /\.css$/, - use: [MiniCssExtractPlugin.loader, 'css-loader'], - }, - ], - }, - plugins: [new MiniCssExtractPlugin(), new GriffelCSSExtractionPlugin()], -}; -``` - -- `mini-css-extract-plugin` is not mandatory and configured there for example, you can use other tooling to inject CSS on a page - -> ⚠️ `style-loader` does not produce necessary assets for the Griffel plugin to order CSS rules correctly. Using it to handle CSS insertion would result in partially broken styling in your app. - -For better performance (to process less files) consider to use `include` for `GriffelCSSExtractionPlugin.loader`: - -```js -const { GriffelCSSExtractionPlugin } = require('@griffel/webpack-extraction-plugin'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); - -module.exports = { - module: { - rules: [ - { - test: /\.(js|ts|tsx)$/, - include: [ - path.resolve(__dirname, 'components'), - /\/node_modules\/@fluentui\/, - // see https://webpack.js.org/configuration/module/#condition - ], - use: { - loader: GriffelCSSExtractionPlugin.loader, - }, - }, - ], - }, -}; -``` - -### `ignoreOrder` option - -If you use `mini-css-extract-plugin`, you may need to set it to `false` to remove warnings about conflicting order of CSS modules: - -``` -WARNING in chunk griffel [mini-css-extract-plugin] -Conflicting order. Following module has been added: -* css ./node_modules/css-loader/dist/cjs.js!./node_modules/@griffel/webpack-extraction-plugin/virtual-loader/index.js?style=%2F**%20%40griffel%3Acss-start%20%5Bd%5D%20**%2F%0A.fm40iov%7Bcolor%3A%23ccc%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A!./src/foo-module/baz.js - despite it was not able to fulfill desired ordering with these modules: -* css ./node_modules/css-loader/dist/cjs.js!./node_modules/@griffel/webpack-extraction-plugin/virtual-loader/index.js?style=%2F**%20%40griffel%3Acss-start%20%5Bd%5D%20**%2F%0A.f1e30ogq%7Bcolor%3Ablueviolet%3B%7D%0A%2F**%20%40griffel%3Acss-end%20**%2F%0A!./src/foo-module/qux.js - - couldn't fulfill desired order of chunk group(s) -``` - -This will not affect the order of CSS modules in the final bundle as Griffel sorts own CSS modules anyway. - -```js -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); - -module.exports = { - plugins: [ - new MiniCssExtractPlugin({ - ignoreOrder: true, - }), - ], -}; -``` diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/alias/code.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/alias/code.ts deleted file mode 100644 index 44ef1b6c7..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/babel/alias/code.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { __styles as _styles } from '@griffel/react'; -export const useStyles = /*#__PURE__*/ _styles( - { - root: { - sj55zd: 'fe3e8s9', - }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/alias/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/alias/output.ts deleted file mode 100644 index 971e7e24c..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/babel/alias/output.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { __styles as _styles, __css as _css } from '@griffel/react'; -export const useStyles = /*#__PURE__*/ _css({ - root: { - sj55zd: 'fe3e8s9', - }, -}); diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/basic/code.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/basic/code.ts deleted file mode 100644 index 19dad5066..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/babel/basic/code.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { __styles } from '@griffel/react'; - -export const styles = __styles( - { - root: { - sj55zd: 'fe3e8s9', - uwmqm3: ['fycuoez', 'f8wuabp'], - }, - icon: { - De3pzq: 'fcnqdeg', - Bi91k9c: 'faf35ka', - }, - }, - { - d: [ - '.fe3e8s9{color:red;}', - '.fycuoez{padding-left:4px;}', - '.f8wuabp{padding-right:4px;}', - '.fcnqdeg{background-color:green;}', - ], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/basic/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/basic/output.ts deleted file mode 100644 index dc3ed2098..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/babel/basic/output.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { __styles, __css as _css } from '@griffel/react'; -export const styles = _css({ - root: { - sj55zd: 'fe3e8s9', - uwmqm3: ['fycuoez', 'f8wuabp'], - }, - icon: { - De3pzq: 'fcnqdeg', - Bi91k9c: 'faf35ka', - }, -}); diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/mixed/code.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/mixed/code.ts deleted file mode 100644 index 979f4785c..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/babel/mixed/code.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { __resetStyles, __styles } from '@griffel/react'; - -export const useClasses = __styles({ root: { sj55zd: 'fe3e8s9' } }, { d: ['.fe3e8s9{color:red;}'] }); - -export const useClassName = __resetStyles('rjefjbm', 'r7z97ji', [ - '.rjefjbm{color:red;padding-left:4px;}', - '.r7z97ji{color:red;padding-right:4px;}', -]); diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/mixed/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/mixed/output.ts deleted file mode 100644 index 48be27f03..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/babel/mixed/output.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { __resetStyles, __styles, __resetCSS as _resetCSS, __css as _css } from '@griffel/react'; -export const useClasses = _css({ - root: { - sj55zd: 'fe3e8s9', - }, -}); -export const useClassName = _resetCSS('rjefjbm', 'r7z97ji'); diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/multiple/code.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/multiple/code.ts deleted file mode 100644 index 0b4f06792..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/babel/multiple/code.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { __styles } from '@griffel/react'; - -export const stylesA = __styles( - { - root: { - sj55zd: 'fe3e8s9', - }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); - -export const stylesB = __styles( - { - root: { - De3pzq: 'fcnqdeg', - }, - }, - { - d: ['.fcnqdeg{background-color:green;}'], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/multiple/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/multiple/output.ts deleted file mode 100644 index e7f1357c6..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/babel/multiple/output.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { __styles, __css as _css } from '@griffel/react'; -export const stylesA = _css({ - root: { - sj55zd: 'fe3e8s9', - }, -}); -export const stylesB = _css({ - root: { - De3pzq: 'fcnqdeg', - }, -}); diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/reset/code.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/reset/code.ts deleted file mode 100644 index 8c0b4c5b8..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/babel/reset/code.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { __resetStyles } from '@griffel/react'; -export const useClassName = __resetStyles('rjefjbm', 'r7z97ji', [ - '.rjefjbm{color:red;padding-left:4px;}', - '.r7z97ji{color:red;padding-right:4px;}', -]); diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/reset/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/reset/output.ts deleted file mode 100644 index b13f653be..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/babel/reset/output.ts +++ /dev/null @@ -1,2 +0,0 @@ -import { __resetStyles, __resetCSS as _resetCSS } from '@griffel/react'; -export const useClassName = _resetCSS('rjefjbm', 'r7z97ji'); diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/static-mixed/code.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/static-mixed/code.ts deleted file mode 100644 index 66f610ad6..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/babel/static-mixed/code.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { __styles, __staticStyles } from '@griffel/react'; - -export const styles = __styles( - { - root: { - sj55zd: 'fe3e8s9', - }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); - -export const useStaticStyles = __staticStyles({ - d: ['body{background:red;}'], -}); diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/static-mixed/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/static-mixed/output.ts deleted file mode 100644 index 548224ac2..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/babel/static-mixed/output.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { __styles, __staticStyles, __css as _css, __staticCSS as _staticCSS } from '@griffel/react'; -export const styles = _css({ - root: { - sj55zd: 'fe3e8s9', - }, -}); -export const useStaticStyles = _staticCSS(); diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/static/code.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/static/code.ts deleted file mode 100644 index 1132f046c..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/babel/static/code.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { __staticStyles } from '@griffel/react'; - -export const useStaticStyles = __staticStyles({ - d: ['body{background:red;}'], -}); diff --git a/packages/webpack-extraction-plugin/__fixtures__/babel/static/output.ts b/packages/webpack-extraction-plugin/__fixtures__/babel/static/output.ts deleted file mode 100644 index 3af7a1eaf..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/babel/static/output.ts +++ /dev/null @@ -1,2 +0,0 @@ -import { __staticStyles, __staticCSS as _staticCSS } from '@griffel/react'; -export const useStaticStyles = _staticCSS(); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/code.ts deleted file mode 100644 index 84cf8ee49..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/code.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { __styles } from '@griffel/react'; - -import _asset from './left.jpg'; -import _asset2 from './right.jpg'; - -export const useStyles = __styles( - { - root: { - Bcmaq0h: ['ftcbn0w', 'f37sp7w'], - }, - }, - { - d: [ - `.ftcbn0w{background-image:url(${_asset}),url(${_asset2});}`, - `.f37sp7w{background-image:url(${_asset2}),url(${_asset});}`, - ], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/fs.json deleted file mode 100644 index 45512ed2f..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js", "griffel.css", "left.jpg", "right.jpg"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/left.jpg b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/left.jpg deleted file mode 100644 index 1cda9a53d..000000000 Binary files a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/left.jpg and /dev/null differ diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/output.css deleted file mode 100644 index 72b9c199e..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/output.css +++ /dev/null @@ -1,7 +0,0 @@ -/** griffel.css **/ -.ftcbn0w { - background-image: url(left.jpg), url(right.jpg); -} -.f37sp7w { - background-image: url(right.jpg), url(left.jpg); -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/output.ts deleted file mode 100644 index d0462f76a..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/output.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { __styles, __css as _css } from '@griffel/react'; -export const useStyles = _css({ - root: { - Bcmaq0h: ['ftcbn0w', 'f37sp7w'], - }, -}); - -import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/right.jpg b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/right.jpg deleted file mode 100644 index 1cda9a53d..000000000 Binary files a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-flip/right.jpg and /dev/null differ diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/blank.jpg b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/blank.jpg deleted file mode 100644 index 1cda9a53d..000000000 Binary files a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/blank.jpg and /dev/null differ diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/code.ts deleted file mode 100644 index 19969bc9f..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/code.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { __styles } from '@griffel/react'; -import _asset from './blank.jpg'; -import _asset2 from './empty.jpg'; - -export const useStyles = __styles( - { - root: { - Bcmaq0h: 'fp00rh9', - }, - }, - { - d: [`.fp00rh9{background-image:url(${_asset}),url(${_asset2});}`], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/empty.jpg b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/empty.jpg deleted file mode 100644 index 1cda9a53d..000000000 Binary files a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/empty.jpg and /dev/null differ diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/fs.json deleted file mode 100644 index aa457676b..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/fs.json +++ /dev/null @@ -1 +0,0 @@ -["blank.jpg", "bundle.js", "empty.jpg", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.css deleted file mode 100644 index 54d906aec..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.css +++ /dev/null @@ -1,4 +0,0 @@ -/** griffel.css **/ -.fp00rh9 { - background-image: url(blank.jpg), url(empty.jpg); -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.ts deleted file mode 100644 index 7838dcb13..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { __styles, __css as _css } from '@griffel/react'; -export const useStyles = _css({ - root: { - Bcmaq0h: 'fp00rh9', - }, -}); - -import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/blank.jpg b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/blank.jpg deleted file mode 100644 index 1cda9a53d..000000000 Binary files a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/blank.jpg and /dev/null differ diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/code.ts deleted file mode 100644 index 1c21926ca..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/code.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { __styles } from '@griffel/react'; -import _asset from './blank.jpg'; - -export const useStyles = __styles( - { - root: { - Bcmaq0h: 'fnwsaxv', - }, - }, - { - d: [`.fnwsaxv{background-image:url(${_asset});}`], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/fs.json deleted file mode 100644 index 5e549a74a..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/fs.json +++ /dev/null @@ -1 +0,0 @@ -["blank.jpg", "bundle.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.css deleted file mode 100644 index f592e128b..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.css +++ /dev/null @@ -1,4 +0,0 @@ -/** griffel.css **/ -.fnwsaxv { - background-image: url(blank.jpg); -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.ts deleted file mode 100644 index a70d253f3..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { __styles, __css as _css } from '@griffel/react'; -export const useStyles = _css({ - root: { - Bcmaq0h: 'fnwsaxv', - }, -}); - -import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/code.ts deleted file mode 100644 index 4fe7d29e5..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/code.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { __styles } from '@griffel/react'; - -export const styles = __styles( - { - root: { - sj55zd: 'fe3e8s9', - uwmqm3: ['fycuoez', 'f8wuabp'], - }, - button: { - Bb2z9tl: 0, - Jba18p: 0, - Beesnn6: 0, - irswps: 'f1vilie2', - Bcmaq0h: 0, - B20660r: 0, - Bkjc3bi: 0, - e5kdtc: 0, - gk0gix: 0, - B2eet1l: 0, - Bgh53k4: 0, - De3pzq: 0, - ayd6f0: 'f65sxns', - }, - icon: { - De3pzq: 'fcnqdeg', - Bi91k9c: 'faf35ka', - }, - }, - { - d: [ - '.fe3e8s9{color:red;}', - ['.f1vilie2{border:3px solid red;}', { p: -2 }], - ['.f65sxns{background:green;}', { p: -2 }], - '.fycuoez{padding-left:4px;}', - '.f8wuabp{padding-right:4px;}', - '.fcnqdeg{background-color:green;}', - ], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/fs.json deleted file mode 100644 index 966fca32f..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.css deleted file mode 100644 index 4244a8f59..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.css +++ /dev/null @@ -1,19 +0,0 @@ -/** griffel.css **/ -.f1vilie2 { - border: 3px solid red; -} -.f65sxns { - background: green; -} -.fe3e8s9 { - color: red; -} -.fycuoez { - padding-left: 4px; -} -.f8wuabp { - padding-right: 4px; -} -.fcnqdeg { - background-color: green; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.ts deleted file mode 100644 index f3ef5f7df..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { __styles, __css as _css } from '@griffel/react'; -export const styles = _css({ - root: { - sj55zd: 'fe3e8s9', - uwmqm3: ['fycuoez', 'f8wuabp'], - }, - button: { - Bb2z9tl: 0, - Jba18p: 0, - Beesnn6: 0, - irswps: 'f1vilie2', - Bcmaq0h: 0, - B20660r: 0, - Bkjc3bi: 0, - e5kdtc: 0, - gk0gix: 0, - B2eet1l: 0, - Bgh53k4: 0, - De3pzq: 0, - ayd6f0: 'f65sxns', - }, - icon: { - De3pzq: 'fcnqdeg', - Bi91k9c: 'faf35ka', - }, -}); - -import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt-empty/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt-empty/code.ts deleted file mode 100644 index 878c6cb4f..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt-empty/code.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { __styles } from '@griffel/react'; - -export { __styles as useStyles }; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt-empty/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt-empty/fs.json deleted file mode 100644 index 8cfb87db5..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt-empty/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt-empty/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt-empty/output.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt-empty/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt-empty/output.ts deleted file mode 100644 index b7273b687..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt-empty/output.ts +++ /dev/null @@ -1,2 +0,0 @@ -import { __styles, __css as _css } from '@griffel/react'; -export { __styles as useStyles }; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/code.ts deleted file mode 100644 index 9636f62b4..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/code.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { __styles } from '@griffel/react'; -export const useStyles = __styles( - { - root: { - sj55zd: 'feohi3x', - uwmqm3: ['f1rwgqon', 'f1tyzn0d'], - }, - }, - { - d: ['.feohi3x{color:red;}', '.f1rwgqon{padding-left:4px;}', '.f1tyzn0d{padding-right:4px;}'], - }, -); -/*@griffel:classNameHashSalt "prefix"*/ diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/fs.json deleted file mode 100644 index 966fca32f..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/output.css deleted file mode 100644 index 900bd3f43..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/output.css +++ /dev/null @@ -1,10 +0,0 @@ -/** griffel.css **/ -.feohi3x { - color: red; -} -.f1rwgqon { - padding-left: 4px; -} -.f1tyzn0d { - padding-right: 4px; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/output.ts deleted file mode 100644 index 2be85000b..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-classname-hash-salt/output.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { __styles, __css as _css } from '@griffel/react'; -export const useStyles = _css({ - root: { - sj55zd: 'feohi3x', - uwmqm3: ['f1rwgqon', 'f1tyzn0d'], - }, -}); -/*@griffel:classNameHashSalt "prefix"*/ - -import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/code.ts deleted file mode 100644 index a0165bbae..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/code.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { __styles } from '@griffel/react'; - -export const styles = __styles( - { - root: { - sj55zd: 'fe3e8s9', - }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/fs.json deleted file mode 100644 index b73258515..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js", "griffel.6a29fbe5fff1646cc55d.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/output.css deleted file mode 100644 index f5be2de1a..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/output.css +++ /dev/null @@ -1,4 +0,0 @@ -/** griffel.6a29fbe5fff1646cc55d.css **/ -.fe3e8s9 { - color: red; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-no-split-chunks/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-no-split-chunks/code.ts deleted file mode 100644 index 19dad5066..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-no-split-chunks/code.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { __styles } from '@griffel/react'; - -export const styles = __styles( - { - root: { - sj55zd: 'fe3e8s9', - uwmqm3: ['fycuoez', 'f8wuabp'], - }, - icon: { - De3pzq: 'fcnqdeg', - Bi91k9c: 'faf35ka', - }, - }, - { - d: [ - '.fe3e8s9{color:red;}', - '.fycuoez{padding-left:4px;}', - '.f8wuabp{padding-right:4px;}', - '.fcnqdeg{background-color:green;}', - ], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-no-split-chunks/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-no-split-chunks/fs.json deleted file mode 100644 index 966fca32f..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-no-split-chunks/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-no-split-chunks/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-no-split-chunks/output.css deleted file mode 100644 index f1412ed5e..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-no-split-chunks/output.css +++ /dev/null @@ -1,13 +0,0 @@ -/** griffel.css **/ -.fe3e8s9 { - color: red; -} -.fycuoez { - padding-left: 4px; -} -.f8wuabp { - padding-right: 4px; -} -.fcnqdeg { - background-color: green; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/chunkA.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/chunkA.ts deleted file mode 100644 index ed27c562d..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/chunkA.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { __styles } from '@griffel/react'; - -export default __styles( - { - root: { sj55zd: 'fe3e8s9' }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/chunkB.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/chunkB.ts deleted file mode 100644 index ed27c562d..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/chunkB.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { __styles } from '@griffel/react'; - -export default __styles( - { - root: { sj55zd: 'fe3e8s9' }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/code.ts deleted file mode 100644 index 554aec75e..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/code.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { __styles } from '@griffel/react'; - -export const styles = __styles( - { - root: { - Bi91k9c: 'faf35ka', - }, - }, - { - d: ['.fcnqdeg{background-color:green;}'], - }, -); - -export async function loadStyles() { - const stylesA = await import('./chunkA'); - const stylesB = await import('./chunkB'); - - return [stylesA, stylesB]; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/fs.json deleted file mode 100644 index 201913641..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js", "griffel.css", "split.js"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/output.css deleted file mode 100644 index a4f3fe2d2..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-split-chunks/output.css +++ /dev/null @@ -1,7 +0,0 @@ -/** griffel.css **/ -.fcnqdeg { - background-color: green; -} -.fe3e8s9 { - color: red; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/empty/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/empty/code.ts deleted file mode 100644 index bde294d36..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/empty/code.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { __styles } from '@griffel/react'; - -export const useStyles = __styles( - { - root: {}, - }, - {}, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/empty/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/empty/fs.json deleted file mode 100644 index 8cfb87db5..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/empty/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/empty/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/empty/output.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/empty/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/empty/output.ts deleted file mode 100644 index a12632d88..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/empty/output.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { __styles, __css as _css } from '@griffel/react'; -export const useStyles = _css({ - root: {}, -}); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/missing-calls/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/missing-calls/code.ts deleted file mode 100644 index bb5adbd5b..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/missing-calls/code.ts +++ /dev/null @@ -1 +0,0 @@ -export const foo = '__styles'; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/missing-calls/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/missing-calls/fs.json deleted file mode 100644 index 8cfb87db5..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/missing-calls/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/missing-calls/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/missing-calls/output.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/missing-calls/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/missing-calls/output.ts deleted file mode 100644 index bb5adbd5b..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/missing-calls/output.ts +++ /dev/null @@ -1 +0,0 @@ -export const foo = '__styles'; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/code.ts deleted file mode 100644 index 979f4785c..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/code.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { __resetStyles, __styles } from '@griffel/react'; - -export const useClasses = __styles({ root: { sj55zd: 'fe3e8s9' } }, { d: ['.fe3e8s9{color:red;}'] }); - -export const useClassName = __resetStyles('rjefjbm', 'r7z97ji', [ - '.rjefjbm{color:red;padding-left:4px;}', - '.r7z97ji{color:red;padding-right:4px;}', -]); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/fs.json deleted file mode 100644 index 966fca32f..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.css deleted file mode 100644 index 53761cb90..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.css +++ /dev/null @@ -1,12 +0,0 @@ -/** griffel.css **/ -.rjefjbm { - color: red; - padding-left: 4px; -} -.r7z97ji { - color: red; - padding-right: 4px; -} -.fe3e8s9 { - color: red; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.ts deleted file mode 100644 index f7187a299..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { __resetStyles, __styles, __resetCSS as _resetCSS, __css as _css } from '@griffel/react'; -export const useClasses = _css({ - root: { - sj55zd: 'fe3e8s9', - }, -}); -export const useClassName = _resetCSS('rjefjbm', 'r7z97ji'); - -import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/code.ts deleted file mode 100644 index 62dde060a..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/code.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { __styles } from '@griffel/react'; - -export const stylesA = __styles( - { - root: { - sj55zd: 'fe3e8s9', - }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); - -export const stylesB = __styles( - { - root: { - De3pzq: 'fcnqdeg', - }, - button: { - Bb2z9tl: 0, - Jba18p: 0, - Beesnn6: 0, - irswps: 'f1vilie2', - Bcmaq0h: 0, - B20660r: 0, - Bkjc3bi: 0, - e5kdtc: 0, - gk0gix: 0, - B2eet1l: 0, - Bgh53k4: 0, - De3pzq: 0, - ayd6f0: 'f65sxns', - }, - }, - { - d: [ - '.fcnqdeg{background-color:green;}', - ['.f1vilie2{border:3px solid red;}', { p: -2 }], - ['.f65sxns{background:green;}', { p: -2 }], - ], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/fs.json deleted file mode 100644 index 966fca32f..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.css deleted file mode 100644 index b255ee02a..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.css +++ /dev/null @@ -1,13 +0,0 @@ -/** griffel.css **/ -.f1vilie2 { - border: 3px solid red; -} -.f65sxns { - background: green; -} -.fcnqdeg { - background-color: green; -} -.fe3e8s9 { - color: red; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.ts deleted file mode 100644 index d2d480819..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { __styles, __css as _css } from '@griffel/react'; -export const stylesA = _css({ - root: { - sj55zd: 'fe3e8s9', - }, -}); -export const stylesB = _css({ - root: { - De3pzq: 'fcnqdeg', - }, - button: { - Bb2z9tl: 0, - Jba18p: 0, - Beesnn6: 0, - irswps: 'f1vilie2', - Bcmaq0h: 0, - B20660r: 0, - Bkjc3bi: 0, - e5kdtc: 0, - gk0gix: 0, - B2eet1l: 0, - Bgh53k4: 0, - De3pzq: 0, - ayd6f0: 'f65sxns', - }, -}); - -import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/blank.jpg b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/blank.jpg deleted file mode 100644 index 1cda9a53d..000000000 Binary files a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/blank.jpg and /dev/null differ diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/code.ts deleted file mode 100644 index d10f73c43..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/code.ts +++ /dev/null @@ -1,4 +0,0 @@ -import _asset from './blank.jpg'; -import { __resetStyles } from '@griffel/react'; - -export const useClassName = __resetStyles('ra9m047', null, [`.ra9m047{background-image:url(${_asset});}`]); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/fs.json deleted file mode 100644 index 5e549a74a..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/fs.json +++ /dev/null @@ -1 +0,0 @@ -["blank.jpg", "bundle.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.css deleted file mode 100644 index 4f279e40e..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.css +++ /dev/null @@ -1,4 +0,0 @@ -/** griffel.css **/ -.ra9m047 { - background-image: url(blank.jpg); -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.ts deleted file mode 100644 index 6bf8707a0..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { __resetCSS as _resetCSS } from '@griffel/react'; -import { __resetStyles } from '@griffel/react'; -export const useClassName = _resetCSS('ra9m047', null); - -import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/code.ts deleted file mode 100644 index 161d86249..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/code.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { __resetStyles } from '@griffel/react'; -export const useClassName = __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/webpack-extraction-plugin/__fixtures__/webpack/reset-media/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/fs.json deleted file mode 100644 index 966fca32f..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/output.css deleted file mode 100644 index b8c0f8989..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-media/output.css +++ /dev/null @@ -1,14 +0,0 @@ -/** griffel.css **/ -.rjrhw4c { - color: red; -} -@supports (display: flex) { - .rjrhw4c { - color: pink; - } -} -@media (min-width: 100px) { - .rjrhw4c { - color: blue; - } -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/code.ts deleted file mode 100644 index 8c0b4c5b8..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/code.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { __resetStyles } from '@griffel/react'; -export const useClassName = __resetStyles('rjefjbm', 'r7z97ji', [ - '.rjefjbm{color:red;padding-left:4px;}', - '.r7z97ji{color:red;padding-right:4px;}', -]); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/fs.json deleted file mode 100644 index 966fca32f..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.css deleted file mode 100644 index 9dabdb72b..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.css +++ /dev/null @@ -1,9 +0,0 @@ -/** griffel.css **/ -.rjefjbm { - color: red; - padding-left: 4px; -} -.r7z97ji { - color: red; - padding-right: 4px; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.ts deleted file mode 100644 index d3aeb4dbe..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { __resetStyles, __resetCSS as _resetCSS } from '@griffel/react'; -export const useClassName = _resetCSS('rjefjbm', 'r7z97ji'); - -import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/code.ts deleted file mode 100644 index 202b20d06..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/code.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { __styles } from '@griffel/react'; - -export const styles1 = __styles( - { - root: { - sj55zd: 'fe3e8s9', - uwmqm3: ['fycuoez', 'f8wuabp'], - }, - }, - { - d: ['.fe3e8s9{color:red;}', '.fcnqdeg{background-color:green;}'], - }, -); - -export const styles2 = __styles( - { - root: { - sj55zd: 'fe3e8s9', - uwmqm3: ['fycuoez', 'f8wuabp'], - }, - }, - { - d: ['.fe3e8s9{color:red;}', '.fcnqdeg{background-color:green;}'], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/fs.json deleted file mode 100644 index 966fca32f..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/output.css deleted file mode 100644 index 8325d4dab..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/output.css +++ /dev/null @@ -1,7 +0,0 @@ -/** griffel.css **/ -.fe3e8s9 { - color: red; -} -.fcnqdeg { - background-color: green; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/static-assets/blank.jpg b/packages/webpack-extraction-plugin/__fixtures__/webpack/static-assets/blank.jpg deleted file mode 100644 index 1cda9a53d..000000000 Binary files a/packages/webpack-extraction-plugin/__fixtures__/webpack/static-assets/blank.jpg and /dev/null differ diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/static-assets/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/static-assets/code.ts deleted file mode 100644 index 0a30b6f41..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/static-assets/code.ts +++ /dev/null @@ -1,6 +0,0 @@ -import _asset from './blank.jpg'; -import { __staticStyles } from '@griffel/react'; - -export const useStaticStyles = __staticStyles({ - d: [`@font-face{font-family:TestFont;src:url(${_asset}) format("woff2");}`], -}); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/static-assets/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/static-assets/fs.json deleted file mode 100644 index 5e549a74a..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/static-assets/fs.json +++ /dev/null @@ -1 +0,0 @@ -["blank.jpg", "bundle.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/static-assets/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/static-assets/output.css deleted file mode 100644 index 0c1cef698..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/static-assets/output.css +++ /dev/null @@ -1,5 +0,0 @@ -/** griffel.css **/ -@font-face { - font-family: TestFont; - src: url(blank.jpg) format('woff2'); -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/static-assets/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/static-assets/output.ts deleted file mode 100644 index 4c8ec805c..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/static-assets/output.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { __staticCSS as _staticCSS } from '@griffel/react'; -import { __staticStyles } from '@griffel/react'; -export const useStaticStyles = _staticCSS(); - -import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/code.ts deleted file mode 100644 index a21174b0a..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/code.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { __styles } from '@griffel/react'; - -export const styles = __styles( - {}, - // Classes in this test are intentionally not realistic to simplify snapshots - { - d: ['.color-red { color: red; }', '.animation-name { animation-name: foo; }'], - l: ['.color-orange:link { color: orange; }'], - v: ['.color-purple:visited { color: purple; }'], - w: ['.color-pink:focus-within { color: pink; }'], - f: ['.color-blue:focus { color: blue; }'], - i: ['.color-light-blue:focus-visible { color: salmon; }'], - h: ['.color-yellow:hover { color: yellow; }'], - a: ['.color-black:active { color: black; }'], - k: ['@keyframes foo { from{ transform:rotate(0deg); } to { transform:rotate(360deg); } }'], - t: ['@supports (display: table-cell){.foo{color:red;}}', '@layer color {.f1hjcal7 {color: red;}}'], - m: [ - [ - '@media (forced-colors: active) { .color-magenta { color: magenta; } }', - { - m: '(forced-colors: active)', - }, - ], - ], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/fs.json deleted file mode 100644 index 966fca32f..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/output.css deleted file mode 100644 index cbd8c2c7b..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/output.css +++ /dev/null @@ -1,51 +0,0 @@ -/** griffel.css **/ -.color-red { - color: red; -} -.animation-name { - animation-name: foo; -} -.color-orange:link { - color: orange; -} -.color-purple:visited { - color: purple; -} -.color-pink:focus-within { - color: pink; -} -.color-blue:focus { - color: blue; -} -.color-light-blue:focus-visible { - color: salmon; -} -.color-yellow:hover { - color: yellow; -} -.color-black:active { - color: black; -} -@keyframes foo { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} -@supports (display: table-cell) { - .foo { - color: red; - } -} -@layer color { - .f1hjcal7 { - color: red; - } -} -@media (forced-colors: active) { - .color-magenta { - color: magenta; - } -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/code.ts deleted file mode 100644 index ba5037766..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/code.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { __styles } from '@griffel/react'; - -export const useClasses = __styles( - { - root: { - sj55zd: 'fe3e8s9', - }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/codeB.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/codeB.ts deleted file mode 100644 index 744d2f766..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/codeB.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { __styles } from '@griffel/react'; - -export const useClasses = __styles( - { - root: { - Bi91k9c: 'faf35ka', - }, - }, - { - h: ['.faf35ka:hover{color:red;}'], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/fs.json deleted file mode 100644 index 7924251a3..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js", "bundleB.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/output.css deleted file mode 100644 index 0c56b4e13..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/output.css +++ /dev/null @@ -1,7 +0,0 @@ -/** griffel.css **/ -.fe3e8s9 { - color: red; -} -.faf35ka:hover { - color: red; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/output.ts deleted file mode 100644 index 30794fd00..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-attach-to-main/output.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { __styles, __css as _css } from '@griffel/react'; -export const useClasses = _css({ - root: { - sj55zd: 'fe3e8s9', - }, -}); - -import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-keep-original-code/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-keep-original-code/code.ts deleted file mode 100644 index 65a7c27dc..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-keep-original-code/code.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { __resetStyles, __styles } from '@griffel/react'; - -export const useClasses = __styles( - { - root: { - sj55zd: 'fe3e8s9', - }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); - -export const useClassName = __resetStyles('rjefjbm', 'r7z97ji', [ - '.rjefjbm{color:red;padding-left:4px;}', - '.r7z97ji{color:red;padding-right:4px;}', -]); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-keep-original-code/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-keep-original-code/fs.json deleted file mode 100644 index 966fca32f..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-keep-original-code/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-keep-original-code/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-keep-original-code/output.css deleted file mode 100644 index 53761cb90..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-keep-original-code/output.css +++ /dev/null @@ -1,12 +0,0 @@ -/** griffel.css **/ -.rjefjbm { - color: red; - padding-left: 4px; -} -.r7z97ji { - color: red; - padding-right: 4px; -} -.fe3e8s9 { - color: red; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-keep-original-code/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-keep-original-code/output.ts deleted file mode 100644 index 6044a324c..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/unstable-keep-original-code/output.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { __resetStyles, __styles } from '@griffel/react'; - -export const useClasses = __styles( - { - root: { - sj55zd: 'fe3e8s9', - }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); - -export const useClassName = __resetStyles('rjefjbm', 'r7z97ji', [ - '.rjefjbm{color:red;padding-left:4px;}', - '.r7z97ji{color:red;padding-right:4px;}', -]); - -import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts'; diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkA.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkA.css deleted file mode 100644 index 7c0edcc72..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkA.css +++ /dev/null @@ -1,6 +0,0 @@ -.foo { - color: red; -} -.bar { - color: yellow; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkA.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkA.ts deleted file mode 100644 index 30eb1b9d1..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkA.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { __styles } from '@griffel/react'; -import './chunkA.css'; - -export const styles = __styles( - { - root: { sj55zd: 'fe3e8s9' }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkB.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkB.css deleted file mode 100644 index edf0e1979..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkB.css +++ /dev/null @@ -1,3 +0,0 @@ -.baz { - color: blue; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkB.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkB.ts deleted file mode 100644 index 348196476..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkB.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { __styles } from '@griffel/react'; -import './chunkB.css'; - -export const styles = __styles( - { - root: { sj55zd: 'fe3e8s9' }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/code.ts deleted file mode 100644 index 11f3c3d66..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/code.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { __styles } from '@griffel/react'; - -export const styles = __styles( - { - root: { - Bi91k9c: 'faf35ka', - }, - }, - { - d: ['.fcnqdeg{background-color:green;}'], - }, -); - -export async function loadStyles() { - const { styles: stylesA } = await import( - /* webpackChunkName: "chunkA" */ - './chunkA' - ); - const { styles: stylesB } = await import( - /* webpackChunkName: "chunkB" */ - './chunkB' - ); - - return [stylesA, stylesB]; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/fs.json deleted file mode 100644 index dd9a60023..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.js", "chunkA.css", "chunkA.js", "chunkB.css", "chunkB.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/output.css deleted file mode 100644 index 4e2400027..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/output.css +++ /dev/null @@ -1,20 +0,0 @@ -/** chunkA.css **/ -.foo { - color: red; -} -.bar { - color: yellow; -} - -/** chunkB.css **/ -.baz { - color: blue; -} - -/** griffel.css **/ -.fcnqdeg { - background-color: green; -} -.fe3e8s9 { - color: red; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/code.ts deleted file mode 100644 index 859da150b..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/code.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { __styles } from '@griffel/react'; -import './input.css'; - -export const styles1 = __styles( - { - root: { sj55zd: 'fe3e8s9' }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/fs.json deleted file mode 100644 index 0d27c81f0..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/fs.json +++ /dev/null @@ -1 +0,0 @@ -["bundle.css", "bundle.js", "griffel.css"] diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/input.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/input.css deleted file mode 100644 index 7c0edcc72..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/input.css +++ /dev/null @@ -1,6 +0,0 @@ -.foo { - color: red; -} -.bar { - color: yellow; -} diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/output.css deleted file mode 100644 index 3b4f7c2bf..000000000 --- a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/output.css +++ /dev/null @@ -1,12 +0,0 @@ -/** bundle.css **/ -.foo { - color: red; -} -.bar { - color: yellow; -} - -/** griffel.css **/ -.fe3e8s9 { - color: red; -} diff --git a/packages/webpack-extraction-plugin/jest.config.ts b/packages/webpack-extraction-plugin/jest.config.ts deleted file mode 100644 index 9f5f3fc5d..000000000 --- a/packages/webpack-extraction-plugin/jest.config.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable */ -export default { - displayName: 'webpack-extraction-plugin', - preset: '../../jest.preset.js', - globals: {}, - testEnvironment: 'node', - transform: { - '^.+\\.[tj]sx?$': [ - 'ts-jest', - { - tsconfig: '/tsconfig.spec.json', - }, - ], - }, - moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], - coverageDirectory: '../../coverage/packages/webpack-loader', -}; diff --git a/packages/webpack-extraction-plugin/package.json b/packages/webpack-extraction-plugin/package.json deleted file mode 100644 index 41f4069a0..000000000 --- a/packages/webpack-extraction-plugin/package.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "name": "@griffel/webpack-extraction-plugin", - "version": "0.5.14", - "description": "Webpack plugin that performs CSS extraction for Griffel", - "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/microsoft/griffel" - }, - "dependencies": { - "@babel/core": "^7.23.2", - "@babel/helper-module-imports": "^7.22.15", - "@babel/helper-plugin-utils": "^7.22.5", - "@griffel/core": "^1.20.1", - "stylis": "^4.2.0", - "tslib": "^2.1.0" - }, - "peerDependencies": { - "webpack": "^5" - } -} diff --git a/packages/webpack-extraction-plugin/project.json b/packages/webpack-extraction-plugin/project.json deleted file mode 100644 index a2de6bf23..000000000 --- a/packages/webpack-extraction-plugin/project.json +++ /dev/null @@ -1,56 +0,0 @@ -{ - "name": "@griffel/webpack-extraction-plugin", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "packages/webpack-extraction-plugin/src", - "projectType": "library", - "tags": [], - "targets": { - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"] - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/packages/webpack-extraction-plugin"], - "options": { - "jestConfig": "packages/webpack-extraction-plugin/jest.config.ts" - } - }, - "build": { - "executor": "@nx/js:tsc", - "outputs": ["{options.outputPath}"], - "options": { - "outputPath": "dist/packages/webpack-extraction-plugin", - "tsConfig": "packages/webpack-extraction-plugin/tsconfig.lib.json", - "skipTypeField": true, - "packageJson": "packages/webpack-extraction-plugin/package.json", - "main": "packages/webpack-extraction-plugin/src/index.ts", - "assets": [ - "packages/webpack-extraction-plugin/README.md", - { - "glob": "LICENSE.md", - "input": ".", - "output": "." - }, - { - "glob": "*.(css|js)", - "input": "packages/webpack-extraction-plugin/virtual-loader", - "output": "./virtual-loader" - } - ] - } - }, - "type-check": { - "executor": "nx:run-commands", - "options": { - "cwd": "packages/webpack-extraction-plugin", - "commands": [ - { - "command": "tsc -b --pretty" - } - ] - }, - "outputs": [] - } - } -} diff --git a/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts b/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts deleted file mode 100644 index 76d562017..000000000 --- a/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts +++ /dev/null @@ -1,366 +0,0 @@ -import * as fs from 'fs'; -import { createFsFromVolume, Volume } from 'memfs'; -import * as MiniCssExtractPlugin from 'mini-css-extract-plugin'; -import * as path from 'path'; -import * as prettier from 'prettier'; -import * as webpack from 'webpack'; -import { merge } from 'webpack-merge'; - -import type { GriffelCSSExtractionPluginOptions } from './GriffelCSSExtractionPlugin'; -import { GriffelCSSExtractionPlugin } from './GriffelCSSExtractionPlugin'; -import type { WebpackLoaderOptions } from './webpackLoader'; - -type TestOptions = { - only?: boolean; - - cssFilename?: string; - loaderOptions?: WebpackLoaderOptions; - pluginOptions?: GriffelCSSExtractionPluginOptions; - webpackConfig?: webpack.Configuration; -}; - -const prettierConfig = JSON.parse( - fs.readFileSync(path.resolve(__dirname, '../../../.prettierrc'), { encoding: 'utf-8' }), -); - -async function compileSourceWithWebpack( - entryPath: string, - options: TestOptions, -): Promise<{ - filesList: string[]; - cssOutput: string; - moduleSource: string; -}> { - const defaultConfig: webpack.Configuration = { - context: __dirname, - entry: { - bundle: entryPath, - }, - - mode: 'production', - devtool: false, - - output: { - path: path.resolve(__dirname), - filename: '[name].js', - pathinfo: false, - assetModuleFilename: '[name][ext]', - }, - externals: { - '@griffel/react': 'Griffel', - }, - - module: { - rules: [ - { - test: /\.(ts|tsx)$/, - include: path.dirname(entryPath), - use: { - loader: GriffelCSSExtractionPlugin.loader, - options: options.loaderOptions, - }, - }, - { - test: /\.css$/, - use: [MiniCssExtractPlugin.loader, { loader: 'css-loader' }], - }, - { - test: /\.jpg$/, - type: 'asset/resource', - }, - ], - }, - plugins: [ - new GriffelCSSExtractionPlugin(options.pluginOptions), - new MiniCssExtractPlugin({ - filename: options.cssFilename ?? '[name].css', - }), - ], - - optimization: { - concatenateModules: false, - minimizer: [], - }, - resolve: { - extensions: ['.js', '.ts'], - }, - }; - - const webpackConfig = merge(defaultConfig, options.webpackConfig || {}); - const compiler = webpack(webpackConfig); - const virtualFsVolume = createFsFromVolume(new Volume()); - - compiler.outputFileSystem = virtualFsVolume as unknown as NonNullable; - compiler.outputFileSystem.join = path.join.bind(path); - - return new Promise((resolve, reject) => { - compiler.run((err, stats) => { - if (err) { - reject(err); - return; - } - - if (typeof stats === 'undefined') { - reject(new Error('"stats" from Webpack are not available, unknown error...')); - return; - } - - const jsonStats = stats.toJson({ source: true }); - - if (stats.hasErrors()) { - reject(stats.toJson().errors![0]); - return; - } - - if (stats.hasWarnings()) { - reject(stats.toJson().warnings![0]); - return; - } - - if (!Array.isArray(jsonStats.modules)) { - reject(new Error(`"stats.toJson().modules" should be an array, this could be a compilation error...`)); - return; - } - - const entryModule = jsonStats.modules.find(module => module.nameForCondition === entryPath); - - if (!entryModule) { - reject(new Error(`Failed to find a fixture in "stats.toJson().modules", this could be a compilation error...`)); - return; - } - - const filesList = (virtualFsVolume.readdirSync(__dirname) as string[]).sort(); - const cssOutput = filesList - .filter(filename => filename.includes('.css')) - .map(filename => { - return ( - '\n' + - `/** ${path.basename(filename)} **/` + - '\n' + - virtualFsVolume.readFileSync(path.resolve(__dirname, filename), { - encoding: 'utf-8', - }) - ); - }) - .join(''); - - resolve({ - cssOutput, - filesList, - moduleSource: entryModule.source as string, - }); - }); - }); -} - -function fixLineEndings(value: string) { - return String(value).replace(/\r?\n/g, '\n').trim(); -} - -/** - * Test utility similar to "babel-plugin-tester". - * - * See https://webpack.js.org/contribute/writing-a-loader/#testing. - */ -function testFixture(fixtureName: string, options: TestOptions = {}) { - (options.only ? it.only : it)( - `"${fixtureName}" fixture`, - async () => { - const fixturePath = path.resolve(__dirname, '..', '__fixtures__', 'webpack', fixtureName); - - const tsCodePath = path.resolve(fixturePath, 'code.ts'); - const tsxCodePath = path.resolve(fixturePath, 'code.tsx'); - - const tsOutputPath = path.resolve(fixturePath, 'output.ts'); - const tsxOutputPath = path.resolve(fixturePath, 'output.tsx'); - - const inputPath = [fs.existsSync(tsCodePath) && tsCodePath, fs.existsSync(tsxCodePath) && tsxCodePath].find( - Boolean, - ); - const outputPath = [ - fs.existsSync(tsOutputPath) && tsOutputPath, - fs.existsSync(tsxOutputPath) && tsxOutputPath, - ].find(Boolean); - - const errorPath = path.resolve(fixturePath, 'error.ts'); - const expectedError = fs.existsSync(errorPath) && require(errorPath); - - const fsSnapshotPath = path.resolve(fixturePath, 'fs.json'); - const cssOutputPath = path.resolve(fixturePath, 'output.css'); - - if (!inputPath) { - throw new Error(`Failed to find "code.{js,ts,tsx}" in "${fixturePath}"`); - } - - if (!fs.existsSync(fsSnapshotPath)) { - throw new Error(`Failed to find "fs.json" in "${fixturePath}"`); - } - - if (!fs.existsSync(cssOutputPath)) { - throw new Error(`Failed to find "output.css" in "${fixturePath}"`); - } - - if (!cssOutputPath && !expectedError) { - throw new Error(`Failed to find "output.css" or "error.ts" in "${fixturePath}"`); - } - - if (expectedError) { - if (!expectedError.default) { - throw new Error( - `Please check that "error.ts" contains a default export with an error or regex in "${fixturePath}"`, - ); - } - } - - let resultModule = ''; - let resultCSS = ''; - let resultFsSnapshot: string[] = []; - - let resultError: Error | webpack.StatsError = new Error(); - - try { - const result = await compileSourceWithWebpack(inputPath, options); - - resultModule = fixLineEndings( - prettier.format(result.moduleSource, { - ...prettierConfig, - parser: 'typescript', - }), - ); - resultCSS = fixLineEndings( - prettier.format(result.cssOutput, { - ...prettierConfig, - parser: 'css', - }), - ); - resultFsSnapshot = result.filesList; - } catch (err) { - if (expectedError) { - resultError = err as webpack.StatsError; - } else { - throw err; - } - } - - const fsSnapshot = JSON.parse(await fs.promises.readFile(fsSnapshotPath, { encoding: 'utf8' })); - expect(resultFsSnapshot).toMatchObject(fsSnapshot); - - if (outputPath) { - const moduleOutput = fixLineEndings(await fs.promises.readFile(outputPath, { encoding: 'utf8' })); - - expect(resultModule).toBe(moduleOutput); - } - - if (cssOutputPath) { - const cssOutput = fixLineEndings(await fs.promises.readFile(cssOutputPath, { encoding: 'utf8' })); - - expect(resultCSS).toBe(cssOutput); - } - - if (expectedError) { - expect(resultError.message).toMatch(expectedError.default); - } - }, - 15000, - ); -} - -describe('GriffelCSSExtractionPlugin', () => { - // Basic assertions - // -------------------- - testFixture('basic-rules'); - testFixture('reset'); - testFixture('reset-media'); - testFixture('mixed'); - testFixture('empty'); - - // Ensures that a file without __styles calls remains unprocessed - testFixture('missing-calls'); - - // Multiple calls of __styles - testFixture('multiple'); - - // Deduplicate rules in stylesheet - testFixture('rules-deduplication'); - - // Sorting rules by buckets - testFixture('style-buckets'); - - // Assets - // -------------------- - testFixture('assets'); - testFixture('assets-flip'); - testFixture('assets-multiple'); - testFixture('reset-assets'); - testFixture('static-assets'); - - // Config - // -------------------- - - // Custom filenames in mini-css-extract-plugin - testFixture('config-name', { cssFilename: '[name].[contenthash].css' }); - - // Custom classNameHashSalt validation - testFixture('config-classname-hash-salt', { - loaderOptions: { - classNameHashSalt: 'prefix', - }, - }); - testFixture('config-classname-hash-salt-empty', { - loaderOptions: { - classNameHashSalt: 'prefix', - }, - }); - - // Config that disables SplitChunksPlugin - testFixture('config-no-split-chunks', { - webpackConfig: { - optimization: { - splitChunks: false, - }, - }, - }); - - // Config that forces chunk splitting - testFixture('config-split-chunks', { - webpackConfig: { - optimization: { - splitChunks: { - cacheGroups: { - styles: { - enforce: true, - name: 'split', - test: /chunk[A|B]/, - chunks: 'all', - }, - }, - }, - }, - }, - }); - - // Compatibility - // -------------------- - - // "pathinfo" adds comments with paths to output - testFixture('basic-rules', { webpackConfig: { output: { pathinfo: true } } }); - - // With existing CSS - testFixture('with-css'); - - // Chunks - // -------------------- - testFixture('with-chunks'); - - // Unstable - // -------------------- - testFixture('unstable-attach-to-main', { - pluginOptions: { unstable_attachToEntryPoint: 'main' }, - webpackConfig: { - entry: { - bundleB: path.resolve(__dirname, '..', '__fixtures__', 'webpack', 'unstable-attach-to-main', 'codeB.ts'), - }, - }, - }); - testFixture('unstable-keep-original-code', { loaderOptions: { unstable_keepOriginalCode: true } }); -}); diff --git a/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.ts b/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.ts deleted file mode 100644 index 4a5f7895c..000000000 --- a/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.ts +++ /dev/null @@ -1,279 +0,0 @@ -import type { GriffelRenderer } from '@griffel/core'; -import { defaultCompareMediaQueries } from '@griffel/core'; -import type { Compilation, Chunk, Compiler, Module, sources } from 'webpack'; - -import { getBundlerRuntime } from './getBundlerRuntime'; -import { parseCSSRules } from './parseCSSRules'; -import { sortCSSRules } from './sortCSSRules'; -import { PLUGIN_NAME, GriffelCssLoaderContextKey, type SupplementedLoaderContext } from './constants'; - -// Webpack does not export these constants -// https://github.com/webpack/webpack/blob/b67626c7b4ffed8737d195b27c8cea1e68d58134/lib/OptimizationStages.js#L8 -const OPTIMIZE_CHUNKS_STAGE_ADVANCED = 10; - -type EntryPoint = Compilation['entrypoints'] extends Map ? I : never; - -export type GriffelCSSExtractionPluginOptions = { - compareMediaQueries?: GriffelRenderer['compareMediaQueries']; - - /** Specifies if the CSS extracted from Griffel calls should be attached to a specific chunk with an entrypoint. */ - unstable_attachToEntryPoint?: string | ((chunk: EntryPoint) => boolean); -}; - -function attachGriffelChunkToAnotherChunk( - compilation: Compilation, - griffelChunk: Chunk, - attachToEntryPoint: string | ((chunk: EntryPoint) => boolean), -) { - const entryPoints = Array.from(compilation.entrypoints.values()); - - if (entryPoints.length === 0) { - return; - } - - const searchFn = - typeof attachToEntryPoint === 'string' - ? (chunk: EntryPoint) => chunk.name === attachToEntryPoint - : attachToEntryPoint; - const mainEntryPoint = entryPoints.find(searchFn) ?? entryPoints[0]; - const targetChunk = mainEntryPoint.getEntrypointChunk(); - - targetChunk.split(griffelChunk); -} - -function getAssetSourceContents(assetSource: sources.Source): string { - const source = assetSource.source(); - - if (typeof source === 'string') { - return source; - } - - return source.toString(); -} - -// https://github.com/webpack-contrib/mini-css-extract-plugin/blob/26334462e419026086856787d672b052cd916c62/src/index.js#L90 -type CSSModule = Module & { - content: Buffer; -}; - -function isCSSModule(module: Module): module is CSSModule { - return module.type === 'css/mini-extract'; -} - -function isGriffelCSSModule(module: Module): boolean { - if (isCSSModule(module)) { - if (Buffer.isBuffer(module.content)) { - const content = module.content.toString('utf-8'); - - return content.indexOf('/** @griffel:css-start') !== -1; - } - } - - return false; -} - -function moveCSSModulesToGriffelChunk(compilation: Compilation) { - let griffelChunk = compilation.namedChunks.get('griffel'); - - if (!griffelChunk) { - griffelChunk = compilation.addChunk('griffel'); - } - - const matchingChunks = new Set(); - let moduleIndex = 0; - - for (const module of compilation.modules) { - if (isGriffelCSSModule(module)) { - const moduleChunks = compilation.chunkGraph.getModuleChunksIterable(module); - - for (const chunk of moduleChunks) { - compilation.chunkGraph.disconnectChunkAndModule(chunk, module); - - for (const group of chunk.groupsIterable) { - group.setModulePostOrderIndex(module, moduleIndex++); - } - - matchingChunks.add(chunk); - } - - compilation.chunkGraph.connectChunkAndModule(griffelChunk, module); - } - } - - for (const chunk of matchingChunks) { - chunk.split(griffelChunk); - } -} - -export class GriffelCSSExtractionPlugin { - static loader = require.resolve('./webpackLoader'); - - private readonly attachToEntryPoint: GriffelCSSExtractionPluginOptions['unstable_attachToEntryPoint']; - private readonly compareMediaQueries: NonNullable; - - constructor(options?: GriffelCSSExtractionPluginOptions) { - this.attachToEntryPoint = options?.unstable_attachToEntryPoint; - this.compareMediaQueries = options?.compareMediaQueries ?? defaultCompareMediaQueries; - } - - apply(compiler: Compiler): void { - const IS_RSPACK = Object.prototype.hasOwnProperty.call(compiler.webpack, 'rspackVersion'); - const { Compilation, NormalModule } = getBundlerRuntime(IS_RSPACK ? 'rspack' : 'webpack'); - - // WHAT? - // Prevents ".griffel.css" files from being tree shaken by forcing "sideEffects" setting. - // WHY? - // The extraction loader adds `import ""` statements that trigger virtual loader. Modules created by this loader - // will have paths relative to source file. To identify what files have side effects Webpack relies on - // "sideEffects" field in "package.json" and NPM packages usually have "sideEffects: false" that will trigger - // Webpack to shake out generated CSS. - - // @ Rspack compat: - // "createModule" in "normalModuleFactory" is not supported by Rspack - // https://github.com/web-infra-dev/rspack/blob/e52601e059fff1f0cdc4e9328746fb3ae6c3ecb2/packages/rspack/src/NormalModuleFactory.ts#L53 - if (!IS_RSPACK) { - compiler.hooks.normalModuleFactory.tap(PLUGIN_NAME, nmf => { - nmf.hooks.createModule.tap( - PLUGIN_NAME, - // @ts-expect-error CreateData is typed as 'object'... - (createData: { matchResource?: string; settings: { sideEffects?: boolean } }) => { - if (createData.matchResource && createData.matchResource.endsWith('.griffel.css')) { - createData.settings.sideEffects = true; - } - }, - ); - }); - } - - // WHAT? - // Forces all modules emitted by an extraction loader to be moved in a single chunk by SplitChunksPlugin config. - // WHY? - // We need to sort CSS rules in the same order as it's done via style buckets. It's not possible in multiple - // chunks. - if (compiler.options.optimization.splitChunks) { - compiler.options.optimization.splitChunks.cacheGroups ??= {}; - compiler.options.optimization.splitChunks.cacheGroups['griffel'] = { - name: 'griffel', - // @ Rspack compat: - // Rspack does not support functions in test due performance concerns - // https://github.com/web-infra-dev/rspack/issues/3425#issuecomment-1577890202 - test: IS_RSPACK ? /griffel\.css/ : isGriffelCSSModule, - chunks: 'all', - enforce: true, - }; - } - - compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => { - // @ Rspack compat - // As Rspack does not support functions in "splitChunks.cacheGroups" we have to emit modules differently - // and can't rely on this approach due - if (!IS_RSPACK) { - // WHAT? - // Adds a callback to the loader context - // WHY? - // Allows us to register the CSS extracted from Griffel calls to then process in a CSS module - const cssByModuleMap = new Map(); - - NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, module) => { - const resourcePath = module.resource; - - (loaderContext as SupplementedLoaderContext)[GriffelCssLoaderContextKey] = { - registerExtractedCss(css: string) { - cssByModuleMap.set(resourcePath, css); - }, - getExtractedCss() { - const css = cssByModuleMap.get(resourcePath) ?? ''; - cssByModuleMap.delete(resourcePath); - - return css; - }, - }; - }); - } - - // WHAT? - // Performs module movements between chunks if SplitChunksPlugin is not enabled. - // WHY? - // The same reason as for SplitChunksPlugin config. - if (!compiler.options.optimization.splitChunks) { - // @ Rspack compat - // Rspack does not support adding chunks in the same as Webpack, we force usage of "optimization.splitChunks" - if (IS_RSPACK) { - throw new Error( - [ - 'You are using Rspack, but don\'t have "optimization.splitChunks" enabled.', - '"optimization.splitChunks" should be enabled for "@griffel/webpack-extraction-plugin" to function properly.', - ].join(' '), - ); - } - - compilation.hooks.optimizeChunks.tap({ name: PLUGIN_NAME, stage: OPTIMIZE_CHUNKS_STAGE_ADVANCED }, () => { - moveCSSModulesToGriffelChunk(compilation); - }); - } - - // WHAT? - // Disconnects Griffel chunk from other chunks, so Griffel chunk cannot be loaded async. Also connects with - // the specified chunk. - // WHY? - // This is scenario required by one of MS teams. Will be removed in the future. - if (this.attachToEntryPoint) { - // @ Rspack compat - // We don't support this scenario for Rspack yet. - if (IS_RSPACK) { - throw new Error('You are using Rspack, "attachToMainEntryPoint" option is supported only with Webpack.'); - } - - compilation.hooks.optimizeChunks.tap({ name: PLUGIN_NAME, stage: OPTIMIZE_CHUNKS_STAGE_ADVANCED }, () => { - const griffelChunk = compilation.namedChunks.get('griffel'); - - if (typeof griffelChunk !== 'undefined') { - griffelChunk.disconnectFromGroups(); - attachGriffelChunkToAnotherChunk(compilation, griffelChunk, this.attachToEntryPoint!); - } - }); - } - - // WHAT? - // Takes a CSS file from Griffel chunks and sorts CSS inside it. - compilation.hooks.processAssets.tap( - { - name: PLUGIN_NAME, - stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS, - }, - assets => { - let cssAssetDetails; - - // @ Rspack compat - // "compilation.namedChunks.get()" explodes with Rspack - if (IS_RSPACK) { - cssAssetDetails = Object.entries(assets).find( - ([assetName]) => assetName.endsWith('.css') && assetName.includes('griffel'), - ); - } else { - const griffelChunk = compilation.namedChunks.get('griffel'); - - if (typeof griffelChunk === 'undefined') { - return; - } - - cssAssetDetails = Object.entries(assets).find(([assetName]) => griffelChunk.files.has(assetName)); - } - - if (typeof cssAssetDetails === 'undefined') { - return; - } - - const [cssAssetName, cssAssetSource] = cssAssetDetails; - - const cssContent = getAssetSourceContents(cssAssetSource); - const { cssRulesByBucket, remainingCSS } = parseCSSRules(cssContent); - - const cssSource = sortCSSRules([cssRulesByBucket], this.compareMediaQueries); - - compilation.updateAsset(cssAssetName, new compiler.webpack.sources.RawSource(remainingCSS + cssSource)); - }, - ); - }); - } -} diff --git a/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.test.ts b/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.test.ts deleted file mode 100644 index 73d1e9f98..000000000 --- a/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.test.ts +++ /dev/null @@ -1,73 +0,0 @@ -import pluginTester, { prettierFormatter } from 'babel-plugin-tester'; -import * as fs from 'fs'; -import * as path from 'path'; - -import { babelPluginStripGriffelRuntime } from './babelPluginStripGriffelRuntime'; - -const prettierConfig = JSON.parse( - fs.readFileSync(path.resolve(__dirname, '../../../.prettierrc'), { encoding: 'utf-8' }), -); -const fixturesDir = path.join(__dirname, '..', '__fixtures__', 'babel'); - -pluginTester({ - babelOptions: { - parserOpts: { - plugins: ['typescript'], - }, - }, - formatResult: code => - prettierFormatter(code, { - prettierOptions: { - ...prettierConfig, - parser: 'typescript', - }, - }), - - tests: [ - // 🎩 Tip: use "only: true" to run a single test - // https://github.com/babel-utils/babel-plugin-tester#only - // - - { - title: 'basic (makeStyles)', - fixture: path.resolve(fixturesDir, 'basic', 'code.ts'), - outputFixture: path.resolve(fixturesDir, 'basic', 'output.ts'), - }, - { - title: 'basic (makeResetStyles)', - fixture: path.resolve(fixturesDir, 'reset', 'code.ts'), - outputFixture: path.resolve(fixturesDir, 'reset', 'output.ts'), - }, - - { - title: 'multiple declarations (makeStyles)', - fixture: path.resolve(fixturesDir, 'multiple', 'code.ts'), - outputFixture: path.resolve(fixturesDir, 'multiple', 'output.ts'), - }, - { - title: 'mixed (makeStyles + makeResetStyles)', - fixture: path.resolve(fixturesDir, 'mixed', 'code.ts'), - outputFixture: path.resolve(fixturesDir, 'mixed', 'output.ts'), - }, - - { - title: 'alias imports (makeStyles)', - fixture: path.resolve(fixturesDir, 'alias', 'code.ts'), - outputFixture: path.resolve(fixturesDir, 'alias', 'output.ts'), - }, - - { - title: 'basic (makeStaticStyles)', - fixture: path.resolve(fixturesDir, 'static', 'code.ts'), - outputFixture: path.resolve(fixturesDir, 'static', 'output.ts'), - }, - { - title: 'mixed (makeStyles + makeStaticStyles)', - fixture: path.resolve(fixturesDir, 'static-mixed', 'code.ts'), - outputFixture: path.resolve(fixturesDir, 'static-mixed', 'output.ts'), - }, - ], - - plugin: babelPluginStripGriffelRuntime, - pluginName: '@griffel/webpack-extraction-plugin/babel', -}); diff --git a/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts b/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts deleted file mode 100644 index 661dfc54b..000000000 --- a/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts +++ /dev/null @@ -1,248 +0,0 @@ -import { types as t } from '@babel/core'; -import type { NodePath, PluginObj, PluginPass } from '@babel/core'; -import { addNamed } from '@babel/helper-module-imports'; -import { declare } from '@babel/helper-plugin-utils'; -import type { CSSRulesByBucket } from '@griffel/core'; - -type StripRuntimeBabelPluginOptions = Record; - -type FunctionKinds = '__styles' | '__resetStyles' | '__staticStyles'; - -type StripRuntimeBabelPluginState = PluginPass & { - cssRulesByBucket?: CSSRulesByBucket; -}; - -export type StripRuntimeBabelPluginMetadata = { - cssRulesByBucket?: CSSRulesByBucket; -}; - -function concatCSSRulesByBucket(bucketA: CSSRulesByBucket = {}, bucketB: CSSRulesByBucket) { - Object.entries(bucketB).forEach(([cssBucketName, cssBucketEntries]) => { - bucketA[cssBucketName as keyof CSSRulesByBucket] = cssBucketEntries.concat( - bucketA[cssBucketName as keyof CSSRulesByBucket] || [], - ); - }); - - return bucketA; -} - -function evaluateAndUpdateArgument( - argumentPath: NodePath | NodePath, - functionKind: FunctionKinds, - state: StripRuntimeBabelPluginState, -) { - // Returns the styles as a JavaScript object - const evaluationResult = argumentPath.evaluate(); - - if (!evaluationResult.confident) { - throw argumentPath.buildCodeFrameError( - [ - `Failed to evaluate CSS rules from "${functionKind}" call.`, - 'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens', - ].join(' '), - ); - } - - if (functionKind === '__styles') { - const cssRulesByBucket = evaluationResult.value as CSSRulesByBucket; - - state.cssRulesByBucket = concatCSSRulesByBucket(state.cssRulesByBucket, cssRulesByBucket); - } else if (functionKind === '__resetStyles') { - const cssRules = evaluationResult.value as CSSRulesByBucket | string[]; - - state.cssRulesByBucket = concatCSSRulesByBucket( - state.cssRulesByBucket, - Array.isArray(cssRules) ? { r: cssRules } : cssRules, - ); - } else if (functionKind === '__staticStyles') { - const cssRulesByBucket = evaluationResult.value as CSSRulesByBucket; - - state.cssRulesByBucket = concatCSSRulesByBucket(state.cssRulesByBucket, cssRulesByBucket); - } - - argumentPath.remove(); -} - -function getFunctionArgumentPath( - callExpressionPath: NodePath, - functionKind: FunctionKinds, -): NodePath | NodePath | null { - const argumentPaths = callExpressionPath.get('arguments'); - - if (functionKind === '__styles') { - if (argumentPaths.length === 2 && argumentPaths[1].isObjectExpression()) { - return argumentPaths[1]; - } - } - - if (functionKind === '__resetStyles') { - if (argumentPaths.length === 3 && (argumentPaths[2].isArrayExpression() || argumentPaths[2].isObjectExpression())) { - return argumentPaths[2]; - } - } - - if (functionKind === '__staticStyles') { - if (argumentPaths.length === 1 && argumentPaths[0].isObjectExpression()) { - return argumentPaths[0]; - } - } - - return null; -} - -function getReferencePaths( - specifierPath: NodePath, - functionKind: FunctionKinds, -): NodePath[] { - const importedPath = specifierPath.get('imported'); - - if (importedPath.isIdentifier({ name: functionKind })) { - const localPath = specifierPath.get('local'); - const programPath = specifierPath.findParent(p => p.isProgram())!; - - const importBinding = programPath.scope.getBinding(localPath.node.name); - - if (importBinding) { - return importBinding.referencePaths; - } - } - - return []; -} - -function inlineAssetImports(argumentPath: NodePath | NodePath) { - const importsToRemove = new Set>(); - - argumentPath.traverse({ - TemplateLiteral(literalPath) { - const expressionPaths = literalPath.get('expressions'); - - expressionPaths.map(expressionPath => { - if (Array.isArray(expressionPath) || !expressionPath.isIdentifier()) { - throw literalPath.buildCodeFrameError( - [ - 'A template literal with an imported asset should contain an expression statement.', - 'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens', - ].join(' '), - ); - } - - const expressionName = expressionPath.node.name; - const expressionBinding = literalPath.scope.getBinding(expressionName); - - if (typeof expressionBinding === 'undefined') { - throw expressionPath.buildCodeFrameError( - [ - 'Failed to resolve a binding in a scope for an identifier.', - 'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens', - ].join(' '), - ); - } - - const importDeclarationPath = expressionBinding.path.findParent(p => - p.isImportDeclaration(), - ) as NodePath | null; - - if (importDeclarationPath === null) { - throw expressionBinding.path.buildCodeFrameError( - [ - 'Failed to resolve an import for the identifier.', - 'Please report a bug (https://github.com/microsoft/griffel/issues) if this error happens', - ].join(' '), - ); - } - - expressionPath.replaceWith(t.stringLiteral(importDeclarationPath.get('source').node.value)); - importsToRemove.add(importDeclarationPath); - }); - }, - }); - - // It's unsafe to remove imports in the middle of a traversal as imports can be reused between CSS rules - importsToRemove.forEach(importDeclarationPath => { - importDeclarationPath.remove(); - }); -} - -function updateCalleeName(callExpressionPath: NodePath, importName: string) { - const calleePath = callExpressionPath.get('callee'); - - calleePath.replaceWith(t.identifier(importName)); -} - -function updateReferences( - state: StripRuntimeBabelPluginState, - importSpecifierPath: NodePath, - importSource: string, - functionKind: FunctionKinds, -) { - const importName = - functionKind === '__styles' ? '__css' : functionKind === '__resetStyles' ? '__resetCSS' : '__staticCSS'; - const importIdentifier = addNamed(importSpecifierPath, importName, importSource); - - const referencePaths = getReferencePaths(importSpecifierPath, functionKind); - - for (const referencePath of referencePaths) { - if (referencePath.parentPath?.isCallExpression()) { - const callExpressionPath = referencePath.parentPath; - const argumentPath = getFunctionArgumentPath(callExpressionPath, functionKind); - - if (argumentPath) { - inlineAssetImports(argumentPath); - evaluateAndUpdateArgument(argumentPath, functionKind, state); - - updateCalleeName(callExpressionPath, importIdentifier.name); - } - } - } -} - -export const babelPluginStripGriffelRuntime = declare< - Partial, - PluginObj ->(api => { - api.assertVersion(7); - - return { - name: '@griffel/webpack-extraction-plugin/babel', - post() { - (this.file.metadata as unknown as StripRuntimeBabelPluginMetadata).cssRulesByBucket = this.cssRulesByBucket; - }, - - visitor: { - Program: { - enter(path, state) { - if (typeof state.filename === 'undefined') { - throw new Error( - [ - '@griffel/webpack-extraction-plugin: This plugin requires "filename" option to be specified by Babel. ', - "It's automatically done by our loaders. ", - "If you're facing this issue, please check your setup.\n\n", - 'See: https://babeljs.io/docs/en/options#filename', - ].join(''), - ); - } - }, - - exit(programPath, state) { - programPath.traverse({ - ImportSpecifier(path) { - const importedPath = path.get('imported'); - - const importSourcePath = (path.parentPath as NodePath).get('source'); - const importSource = importSourcePath.node.value; - - if (importedPath.isIdentifier({ name: '__styles' })) { - updateReferences(state, path, importSource, '__styles'); - } else if (importedPath.isIdentifier({ name: '__resetStyles' })) { - updateReferences(state, path, importSource, '__resetStyles'); - } else if (importedPath.isIdentifier({ name: '__staticStyles' })) { - updateReferences(state, path, importSource, '__staticStyles'); - } - }, - }); - }, - }, - }, - }; -}); diff --git a/packages/webpack-extraction-plugin/src/constants.ts b/packages/webpack-extraction-plugin/src/constants.ts deleted file mode 100644 index c796048b2..000000000 --- a/packages/webpack-extraction-plugin/src/constants.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type { LoaderContext } from 'webpack'; - -export const PLUGIN_NAME = 'GriffelExtractPlugin'; -export const GriffelCssLoaderContextKey = Symbol.for(`${PLUGIN_NAME}/GriffelCssLoaderContextKey`); - -export interface GriffelLoaderContextSupplement { - registerExtractedCss(css: string): void; - getExtractedCss(): string; -} - -export type SupplementedLoaderContext = LoaderContext & { - [GriffelCssLoaderContextKey]?: GriffelLoaderContextSupplement; -}; diff --git a/packages/webpack-extraction-plugin/src/generateCSSRules.test.ts b/packages/webpack-extraction-plugin/src/generateCSSRules.test.ts deleted file mode 100644 index 60113d1d1..000000000 --- a/packages/webpack-extraction-plugin/src/generateCSSRules.test.ts +++ /dev/null @@ -1,54 +0,0 @@ -import type { CSSRulesByBucket } from '@griffel/core'; -import { generateCSSRules } from './generateCSSRules'; - -describe('generateCSSRules', () => { - it('generates CSS rules', () => { - const cssRulesByBucket: CSSRulesByBucket = { - d: ['.baz { color: orange; }', '.foo { color: red; }'], - }; - - expect(generateCSSRules(cssRulesByBucket)).toMatchInlineSnapshot(` - "/** @griffel:css-start [d] null **/ - .baz { color: orange; } - .foo { color: red; } - /** @griffel:css-end **/" - `); - }); - - it('handles empty CSS rules', () => { - const cssRulesByBucket: CSSRulesByBucket = {}; - - expect(generateCSSRules(cssRulesByBucket)).toMatchInlineSnapshot(`""`); - }); - - it('handle CSS rules with mixed metadata', () => { - const cssRulesByBucket: CSSRulesByBucket = { - d: [ - '.foo { color: orange; }', - ['.bar { color: red; }', { p: -2 }], - ['.baz { color: green; }', { p: -2 }], - ['.qux { color: blue; }', { p: -3 }], - ], - f: ['.foo:focus { color: orange; }', ['.bar:focus { color: red; }', { p: -2 }]], - }; - - expect(generateCSSRules(cssRulesByBucket)).toMatchInlineSnapshot(` - "/** @griffel:css-start [d] null **/ - .foo { color: orange; } - /** @griffel:css-end **/ - /** @griffel:css-start [d] {\\"p\\":-2} **/ - .bar { color: red; } - .baz { color: green; } - /** @griffel:css-end **/ - /** @griffel:css-start [d] {\\"p\\":-3} **/ - .qux { color: blue; } - /** @griffel:css-end **/ - /** @griffel:css-start [f] null **/ - .foo:focus { color: orange; } - /** @griffel:css-end **/ - /** @griffel:css-start [f] {\\"p\\":-2} **/ - .bar:focus { color: red; } - /** @griffel:css-end **/" - `); - }); -}); diff --git a/packages/webpack-extraction-plugin/src/generateCSSRules.ts b/packages/webpack-extraction-plugin/src/generateCSSRules.ts deleted file mode 100644 index 53cb9f1a3..000000000 --- a/packages/webpack-extraction-plugin/src/generateCSSRules.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { type CSSRulesByBucket, normalizeCSSBucketEntry } from '@griffel/core'; - -export function generateCSSRules(cssRulesByBucket: CSSRulesByBucket): string { - const entries = Object.entries(cssRulesByBucket); - - if (entries.length === 0) { - return ''; - } - - const cssLines: string[] = []; - let lastEntryKey: string = ''; - - for (const [cssBucketName, cssBucketEntries] of entries) { - for (const bucketEntry of cssBucketEntries) { - const [cssRule, metadata] = normalizeCSSBucketEntry(bucketEntry); - - const metadataAsJSON = JSON.stringify(metadata ?? null); - const entryKey = `${cssBucketName}-${metadataAsJSON}`; - - if (lastEntryKey !== entryKey) { - if (lastEntryKey !== '') { - cssLines.push('/** @griffel:css-end **/'); - } - - cssLines.push(`/** @griffel:css-start [${cssBucketName}] ${metadataAsJSON} **/`); - lastEntryKey = entryKey; - } - - cssLines.push(cssRule); - } - } - - if (cssLines.length > 0) { - cssLines.push('/** @griffel:css-end **/'); - } - - return cssLines.join('\n'); -} diff --git a/packages/webpack-extraction-plugin/src/getBundlerRuntime.ts b/packages/webpack-extraction-plugin/src/getBundlerRuntime.ts deleted file mode 100644 index 501b61288..000000000 --- a/packages/webpack-extraction-plugin/src/getBundlerRuntime.ts +++ /dev/null @@ -1,17 +0,0 @@ -import type { Compilation, NormalModule } from 'webpack'; - -type BundlerRuntime = { - Compilation: typeof Compilation; - NormalModule: typeof NormalModule; -}; - -let bundlerRuntime: BundlerRuntime | null = null; - -export function getBundlerRuntime(type: 'webpack' | 'rspack'): BundlerRuntime { - if (bundlerRuntime === null) { - // eslint-disable-next-line import/no-extraneous-dependencies - bundlerRuntime = type === 'webpack' ? require('webpack') : require('@rspack/core'); - } - - return bundlerRuntime!; -} diff --git a/packages/webpack-extraction-plugin/src/index.ts b/packages/webpack-extraction-plugin/src/index.ts deleted file mode 100644 index ba565edbc..000000000 --- a/packages/webpack-extraction-plugin/src/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { GriffelCSSExtractionPlugin } from './GriffelCSSExtractionPlugin'; -export type { GriffelCSSExtractionPluginOptions } from './GriffelCSSExtractionPlugin'; diff --git a/packages/webpack-extraction-plugin/src/parseCSSRules.test.ts b/packages/webpack-extraction-plugin/src/parseCSSRules.test.ts deleted file mode 100644 index a720eeea5..000000000 --- a/packages/webpack-extraction-plugin/src/parseCSSRules.test.ts +++ /dev/null @@ -1,93 +0,0 @@ -import type { CSSRulesByBucket } from '@griffel/core'; - -import { generateCSSRules } from './generateCSSRules'; -import { parseCSSRules } from './parseCSSRules'; - -function removeEmptyBuckets(cssRulesByBucket: CSSRulesByBucket) { - return Object.fromEntries(Object.entries(cssRulesByBucket).filter(([, bucketEntries]) => bucketEntries.length > 0)); -} - -describe('parseCSSRules', () => { - it('handles regular rules', () => { - const cssRulesByBucket: CSSRulesByBucket = { - d: ['.fe3e8s9{color:red;}'], - h: ['.faf35ka:hover{color:red;}'], - }; - const css = generateCSSRules(cssRulesByBucket); - const result = parseCSSRules(css); - - expect(removeEmptyBuckets(result.cssRulesByBucket)).toEqual(cssRulesByBucket); - expect(result.remainingCSS).toBe(''); - }); - - it('handles rules with meta', () => { - const cssRulesByBucket: CSSRulesByBucket = { - d: ['.fe3e8s9{color:red;}', ['.f65sxns{background:green;}', { p: -2 }]], - m: [ - ['@media screen and (max-width: 100px){.fr5o61b{color:red;}}', { m: 'screen and (max-width: 100px)' }], - ['@media screen and (max-width: 100px){.f1j0ers2{display:grid;}}', { m: 'screen and (max-width: 100px)' }], - ['@media screen and (max-width: 100px){.fr5o61c{padding:0;}}', { m: 'screen and (max-width: 100px)', p: -1 }], - ], - }; - const css = generateCSSRules(cssRulesByBucket); - const result = parseCSSRules(css); - - expect(removeEmptyBuckets(result.cssRulesByBucket)).toMatchInlineSnapshot(` - Object { - "d": Array [ - ".fe3e8s9{color:red;}", - Array [ - ".f65sxns{background:green;}", - Object { - "p": -2, - }, - ], - ], - "m": Array [ - Array [ - "@media screen and (max-width: 100px){.fr5o61b{color:red;}}", - Object { - "m": "screen and (max-width: 100px)", - }, - ], - Array [ - "@media screen and (max-width: 100px){.f1j0ers2{display:grid;}}", - Object { - "m": "screen and (max-width: 100px)", - }, - ], - Array [ - "@media screen and (max-width: 100px){.fr5o61c{padding:0;}}", - Object { - "m": "screen and (max-width: 100px)", - "p": -1, - }, - ], - ], - } - `); - expect(result.remainingCSS).toBe(''); - }); - - it('keeps third parties CSS', () => { - const cssRulesByBucket: CSSRulesByBucket = { - d: ['.fe3e8s9{color:red;}'], - }; - const css = generateCSSRules(cssRulesByBucket); - const thirdPartyCSS = ` - .foo { color: red } - /* some comment */ - .bar { color: green } - `; - const result = parseCSSRules(css + thirdPartyCSS); - - expect(removeEmptyBuckets(result.cssRulesByBucket)).toMatchInlineSnapshot(` - Object { - "d": Array [ - ".fe3e8s9{color:red;}", - ], - } - `); - expect(result.remainingCSS).toBe('.foo{color:red;}.bar{color:green;}'); - }); -}); diff --git a/packages/webpack-extraction-plugin/src/parseCSSRules.ts b/packages/webpack-extraction-plugin/src/parseCSSRules.ts deleted file mode 100644 index fc0ceb030..000000000 --- a/packages/webpack-extraction-plugin/src/parseCSSRules.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { styleBucketOrdering } from '@griffel/core'; -import { COMMENT, compile, serialize, stringify } from 'stylis'; - -import type { CSSBucketEntry, CSSRulesByBucket, StyleBucketName } from '@griffel/core'; - -export function parseCSSRules(css: string) { - const cssRulesByBucket = styleBucketOrdering.reduce((acc, styleBucketName) => { - acc[styleBucketName] = []; - - return acc; - }, {}) as Required; - const elements = compile(css); - const unrelatedElements: ReturnType = []; - - let cssBucketName: StyleBucketName | null = null; - let cssMeta: Record | null = null; - - for (const element of elements) { - if (element.type === COMMENT) { - if (element.value.indexOf('/** @griffel:css-start') === 0) { - cssBucketName = element.value.charAt(24) as StyleBucketName; - cssMeta = JSON.parse(element.value.slice(27, -4)); - - continue; - } - - if (element.value.indexOf('/** @griffel:css-end') === 0) { - cssBucketName = null; - cssMeta = null; - - continue; - } - } - - if (cssBucketName) { - const cssRule = serialize([element], stringify); - const bucketEntry: CSSBucketEntry = cssMeta ? [cssRule, cssMeta!] : cssRule; - - cssRulesByBucket[cssBucketName].push(bucketEntry); - continue; - } - - unrelatedElements.push(element); - } - - return { cssRulesByBucket, remainingCSS: serialize(unrelatedElements, stringify) }; -} diff --git a/packages/webpack-extraction-plugin/src/schema.ts b/packages/webpack-extraction-plugin/src/schema.ts deleted file mode 100644 index df98f6729..000000000 --- a/packages/webpack-extraction-plugin/src/schema.ts +++ /dev/null @@ -1,16 +0,0 @@ -import type { JSONSchema7 } from 'json-schema'; - -export const configSchema: JSONSchema7 = { - $schema: 'http://json-schema.org/schema', - $id: 'webpackLoader-options', - - properties: { - classNameHashSalt: { - type: 'string', - }, - unstable_keepOriginalCode: { - type: 'boolean', - }, - }, - additionalProperties: false, -}; diff --git a/packages/webpack-extraction-plugin/src/sortCSSRules.test.ts b/packages/webpack-extraction-plugin/src/sortCSSRules.test.ts deleted file mode 100644 index f3f5569af..000000000 --- a/packages/webpack-extraction-plugin/src/sortCSSRules.test.ts +++ /dev/null @@ -1,262 +0,0 @@ -import type { CSSRulesByBucket, GriffelRenderer } from '@griffel/core'; -import * as prettier from 'prettier'; - -import { getUniqueRulesFromSets, sortCSSRules } from './sortCSSRules'; - -export const cssSerializer: jest.SnapshotSerializerPlugin = { - test(value) { - return typeof value === 'string'; - }, - print(value) { - /** - * test function makes sure that value is the guarded type - */ - const _value = value as string; - - return prettier.format(_value, { parser: 'css' }).trim(); - }, -}; - -expect.addSnapshotSerializer(cssSerializer); - -describe('getUniqueRulesFromSets', () => { - it('removes duplicate rules', () => { - const setA: CSSRulesByBucket = { - d: ['.baz { color: orange; }', '.foo { color: red; }'], - m: [['@media (max-width: 2px) { .foo { color: blue; } }', { m: '(max-width: 2px)' }]], - }; - const setB: CSSRulesByBucket = { - d: ['.baz { color: orange; }'], - m: [['@media (max-width: 2px) { .yellow { color: blue; } }', { m: '(max-width: 2px)' }]], - }; - - expect(getUniqueRulesFromSets([setA, setB])).toEqual([ - { cssRule: '.baz { color: orange; }', priority: 0, media: '', styleBucketName: 'd' }, - { cssRule: '.foo { color: red; }', priority: 0, media: '', styleBucketName: 'd' }, - { - cssRule: '@media (max-width: 2px) { .foo { color: blue; } }', - priority: 0, - media: '(max-width: 2px)', - styleBucketName: 'm', - }, - { - cssRule: '@media (max-width: 2px) { .yellow { color: blue; } }', - priority: 0, - media: '(max-width: 2px)', - styleBucketName: 'm', - }, - ]); - }); -}); - -describe('sortCSSRules', () => { - it('removes duplicate rules', () => { - const setA: CSSRulesByBucket = { - d: ['.baz { color: orange; }', '.foo { color: red; }'], - m: [['@media (max-width: 2px) { .foo { color: blue; } }', { m: '(max-width: 2px)' }]], - }; - const setB: CSSRulesByBucket = { - d: ['.baz { color: orange; }'], - m: [['@media (max-width: 2px) { .yellow { color: blue; } }', { m: '(max-width: 2px)' }]], - }; - - expect(sortCSSRules([setA, setB], () => 0)).toMatchInlineSnapshot(` - .baz { - color: orange; - } - .foo { - color: red; - } - @media (max-width: 2px) { - .foo { - color: blue; - } - } - @media (max-width: 2px) { - .yellow { - color: blue; - } - } - `); - }); - - it('sorts rules by buckets order', () => { - const setA: CSSRulesByBucket = { - d: ['.default { color: orange; }'], - f: ['.focus:focus { color: pink; }'], - }; - const setB: CSSRulesByBucket = { - d: ['.default { color: red; }'], - h: ['.hover:hover { color: yellow; }'], - }; - - expect(sortCSSRules([setA, setB], () => 0)).toMatchInlineSnapshot(` - .default { - color: orange; - } - .default { - color: red; - } - .focus:focus { - color: pink; - } - .hover:hover { - color: yellow; - } - `); - }); - - it('sorts rules by buckets & priority', () => { - const setA: CSSRulesByBucket = { - d: ['.prio0 { color: orange; }', ['.prio-1 { margin: 0; }', { p: -1 }]], - f: ['.prio0:focus { color: pink; }'], - h: [['.prio-1:hover { padding: 0; }', { p: -1 }]], - }; - const setB: CSSRulesByBucket = { - r: ['.reset { margin: 0; padding: 0 }'], - d: [ - ['.prio-3 { border: 3px solid red; }', { p: -3 }], - ['.prio-2 { background: green; }', { p: -2 }], - ], - f: [['.prio-1:focus { padding: 0; }', { p: -2 }]], - }; - - expect(sortCSSRules([setA, setB], () => 0)).toMatchInlineSnapshot(` - .reset { - margin: 0; - padding: 0; - } - .prio-3 { - border: 3px solid red; - } - .prio-2 { - background: green; - } - .prio-1 { - margin: 0; - } - .prio0 { - color: orange; - } - .prio-1:focus { - padding: 0; - } - .prio0:focus { - color: pink; - } - .prio-1:hover { - padding: 0; - } - `); - }); - - describe('media queries', () => { - it('sorts media queries', () => { - const setA: CSSRulesByBucket = { - m: [ - ['@media (max-width: 2px) { .mw2 { color: blue; } }', { m: '(max-width: 2px)' }], - ['@media (max-width: 3px) { .mw3 { color: red; } }', { m: '(max-width: 3px)' }], - ], - }; - const setB: CSSRulesByBucket = { - d: ['.default { color: green; }'], - m: [['@media (max-width: 1px) { .mw1 { color: red; } }', { m: '(max-width: 1px)' }]], - }; - - const mediaQueryOrder = ['(max-width: 1px)', '(max-width: 2px)', '(max-width: 3px)', '(max-width: 4px)']; - const compareMediaQueries: GriffelRenderer['compareMediaQueries'] = (a, b) => - mediaQueryOrder.indexOf(a) - mediaQueryOrder.indexOf(b); - - expect(sortCSSRules([setA, setB], compareMediaQueries)).toMatchInlineSnapshot(` - .default { - color: green; - } - @media (max-width: 1px) { - .mw1 { - color: red; - } - } - @media (max-width: 2px) { - .mw2 { - color: blue; - } - } - @media (max-width: 3px) { - .mw3 { - color: red; - } - } - `); - }); - - it('handles priority', () => { - const setA: CSSRulesByBucket = { - m: [ - ['@media (max-width: 1px) { .mw1-prio0 { display: flex; } }', { m: '(max-width: 1px)' }], - ['@media (max-width: 2px) { .mw2-prio0 { display: grid; } }', { m: '(max-width: 2px)' }], - ['@media (max-width: 2px) { .mw2-prio-1 { padding: 0; } }', { m: '(max-width: 2px)', p: -1 }], - ], - }; - const setB: CSSRulesByBucket = { - m: [ - ['@media (max-width: 1px) { .mw1-prio-1 { padding: 5px; } }', { m: '(max-width: 1px)', p: -1 }], - ['@media (max-width: 3px) { .mw3-prio0 { display: table; } }', { m: '(max-width: 3px)' }], - ['@media (max-width: 3px) { .mw3-prio-1 { padding: 5px; } }', { m: '(max-width: 3px)', p: -1 }], - ], - }; - const setC: CSSRulesByBucket = { - m: [ - ['@media (max-width: 1px) { .mw1-prio-1 { margin: 5px; } }', { m: '(max-width: 1px)', p: -1 }], - ['@media (max-width: 1px) { .mw1-prio-3 { border: 5px; } }', { m: '(max-width: 1px)', p: -3 }], - ], - }; - - const mediaQueryOrder = ['(max-width: 1px)', '(max-width: 2px)', '(max-width: 3px)']; - const compareMediaQueries: GriffelRenderer['compareMediaQueries'] = (a, b) => - mediaQueryOrder.indexOf(a) - mediaQueryOrder.indexOf(b); - - expect(sortCSSRules([setA, setB, setC], compareMediaQueries)).toMatchInlineSnapshot(` - @media (max-width: 1px) { - .mw1-prio-3 { - border: 5px; - } - } - @media (max-width: 1px) { - .mw1-prio-1 { - padding: 5px; - } - } - @media (max-width: 1px) { - .mw1-prio-1 { - margin: 5px; - } - } - @media (max-width: 1px) { - .mw1-prio0 { - display: flex; - } - } - @media (max-width: 2px) { - .mw2-prio-1 { - padding: 0; - } - } - @media (max-width: 2px) { - .mw2-prio0 { - display: grid; - } - } - @media (max-width: 3px) { - .mw3-prio-1 { - padding: 5px; - } - } - @media (max-width: 3px) { - .mw3-prio0 { - display: table; - } - } - `); - }); - }); -}); diff --git a/packages/webpack-extraction-plugin/src/sortCSSRules.ts b/packages/webpack-extraction-plugin/src/sortCSSRules.ts deleted file mode 100644 index ffa12b496..000000000 --- a/packages/webpack-extraction-plugin/src/sortCSSRules.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { styleBucketOrdering, normalizeCSSBucketEntry } from '@griffel/core'; -import type { GriffelRenderer, StyleBucketName, CSSRulesByBucket } from '@griffel/core'; - -// avoid repeatedly calling `indexOf` to determine order during new insertions -const styleBucketOrderingMap = styleBucketOrdering.reduce((acc, cur, j) => { - acc[cur as StyleBucketName] = j; - return acc; -}, {} as Record); - -type RuleEntry = { styleBucketName: StyleBucketName; cssRule: string; priority: number; media: string }; - -export function getUniqueRulesFromSets(setOfCSSRules: CSSRulesByBucket[]): RuleEntry[] { - const uniqueCSSRules = new Map(); - - for (const cssRulesByBucket of setOfCSSRules) { - for (const _styleBucketName in cssRulesByBucket) { - const styleBucketName = _styleBucketName as StyleBucketName; - - for (const bucketEntry of cssRulesByBucket[styleBucketName]!) { - const [cssRule, meta] = normalizeCSSBucketEntry(bucketEntry); - - const priority = (meta?.['p'] as number | undefined) ?? 0; - const media = (meta?.['m'] as string | undefined) ?? ''; - - uniqueCSSRules.set(cssRule, { styleBucketName: styleBucketName as StyleBucketName, cssRule, priority, media }); - } - } - } - - return Array.from(uniqueCSSRules.values()); -} - -export function sortCSSRules( - setOfCSSRules: CSSRulesByBucket[], - compareMediaQueries: GriffelRenderer['compareMediaQueries'], -): string { - return getUniqueRulesFromSets(setOfCSSRules) - .sort((entryA, entryB) => entryA.priority - entryB.priority) - .sort( - (entryA, entryB) => - styleBucketOrderingMap[entryA.styleBucketName] - styleBucketOrderingMap[entryB.styleBucketName], - ) - .sort((entryA, entryB) => compareMediaQueries(entryA.media, entryB.media)) - .map(entry => entry.cssRule) - .join(''); -} diff --git a/packages/webpack-extraction-plugin/src/transformSync.ts b/packages/webpack-extraction-plugin/src/transformSync.ts deleted file mode 100644 index 728962fd1..000000000 --- a/packages/webpack-extraction-plugin/src/transformSync.ts +++ /dev/null @@ -1,60 +0,0 @@ -import * as Babel from '@babel/core'; -import type { CSSRulesByBucket } from '@griffel/core'; - -import type { StripRuntimeBabelPluginMetadata } from './babelPluginStripGriffelRuntime'; -import { babelPluginStripGriffelRuntime } from './babelPluginStripGriffelRuntime'; - -export type TransformOptions = { - filename: string; - - inputSourceMap: Babel.TransformOptions['inputSourceMap']; - enableSourceMaps: boolean; -}; - -export type TransformResult = { - code: string; - cssRulesByBucket: CSSRulesByBucket | undefined; - 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, - plugins: [babelPluginStripGriffelRuntime], - - 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, - cssRulesByBucket: (babelFileResult.metadata as unknown as StripRuntimeBabelPluginMetadata).cssRulesByBucket, - sourceMap: babelFileResult.map === null ? undefined : babelFileResult.map, - }; -} diff --git a/packages/webpack-extraction-plugin/src/webpackLoader.test.ts b/packages/webpack-extraction-plugin/src/webpackLoader.test.ts deleted file mode 100644 index 421af0dee..000000000 --- a/packages/webpack-extraction-plugin/src/webpackLoader.test.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { validateHashSalt } from './webpackLoader'; - -const SOURCE_CODE = `import { makeStyles } from '@griffel/react'; - -export const useStyles = makeStyles({ - root: { - color: 'red', - paddingLeft: '4px', - paddingRight: '4px', - }, -}); -/*@griffel:classNameHashSalt "salt"*/ -`; - -describe('webpackLoader', () => { - it('should validate hash salt correctly', () => { - expect(() => validateHashSalt(SOURCE_CODE, 'salt')).not.toThrow(); - }); - - it('should throw an error for invalid hash salt', () => { - expect(() => validateHashSalt(SOURCE_CODE, 'invalid-salt')).toThrowErrorMatchingInlineSnapshot( - `"GriffelCSSExtractionPlugin: classNameHashSalt is set to \\"invalid-salt\\", but the salt location comment contains \\"salt\\". Please ensure that all files use the same salt."`, - ); - expect(() => validateHashSalt(SOURCE_CODE, 'sal')).toThrowErrorMatchingInlineSnapshot( - `"GriffelCSSExtractionPlugin: classNameHashSalt is set to \\"sal\\", but the salt location comment contains \\"salt\\". Please ensure that all files use the same salt."`, - ); - }); - - it('should throw if "sourceCode" does not contain a comment', () => { - expect(() => - validateHashSalt('import { makeStyles } from "@griffel/react";', 'salt'), - ).toThrowErrorMatchingInlineSnapshot( - `"GriffelCSSExtractionPlugin: classNameHashSalt is set to \\"salt\\", but no salt location comment was found in the source code."`, - ); - }); -}); diff --git a/packages/webpack-extraction-plugin/src/webpackLoader.ts b/packages/webpack-extraction-plugin/src/webpackLoader.ts deleted file mode 100644 index a957be090..000000000 --- a/packages/webpack-extraction-plugin/src/webpackLoader.ts +++ /dev/null @@ -1,168 +0,0 @@ -import * as path from 'path'; -import type * as webpack from 'webpack'; - -import type { TransformResult, TransformOptions } from './transformSync'; -import { transformSync } from './transformSync'; -import type { SupplementedLoaderContext } from './constants'; -import { GriffelCssLoaderContextKey } from './constants'; -import { generateCSSRules } from './generateCSSRules'; -import { configSchema } from './schema'; - -export type WebpackLoaderOptions = { - /** - * Salt to use for class names hashing. - * - * This loader will not perform any hashing, it will just perform validation to ensure that all processed files - * use the same salt. - */ - classNameHashSalt?: string; - - /** - * Please never use this feature, it will be removed without further notice. - */ - unstable_keepOriginalCode?: boolean; -}; - -type WebpackLoaderParams = Parameters>; - -const virtualLoaderPath = path.resolve(__dirname, '..', 'virtual-loader', 'index.js'); -const virtualCSSFilePath = path.resolve(__dirname, '..', 'virtual-loader', 'griffel.css'); - -const SALT_SEARCH_STRING = '/*@griffel:classNameHashSalt "'; -const SALT_SEARCH_STRING_LENGTH = SALT_SEARCH_STRING.length; - -/** - * 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; - } -} - -function toURIComponent(rule: string): string { - return encodeURIComponent(rule).replace(/!/g, '%21'); -} - -export function validateHashSalt(sourceCode: string, classNameHashSalt: string) { - const commentStartLoc = sourceCode.indexOf(SALT_SEARCH_STRING); - - if (commentStartLoc === -1) { - throw new Error( - `GriffelCSSExtractionPlugin: classNameHashSalt is set to "${classNameHashSalt}", but no salt location comment was found in the source code.`, - ); - } - - const saltStartLoc = commentStartLoc + SALT_SEARCH_STRING_LENGTH; - const saltEndLoc = sourceCode.indexOf('"*/', saltStartLoc); - - const saltFromComment = sourceCode.slice(commentStartLoc + SALT_SEARCH_STRING_LENGTH, saltEndLoc); - - if (saltFromComment !== classNameHashSalt) { - throw new Error( - `GriffelCSSExtractionPlugin: classNameHashSalt is set to "${classNameHashSalt}", but the salt location comment contains "${saltFromComment}". Please ensure that all files use the same salt.`, - ); - } -} - -function webpackLoader( - this: SupplementedLoaderContext, - sourceCode: WebpackLoaderParams[0], - inputSourceMap: WebpackLoaderParams[1], -) { - this.async(); - // Loaders are cacheable by default, but in edge cases/bugs when caching does not work until it's specified: - // https://github.com/webpack/webpack/issues/14946 - this.cacheable(); - - // Early return to handle cases when __styles() calls are not present, allows skipping expensive invocation of Babel - if ( - sourceCode.indexOf('__styles') === -1 && - sourceCode.indexOf('__resetStyles') === -1 && - sourceCode.indexOf('__staticStyles') === -1 - ) { - this.callback(null, sourceCode, inputSourceMap); - return; - } - - const IS_RSPACK = !this.webpack; - - // @ Rspack compat: - // We don't use the trick with loader context as assets are generated differently - if (!IS_RSPACK) { - if (!this[GriffelCssLoaderContextKey]) { - throw new Error('GriffelCSSExtractionPlugin is not configured, please check your webpack config'); - } - } - - const { classNameHashSalt = '', unstable_keepOriginalCode } = this.getOptions(configSchema); - - let result: TransformResult | null = null; - let error: Error | null = null; - - try { - result = transformSync(sourceCode, { - filename: path.relative(process.cwd(), this.resourcePath), - enableSourceMaps: this.sourceMap || false, - inputSourceMap: parseSourceMap(inputSourceMap), - }); - } catch (err) { - error = err as Error; - } - - if (result) { - const resultCode = unstable_keepOriginalCode ? sourceCode : result.code; - const resultSourceMap = unstable_keepOriginalCode ? inputSourceMap : result.sourceMap; - const { cssRulesByBucket } = result; - - if (cssRulesByBucket) { - const css = generateCSSRules(cssRulesByBucket); - - if (css.length === 0) { - this.callback(null, resultCode, resultSourceMap); - return; - } - - // Heads up! - // Run validation only if any CSS rules were generated, otherwise it might be a false positive - if (classNameHashSalt.length > 0) { - validateHashSalt(sourceCode, classNameHashSalt); - } - - if (IS_RSPACK) { - const request = `griffel.css!=!${virtualLoaderPath}!${virtualCSSFilePath}?style=${toURIComponent(css)}`; - const stringifiedRequest = JSON.stringify(this.utils.contextify(this.context || this.rootContext, request)); - - this.callback(null, `${resultCode}\n\nimport ${stringifiedRequest};`, resultSourceMap); - return; - } - - this[GriffelCssLoaderContextKey]?.registerExtractedCss(css); - - const outputFileName = this.resourcePath.replace(/\.[^.]+$/, '.griffel.css'); - const request = `${outputFileName}!=!${virtualLoaderPath}!${this.resourcePath}`; - const stringifiedRequest = JSON.stringify(this.utils.contextify(this.context || this.rootContext, request)); - - this.callback(null, `${resultCode}\n\nimport ${stringifiedRequest};`, resultSourceMap); - return; - } - - this.callback(null, resultCode, resultSourceMap); - return; - } - - this.callback(error); -} - -export default webpackLoader; diff --git a/packages/webpack-extraction-plugin/tsconfig.json b/packages/webpack-extraction-plugin/tsconfig.json deleted file mode 100644 index b5371dfd3..000000000 --- a/packages/webpack-extraction-plugin/tsconfig.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "allowJs": true, - "checkJs": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/packages/webpack-extraction-plugin/tsconfig.lib.json b/packages/webpack-extraction-plugin/tsconfig.lib.json deleted file mode 100644 index 6181fe223..000000000 --- a/packages/webpack-extraction-plugin/tsconfig.lib.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "module": "commonjs", - "outDir": "../../dist/out-tsc", - "declaration": true, - "types": ["node", "environment"] - }, - "exclude": ["__fixtures__/**/*/*.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"], - "include": ["**/*.ts", "virtual-loader/index.js"] -} diff --git a/packages/webpack-extraction-plugin/tsconfig.spec.json b/packages/webpack-extraction-plugin/tsconfig.spec.json deleted file mode 100644 index 1470336f4..000000000 --- a/packages/webpack-extraction-plugin/tsconfig.spec.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "jsx": "react", - "outDir": "../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node", "environment", "static-assets"] - }, - "include": [ - "__fixtures__/**/*/code.ts", - "**/*.test.ts", - "**/*.spec.ts", - "**/*.test.tsx", - "**/*.spec.tsx", - "**/*.test.js", - "**/*.spec.js", - "**/*.test.jsx", - "**/*.spec.jsx", - "**/*.d.ts", - "jest.config.ts" - ] -} diff --git a/packages/webpack-extraction-plugin/virtual-loader/griffel.css b/packages/webpack-extraction-plugin/virtual-loader/griffel.css deleted file mode 100644 index d87ad61a6..000000000 --- a/packages/webpack-extraction-plugin/virtual-loader/griffel.css +++ /dev/null @@ -1 +0,0 @@ -/** A fake CSS file, used for Rspack compat */ diff --git a/packages/webpack-extraction-plugin/virtual-loader/index.js b/packages/webpack-extraction-plugin/virtual-loader/index.js deleted file mode 100644 index 3c0290a58..000000000 --- a/packages/webpack-extraction-plugin/virtual-loader/index.js +++ /dev/null @@ -1,19 +0,0 @@ -const { URLSearchParams } = require('url'); -const { GriffelCssLoaderContextKey } = require('../src/constants'); - -/** - * @this {import("../src/constants").SupplementedLoaderContext} - * @return {String} - */ -function virtualLoader() { - if (this.webpack) { - return this[GriffelCssLoaderContextKey]?.getExtractedCss() ?? ''; - } - - const query = new URLSearchParams(this.resourceQuery); - const style = query.get('style'); - - return style ?? ''; -} - -module.exports = virtualLoader; diff --git a/packages/webpack-loader/.eslintrc.json b/packages/webpack-loader/.eslintrc.json deleted file mode 100644 index 02850a584..000000000 --- a/packages/webpack-loader/.eslintrc.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": ["../../.eslintrc.json"], - "ignorePatterns": ["!**/*", "__fixtures__/*/output.ts"], - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": {} - }, - { - "files": ["*.ts", "*.tsx"], - "rules": {} - }, - { - "files": ["*.js", "*.jsx"], - "rules": {} - } - ] -} diff --git a/packages/webpack-loader/CHANGELOG.json b/packages/webpack-loader/CHANGELOG.json deleted file mode 100644 index 1d111f817..000000000 --- a/packages/webpack-loader/CHANGELOG.json +++ /dev/null @@ -1,1214 +0,0 @@ -{ - "name": "@griffel/webpack-loader", - "entries": [ - { - "date": "Fri, 06 Mar 2026 15:56:28 GMT", - "tag": "@griffel/webpack-loader_v2.2.23", - "version": "2.2.23", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "f422dee59ffc7ad2f4e5396def5dae5c9785cf24", - "comment": "chore: hoist common tsconfig strict options to base config" - } - ], - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.8.1", - "commit": "75914de37870943b9f2d483be421efe9cad8872f" - } - ] - } - }, - { - "date": "Fri, 06 Mar 2026 08:17:06 GMT", - "tag": "@griffel/webpack-loader_v2.2.22", - "version": "2.2.22", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.8.0", - "commit": "832ca3b88650bb8fa8b20499ade2e679518bc934" - } - ] - } - }, - { - "date": "Mon, 03 Nov 2025 15:43:56 GMT", - "tag": "@griffel/webpack-loader_v2.2.21", - "version": "2.2.21", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.7.0", - "commit": "5fa32ed29a45ac1fc8bde9f59665208da17d0c35" - } - ] - } - }, - { - "date": "Mon, 28 Jul 2025 09:12:30 GMT", - "tag": "@griffel/webpack-loader_v2.2.20", - "version": "2.2.20", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "a588a6c1f301e598557a8a1255f6069ccbbb2534", - "comment": "chore: apply release" - } - ], - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.6.8", - "commit": "230887b0ab80fb2db29ed04687f15d14d0200396" - } - ] - } - }, - { - "date": "Tue, 22 Apr 2025 10:05:48 GMT", - "tag": "@griffel/webpack-loader_v2.2.19", - "version": "2.2.19", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.6.7", - "commit": "d25d0967a81daac6fd8640961836b806ecfc7fe8" - } - ] - } - }, - { - "date": "Thu, 23 Jan 2025 12:09:03 GMT", - "tag": "@griffel/webpack-loader_v2.2.18", - "version": "2.2.18", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.6.6", - "commit": "78b2b5f231e3032de8aa1b5c5794a2a4317df42e" - } - ] - } - }, - { - "date": "Wed, 22 Jan 2025 13:44:43 GMT", - "tag": "@griffel/webpack-loader_v2.2.17", - "version": "2.2.17", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.6.5", - "commit": "fa0a08b0452669a9bc4e0f83b2dbcd85b97f733e" - } - ] - } - }, - { - "date": "Tue, 12 Nov 2024 09:58:11 GMT", - "tag": "@griffel/webpack-loader_v2.2.16", - "version": "2.2.16", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.6.4", - "commit": "4dd2eec22aaff93dead8429c4a35496de7dab438" - } - ] - } - }, - { - "date": "Thu, 31 Oct 2024 16:16:50 GMT", - "tag": "@griffel/webpack-loader_v2.2.15", - "version": "2.2.15", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.6.3", - "commit": "00ba8831f3b895c1600e8211895c0d2b99c13365" - } - ] - } - }, - { - "date": "Mon, 29 Jul 2024 07:31:53 GMT", - "tag": "@griffel/webpack-loader_v2.2.14", - "version": "2.2.14", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.6.2", - "commit": "aa24116ea5cf763ee7f56363067a5c386c4c2222" - } - ] - } - }, - { - "date": "Wed, 10 Jul 2024 14:36:29 GMT", - "tag": "@griffel/webpack-loader_v2.2.13", - "version": "2.2.13", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "b5dd8943c055e6f66556e1aaf6c1d3bc0ba3994b", - "comment": "fix(webpack-loader): fix schema for webpackResolveOptions.plugins" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.6.1", - "commit": "15496655df98b9d8e8f505b461cc6dbd12e3122e" - } - ] - } - }, - { - "date": "Wed, 22 May 2024 08:24:17 GMT", - "tag": "@griffel/webpack-loader_v2.2.12", - "version": "2.2.12", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.6.0", - "commit": "6ae570dbbd711a5e95184004f5d4d98a8ffa2df3" - } - ] - } - }, - { - "date": "Fri, 10 May 2024 10:13:20 GMT", - "tag": "@griffel/webpack-loader_v2.2.11", - "version": "2.2.11", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.5.9", - "commit": "7e45352b83480964b3c9e6f9a76e5797eb028e8c" - } - ] - } - }, - { - "date": "Thu, 02 May 2024 14:07:14 GMT", - "tag": "@griffel/webpack-loader_v2.2.10", - "version": "2.2.10", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.5.8", - "commit": "9745935b1bd28b02ee7c19d9195883e8454f0810" - } - ] - } - }, - { - "date": "Tue, 19 Mar 2024 11:33:53 GMT", - "tag": "@griffel/webpack-loader_v2.2.9", - "version": "2.2.9", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.5.7", - "commit": "95326c52b330ad9d286fad926f2aa26914c39061" - } - ] - } - }, - { - "date": "Tue, 23 Jan 2024 11:03:15 GMT", - "tag": "@griffel/webpack-loader_v2.2.8", - "version": "2.2.8", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "9c0b1acf69a4645331d1623b1f0b5484ce5d2cc9", - "comment": "chore: bump to Nx@15.9.7" - } - ] - } - }, - { - "date": "Fri, 12 Jan 2024 11:08:40 GMT", - "tag": "@griffel/webpack-loader_v2.2.8", - "version": "2.2.8", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "5f2a0e43eb2ff94914904b54bd474cd1af948b6f", - "comment": "chore: bump `enhanced-resolve` & improve internal types" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.5.6", - "commit": "0d2e5506d6b9bc9d7e4a102b88c2bb25eff9a34d" - } - ], - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "1594e428f0902da615ff8d9e86ae4512ce9f0389", - "comment": "chore: enable \"@typescript-eslint/consistent-type-imports\" lint rule" - } - ] - } - }, - { - "date": "Thu, 30 Nov 2023 16:42:15 GMT", - "tag": "@griffel/webpack-loader_v2.2.7", - "version": "2.2.7", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.5.5", - "commit": "7d72d1eb3439ef8423fe958035a1525da1822750" - } - ] - } - }, - { - "date": "Mon, 13 Nov 2023 15:16:05 GMT", - "tag": "@griffel/webpack-loader_v2.2.6", - "version": "2.2.6", - "comments": { - "patch": [ - { - "author": "alinazaieva@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "dbbdcb6cdacb4ee3200b0dbb4a6e4da7fd443805", - "comment": "fix: replace null inputSourceMap with undefined" - } - ] - } - }, - { - "date": "Thu, 09 Nov 2023 14:35:07 GMT", - "tag": "@griffel/webpack-loader_v2.2.5", - "version": "2.2.5", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.5.4", - "commit": "8f213a0c040ee833b268cb2558adf976773ac14d" - } - ] - } - }, - { - "date": "Mon, 30 Oct 2023 14:08:55 GMT", - "tag": "@griffel/webpack-loader_v2.2.4", - "version": "2.2.4", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "d286d4776d846609a051e273d42dc507f1946204", - "comment": "chore: bump Babel dependencies" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.5.3", - "commit": "f001ae503d75d7ddcf70d0633e2f51111b70ed45" - } - ] - } - }, - { - "date": "Tue, 03 Oct 2023 19:09:32 GMT", - "tag": "@griffel/webpack-loader_v2.2.3", - "version": "2.2.3", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.5.2", - "commit": "1476e34bd093df1132181acfebbb8c51922d5c8b" - } - ] - } - }, - { - "date": "Fri, 15 Sep 2023 08:08:43 GMT", - "tag": "@griffel/webpack-loader_v2.2.2", - "version": "2.2.2", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.5.1", - "commit": "744403e2d046701dc82b02460a60e1680bb60f2e" - } - ] - } - }, - { - "date": "Mon, 28 Aug 2023 17:17:47 GMT", - "tag": "@griffel/webpack-loader_v2.2.1", - "version": "2.2.1", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.5.0", - "commit": "5865f8ac8953dc0caa5dc47807e8bc9cc6487dae" - } - ] - } - }, - { - "date": "Wed, 16 Aug 2023 09:24:28 GMT", - "tag": "@griffel/webpack-loader_v2.2.0", - "version": "2.2.0", - "comments": { - "minor": [ - { - "author": "miclo@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "198ab2912d01b2315ac131ac5f20395d7c665b6c", - "comment": "feat: add webpackResolveOptions to specify custom resolve options" - } - ] - } - }, - { - "date": "Thu, 10 Aug 2023 09:00:28 GMT", - "tag": "@griffel/webpack-loader_v2.1.21", - "version": "2.1.21", - "comments": { - "patch": [ - { - "author": "miclo@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "74950294ac114b26108214ab8a020d04275e2577", - "comment": "feat: Add 'inheritResolveOptions' to configure resolve options in Webpack" - } - ] - } - }, - { - "date": "Mon, 31 Jul 2023 12:18:47 GMT", - "tag": "@griffel/webpack-loader_v2.1.20", - "version": "2.1.20", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.20", - "commit": "fa5f0d726cbdca1cc583ccc7af4578a7f3f6599f" - } - ] - } - }, - { - "date": "Mon, 31 Jul 2023 09:05:33 GMT", - "tag": "@griffel/webpack-loader_v2.1.19", - "version": "2.1.19", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.19", - "commit": "1d0df068e80f3cb602651f1875edbd625d221c47" - } - ] - } - }, - { - "date": "Wed, 19 Jul 2023 07:32:54 GMT", - "tag": "@griffel/webpack-loader_v2.1.18", - "version": "2.1.18", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.18", - "commit": "47f4df96449fc23545eab7c58ede2e55610c637c" - } - ] - } - }, - { - "date": "Thu, 13 Jul 2023 11:31:22 GMT", - "tag": "@griffel/webpack-loader_v2.1.17", - "version": "2.1.17", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.17", - "commit": "2f75c38dada524264284c2a92c57437309dcf491" - } - ] - } - }, - { - "date": "Thu, 29 Jun 2023 12:49:54 GMT", - "tag": "@griffel/webpack-loader_v2.1.16", - "version": "2.1.16", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.16", - "commit": "105857b021ee1d471efc29037a20601fb80bc72a" - } - ] - } - }, - { - "date": "Wed, 28 Jun 2023 16:07:13 GMT", - "tag": "@griffel/webpack-loader_v2.1.15", - "version": "2.1.15", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.15", - "commit": "d551a7f5a11b4123d1b353cab37e85058de17eb4" - } - ] - } - }, - { - "date": "Tue, 27 Jun 2023 14:18:04 GMT", - "tag": "@griffel/webpack-loader_v2.1.14", - "version": "2.1.14", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.14", - "commit": "02499fc94501e5f859aef982db3d9a23bc2a13bc" - } - ] - } - }, - { - "date": "Fri, 14 Apr 2023 07:58:49 GMT", - "tag": "@griffel/webpack-loader_v2.1.13", - "version": "2.1.13", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.13", - "commit": "ff7edd54e829fbeb5453383fe6a19009e44b64b2" - } - ] - } - }, - { - "date": "Wed, 29 Mar 2023 12:45:13 GMT", - "tag": "@griffel/webpack-loader_v2.1.12", - "version": "2.1.12", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.12", - "commit": "9ad8031fa6346e97d5d444b26d7bdf380f9c69c1" - } - ] - } - }, - { - "date": "Thu, 02 Mar 2023 14:51:11 GMT", - "tag": "@griffel/webpack-loader_v2.1.11", - "version": "2.1.11", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "3edb840d4139d81744620d8bded738d814cd71f5", - "comment": "chore: remove @griffel/react from peerDependencies" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.11", - "commit": "3edb840d4139d81744620d8bded738d814cd71f5" - } - ], - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "d8e62d7756c8bd3908e2ce5a95ee0a842fc7df9d", - "comment": "chore: bump Nx" - } - ] - } - }, - { - "date": "Fri, 10 Feb 2023 10:23:25 GMT", - "tag": "@griffel/webpack-loader_v2.1.10", - "version": "2.1.10", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "bb07d370d3084b9bd7f2941fd82be79fa6c99b4b", - "comment": "chore: update tsconfig files" - } - ], - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.10", - "commit": "5837c739ee141a9099a031449870dbca46ce648d" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.5.4", - "commit": "5837c739ee141a9099a031449870dbca46ce648d" - } - ] - } - }, - { - "date": "Thu, 26 Jan 2023 14:06:28 GMT", - "tag": "@griffel/webpack-loader_v2.1.9", - "version": "2.1.9", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.9", - "commit": "d87ba30b4f07fc759c0abb18ff86fd57dd79296f" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.5.3", - "commit": "d87ba30b4f07fc759c0abb18ff86fd57dd79296f" - } - ] - } - }, - { - "date": "Tue, 20 Dec 2022 11:48:33 GMT", - "tag": "@griffel/webpack-loader_v2.1.8", - "version": "2.1.8", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.8", - "commit": "7d2e3ba8656afccb6cf0b56e7b7f6cce0ae9fd15" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.5.2", - "commit": "7d2e3ba8656afccb6cf0b56e7b7f6cce0ae9fd15" - } - ] - } - }, - { - "date": "Fri, 09 Dec 2022 11:15:19 GMT", - "tag": "@griffel/webpack-loader_v2.1.7", - "version": "2.1.7", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "6c3c1e3738c2f5bad96a99f68df9a64099989cb2", - "comment": "chore: remove loader-utils & schema-utils from dependencies" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.7", - "commit": "9b94a45ba5bd526460dd97aaea103cf64d9d5450" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.5.1", - "commit": "9b94a45ba5bd526460dd97aaea103cf64d9d5450" - } - ] - } - }, - { - "date": "Wed, 30 Nov 2022 17:14:53 GMT", - "tag": "@griffel/webpack-loader_v2.1.6", - "version": "2.1.6", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "ac04890efdb16a99bc2d3c8eae2b7cfe514b6288", - "comment": "chore: update loader-utils dependency" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.6", - "commit": "f985b6dc5e3576f5aacce45752755d06cff7ef70" - } - ] - } - }, - { - "date": "Wed, 30 Nov 2022 09:32:24 GMT", - "tag": "@griffel/webpack-loader_v2.1.5", - "version": "2.1.5", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.5", - "commit": "f5c9ec05b8892ef7388e876671b475daf64b28b6" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.5.0", - "commit": "f5c9ec05b8892ef7388e876671b475daf64b28b6" - } - ] - } - }, - { - "date": "Thu, 24 Nov 2022 10:05:12 GMT", - "tag": "@griffel/webpack-loader_v2.1.4", - "version": "2.1.4", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.4", - "commit": "fc3403a602d5dd0b206ceeb48ca689cb2fdf6d37" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.4.3", - "commit": "fc3403a602d5dd0b206ceeb48ca689cb2fdf6d37" - } - ] - } - }, - { - "date": "Wed, 26 Oct 2022 11:06:03 GMT", - "tag": "@griffel/webpack-loader_v2.1.3", - "version": "2.1.3", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.3", - "commit": "f9fb5726c89abff0c7f5e07c6e1d1c8e0ebbcde6" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.4.2", - "commit": "f9fb5726c89abff0c7f5e07c6e1d1c8e0ebbcde6" - } - ] - } - }, - { - "date": "Wed, 19 Oct 2022 08:34:48 GMT", - "tag": "@griffel/webpack-loader_v2.1.2", - "version": "2.1.2", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.2", - "commit": "fe93c5fbe57537dba2fd9c6b216d659b38a38a2f" - } - ] - } - }, - { - "date": "Tue, 18 Oct 2022 15:59:43 GMT", - "tag": "@griffel/webpack-loader_v2.1.1", - "version": "2.1.1", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.1", - "commit": "7745eb70d3e82aed0a188f2546b01f43917d440d" - } - ] - } - }, - { - "date": "Thu, 13 Oct 2022 08:36:18 GMT", - "tag": "@griffel/webpack-loader_v2.1.0", - "version": "2.1.0", - "comments": { - "minor": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "b360b562bc7180fa13c6d0a1979673983bfe5ee0", - "comment": "feat: add support for makeResetStyles transforms" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.4.0", - "commit": "32d9b0bfa4372343d710368b6bed1cc5185a6684" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.4.1", - "commit": "32d9b0bfa4372343d710368b6bed1cc5185a6684" - } - ] - } - }, - { - "date": "Wed, 05 Oct 2022 14:28:43 GMT", - "tag": "@griffel/webpack-loader_v2.0.15", - "version": "2.0.15", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.3.9", - "commit": "9173966f4f1c69556f68351e6361d9302c674621" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.4.0", - "commit": "9173966f4f1c69556f68351e6361d9302c674621" - } - ] - } - }, - { - "date": "Tue, 04 Oct 2022 08:44:33 GMT", - "tag": "@griffel/webpack-loader_v2.0.14", - "version": "2.0.14", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.3.8", - "commit": "6828b9b754d65621e12a8fbff54c9f486eab032e" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.3.2", - "commit": "6828b9b754d65621e12a8fbff54c9f486eab032e" - } - ] - } - }, - { - "date": "Tue, 16 Aug 2022 11:16:00 GMT", - "tag": "@griffel/webpack-loader_v2.0.13", - "version": "2.0.13", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.3.7", - "commit": "545253c7bd0c84f3c72803b6b88946e617922714" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.3.1", - "commit": "545253c7bd0c84f3c72803b6b88946e617922714" - } - ] - } - }, - { - "date": "Wed, 03 Aug 2022 15:28:36 GMT", - "tag": "@griffel/webpack-loader_v2.0.12", - "version": "2.0.12", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.3.0", - "commit": "5fe534790f489fc865785463f716b196d5db0cd1" - } - ] - } - }, - { - "date": "Wed, 03 Aug 2022 13:28:05 GMT", - "tag": "@griffel/webpack-loader_v2.0.11", - "version": "2.0.11", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.3.6", - "commit": "7eb59c4270491c9220f45e7109d17ea6099697f5" - } - ] - } - }, - { - "date": "Wed, 27 Jul 2022 13:03:12 GMT", - "tag": "@griffel/webpack-loader_v2.0.10", - "version": "2.0.10", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "c0240b9d0e447105fb66c2896945ed77df6f5577", - "comment": "chore: update compilerOptions.lib" - } - ], - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.3.5", - "commit": "2b80f0c1fae8d5dc0ae66d072f499e25bd6042c4" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.2.3", - "commit": "2b80f0c1fae8d5dc0ae66d072f499e25bd6042c4" - } - ] - } - }, - { - "date": "Tue, 19 Jul 2022 10:20:09 GMT", - "tag": "@griffel/webpack-loader_v2.0.9", - "version": "2.0.9", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.3.4", - "commit": "9b1d23a654c1af9ccde3aa4807b70dff2cdf58d7" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.2.2", - "commit": "9b1d23a654c1af9ccde3aa4807b70dff2cdf58d7" - } - ] - } - }, - { - "date": "Tue, 28 Jun 2022 09:50:50 GMT", - "tag": "@griffel/webpack-loader_v2.0.8", - "version": "2.0.8", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.3.3", - "commit": "604926fc2fdd4596cd122b92b82a3f5e5d40d23d" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.2.1", - "commit": "604926fc2fdd4596cd122b92b82a3f5e5d40d23d" - } - ] - } - }, - { - "date": "Thu, 23 Jun 2022 08:37:05 GMT", - "tag": "@griffel/webpack-loader_v2.0.7", - "version": "2.0.7", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.3.2", - "commit": "6b98eb67f7b4399bcc9bd66607e296640449ae98" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.2.0", - "commit": "6b98eb67f7b4399bcc9bd66607e296640449ae98" - } - ] - } - }, - { - "date": "Thu, 26 May 2022 15:06:34 GMT", - "tag": "@griffel/webpack-loader_v2.0.6", - "version": "2.0.6", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.1.0", - "commit": "ef665ab8dbc42c4db6625144357041f55e78c46e" - } - ] - } - }, - { - "date": "Tue, 17 May 2022 08:34:48 GMT", - "tag": "@griffel/webpack-loader_v2.0.5", - "version": "2.0.5", - "comments": { - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.3.1", - "commit": "ca92d20c52389ce51f089c39b03f2838c8329a60" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.0.5", - "commit": "ca92d20c52389ce51f089c39b03f2838c8329a60" - } - ] - } - }, - { - "date": "Wed, 04 May 2022 16:15:22 GMT", - "tag": "@griffel/webpack-loader_v2.0.4", - "version": "2.0.4", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "7cbdfc73945ae85da7b0d35a1fa808559a9aa5af", - "comment": "chore: remove dependency on @linaria/babel-preset" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.3.0", - "commit": "dbf9adc8acedba645ee95f469353836d1ae5fa6a" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.0.4", - "commit": "dbf9adc8acedba645ee95f469353836d1ae5fa6a" - } - ] - } - }, - { - "date": "Wed, 06 Apr 2022 13:28:28 GMT", - "tag": "@griffel/webpack-loader_v2.0.3", - "version": "2.0.3", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "cbfd3045dadcce6f2f8348d56eaf882c5e408482", - "comment": "update README, fix caller & plugin names" - }, - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "594f3264239c1c138eeae969713ed09498e95b6c", - "comment": "docs: update README to include configuration guide" - } - ], - "patch": [ - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.2.0", - "commit": "995c356bc77272f6fe69a604db6485d57a9ba7c4" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.0.3", - "commit": "995c356bc77272f6fe69a604db6485d57a9ba7c4" - } - ] - } - }, - { - "date": "Wed, 09 Mar 2022 13:56:06 GMT", - "tag": "@griffel/webpack-loader_v2.0.2", - "version": "2.0.2", - "comments": { - "none": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "9ec31fd5cf2fd944c9620454543d4031d49e9c70", - "comment": "chore: do not bundle changelog files" - } - ], - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "de373b3e85d3987a0b52b38df5f60d40ba9e6f22", - "comment": "chore: add dependencies explicitly to package.json" - }, - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "344986d25e24a9b88006aa2592d287a819262cf3", - "comment": "fix: add missing dependency on Webpack loader" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/babel-preset to v1.1.1", - "commit": "7e1846070ad96b71b2789fe76e37dcac4f6155e7" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.0.2", - "commit": "7e1846070ad96b71b2789fe76e37dcac4f6155e7" - } - ] - } - }, - { - "date": "Mon, 07 Mar 2022 09:08:08 GMT", - "tag": "@griffel/webpack-loader_v2.0.1", - "version": "2.0.1", - "comments": { - "patch": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "f4276d704afe5b7ebb8164993b97d52143aec707", - "comment": "fix: use this.cacheable() to improve performance" - }, - { - "author": "beachball", - "package": "@griffel/webpack-loader", - "comment": "Bump @griffel/react to v1.0.1", - "commit": "b97c0adca3e602259f7d930ffa8886eafa7e3870" - } - ], - "none": [ - { - "author": "lingfangao@hotmail.com", - "package": "@griffel/webpack-loader", - "commit": "ff6078d3d9dac9a1d5310a027d41e7d6a75ce959", - "comment": "chore: enable pretty type-check output" - }, - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "35ec68e5db45f33511b6091ad43eb2b3a316fa7b", - "comment": "chore: add \"type-check\" target to project.json " - } - ] - } - }, - { - "date": "Thu, 27 Jan 2022 13:47:55 GMT", - "tag": "@griffel/webpack-loader_v2.0.0", - "version": "2.0.0", - "comments": { - "major": [ - { - "author": "olfedias@microsoft.com", - "package": "@griffel/webpack-loader", - "commit": "577c9bdff22c0e499263d034a919d487db0592db", - "comment": "initial release" - } - ] - } - } - ] -} diff --git a/packages/webpack-loader/CHANGELOG.md b/packages/webpack-loader/CHANGELOG.md deleted file mode 100644 index a44dd4cbd..000000000 --- a/packages/webpack-loader/CHANGELOG.md +++ /dev/null @@ -1,531 +0,0 @@ -# Change Log - @griffel/webpack-loader - -This log was last generated on Fri, 06 Mar 2026 15:56:28 GMT and should not be manually modified. - - - -## 2.2.23 - -Fri, 06 Mar 2026 15:56:28 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.8.1 - -## 2.2.22 - -Fri, 06 Mar 2026 08:17:06 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.8.0 - -## 2.2.21 - -Mon, 03 Nov 2025 15:43:56 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.7.0 - -## 2.2.20 - -Mon, 28 Jul 2025 09:12:30 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.6.8 - -## 2.2.19 - -Tue, 22 Apr 2025 10:05:48 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.6.7 - -## 2.2.18 - -Thu, 23 Jan 2025 12:09:03 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.6.6 - -## 2.2.17 - -Wed, 22 Jan 2025 13:44:43 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.6.5 - -## 2.2.16 - -Tue, 12 Nov 2024 09:58:11 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.6.4 - -## 2.2.15 - -Thu, 31 Oct 2024 16:16:50 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.6.3 - -## 2.2.14 - -Mon, 29 Jul 2024 07:31:53 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.6.2 - -## 2.2.13 - -Wed, 10 Jul 2024 14:36:29 GMT - -### Patches - -- fix(webpack-loader): fix schema for webpackResolveOptions.plugins (olfedias@microsoft.com) -- Bump @griffel/babel-preset to v1.6.1 - -## 2.2.12 - -Wed, 22 May 2024 08:24:17 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.6.0 - -## 2.2.11 - -Fri, 10 May 2024 10:13:20 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.5.9 - -## 2.2.10 - -Thu, 02 May 2024 14:07:14 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.5.8 - -## 2.2.9 - -Tue, 19 Mar 2024 11:33:53 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.5.7 - -## 2.2.8 - -Fri, 12 Jan 2024 11:08:40 GMT - -### Patches - -- chore: bump `enhanced-resolve` & improve internal types (olfedias@microsoft.com) -- Bump @griffel/babel-preset to v1.5.6 - -## 2.2.7 - -Thu, 30 Nov 2023 16:42:15 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.5.5 - -## 2.2.6 - -Mon, 13 Nov 2023 15:16:05 GMT - -### Patches - -- fix: replace null inputSourceMap with undefined (alinazaieva@microsoft.com) - -## 2.2.5 - -Thu, 09 Nov 2023 14:35:07 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.5.4 - -## 2.2.4 - -Mon, 30 Oct 2023 14:08:55 GMT - -### Patches - -- chore: bump Babel dependencies (olfedias@microsoft.com) -- Bump @griffel/babel-preset to v1.5.3 - -## 2.2.3 - -Tue, 03 Oct 2023 19:09:32 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.5.2 - -## 2.2.2 - -Fri, 15 Sep 2023 08:08:43 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.5.1 - -## 2.2.1 - -Mon, 28 Aug 2023 17:17:47 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.5.0 - -## 2.2.0 - -Wed, 16 Aug 2023 09:24:28 GMT - -### Minor changes - -- feat: add webpackResolveOptions to specify custom resolve options (miclo@microsoft.com) - -## 2.1.21 - -Thu, 10 Aug 2023 09:00:28 GMT - -### Patches - -- feat: Add 'inheritResolveOptions' to configure resolve options in Webpack (miclo@microsoft.com) - -## 2.1.20 - -Mon, 31 Jul 2023 12:18:47 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.20 - -## 2.1.19 - -Mon, 31 Jul 2023 09:05:33 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.19 - -## 2.1.18 - -Wed, 19 Jul 2023 07:32:54 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.18 - -## 2.1.17 - -Thu, 13 Jul 2023 11:31:22 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.17 - -## 2.1.16 - -Thu, 29 Jun 2023 12:49:54 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.16 - -## 2.1.15 - -Wed, 28 Jun 2023 16:07:13 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.15 - -## 2.1.14 - -Tue, 27 Jun 2023 14:18:04 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.14 - -## 2.1.13 - -Fri, 14 Apr 2023 07:58:49 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.13 - -## 2.1.12 - -Wed, 29 Mar 2023 12:45:13 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.12 - -## 2.1.11 - -Thu, 02 Mar 2023 14:51:11 GMT - -### Patches - -- chore: remove @griffel/react from peerDependencies (olfedias@microsoft.com) -- Bump @griffel/babel-preset to v1.4.11 - -## 2.1.10 - -Fri, 10 Feb 2023 10:23:25 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.10 -- Bump @griffel/react to v1.5.4 - -## 2.1.9 - -Thu, 26 Jan 2023 14:06:28 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.9 -- Bump @griffel/react to v1.5.3 - -## 2.1.8 - -Tue, 20 Dec 2022 11:48:33 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.8 -- Bump @griffel/react to v1.5.2 - -## 2.1.7 - -Fri, 09 Dec 2022 11:15:19 GMT - -### Patches - -- chore: remove loader-utils & schema-utils from dependencies (olfedias@microsoft.com) -- Bump @griffel/babel-preset to v1.4.7 -- Bump @griffel/react to v1.5.1 - -## 2.1.6 - -Wed, 30 Nov 2022 17:14:53 GMT - -### Patches - -- chore: update loader-utils dependency (olfedias@microsoft.com) -- Bump @griffel/babel-preset to v1.4.6 - -## 2.1.5 - -Wed, 30 Nov 2022 09:32:24 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.5 -- Bump @griffel/react to v1.5.0 - -## 2.1.4 - -Thu, 24 Nov 2022 10:05:12 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.4 -- Bump @griffel/react to v1.4.3 - -## 2.1.3 - -Wed, 26 Oct 2022 11:06:03 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.3 -- Bump @griffel/react to v1.4.2 - -## 2.1.2 - -Wed, 19 Oct 2022 08:34:48 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.2 - -## 2.1.1 - -Tue, 18 Oct 2022 15:59:43 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.4.1 - -## 2.1.0 - -Thu, 13 Oct 2022 08:36:18 GMT - -### Minor changes - -- feat: add support for makeResetStyles transforms (olfedias@microsoft.com) -- Bump @griffel/babel-preset to v1.4.0 -- Bump @griffel/react to v1.4.1 - -## 2.0.15 - -Wed, 05 Oct 2022 14:28:43 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.3.9 -- Bump @griffel/react to v1.4.0 - -## 2.0.14 - -Tue, 04 Oct 2022 08:44:33 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.3.8 -- Bump @griffel/react to v1.3.2 - -## 2.0.13 - -Tue, 16 Aug 2022 11:16:00 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.3.7 -- Bump @griffel/react to v1.3.1 - -## 2.0.12 - -Wed, 03 Aug 2022 15:28:36 GMT - -### Patches - -- Bump @griffel/react to v1.3.0 - -## 2.0.11 - -Wed, 03 Aug 2022 13:28:05 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.3.6 - -## 2.0.10 - -Wed, 27 Jul 2022 13:03:12 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.3.5 -- Bump @griffel/react to v1.2.3 - -## 2.0.9 - -Tue, 19 Jul 2022 10:20:09 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.3.4 -- Bump @griffel/react to v1.2.2 - -## 2.0.8 - -Tue, 28 Jun 2022 09:50:50 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.3.3 -- Bump @griffel/react to v1.2.1 - -## 2.0.7 - -Thu, 23 Jun 2022 08:37:05 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.3.2 -- Bump @griffel/react to v1.2.0 - -## 2.0.6 - -Thu, 26 May 2022 15:06:34 GMT - -### Patches - -- Bump @griffel/react to v1.1.0 - -## 2.0.5 - -Tue, 17 May 2022 08:34:48 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.3.1 -- Bump @griffel/react to v1.0.5 - -## 2.0.4 - -Wed, 04 May 2022 16:15:22 GMT - -### Patches - -- chore: remove dependency on @linaria/babel-preset (olfedias@microsoft.com) -- Bump @griffel/babel-preset to v1.3.0 -- Bump @griffel/react to v1.0.4 - -## 2.0.3 - -Wed, 06 Apr 2022 13:28:28 GMT - -### Patches - -- Bump @griffel/babel-preset to v1.2.0 -- Bump @griffel/react to v1.0.3 - -## 2.0.2 - -Wed, 09 Mar 2022 13:56:06 GMT - -### Patches - -- chore: add dependencies explicitly to package.json (olfedias@microsoft.com) -- fix: add missing dependency on Webpack loader (olfedias@microsoft.com) -- Bump @griffel/babel-preset to v1.1.1 -- Bump @griffel/react to v1.0.2 - -## 2.0.1 - -Mon, 07 Mar 2022 09:08:08 GMT - -### Patches - -- fix: use this.cacheable() to improve performance (olfedias@microsoft.com) -- Bump @griffel/react to v1.0.1 - -## 2.0.0 - -Thu, 27 Jan 2022 13:47:55 GMT - -### Major changes - -- initial release (olfedias@microsoft.com) diff --git a/packages/webpack-loader/README.md b/packages/webpack-loader/README.md deleted file mode 100644 index 2c50b3d8c..000000000 --- a/packages/webpack-loader/README.md +++ /dev/null @@ -1,269 +0,0 @@ -# Webpack loader for Griffel - -A loader for Webpack 5 that performs build time transforms for [`@griffel/react`](../react). - - - - -- [Install](#install) -- [Usage](#usage) - - [Handling Griffel re-exports](#handling-griffel-re-exports) - - [Configuring Babel settings](#configuring-babel-settings) - - [Configuring webpack resolve options](#configuring-webpack-resolve-options) - - [Configuring module evaluation](#configuring-module-evaluation) -- [Troubleshooting](#troubleshooting) - - - -## Install - -```bash -yarn add --dev @griffel/webpack-loader -# or -npm install --save-dev @griffel/webpack-loader -``` - -## Usage - -Webpack documentation: [Loaders](https://webpack.js.org/loaders/) - -Within your webpack configuration object, you'll need to add the `@griffel/webpack-loader` to the list of modules, like so: - -```js -module.exports = { - module: { - rules: [ - { - test: /\.(js|jsx)$/, - exclude: /node_modules/, - use: { - loader: '@griffel/webpack-loader', - }, - }, - - // If your project uses TypeScript - { - test: /\.(ts|tsx)$/, - exclude: /node_modules/, - use: { - loader: '@griffel/webpack-loader', - options: { - babelOptions: { - presets: ['@babel/preset-typescript'], - }, - }, - }, - }, - ], - }, -}; -``` - -While the loader itself has a short circuit to avoid processing (invoking Babel transforms) it's better to reduce the scope of processed files. For example, you can enforce a restriction to have `makeStyles()` calls only in `.styles.ts` files: - -```js -module.exports = { - module: { - rules: [ - { - test: /\.styles.ts$/, - exclude: /node_modules/, - use: { - loader: '@griffel/webpack-loader', - options: { - babelOptions: { - presets: ['@babel/preset-typescript'], - }, - }, - }, - }, - ], - }, -}; -``` - -### Handling Griffel re-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', - }, - ], - }, - }, - }, - ], - }, -}; -``` - -> **Note**: "custom-package" should re-export following functions from `@griffel/react`: -> -> - `__styles` -> - `__css` -> - `__resetStyles` -> - `__resetCSS` - -### Configuring Babel settings - -If you need to specify custom Babel configuration, you can pass them to `babelOptions`. These options will be used by the Webpack loader when parsing and evaluating modules. - -```js -module.exports = { - module: { - rules: [ - { - test: /\.(ts|tsx)$/, - exclude: /node_modules/, - use: { - loader: '@griffel/webpack-loader', - options: { - babelOptions: { - // Optional plugins specific to your environment - plugins: ['@babel/plugin-proposal-class-static-block'], - // If your project uses TypeScript - presets: ['@babel/preset-typescript'], - }, - }, - }, - }, - ], - }, -}; -``` - -### Configuring webpack resolve options - -If your `@griffel/react` modules import other files (eg., a set of common mixins or colors for your app), the loader resolves these using `enhanced-resolve`. By default, it inherits the settings `resolve.alias`, `resolve.modules`, and `resolve.modules` from your Webpack config, while using its own default values for `resolve.extensions` and `resolve.conditionNames`. - -If you want to change this behavior, you can choose which [`resolve` options](https://webpack.js.org/configuration/resolve/) are inherited from your Webpack config. - -```js -module.exports = { - module: { - rules: [ - { - test: /\.(js|jsx)$/, - exclude: /node_modules/, - use: { - loader: '@griffel/webpack-loader', - options: { - inheritResolveOptions: ['alias', 'modules', 'plugins', 'conditionNames'], - }, - }, - }, - ], - }, -}; -``` - -Alternatively, you can specify custom [`resolve` options](https://webpack.js.org/configuration/resolve/). These values will override any options inherited from your webpack config. This can be particularly important if you use custom `conditionNames` that do not include `require`, which is necessary for transformation. - -```js -module.exports = { - resolve: { - conditionNames: ['source', 'import'], - }, - module: { - rules: [ - { - test: /\.(js|jsx)$/, - exclude: /node_modules/, - use: { - loader: '@griffel/webpack-loader', - options: { - webpackResolveOptions: { - conditionNames: ['source', 'require'], - }, - }, - }, - }, - ], - }, -}; -``` - -### Configuring module evaluation - -```js -module.exports = { - module: { - rules: [ - { - test: /\.(js|jsx)$/, - exclude: /node_modules/, - use: { - loader: '@griffel/webpack-loader', - options: { - evaluationRules: [], - }, - }, - }, - ], - }, -}; -``` - -The set of rules that defines how the matched files will be transformed during the evaluation. `EvalRule` is an object with two fields: - -- test is a regular expression or a function `(path: string) => boolean` -- action is an `Evaluator` function, "ignore" or a name of the module that exports `Evaluator` function as a **default** export - -_If `test` is omitted, the rule is applicable for all the files._ - -The last matched rule is used for transformation. If the last matched action for a file is "ignore" the file will be evaluated as is, so that file must not contain any js code that cannot be executed in nodejs environment (it's usually true for any lib in `node_modules`). - -If you need to compile certain modules under `/node_modules/` (which can be the case in monorepo projects), it's recommended to do it on a module by module basis for faster transforms, e.g. ignore: `/node_modules[\/\\](?!some-module|other-module)/`. - -The default setup is: - -```js -module.exports = { - module: { - rules: [ - { - test: /\.(js|jsx)$/, - exclude: /node_modules/, - use: { - loader: '@griffel/webpack-loader', - options: { - evaluationRules: [ - { - action: require('@griffel/babel-preset').shakerEvaluator, - }, - { - test: /[/\\]node_modules[/\\]/, - action: 'ignore', - }, - ], - }, - }, - }, - ], - }, -}; -``` - -## Troubleshooting - -Under hood `@griffel/webpack-loader` uses [`@griffel/babel-preset`](../babel-preset), please check "Troubleshooting" there. diff --git a/packages/webpack-loader/__fixtures__/config-classname-hash-salt/code.ts b/packages/webpack-loader/__fixtures__/config-classname-hash-salt/code.ts deleted file mode 100644 index 87e16f368..000000000 --- a/packages/webpack-loader/__fixtures__/config-classname-hash-salt/code.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { makeStyles } from '@griffel/react'; - -export const styles = makeStyles({ - root: { color: 'red', paddingLeft: '10px' }, -}); diff --git a/packages/webpack-loader/__fixtures__/config-classname-hash-salt/output.ts b/packages/webpack-loader/__fixtures__/config-classname-hash-salt/output.ts deleted file mode 100644 index 6e932e6cb..000000000 --- a/packages/webpack-loader/__fixtures__/config-classname-hash-salt/output.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { __styles } from '@griffel/react'; -export const styles = __styles( - { - root: { - sj55zd: 'f3mwu0g', - uwmqm3: ['f1rfztu6', 'f1h66kgv'], - }, - }, - { - d: ['.f3mwu0g{color:red;}', '.f1rfztu6{padding-left:10px;}', '.f1h66kgv{padding-right:10px;}'], - }, -); -/*@griffel:classNameHashSalt "prefix"*/ 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/code.ts b/packages/webpack-loader/__fixtures__/empty/code.ts deleted file mode 100644 index c79de6eb0..000000000 --- a/packages/webpack-loader/__fixtures__/empty/code.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { makeStyles } from '@griffel/react'; - -export const useStyles = makeStyles({ - root: {}, -}); diff --git a/packages/webpack-loader/__fixtures__/empty/output.ts b/packages/webpack-loader/__fixtures__/empty/output.ts deleted file mode 100644 index f7330031a..000000000 --- a/packages/webpack-loader/__fixtures__/empty/output.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { __styles } from '@griffel/react'; -export const useStyles = __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/code.ts b/packages/webpack-loader/__fixtures__/function/code.ts deleted file mode 100644 index b88f8ebf5..000000000 --- a/packages/webpack-loader/__fixtures__/function/code.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { makeStyles } from '@griffel/react'; - -export const styles = makeStyles({ - root: { color: 'red' }, -}); diff --git a/packages/webpack-loader/__fixtures__/function/output.ts b/packages/webpack-loader/__fixtures__/function/output.ts deleted file mode 100644 index f227f4c15..000000000 --- a/packages/webpack-loader/__fixtures__/function/output.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { __styles } from '@griffel/react'; -export const styles = __styles( - { - root: { - sj55zd: 'fe3e8s9', - }, - }, - { - d: ['.fe3e8s9{color:red;}'], - }, -); diff --git a/packages/webpack-loader/__fixtures__/object/code.ts b/packages/webpack-loader/__fixtures__/object/code.ts deleted file mode 100644 index fa99ddeca..000000000 --- a/packages/webpack-loader/__fixtures__/object/code.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { makeStyles } from '@griffel/react'; -import { tokens } from './tokens'; - -export const styles = makeStyles({ - root: { color: tokens.colorBrandStroke1 }, -}); diff --git a/packages/webpack-loader/__fixtures__/object/output.ts b/packages/webpack-loader/__fixtures__/object/output.ts deleted file mode 100644 index 3f3ef2479..000000000 --- a/packages/webpack-loader/__fixtures__/object/output.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { __styles } from '@griffel/react'; -import { tokens } from './tokens'; -export const styles = __styles( - { - root: { - sj55zd: 'fl9q5hc', - }, - }, - { - d: ['.fl9q5hc{color:var(--colorBrandStroke1);}'], - }, -); diff --git a/packages/webpack-loader/__fixtures__/object/tokens.ts b/packages/webpack-loader/__fixtures__/object/tokens.ts deleted file mode 100644 index 7728554d5..000000000 --- a/packages/webpack-loader/__fixtures__/object/tokens.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const tokens = { - colorBrandStroke1: 'var(--colorBrandStroke1)', -}; diff --git a/packages/webpack-loader/__fixtures__/reset/code.ts b/packages/webpack-loader/__fixtures__/reset/code.ts deleted file mode 100644 index 1c0a4ac18..000000000 --- a/packages/webpack-loader/__fixtures__/reset/code.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { makeResetStyles } from '@griffel/react'; -import { tokens } from './tokens'; - -export const useStyles = makeResetStyles({ - color: tokens.colorBrandStroke1, - paddingLeft: '4px', -}); diff --git a/packages/webpack-loader/__fixtures__/reset/output.ts b/packages/webpack-loader/__fixtures__/reset/output.ts deleted file mode 100644 index 908b64601..000000000 --- a/packages/webpack-loader/__fixtures__/reset/output.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { __resetStyles } from '@griffel/react'; -import { tokens } from './tokens'; -export const useStyles = __resetStyles('rgwtdav', 'r133dp1', [ - '.rgwtdav{color:var(--colorBrandStroke1);padding-left:4px;}', - '.r133dp1{color:var(--colorBrandStroke1);padding-right:4px;}', -]); diff --git a/packages/webpack-loader/__fixtures__/reset/tokens.ts b/packages/webpack-loader/__fixtures__/reset/tokens.ts deleted file mode 100644 index 7728554d5..000000000 --- a/packages/webpack-loader/__fixtures__/reset/tokens.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const tokens = { - colorBrandStroke1: 'var(--colorBrandStroke1)', -}; diff --git a/packages/webpack-loader/__fixtures__/webpack-aliases/code.ts b/packages/webpack-loader/__fixtures__/webpack-aliases/code.ts deleted file mode 100644 index 41c87ce9b..000000000 --- a/packages/webpack-loader/__fixtures__/webpack-aliases/code.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { makeStyles } 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 = makeStyles({ - root: { - backgroundColor: color, - color: tokens.colorBrandStroke1, - }, -}); diff --git a/packages/webpack-loader/__fixtures__/webpack-aliases/color.ts b/packages/webpack-loader/__fixtures__/webpack-aliases/color.ts deleted file mode 100644 index 7d549441c..000000000 --- a/packages/webpack-loader/__fixtures__/webpack-aliases/color.ts +++ /dev/null @@ -1,3 +0,0 @@ -const color = 'blue'; - -export default color; diff --git a/packages/webpack-loader/__fixtures__/webpack-aliases/output.ts b/packages/webpack-loader/__fixtures__/webpack-aliases/output.ts deleted file mode 100644 index 06a3744a4..000000000 --- a/packages/webpack-loader/__fixtures__/webpack-aliases/output.ts +++ /dev/null @@ -1,15 +0,0 @@ -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( - { - root: { - De3pzq: 'f1bh81bl', - sj55zd: 'fl9q5hc', - }, - }, - { - d: ['.f1bh81bl{background-color:blue;}', '.fl9q5hc{color:var(--colorBrandStroke1);}'], - }, -); diff --git a/packages/webpack-loader/__fixtures__/webpack-aliases/tokens.ts b/packages/webpack-loader/__fixtures__/webpack-aliases/tokens.ts deleted file mode 100644 index 7728554d5..000000000 --- a/packages/webpack-loader/__fixtures__/webpack-aliases/tokens.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const tokens = { - colorBrandStroke1: 'var(--colorBrandStroke1)', -}; 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/code.ts b/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/code.ts deleted file mode 100644 index 5a6acd66c..000000000 --- a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/code.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { makeStyles } from '@griffel/react'; -import { tokens } from './tokens'; -// @ts-expect-error This module will be resolved via aliases -import color from 'non-existing-color-module'; - -export const styles = makeStyles({ - root: { - backgroundColor: color, - color: tokens.colorBrandStroke1, - }, -}); diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/color.ts b/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/color.ts deleted file mode 100644 index 7d549441c..000000000 --- a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/color.ts +++ /dev/null @@ -1,3 +0,0 @@ -const color = 'blue'; - -export default color; diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/fake-color.ts b/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/fake-color.ts deleted file mode 100644 index 8019b6a7b..000000000 --- a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/fake-color.ts +++ /dev/null @@ -1,3 +0,0 @@ -const color = 'red'; - -export default color; diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/output.ts b/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/output.ts deleted file mode 100644 index 22cb5aea9..000000000 --- a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/output.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { __styles } from '@griffel/react'; -import { tokens } from './tokens'; -// @ts-expect-error This module will be resolved via aliases -import color from 'non-existing-color-module'; -export const styles = __styles( - { - root: { - De3pzq: 'f1bh81bl', - sj55zd: 'fl9q5hc', - }, - }, - { - d: ['.f1bh81bl{background-color:blue;}', '.fl9q5hc{color:var(--colorBrandStroke1);}'], - }, -); diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/tokens.ts b/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/tokens.ts deleted file mode 100644 index 7728554d5..000000000 --- a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/tokens.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const tokens = { - colorBrandStroke1: 'var(--colorBrandStroke1)', -}; diff --git a/packages/webpack-loader/jest.config.ts b/packages/webpack-loader/jest.config.ts deleted file mode 100644 index 7793f0ab6..000000000 --- a/packages/webpack-loader/jest.config.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable */ -export default { - displayName: 'webpack-loader', - preset: '../../jest.preset.js', - globals: {}, - testEnvironment: 'node', - transform: { - '^.+\\.[tj]sx?$': [ - 'ts-jest', - { - tsconfig: '/tsconfig.spec.json', - }, - ], - }, - moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], - coverageDirectory: '../../coverage/packages/webpack-loader', -}; diff --git a/packages/webpack-loader/package.json b/packages/webpack-loader/package.json deleted file mode 100644 index 5f00ceebb..000000000 --- a/packages/webpack-loader/package.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "@griffel/webpack-loader", - "version": "2.2.23", - "description": "Webpack loader that performs build time transforms for Griffel", - "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/microsoft/griffel" - }, - "dependencies": { - "@babel/core": "^7.23.2", - "@griffel/babel-preset": "^1.8.1", - "enhanced-resolve": "^5.15.0", - "tslib": "^2.1.0" - }, - "peerDependencies": { - "webpack": "^5" - } -} diff --git a/packages/webpack-loader/project.json b/packages/webpack-loader/project.json deleted file mode 100644 index 975ee5aab..000000000 --- a/packages/webpack-loader/project.json +++ /dev/null @@ -1,51 +0,0 @@ -{ - "name": "@griffel/webpack-loader", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "packages/webpack-loader/src", - "projectType": "library", - "tags": [], - "targets": { - "lint": { - "executor": "@nx/eslint:lint", - "outputs": ["{options.outputFile}"] - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/packages/webpack-loader"], - "options": { - "jestConfig": "packages/webpack-loader/jest.config.ts" - } - }, - "build": { - "executor": "@nx/js:tsc", - "outputs": ["{options.outputPath}"], - "options": { - "outputPath": "dist/packages/webpack-loader", - "tsConfig": "packages/webpack-loader/tsconfig.lib.json", - "skipTypeField": true, - "packageJson": "packages/webpack-loader/package.json", - "main": "packages/webpack-loader/src/index.ts", - "assets": [ - "packages/webpack-loader/README.md", - { - "glob": "LICENSE.md", - "input": ".", - "output": "." - } - ] - } - }, - "type-check": { - "executor": "nx:run-commands", - "options": { - "cwd": "packages/webpack-loader", - "commands": [ - { - "command": "tsc -b --pretty" - } - ] - }, - "outputs": [] - } - } -} diff --git a/packages/webpack-loader/src/index.ts b/packages/webpack-loader/src/index.ts deleted file mode 100644 index e07e6e909..000000000 --- a/packages/webpack-loader/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { webpackLoader as default } from './webpackLoader'; diff --git a/packages/webpack-loader/src/schema.ts b/packages/webpack-loader/src/schema.ts deleted file mode 100644 index 02594e7ad..000000000 --- a/packages/webpack-loader/src/schema.ts +++ /dev/null @@ -1,46 +0,0 @@ -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: { - 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: { - type: 'array', - items: { type: 'object' }, - }, - }, - }, - }, -}; diff --git a/packages/webpack-loader/src/transformSync.ts b/packages/webpack-loader/src/transformSync.ts deleted file mode 100644 index 903d9b8d0..000000000 --- a/packages/webpack-loader/src/transformSync.ts +++ /dev/null @@ -1,58 +0,0 @@ -import * as Babel from '@babel/core'; -import type { BabelPluginOptions } from '@griffel/babel-preset'; -import griffelPreset 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 deleted file mode 100644 index aeea6665f..000000000 --- a/packages/webpack-loader/src/webpackLoader.test.ts +++ /dev/null @@ -1,296 +0,0 @@ -import * as fs from 'fs'; -import { createFsFromVolume, Volume } from 'memfs'; -import * as path from 'path'; -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; - webpackConfig?: webpack.Configuration; -}; - -const prettierConfig = JSON.parse( - fs.readFileSync(path.resolve(__dirname, '../../../.prettierrc'), { encoding: 'utf-8' }), -); - -async function compileSourceWithWebpack(entryPath: string, options: CompileOptions): Promise { - const defaultConfig: webpack.Configuration = { - context: __dirname, - entry: entryPath, - - mode: 'development', - - output: { - path: path.resolve(__dirname), - filename: 'bundle.js', - }, - externals: { - '@griffel/react': 'Griffel', - }, - - module: { - rules: [ - { - test: /\.(ts|tsx|txt)$/, - include: path.dirname(entryPath), - use: { - loader: path.resolve(__dirname, './index.ts'), - options: options.loaderOptions, - }, - }, - ], - }, - - resolve: { - extensions: ['.js', '.ts'], - }, - }; - - const webpackConfig = merge(defaultConfig, options.webpackConfig || {}); - const compiler = webpack(webpackConfig); - const memFs = createFsFromVolume(new Volume()); - - compiler.outputFileSystem = memFs as unknown as NonNullable; - compiler.outputFileSystem.join = path.join.bind(path); - - return new Promise((resolve, reject) => { - compiler.run((err, stats) => { - if (err) { - reject(err); - return; - } - - if (typeof stats === 'undefined') { - reject(new Error('"stats" from Webpack are not available, unknown error...')); - return; - } - - const jsonStats = stats.toJson({ source: true }); - - if (stats.hasErrors()) { - reject(stats.toJson().errors![0]); - return; - } - - if (!Array.isArray(jsonStats.modules)) { - reject(new Error(`"stats.toJson().modules" should be an array, this could be a compilation error...`)); - return; - } - - const entryModule = jsonStats.modules.find(module => module.nameForCondition === entryPath); - - if (!entryModule) { - reject(new Error(`Failed to find a fixture in "stats.toJson().modules", this could be a compilation error...`)); - return; - } - - resolve(entryModule.source as string); - }); - }); -} - -function fixLineEndings(value: string) { - return String(value).replace(/\r?\n/g, '\n').trim(); -} - -/** - * Test utility similar to "babel-plugin-tester". - * - * See https://webpack.js.org/contribute/writing-a-loader/#testing. - */ -function testFixture(fixtureName: string, options: CompileOptions = {}) { - it(`"${fixtureName}" fixture`, async () => { - const fixturePath = path.resolve(__dirname, '..', '__fixtures__', fixtureName); - - const tsCodePath = path.resolve(fixturePath, 'code.ts'); - const tsxCodePath = path.resolve(fixturePath, 'code.tsx'); - // Specially for cases when "code" contains syntax errors - const txtCodePath = path.resolve(fixturePath, 'code.txt'); - - const tsOutputPath = path.resolve(fixturePath, 'output.ts'); - const tsxOutputPath = path.resolve(fixturePath, 'output.tsx'); - - const inputPath = [ - fs.existsSync(tsCodePath) && tsCodePath, - fs.existsSync(tsxCodePath) && tsxCodePath, - fs.existsSync(txtCodePath) && txtCodePath, - ].find(Boolean); - const outputPath = [ - fs.existsSync(tsOutputPath) && tsOutputPath, - fs.existsSync(tsxOutputPath) && tsxOutputPath, - ].find(Boolean); - - const errorPath = path.resolve(fixturePath, 'error.ts'); - const expectedError = fs.existsSync(errorPath) && require(errorPath); - - if (!inputPath) { - throw new Error(`Failed to find "code.{js,ts,tsx}" in "${fixturePath}"`); - } - - if (!outputPath && !expectedError) { - throw new Error(`Failed to find "output.{js,ts,tsx}" or "error.ts" in "${fixturePath}"`); - } - - if (expectedError) { - if (!expectedError.default) { - throw new Error( - `Please check that "error.ts" contains a default export with an error or regex in "${fixturePath}"`, - ); - } - } - - let result = ''; - let resultError: Error | webpack.StatsError = new Error(); - - try { - result = fixLineEndings( - prettier.format(await compileSourceWithWebpack(inputPath, options), { - ...prettierConfig, - parser: 'typescript', - }), - ); - } catch (err) { - if (expectedError) { - resultError = err as webpack.StatsError; - } else { - throw err; - } - } - - if (outputPath) { - const output = fixLineEndings(await fs.promises.readFile(outputPath, 'utf8')); - - expect(result).toBe(output); - return; - } - - if (expectedError) { - expect(resultError.message).toMatch(expectedError.default); - } - }); -} - -describe('shouldTransformSourceCode', () => { - describe('handles defaults', () => { - it('makeStyles', () => { - expect(shouldTransformSourceCode(`import { makeStyles } from "@griffel/react"`, undefined)).toBe(true); - expect(shouldTransformSourceCode(`import { Button } from "@fluentui/react"`, undefined)).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); - }); - }); -}); - -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'); - - const fakeColorModulePath = path.resolve(__dirname, '..', '__fixtures__', 'webpack-resolve-plugins', 'fake-color.ts'); - const colorModulePath = path.resolve(__dirname, '..', '__fixtures__', 'webpack-resolve-plugins', 'color.ts'); - - const CustomAliasPlugin: webpack.ResolvePluginInstance = { - // Simple plugin that will detect the non-existent module we are testing for and replace with - // correct path from the fixture - apply(resolver) { - const target = resolver.ensureHook('internal-resolve'); - - resolver.getHook('raw-resolve').tapAsync('CustomAliasPlugin', (request, resolveContext, callback) => { - if (request.request === 'non-existing-color-module') { - const newRequest = { ...request, request: colorModulePath }; - - return resolver.doResolve(target, newRequest, null, resolveContext, callback); - } - - callback(); - }); - }, - }; - - testFixture('webpack-resolve-plugins', { - webpackConfig: { - resolve: { - alias: { - 'non-existing-color-module': fakeColorModulePath, - }, - plugins: [CustomAliasPlugin], - }, - }, - }); - testFixture('webpack-resolve-plugins', { - webpackConfig: { - resolve: { - alias: { - 'non-existing-color-module': fakeColorModulePath, - }, - }, - }, - loaderOptions: { - webpackResolveOptions: { plugins: [CustomAliasPlugin] }, - }, - }); - - // 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 deleted file mode 100644 index d5dd2e633..000000000 --- a/packages/webpack-loader/src/webpackLoader.ts +++ /dev/null @@ -1,144 +0,0 @@ -import type { BabelPluginOptions } from '@griffel/babel-preset'; -import { EvalCache, Module } from '@griffel/babel-preset'; -import * as enhancedResolve from 'enhanced-resolve'; -import * as path from 'path'; -import type * as webpack from 'webpack'; - -import type { TransformResult, TransformOptions } from './transformSync'; -import { transformSync } from './transformSync'; -import { optionsSchema } from './schema'; - -export type WebpackLoaderOptions = BabelPluginOptions & { - inheritResolveOptions?: ('alias' | 'modules' | 'plugins' | 'conditionNames' | 'extensions')[]; - webpackResolveOptions?: Pick< - Required['resolve'], - 'alias' | 'modules' | 'plugins' | 'conditionNames' | 'extensions' - >; -}; - -type ResolveOptions = Pick< - enhancedResolve.ResolveOptionsOptionalFS, - 'alias' | 'conditionNames' | 'extensions' | 'modules' | 'plugins' ->; -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; - } -} - -export function webpackLoader( - this: webpack.LoaderContext, - sourceCode: WebpackLoaderParams[0], - inputSourceMap: WebpackLoaderParams[1], -) { - // 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: 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 as ResolveOptions), - }); - - 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); - return; - } - - this.callback(error); -} diff --git a/packages/webpack-loader/tsconfig.json b/packages/webpack-loader/tsconfig.json deleted file mode 100644 index 2bd6d6f0a..000000000 --- a/packages/webpack-loader/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "allowJs": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -} diff --git a/packages/webpack-loader/tsconfig.lib.json b/packages/webpack-loader/tsconfig.lib.json deleted file mode 100644 index 14ef888bf..000000000 --- a/packages/webpack-loader/tsconfig.lib.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "module": "commonjs", - "outDir": "../../dist/out-tsc", - "declaration": true, - "types": ["node", "environment"] - }, - "exclude": ["__fixtures__/*/*.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"], - "include": ["**/*.ts"] -} diff --git a/packages/webpack-loader/tsconfig.spec.json b/packages/webpack-loader/tsconfig.spec.json deleted file mode 100644 index 06948acab..000000000 --- a/packages/webpack-loader/tsconfig.spec.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "jsx": "react", - "outDir": "../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node", "environment"] - }, - "include": [ - "__fixtures__/*/code.ts", - "**/*.test.ts", - "**/*.spec.ts", - "**/*.test.tsx", - "**/*.spec.tsx", - "**/*.test.js", - "**/*.spec.js", - "**/*.test.jsx", - "**/*.spec.jsx", - "**/*.d.ts", - "jest.config.ts" - ] -} diff --git a/packages/webpack-plugin/README.md b/packages/webpack-plugin/README.md index 24c2a2d7f..49f59509a 100644 --- a/packages/webpack-plugin/README.md +++ b/packages/webpack-plugin/README.md @@ -22,7 +22,7 @@ npm install --save-dev @griffel/webpack-plugin ## When to use it? -This is a replacement for `@griffel/webpack-loader` + `@griffel/webpack-extraction-plugin`. It combines both into a single plugin that handles CSS extraction without needing a separate loader setup. +This plugin handles both build-time transforms and CSS extraction in a single package, without needing a separate loader setup. ## Usage diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json index 530daa8ca..fd9f32599 100644 --- a/packages/webpack-plugin/package.json +++ b/packages/webpack-plugin/package.json @@ -8,14 +8,16 @@ "url": "https://github.com/microsoft/griffel" }, "type": "module", + "main": "./src/index.mjs", + "types": "./src/index.d.mts", "exports": { ".": { - "node": "./webpack-plugin.js", - "types": "./index.d.mts" + "types": "./src/index.d.mts", + "default": "./src/index.mjs" }, "./loader": { - "node": "./webpack-loader.js", - "types": "./webpackLoader.d.mts" + "types": "./src/webpackLoader.d.mts", + "default": "./src/webpackLoader.mjs" }, "./package.json": "./package.json" }, diff --git a/packages/webpack-plugin/project.json b/packages/webpack-plugin/project.json index 74428db48..ecfdf61c3 100644 --- a/packages/webpack-plugin/project.json +++ b/packages/webpack-plugin/project.json @@ -10,12 +10,27 @@ "outputs": ["{options.outputFile}"] }, "build": { - "executor": "@nx/vite:build", + "executor": "@nx/js:tsc", "outputs": ["{options.outputPath}"], "options": { "outputPath": "dist/packages/webpack-plugin", - "compiler": "swc", - "format": ["esm"] + "tsConfig": "packages/webpack-plugin/tsconfig.lib.json", + "skipTypeField": true, + "packageJson": "packages/webpack-plugin/package.json", + "main": "packages/webpack-plugin/src/index.mts", + "assets": [ + "packages/webpack-plugin/README.md", + { + "glob": "LICENSE.md", + "input": ".", + "output": "." + }, + { + "glob": "*", + "input": "packages/webpack-plugin/src/virtual-loader", + "output": "src/virtual-loader" + } + ] } }, "type-check": { diff --git a/packages/webpack-plugin/src/GriffelPlugin.mts b/packages/webpack-plugin/src/GriffelPlugin.mts index 2066e7fbe..3e6e14281 100644 --- a/packages/webpack-plugin/src/GriffelPlugin.mts +++ b/packages/webpack-plugin/src/GriffelPlugin.mts @@ -121,7 +121,10 @@ export class GriffelPlugin { evaluationMode: 'ast' | 'vm'; } > = {}; - readonly #perfIssues: Map }> = new Map(); + readonly #perfIssues: Map< + string, + { type: 'cjs-module' | 'barrel-export-star'; dependencyFilename: string; sourceFilenames: Set } + > = new Map(); constructor(options: GriffelCSSExtractionPluginOptions = {}) { this.#attachToEntryPoint = options.unstable_attachToEntryPoint; @@ -144,8 +147,7 @@ export class GriffelPlugin { // Webpack to shake out generated CSS. // @ Rspack compat: - // "createModule" in "normalModuleFactory" is not supported by Rspack - // https://github.com/web-infra-dev/rspack/blob/e52601e059fff1f0cdc4e9328746fb3ae6c3ecb2/packages/rspack/src/NormalModuleFactory.ts#L53 + // "createModule" in "normalModuleFactory" is supported by Rspack, but updates of `settings` are ignored if (!IS_RSPACK) { compiler.hooks.normalModuleFactory.tap(PLUGIN_NAME, nmf => { nmf.hooks.createModule.tap( @@ -181,70 +183,65 @@ export class GriffelPlugin { compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => { const resolveModule = this.#resolverFactory(compilation); - // @ Rspack compat - // As Rspack does not support functions in "splitChunks.cacheGroups" we have to emit modules differently - // and can't rely on this approach due - if (!IS_RSPACK) { - // WHAT? - // Adds a callback to the loader context - // WHY? - // Allows us to register the CSS extracted from Griffel calls to then process in a CSS module - const cssByModuleMap = new Map(); - - NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, module) => { - const resourcePath = module.resource; - - (loaderContext as SupplementedLoaderContext)[GriffelCssLoaderContextKey] = { - collectPerfIssues: this.#collectPerfIssues, - resolveModule, - registerExtractedCss(css: string) { - cssByModuleMap.set(resourcePath, css); - }, - getExtractedCss() { - const css = cssByModuleMap.get(resourcePath) ?? ''; - cssByModuleMap.delete(resourcePath); - - return css; - }, - runWithTimer: cb => { - if (!this.#collectStats && !this.#collectPerfIssues) { - return cb().result; - } + // WHAT? + // Adds a callback to the loader context + // WHY? + // Allows us to register the CSS extracted from Griffel calls to then process in a CSS module + const cssByModuleMap = new Map(); - const start = this.#collectStats ? process.hrtime.bigint() : 0n; - const { meta, result } = cb(); + NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, module) => { + const resourcePath = module.resource; - if (this.#collectStats) { - const end = process.hrtime.bigint(); + (loaderContext as SupplementedLoaderContext)[GriffelCssLoaderContextKey] = { + collectPerfIssues: this.#collectPerfIssues, + resolveModule, + registerExtractedCss(css: string) { + cssByModuleMap.set(resourcePath, css); + }, + getExtractedCss() { + const css = cssByModuleMap.get(resourcePath) ?? ''; + cssByModuleMap.delete(resourcePath); - this.#stats[meta.filename] = { - time: end - start, - evaluationMode: meta.evaluationMode, - }; - } + return css; + }, + runWithTimer: cb => { + if (!this.#collectStats && !this.#collectPerfIssues) { + return cb().result; + } + + const start = this.#collectStats ? process.hrtime.bigint() : 0n; + const { meta, result } = cb(); + + if (this.#collectStats) { + const end = process.hrtime.bigint(); + + this.#stats[meta.filename] = { + time: end - start, + evaluationMode: meta.evaluationMode, + }; + } - if (this.#collectPerfIssues && meta.perfIssues) { - for (const issue of meta.perfIssues) { - const key = `${issue.type}:${issue.dependencyFilename}`; - const existing = this.#perfIssues.get(key); - - if (existing) { - existing.sourceFilenames.add(meta.filename); - } else { - this.#perfIssues.set(key, { - type: issue.type, - dependencyFilename: issue.dependencyFilename, - sourceFilenames: new Set([meta.filename]), - }); - } + if (this.#collectPerfIssues && meta.perfIssues) { + for (const issue of meta.perfIssues) { + const key = `${issue.type}:${issue.dependencyFilename}`; + const existing = this.#perfIssues.get(key); + + if (existing) { + existing.sourceFilenames.add(meta.filename); + } else { + this.#perfIssues.set(key, { + type: issue.type, + dependencyFilename: issue.dependencyFilename, + sourceFilenames: new Set([meta.filename]), + }); } } + } - return result; - }, - }; - }); - } + return result; + }, + }; + }); // WHAT? // Performs module movements between chunks if SplitChunksPlugin is not enabled. @@ -257,7 +254,7 @@ export class GriffelPlugin { throw new Error( [ 'You are using Rspack, but don\'t have "optimization.splitChunks" enabled.', - '"optimization.splitChunks" should be enabled for "@griffel/webpack-extraction-plugin" to function properly.', + '"optimization.splitChunks" should be enabled for "@griffel/webpack-plugin" to function properly.', ].join(' '), ); } @@ -297,24 +294,14 @@ export class GriffelPlugin { stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS, }, assets => { - let cssAssetDetails; - - // @ Rspack compat - // "compilation.namedChunks.get()" explodes with Rspack - if (IS_RSPACK) { - cssAssetDetails = Object.entries(assets).find( - ([assetName]) => assetName.endsWith('.css') && assetName.includes('griffel'), - ); - } else { - const griffelChunk = compilation.namedChunks.get('griffel'); - - if (typeof griffelChunk === 'undefined') { - return; - } + const griffelChunk = compilation.namedChunks.get('griffel'); - cssAssetDetails = Object.entries(assets).find(([assetName]) => griffelChunk.files.has(assetName)); + if (typeof griffelChunk === 'undefined') { + return; } + const cssAssetDetails = Object.entries(assets).find(([assetName]) => griffelChunk.files.has(assetName)); + if (typeof cssAssetDetails === 'undefined') { return; } diff --git a/packages/webpack-plugin/src/webpackLoader.mts b/packages/webpack-plugin/src/webpackLoader.mts index 8061c1983..510a1cb9b 100644 --- a/packages/webpack-plugin/src/webpackLoader.mts +++ b/packages/webpack-plugin/src/webpackLoader.mts @@ -30,19 +30,17 @@ function webpackLoader( this.cacheable(); // Early return to handle cases when there is no Griffel usage in the file - if (sourceCode.indexOf('makeStyles') === -1 && sourceCode.indexOf('makeResetStyles') === -1 && sourceCode.indexOf('makeStaticStyles') === -1) { + if ( + sourceCode.indexOf('makeStyles') === -1 && + sourceCode.indexOf('makeResetStyles') === -1 && + sourceCode.indexOf('makeStaticStyles') === -1 + ) { this.callback(null, sourceCode, inputSourceMap); return; } - const IS_RSPACK = !this.webpack; - - // @ Rspack compat: - // We don't use the trick with loader context as assets are generated differently - if (!IS_RSPACK) { - if (!this[GriffelCssLoaderContextKey]) { - throw new Error('GriffelCSSExtractionPlugin is not configured, please check your webpack config'); - } + if (!this[GriffelCssLoaderContextKey]) { + throw new Error('GriffelCSSExtractionPlugin is not configured, please check your webpack config'); } const { classNameHashSalt, modules, evaluationRules } = this.getOptions(); @@ -92,7 +90,9 @@ function webpackLoader( return { result: undefined, meta }; } - if (IS_RSPACK) { + // Rspack compat: + // Support of CSS extraction is weird in Rspack, revisit later. + if (!this.webpack) { const request = `griffel.css!=!${virtualLoaderPath}!${virtualCSSFilePath}?style=${toURIComponent(css)}`; const stringifiedRequest = JSON.stringify(this.utils.contextify(this.context || this.rootContext, request)); diff --git a/packages/webpack-plugin/tsconfig.lib.json b/packages/webpack-plugin/tsconfig.lib.json index a99a4ea5c..6d2b82de4 100644 --- a/packages/webpack-plugin/tsconfig.lib.json +++ b/packages/webpack-plugin/tsconfig.lib.json @@ -1,6 +1,8 @@ { "extends": "./tsconfig.json", "compilerOptions": { + "module": "ESNext", + "moduleResolution": "bundler", "outDir": "../../dist/out-tsc", "declaration": true, "types": ["node", "environment"] diff --git a/packages/webpack-plugin/vite.config.ts b/packages/webpack-plugin/vite.config.ts deleted file mode 100644 index b13732a7b..000000000 --- a/packages/webpack-plugin/vite.config.ts +++ /dev/null @@ -1,64 +0,0 @@ -/// -import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; -import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin'; -import { defineConfig } from 'vite'; -import dts from 'vite-plugin-dts'; -import { readFileSync } from 'node:fs'; -import { join, resolve } from 'node:path'; - -const packageJson = JSON.parse(readFileSync(join(__dirname, 'package.json'), 'utf-8')); - -const dependencies: string[] = Object.keys({ - ...(packageJson.dependencies || {}), - ...(packageJson.peerDependencies || {}), -}); -const external = ([/node:/] as (string | RegExp)[]).concat(dependencies); - -export default defineConfig(() => ({ - root: __dirname, - cacheDir: '../../node_modules/.vite/packages/webpack-plugin', - plugins: [ - nxViteTsPaths(), - nxCopyAssetsPlugin([ - '*.md', - { - glob: '*', - input: 'src/virtual-loader', - output: 'virtual-loader', - }, - ]), - dts({ entryRoot: 'src', tsconfigPath: join(__dirname, 'tsconfig.lib.json'), pathsToAliases: false }), - ], - - // Uncomment this if you are using workers. - // worker: { - // plugins: [ nxViteTsPaths() ], - // }, - - build: { - emptyOutDir: true, - lib: { - entry: { - 'webpack-plugin': resolve(__dirname, 'src/index.mts'), - 'webpack-loader': resolve(__dirname, 'src/webpackLoader.mts'), - }, - formats: ['es' as const], - target: 'node20' as const, - }, - rollupOptions: { - external, - }, - minify: false, - }, - test: { - watch: false, - globals: true, - environment: 'node', - include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], - reporters: ['default'], - coverage: { - reportsDirectory: '../../coverage/packages/webpack-plugin', - provider: 'v8' as const, - }, - }, -})); diff --git a/packages/webpack-plugin/vitest.config.mts b/packages/webpack-plugin/vitest.config.mts new file mode 100644 index 000000000..787a10138 --- /dev/null +++ b/packages/webpack-plugin/vitest.config.mts @@ -0,0 +1,19 @@ +import { defineConfig } from 'vitest/config'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; + +export default defineConfig({ + root: __dirname, + cacheDir: '../../node_modules/.vite/packages/webpack-plugin', + plugins: [nxViteTsPaths()], + test: { + watch: false, + globals: true, + environment: 'node', + include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + reporters: ['default'], + coverage: { + reportsDirectory: '../../coverage/packages/webpack-plugin', + provider: 'v8', + }, + }, +}); diff --git a/tsconfig.base.json b/tsconfig.base.json index 7d1b4649a..257cab9f1 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -27,8 +27,7 @@ "@griffel/e2e-utils": ["e2e/utils/src/index.ts"], "@griffel/eslint-plugin": ["packages/eslint-plugin/src/index.ts"], "@griffel/jest-serializer": ["packages/jest-serializer/src/index.ts"], - "@griffel/next-extraction-plugin": ["packages/next-extraction-plugin/src/index.ts"], - "@griffel/postcss-syntax": ["packages/postcss-syntax/src/index.ts"], + "@griffel/postcss-syntax": ["packages/postcss-syntax/src/index.mts"], "@griffel/react": ["packages/react/src/index.ts"], "@griffel/style-types": ["packages/style-types/src/index.ts"], "@griffel/tag-processor": ["packages/tag-processor/src/index.ts"], @@ -38,8 +37,6 @@ "@griffel/transform-shaker": ["packages/transform-shaker/src/index.ts"], "@griffel/update-shorthands": ["tools/update-shorthands/src/index.ts"], "@griffel/vite-plugin": ["packages/vite-plugin/src/index.ts"], - "@griffel/webpack-extraction-plugin": ["packages/webpack-extraction-plugin/src/index.ts"], - "@griffel/webpack-loader": ["packages/webpack-loader/src/index.ts"], "@griffel/webpack-plugin": ["packages/webpack-plugin/src/index.mts"] }, "typeRoots": ["node_modules/@types", "./typings"]