chore: remove @griffel/babel-preset package

.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
 

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)
 

apps/website/docs/react/ahead-of-time-compilation/with-webpack.md

@@ -13,14 +13,14 @@ import TabItem from '@theme/TabItem';
 <TabItem value="yarn" label="Yarn">
 
 ```shell
-yarn add --dev @griffel/webpack-loader
+yarn add --dev @griffel/webpack-plugin
 ```
 
 </TabItem>
 <TabItem value="npm" label="NPM">
 
 ```shell
-npm install --save-dev @griffel/webpack-loader
+npm install --save-dev @griffel/webpack-plugin
 ```
 
 </TabItem>
@@ -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.

apps/website/docs/react/css-extraction/with-webpack.md

@@ -13,31 +13,25 @@ import TabItem from '@theme/TabItem';
 <TabItem value="yarn" label="Yarn">
 
 ```shell
-yarn add --dev @griffel/webpack-extraction-plugin
+yarn add --dev @griffel/webpack-plugin
 ```
 
 </TabItem>
 <TabItem value="npm" label="NPM">
 
 ```shell
-npm install --save-dev @griffel/webpack-extraction-plugin
+npm install --save-dev @griffel/webpack-plugin
 ```
 
 </TabItem>
 </Tabs>
 
 ## 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)
 ```
 

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",

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'],

e2e/nextjs/src/test.ts

@@ -26,10 +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/next-extraction-plugin'),
+      packLocalPackage(rootDir, tempDir, '@griffel/transform-shaker'),
+      packLocalPackage(rootDir, tempDir, '@griffel/transform'),
+      packLocalPackage(rootDir, tempDir, '@griffel/webpack-plugin'),
     ]);
 
     const nextRawVersion = await sh(`yarn next -v`, rootDir, true);

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.

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",

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;

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: {

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);

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();