refactor(e2e-rspack): switch to @griffel/webpack-plugin

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

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

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

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

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

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

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