test(e2e-rspack): expand to 3-scenario matrix (legacy + modern, rspack 1 + 2) (#957)

Restores coverage that PR #806 dropped and adds a Rspack 1.x permutation.
The e2e/rspack project now runs three scenarios sequentially:

| Scenario          | Rspack version | Griffel setup                                  |
| ----------------- | -------------- | ---------------------------------------------- |
| legacy-rspack-1   | 1.7.11 (pin)   | webpack-extraction-plugin + webpack-loader     |
| legacy-rspack-2   | workspace      | webpack-extraction-plugin + webpack-loader     |
| modern-rspack-2   | workspace      | webpack-plugin                                 |

Layout:
- e2e/rspack/src/shared/src/ — single source tree used by every scenario
  (drops the fake-module / fake-colors alias indirection)
- e2e/rspack/src/scenarios/<name>/rspack.config.js — per-scenario config
- e2e/rspack/src/snapshots/<name>.css — per-scenario snapshot

test.ts iterates a SCENARIOS array. rspackVersion is optional: only
legacy-rspack-1 pins, the other two pick up @rspack/{cli,core} from
workspace devDeps via the bare-name form of installPackages.

compareSnapshots gains an `update` option so UPDATE_SNAPSHOTS=1 writes
prettier-formatted output through the existing formatCSS helper instead
of a raw copy. All three committed snapshots are byte-identical.

Project wiring:
- Add @griffel/{e2e-utils,react,webpack-{plugin,extraction-plugin,loader}}
  to e2e/rspack/package.json so lint's import-x rule is satisfied.
- Add lint and build-cjs to the test target's dependsOn — covers core/react
  packages whose CJS bundle the e2e tarballs need.
- implicitDependencies dropped: real package.json deps + dep graph cover it.

Author: layershifter

e2e/rspack/package.json

@@ -2,5 +2,12 @@
   "name": "@griffel/e2e-rspack",
   "version": "0.0.0",
   "private": true,
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "@griffel/e2e-utils": "*",
+    "@griffel/react": "^1.7.2",
+    "@griffel/webpack-extraction-plugin": "^0.5.17",
+    "@griffel/webpack-loader": "^2.2.26",
+    "@griffel/webpack-plugin": "^4.0.4"
+  }
 }

e2e/rspack/project.json

@@ -3,11 +3,13 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "e2e/rspack/src",
   "projectType": "library",
-  "implicitDependencies": ["@griffel/webpack-plugin"],
   "targets": {
     "test": {
       "executor": "nx:run-commands",
-      "dependsOn": [{ "target": "build", "dependencies": true }],
+      "dependsOn": [
+        { "target": "build", "dependencies": true },
+        { "target": "build-cjs", "dependencies": true }
+      ],
       "options": {
         "cwd": "e2e/rspack",
         "commands": [{ "command": "node src/test.ts" }]
@@ -21,6 +23,10 @@
         "commands": [{ "command": "tsc -b --pretty" }],
         "outputPath": []
       }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
     }
   },
   "tags": []

e2e/rspack/src/scenarios/legacy-rspack-1/rspack.config.js

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

e2e/rspack/src/scenarios/legacy-rspack-2/rspack.config.js

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

e2e/rspack/src/assets/rspack.config.js …enarios/modern-rspack-2/rspack.config.jse2e/rspack/src/assets/rspack.config.js renamed to e2e/rspack/src/scenarios/modern-rspack-2/rspack.config.js e2e/rspack/src/assets/rspack.config.js renamed to e2e/rspack/src/scenarios/modern-rspack-2/rspack.config.js

@@ -0,0 +1,31 @@
+.rddpni4 {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+}
+.frolweh {
+  border: 2px dashed magenta;
+}
+.f4khpsj {
+  border-radius: 5px;
+}
+.f165xgdd {
+  gap: 5px;
+}
+.fbhmu18 {
+  padding: 10px;
+}
+.f1bh81bl {
+  background-color: blue;
+}
+.fe3e8s9 {
+  color: red;
+}
+.f1ir1d6m:focus {
+  outline-offset: 5px;
+}
+@media (min-width: 968px) and (orientation: landscape) {
+  .f1tnsuik {
+    width: 400px;
+  }
+}