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);