feat(webpack-extraction-plugin): add compat for Rspack (#454)

change/@griffel-webpack-extraction-plugin-461846c0-9280-4df4-97ef-34192aad11df.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat(webpack-extraction-plugin): add compat for Rspack",
+  "packageName": "@griffel/webpack-extraction-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

e2e/nextjs/src/test.ts

@@ -1,12 +1,15 @@
-import { configureYarn, copyAssets, createTempDir, installPackages, packLocalPackage, sh } from '@griffel/e2e-utils';
+import {
+  compareSnapshots,
+  configureYarn,
+  copyAssets,
+  createTempDir,
+  installPackages,
+  packLocalPackage,
+  sh,
+} from '@griffel/e2e-utils';
 import * as fs from 'fs';
 import * as logSymbols from 'log-symbols';
 import * as path from 'path';
-import * as prettier from 'prettier';
-
-function formatCSS(css: string): string {
-  return prettier.format(css, { parser: 'css' }).trim();
-}
 
 async function performTest() {
   const rootDir = path.resolve(__dirname, '..', '..', '..');
@@ -70,15 +73,11 @@ async function performTest() {
       throw new Error(`There are CSS files (${cssFiles.length}) than expected in "${cssFilesPath}"`);
     }
 
-    const cssFile = path.resolve(cssFilesPath, cssFiles[0]);
-    const cssContent = formatCSS(await fs.promises.readFile(cssFile, 'utf8'));
-
-    const cssSnapshotPath = path.resolve(__dirname, 'snapshots', 'output.css');
-    const cssSnapshot = formatCSS(await fs.promises.readFile(cssSnapshotPath, 'utf8'));
-
-    if (cssContent !== cssSnapshot) {
-      throw new Error('CSS output does not match existing snapshot');
-    }
+    await compareSnapshots({
+      type: 'css',
+      snapshotFile: path.resolve(__dirname, 'snapshots', 'output.css'),
+      resultFile: path.resolve(cssFilesPath, cssFiles[0]),
+    });
 
     console.log(logSymbols.success, `Example project contains the same CSS as a snapshot`);
     console.log('');

e2e/rspack/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

e2e/rspack/README.md

@@ -0,0 +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.

e2e/rspack/project.json

@@ -0,0 +1,27 @@
+{
+  "name": "@griffel/e2e-rspack",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "e2e/rspack/src",
+  "projectType": "library",
+  "implicitDependencies": ["@griffel/webpack-loader"],
+  "targets": {
+    "test": {
+      "executor": "nx:run-commands",
+      "dependsOn": [{ "target": "build", "projects": "dependencies" }],
+      "options": {
+        "cwd": "e2e/rspack",
+        "commands": [{ "command": "ts-node src/test.ts" }],
+        "outputPath": []
+      }
+    },
+    "type-check": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "e2e/rspack",
+        "commands": [{ "command": "tsc -b --pretty" }],
+        "outputPath": []
+      }
+    }
+  },
+  "tags": []
+}

e2e/rspack/src/assets/rspack.config.js

@@ -0,0 +1,35 @@
+// @ts-check
+
+const { GriffelCSSExtractionPlugin } = require('@griffel/webpack-extraction-plugin');
+const path = require('path');
+
+/**
+ * @type {import('@rspack/core').Configuration}
+ */
+const config = {
+  mode: 'production',
+  externals: {
+    '@griffel/react': 'Griffel',
+  },
+  optimization: {
+    minimize: false,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: [{ loader: GriffelCSSExtractionPlugin.loader }, { loader: '@griffel/webpack-loader' }],
+      },
+    ],
+  },
+  plugins: [/** @type {any} */ (new GriffelCSSExtractionPlugin())],
+  resolve: {
+    alias: {
+      'fake-module': path.resolve(__dirname, 'src', 'Component.js'),
+      'fake-colors': path.resolve(__dirname, 'src', 'colors.js'),
+    },
+  },
+};
+
+module.exports = config;

e2e/rspack/src/assets/src/Component.js

@@ -0,0 +1,34 @@
+import { makeResetStyles, makeStyles, shorthands } from '@griffel/react';
+// @ts-expect-error It's a fake module resolved via aliases
+import { colors } from 'fake-colors';
+
+const useClasses = makeStyles({
+  root: {
+    backgroundColor: colors.background,
+    color: colors.foreground,
+
+    ':focus': {
+      outlineOffset: '5px',
+    },
+
+    '@media (min-width: 968px) and (orientation: landscape)': {
+      width: '400px',
+    },
+  },
+  slot: {
+    ...shorthands.border('2px', 'dashed', 'magenta'),
+    ...shorthands.borderRadius('5px'),
+    ...shorthands.gap('5px'),
+    ...shorthands.padding('10px'),
+  },
+});
+
+const useBaseClass = makeResetStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '200px',
+});
+
+export function Component() {
+  return [useBaseClass(), useClasses()];
+}

e2e/rspack/src/assets/src/colors.js

@@ -0,0 +1,4 @@
+export const colors = {
+  background: 'blue',
+  foreground: 'red',
+};

e2e/rspack/src/assets/src/index.js

@@ -0,0 +1,4 @@
+// @ts-expect-error It's a fake module resolved via aliases
+import { Component } from 'fake-module';
+
+console.log(Component);

