feat!: enable LightningCSS minimizer as default CSS minimizer

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

@@ -13,7 +13,7 @@ rspackOnlyTest('should minimize CSS correctly by default', async () => {
     files[Object.keys(files).find((file) => file.endsWith('.css'))!];
 
   expect(content).toEqual(
-    '.a{text-align:center;line-height:1.5;font-size:1.5rem}.b{text-align:center;line-height:1.5;font-size:1.5rem;background:#fafafa}',
+    '.a{text-align:center;text-align:center;font-size:1.5rem;line-height:1.5}.b{text-align:center;background:#fafafa;font-size:1.5rem;line-height:1.5}',
   );
 });
 

e2e/cases/css/css-modules-composes/index.test.ts

@@ -1,8 +1,8 @@
 import path from 'node:path';
-import { build } from '@e2e/helper';
-import { expect, test } from '@playwright/test';
+import { build, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
 
-test('should compile CSS Modules composes correctly', async () => {
+rspackOnlyTest('should compile CSS Modules composes correctly', async () => {
   const rsbuild = await build({
     cwd: __dirname,
   });
@@ -12,25 +12,28 @@ test('should compile CSS Modules composes correctly', async () => {
     files[Object.keys(files).find((file) => file.endsWith('.css'))!];
 
   expect(content).toMatch(
-    /.*\{background:red;color:yellow\}.*\{background:blue\}/,
+    /.*\{color:#ff0;background:red\}.*\{background:#00f\}/,
   );
 });
 
-test('should compile CSS Modules composes with external correctly', async () => {
-  const rsbuild = await build({
-    cwd: __dirname,
-    rsbuildConfig: {
-      source: {
-        entry: { external: path.resolve(__dirname, './src/external.js') },
+rspackOnlyTest(
+  'should compile CSS Modules composes with external correctly',
+  async () => {
+    const rsbuild = await build({
+      cwd: __dirname,
+      rsbuildConfig: {
+        source: {
+          entry: { external: path.resolve(__dirname, './src/external.js') },
+        },
       },
-    },
-  });
-  const files = await rsbuild.unwrapOutputJSON();
+    });
+    const files = await rsbuild.unwrapOutputJSON();
 
-  const content =
-    files[Object.keys(files).find((file) => file.endsWith('.css'))!];
+    const content =
+      files[Object.keys(files).find((file) => file.endsWith('.css'))!];
 
-  expect(content).toMatch(
-    /.*\{background:cyan;color:black\}.*\{background:green\}/,
-  );
-});
+    expect(content).toMatch(
+      /.*\{color:#000;background:#0ff\}.*\{background:green\}/,
+    );
+  },
+);

e2e/cases/css/css-modules-exports-global/index.test.ts

@@ -1,43 +1,45 @@
-import { build, dev, gotoPage } from '@e2e/helper';
-import { expect, test } from '@playwright/test';
-
-test('should exports global in CSS Modules correctly in dev build', async ({
-  page,
-}) => {
-  const rsbuild = await dev({
-    cwd: __dirname,
-  });
-
-  await gotoPage(page, rsbuild);
-
-  const test1Locator = page.locator('#test1');
-  await expect(test1Locator).toHaveCSS('color', 'rgb(255, 0, 0)');
-
-  const test2Locator = page.locator('#test2');
-  await expect(test2Locator).toHaveCSS('color', 'rgb(0, 0, 255)');
-
-  await rsbuild.close();
-});
-
-test('should exports global in CSS Modules correctly in prod build', async ({
-  page,
-}) => {
-  const rsbuild = await build({
-    cwd: __dirname,
-    runServer: true,
-  });
-  await gotoPage(page, rsbuild);
-
-  const test1Locator = page.locator('#test1');
-  await expect(test1Locator).toHaveCSS('color', 'rgb(255, 0, 0)');
-
-  const test2Locator = page.locator('#test2');
-  await expect(test2Locator).toHaveCSS('color', 'rgb(0, 0, 255)');
-
-  await rsbuild.close();
-
-  const files = await rsbuild.unwrapOutputJSON();
-  const content =
-    files[Object.keys(files).find((file) => file.endsWith('.css'))!];
-  expect(content).toMatch(/\.foo-\w{6}{color:red}\.bar{color:blue}/);
-});
+import { build, dev, gotoPage, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+
+rspackOnlyTest(
+  'should exports global in CSS Modules correctly in dev build',
+  async ({ page }) => {
+    const rsbuild = await dev({
+      cwd: __dirname,
+    });
+
+    await gotoPage(page, rsbuild);
+
+    const test1Locator = page.locator('#test1');
+    await expect(test1Locator).toHaveCSS('color', 'rgb(255, 0, 0)');
+
+    const test2Locator = page.locator('#test2');
+    await expect(test2Locator).toHaveCSS('color', 'rgb(0, 0, 255)');
+
+    await rsbuild.close();
+  },
+);
+
+rspackOnlyTest(
+  'should exports global in CSS Modules correctly in prod build',
+  async ({ page }) => {
+    const rsbuild = await build({
+      cwd: __dirname,
+      runServer: true,
+    });
+    await gotoPage(page, rsbuild);
+
+    const test1Locator = page.locator('#test1');
+    await expect(test1Locator).toHaveCSS('color', 'rgb(255, 0, 0)');
+
+    const test2Locator = page.locator('#test2');
+    await expect(test2Locator).toHaveCSS('color', 'rgb(0, 0, 255)');
+
+    await rsbuild.close();
+
+    const files = await rsbuild.unwrapOutputJSON();
+    const content =
+      files[Object.keys(files).find((file) => file.endsWith('.css'))!];
+    expect(content).toMatch(/\.foo-\w{6}{color:red}\.bar{color:#00f}/);
+  },
+);

e2e/cases/css/css-modules-named-export/index.test.ts

@@ -21,7 +21,7 @@ rspackOnlyTest(
       files[Object.keys(files).find((file) => file.endsWith('.css'))!];
 
     expect(content).toMatch(
-      /\.classA-\w{6}{color:red}\.classB-\w{6}{color:blue}\.classC-\w{6}{color:yellow}/,
+      /\.classA-\w{6}{color:red}\.classB-\w{6}{color:#00f}\.classC-\w{6}{color:#ff0}/,
     );
 
     await gotoPage(page, rsbuild);

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

@@ -1,7 +1,7 @@
-import { build } from '@e2e/helper';
-import { expect, test } from '@playwright/test';
+import { build, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
 
-test('should compile CSS Modules correctly', async () => {
+rspackOnlyTest('should compile CSS Modules correctly', async () => {
   const rsbuild = await build({
     cwd: __dirname,
   });
@@ -11,71 +11,80 @@ test('should compile CSS Modules correctly', async () => {
     files[Object.keys(files).find((file) => file.endsWith('.css'))!];
 
   expect(content).toMatch(
-    /\.the-a-class{color:red}\.the-b-class-\w{6}{color:blue}\.the-c-class-\w{6}{color:yellow}\.the-d-class{color:green}/,
+    /\.the-a-class{color:red}\.the-b-class-\w{6}{color:#00f}\.the-c-class-\w{6}{color:#ff0}\.the-d-class{color:green}/,
   );
 });
 
-test('should compile CSS Modules follow by output.cssModules', async () => {
-  const rsbuild = await build({
-    cwd: __dirname,
-    rsbuildConfig: {
-      output: {
-        cssModules: {
-          auto: (resource) => {
-            return resource.includes('.scss');
+rspackOnlyTest(
+  'should compile CSS Modules follow by output.cssModules',
+  async () => {
+    const rsbuild = await build({
+      cwd: __dirname,
+      rsbuildConfig: {
+        output: {
+          cssModules: {
+            auto: (resource) => {
+              return resource.includes('.scss');
+            },
           },
         },
       },
-    },
-  });
-  const files = await rsbuild.unwrapOutputJSON();
+    });
+    const files = await rsbuild.unwrapOutputJSON();
 
-  const content =
-    files[Object.keys(files).find((file) => file.endsWith('.css'))!];
+    const content =
+      files[Object.keys(files).find((file) => file.endsWith('.css'))!];
 
-  expect(content).toMatch(
-    /.the-a-class{color:red}.the-b-class-\w{6}{color:blue}.the-c-class{color:yellow}.the-d-class{color:green}/,
-  );
-});
+    expect(content).toMatch(
+      /.the-a-class{color:red}.the-b-class-\w{6}{color:#00f}.the-c-class{color:#ff0}.the-d-class{color:green}/,
+    );
+  },
+);
 
-test('should compile CSS Modules follow by output.cssModules custom localIdentName', async () => {
-  const rsbuild = await build({
-    cwd: __dirname,
-    rsbuildConfig: {
-      output: {
-        cssModules: {
-          localIdentName: '[hash:base64:8]',
+rspackOnlyTest(
+  'should compile CSS Modules follow by output.cssModules custom localIdentName',
+  async () => {
+    const rsbuild = await build({
+      cwd: __dirname,
+      rsbuildConfig: {
+        output: {
+          cssModules: {
+            localIdentName: '[hash:base64:8]',
+          },
         },
       },
-    },
-  });
-  const files = await rsbuild.unwrapOutputJSON();
+    });
+    const files = await rsbuild.unwrapOutputJSON();
 
-  const content =
-    files[Object.keys(files).find((file) => file.endsWith('.css'))!];
+    const content =
+      files[Object.keys(files).find((file) => file.endsWith('.css'))!];
 
-  expect(content).toMatch(
-    /\.the-a-class{color:red}\.\w{8}{color:blue}\.\w{8}{color:yellow}\.the-d-class{color:green}/,
-  );
-});
+    expect(content).toMatch(
+      /\.the-a-class{color:red}\.\w{8}{color:#00f}\.\w{8}{color:#ff0}\.the-d-class{color:green}/,
+    );
+  },
+);
 
-test('should compile CSS Modules follow by output.cssModules custom localIdentName - hashDigest', async () => {
-  const rsbuild = await build({
-    cwd: __dirname,
-    rsbuildConfig: {
-      output: {
-        cssModules: {
-          localIdentName: '[hash:hex:4]',
+rspackOnlyTest(
+  'should compile CSS Modules follow by output.cssModules custom localIdentName - hashDigest',
+  async () => {
+    const rsbuild = await build({
+      cwd: __dirname,
+      rsbuildConfig: {
+        output: {
+          cssModules: {
+            localIdentName: '[hash:hex:4]',
+          },
         },
       },
-    },
-  });
-  const files = await rsbuild.unwrapOutputJSON();
+    });
+    const files = await rsbuild.unwrapOutputJSON();
 
-  const content =
-    files[Object.keys(files).find((file) => file.endsWith('.css'))!];
+    const content =
+      files[Object.keys(files).find((file) => file.endsWith('.css'))!];
 
-  expect(content).toMatch(
-    /\.the-a-class{color:red}\.\w{4}{color:blue}\.\w{4}{color:yellow}\.the-d-class{color:green}/,
-  );
-});
+    expect(content).toMatch(
+      /\.the-a-class{color:red}\.\w{4}{color:#00f}\.\w{4}{color:#ff0}\.the-d-class{color:green}/,
+    );
+  },
+);

e2e/cases/css/import-common-css/index.test.ts

@@ -1,7 +1,7 @@
-import { build, proxyConsole } from '@e2e/helper';
-import { expect, test } from '@playwright/test';
+import { build, proxyConsole, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
 
-test('should compile common css import correctly', async () => {
+rspackOnlyTest('should compile common CSS import correctly', async () => {
   const { restore, logs } = proxyConsole();
 
   const rsbuild = await build({
@@ -24,7 +24,7 @@ test('should compile common css import correctly', async () => {
   );
 
   expect(files[cssFiles]).toEqual(
-    'html{min-height:100%}#a{color:red}#b{color:blue}',
+    'html{min-height:100%}#a{color:red}#b{color:#00f}',
   );
 
   restore();

e2e/cases/css/import-loaders/index.test.ts

@@ -1,16 +1,19 @@
-import { build } from '@e2e/helper';
-import { expect, test } from '@playwright/test';
+import { build, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
 
-test('should compile CSS Modules which depends on importLoaders correctly', async () => {
-  const rsbuild = await build({
-    cwd: __dirname,
-  });
-  const files = await rsbuild.unwrapOutputJSON();
+rspackOnlyTest(
+  'should compile CSS Modules which depends on importLoaders correctly',
+  async () => {
+    const rsbuild = await build({
+      cwd: __dirname,
+    });
+    const files = await rsbuild.unwrapOutputJSON();
 
-  const content =
-    files[Object.keys(files).find((file) => file.endsWith('.css'))!];
+    const content =
+      files[Object.keys(files).find((file) => file.endsWith('.css'))!];
 
-  expect(content).toEqual(
-    '.class-foo-yQ8Tl7+.hello-class-foo{background-color:red}.class-bar-TVH2T6 .hello-class-bar{background-color:blue}',
-  );
-});
+    expect(content).toEqual(
+      '.class-foo-yQ8Tl7+.hello-class-foo{background-color:red}.class-bar-TVH2T6 .hello-class-bar{background-color:#00f}',
+    );
+  },
+);

e2e/cases/css/less-inline-js/index.test.ts

@@ -9,5 +9,5 @@ test('should compile less inline js correctly', async () => {
   const files = await rsbuild.unwrapOutputJSON();
   const cssFiles = Object.keys(files).find((file) => file.endsWith('.css'))!;
 
-  expect(files[cssFiles]).toEqual('body{width:200}');
+  expect(files[cssFiles]).toEqual('body{opacity:.2}');
 });

e2e/cases/css/less-inline-js/src/a.less

@@ -1,7 +1,7 @@
-@a: `function(width) {
-  return (width + 100);
+@a: `function(val) {
+  return (val + 0.1);
 }`;
 
 body {
-  width: `(@{a})(100)`;
+  opacity: `(@{a})(0.1)`;
 }

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

@@ -1,8 +1,8 @@
 import path from 'node:path';
-import { build } from '@e2e/helper';
-import { expect, test } from '@playwright/test';
+import { build, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
 
-test('should emit multiple css files correctly', async () => {
+rspackOnlyTest('should emit multiple css files correctly', async () => {
   const rsbuild = await build({
     cwd: __dirname,
     rsbuildConfig: {
@@ -28,6 +28,6 @@ test('should emit multiple css files correctly', async () => {
   )!;
 
   expect(files[entry1CSS]).toContain('#entry1{color:red}');
-  expect(files[entry2CSS]).toContain('#entry2{color:blue}');
+  expect(files[entry2CSS]).toContain('#entry2{color:#00f}');
   expect(files[entry3CSS]).toContain('#entry3{color:green}');
 });