docs: update webpack docs to reference @griffel/webpack-plugin

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-nextjs.md

@@ -30,11 +30,11 @@ npm install --save-dev @griffel/next-extraction-plugin
 
 :::info
 
-Please configure [`@griffel/webpack-loader`](/react/ahead-of-time-compilation/with-webpack) first.
+Please configure [`@griffel/webpack-plugin`](/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:
+In `next.config.js` file you'll need to add the next-plugin from `@griffel/next-extraction-plugin` like so:
 
 ```js
 // next.config.js
@@ -47,7 +47,7 @@ module.exports = withGriffelCSSExtraction()({
       exclude: /node_modules/,
       use: [
         {
-          loader: '@griffel/webpack-loader',
+          loader: '@griffel/webpack-plugin/loader',
         },
       ],
     });
@@ -58,7 +58,7 @@ module.exports = withGriffelCSSExtraction()({
       exclude: /node_modules/,
       use: [
         {
-          loader: '@griffel/webpack-loader',
+          loader: '@griffel/webpack-plugin/loader',
           options: {
             babelOptions: {
               presets: ['next/babel'],

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

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

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

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

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',
+    },
+  },
+});