e2e/rspack/src/snapshots/output.css

@@ -0,0 +1,85 @@
+.rddpni4 {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+}
+.f1bh81bl {
+  background-color: blue;
+}
+.fe3e8s9 {
+  color: red;
+}
+.ftac7j7 {
+  border-top-width: 2px;
+}
+.f1w0yd9v {
+  border-right-width: 2px;
+}
+.f1h0xgbp {
+  border-left-width: 2px;
+}
+.fdwcyh7 {
+  border-bottom-width: 2px;
+}
+.fntkm7k {
+  border-top-style: dashed;
+}
+.f1oq6gla {
+  border-right-style: dashed;
+}
+.flpbmyi {
+  border-left-style: dashed;
+}
+.fjbf411 {
+  border-bottom-style: dashed;
+}
+.f1vtfyy1 {
+  border-top-color: magenta;
+}
+.f1g7g05w {
+  border-right-color: magenta;
+}
+.f10ibvnv {
+  border-left-color: magenta;
+}
+.fa31z3g {
+  border-bottom-color: magenta;
+}
+.f19gwsd {
+  border-bottom-right-radius: 5px;
+}
+.f3xzbnz {
+  border-bottom-left-radius: 5px;
+}
+.f1cxotgb {
+  border-top-right-radius: 5px;
+}
+.fxymw9n {
+  border-top-left-radius: 5px;
+}
+.fl0tjuq {
+  column-gap: 5px;
+}
+.ffmv8ov {
+  row-gap: 5px;
+}
+.f1809wu7 {
+  padding-top: 10px;
+}
+.f81rol6 {
+  padding-right: 10px;
+}
+.frdkuqy {
+  padding-left: 10px;
+}
+.f1fow5ox {
+  padding-bottom: 10px;
+}
+.f1ir1d6m:focus {
+  outline-offset: 5px;
+}
+@media (min-width: 968px) and (orientation: landscape) {
+  .fnj14hp {
+    width: 400px;
+  }
+}

e2e/rspack/src/test.ts

@@ -0,0 +1,94 @@
+import {
+  compareSnapshots,
+  configureYarn,
+  copyAssets,
+  createTempDir,
+  installPackages,
+  packLocalPackage,
+  sh,
+} from '@griffel/e2e-utils';
+import * as fs from 'fs';
+import * as logSymbols from 'log-symbols';
+import * as path from 'path';
+
+async function performTest() {
+  const rootDir = path.resolve(__dirname, '..', '..', '..');
+
+  let tempDir: string;
+
+  try {
+    tempDir = createTempDir('rspack');
+
+    await copyAssets({ assetsPath: path.resolve(__dirname, 'assets'), tempDir });
+    await configureYarn({ tempDir, rootDir });
+
+    const resolutions = await Promise.all([
+      packLocalPackage(rootDir, tempDir, '@griffel/style-types'),
+      packLocalPackage(rootDir, tempDir, '@griffel/core'),
+      packLocalPackage(rootDir, tempDir, '@griffel/react'),
+      packLocalPackage(rootDir, tempDir, '@griffel/webpack-extraction-plugin'),
+      packLocalPackage(rootDir, tempDir, '@griffel/webpack-loader'),
+    ]);
+
+    const rspackVersion = (await sh(`yarn rspack --version`, rootDir, true)).trim();
+
+    console.log(logSymbols.info, 'Using Rspack', rspackVersion);
+    console.log(logSymbols.info, 'Installing packages...');
+
+    await installPackages({
+      packages: ['@rspack/cli', 'react', 'react-dom'],
+      resolutions,
+      tempDir,
+      rootDir,
+    });
+  } catch (e) {
+    console.error(logSymbols.error, 'Something went wrong setting up the test:');
+    console.error((e as Error)?.stack ?? e);
+    process.exit(1);
+  }
+
+  try {
+    await sh(`yarn rspack`, tempDir);
+
+    console.log(logSymbols.success, `Example project was successfully built with Rspack`);
+  } catch (e) {
+    console.error(e);
+
+    console.log('');
+    console.error(logSymbols.error, `Building a test project with Rspack failed.`);
+
+    process.exit(1);
+  }
+
+  try {
+    const distDir = path.resolve(tempDir, 'dist');
+    const distFiles = await fs.promises.readdir(distDir);
+
+    const cssFilename = distFiles.find(filename => filename.endsWith('griffel.css'));
+
+    if (!cssFilename) {
+      throw new Error(`Failed to find any matching CSS file in "${distDir}"`);
+    }
+
+    await compareSnapshots({
+      type: 'css',
+      snapshotFile: path.resolve(__dirname, 'snapshots', 'output.css'),
+      resultFile: path.resolve(distDir, cssFilename),
+    });
+
+    console.log(logSymbols.success, `Example project contains the same CSS as a snapshot`);
+    console.log('');
+    console.log('');
+  } catch (e) {
+    console.error(e);
+
+    console.log('');
+    console.error(logSymbols.error, `Validating CSS produced by Rspack build failed.`);
+
+    process.exit(1);
+  }
+}
+
+(async () => {
+  await performTest();
+})();

e2e/rspack/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "module": "CommonJS",
+    "jsx": "react",
+    "noEmit": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "ts-node": {
+    "require": ["tsconfig-paths/register"],
+    "swc": true
+  }
+}