test(e2e): add test case for CSS layers (#3669)

e2e/cases/css/css-layers/index.test.ts

@@ -0,0 +1,66 @@
+import { build, dev, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+
+rspackOnlyTest('should bundle CSS layers as expected in build', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+  });
+  const files = await rsbuild.unwrapOutputJSON();
+
+  const content =
+    files[Object.keys(files).find((file) => file.endsWith('.css'))!];
+
+  expect(content).toEqual(
+    '@layer a{.a{color:red}}@layer b{.b{color:green}}@layer c{@layer{.c-sub{color:#00f}.c-sub2{color:green}}.c{color:#00f}}',
+  );
+});
+
+rspackOnlyTest(
+  'should bundle CSS layers as expected in dev',
+  async ({ page }) => {
+    const rsbuild = await dev({
+      cwd: __dirname,
+      page,
+      rsbuildConfig: {
+        dev: {
+          writeToDisk: true,
+        },
+      },
+    });
+    const files = await rsbuild.unwrapOutputJSON();
+
+    const content =
+      files[Object.keys(files).find((file) => file.endsWith('.css'))!];
+
+    expect(content.trim()).toEqual(`@layer a {
+.a {
+  color: red;
+}
+
+}
+@layer b {
+.b {
+  color: green;
+}
+
+}
+@layer c {
+@layer {.c-sub {
+  color: #00f;
+}
+
+.c-sub2 {
+  color: green;
+}
+}
+}
+@layer c {
+.c {
+  color: #00f;
+}
+
+}`);
+
+    await rsbuild.close();
+  },
+);

e2e/cases/css/css-layers/src/a.css

@@ -0,0 +1,3 @@
+.a {
+  color: red;
+}

e2e/cases/css/css-layers/src/b.css

@@ -0,0 +1,3 @@
+.b {
+  color: green;
+}

e2e/cases/css/css-layers/src/c-sub.css

@@ -0,0 +1,7 @@
+.c-sub {
+  color: blue;
+}
+
+.c-sub2 {
+  color: green;
+}

e2e/cases/css/css-layers/src/c.css

@@ -0,0 +1,5 @@
+@import './c-sub.css' layer;
+
+.c {
+  color: blue;
+}

e2e/cases/css/css-layers/src/index.js

@@ -0,0 +1 @@
+import './style.css';

e2e/cases/css/css-layers/src/style.css

@@ -0,0 +1,3 @@
+@import './a.css' layer(a);
+@import './b.css' layer(b);
+@import './c.css' layer(c);