From 8573c972b29a619da22fb3f03d02cce44184b309 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan.jait@bytedance.com>
Date: Thu, 10 Oct 2024 11:32:45 +0800
Subject: [PATCH] test(e2e): add test case for CSS layers (#3669)

---
 e2e/cases/css/css-layers/index.test.ts | 66 ++++++++++++++++++++++++++
 e2e/cases/css/css-layers/src/a.css     |  3 ++
 e2e/cases/css/css-layers/src/b.css     |  3 ++
 e2e/cases/css/css-layers/src/c-sub.css |  7 +++
 e2e/cases/css/css-layers/src/c.css     |  5 ++
 e2e/cases/css/css-layers/src/index.js  |  1 +
 e2e/cases/css/css-layers/src/style.css |  3 ++
 7 files changed, 88 insertions(+)
 create mode 100644 e2e/cases/css/css-layers/index.test.ts
 create mode 100644 e2e/cases/css/css-layers/src/a.css
 create mode 100644 e2e/cases/css/css-layers/src/b.css
 create mode 100644 e2e/cases/css/css-layers/src/c-sub.css
 create mode 100644 e2e/cases/css/css-layers/src/c.css
 create mode 100644 e2e/cases/css/css-layers/src/index.js
 create mode 100644 e2e/cases/css/css-layers/src/style.css

diff --git a/e2e/cases/css/css-layers/index.test.ts b/e2e/cases/css/css-layers/index.test.ts
new file mode 100644
index 0000000000..e9d785534e
--- /dev/null
+++ b/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();
+  },
+);
diff --git a/e2e/cases/css/css-layers/src/a.css b/e2e/cases/css/css-layers/src/a.css
new file mode 100644
index 0000000000..5451a331f9
--- /dev/null
+++ b/e2e/cases/css/css-layers/src/a.css
@@ -0,0 +1,3 @@
+.a {
+  color: red;
+}
diff --git a/e2e/cases/css/css-layers/src/b.css b/e2e/cases/css/css-layers/src/b.css
new file mode 100644
index 0000000000..fe44ec8f17
--- /dev/null
+++ b/e2e/cases/css/css-layers/src/b.css
@@ -0,0 +1,3 @@
+.b {
+  color: green;
+}
diff --git a/e2e/cases/css/css-layers/src/c-sub.css b/e2e/cases/css/css-layers/src/c-sub.css
new file mode 100644
index 0000000000..21e985f370
--- /dev/null
+++ b/e2e/cases/css/css-layers/src/c-sub.css
@@ -0,0 +1,7 @@
+.c-sub {
+  color: blue;
+}
+
+.c-sub2 {
+  color: green;
+}
diff --git a/e2e/cases/css/css-layers/src/c.css b/e2e/cases/css/css-layers/src/c.css
new file mode 100644
index 0000000000..ad954526fc
--- /dev/null
+++ b/e2e/cases/css/css-layers/src/c.css
@@ -0,0 +1,5 @@
+@import './c-sub.css' layer;
+
+.c {
+  color: blue;
+}
diff --git a/e2e/cases/css/css-layers/src/index.js b/e2e/cases/css/css-layers/src/index.js
new file mode 100644
index 0000000000..aa3357bf63
--- /dev/null
+++ b/e2e/cases/css/css-layers/src/index.js
@@ -0,0 +1 @@
+import './style.css';
diff --git a/e2e/cases/css/css-layers/src/style.css b/e2e/cases/css/css-layers/src/style.css
new file mode 100644
index 0000000000..78af4163e4
--- /dev/null
+++ b/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);