Skip to content

Commit

Permalink
feat!: enable LightningCSS minimizer as default CSS minimizer (#2716)
Browse files Browse the repository at this point in the history
  • Loading branch information
chenjiahan committed Jun 27, 2024
1 parent ea87273 commit b564e57
Show file tree
Hide file tree
Showing 25 changed files with 273 additions and 218 deletions.
2 changes: 1 addition & 1 deletion e2e/cases/css/css-minimize/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}',
);
});

Expand Down
41 changes: 22 additions & 19 deletions e2e/cases/css/css-modules-composes/index.test.ts
Original file line number Diff line number Diff line change
@@ -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,
});
Expand All @@ -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\}/,
);
},
);
88 changes: 45 additions & 43 deletions e2e/cases/css/css-modules-exports-global/index.test.ts
Original file line number Diff line number Diff line change
@@ -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}/);
},
);
2 changes: 1 addition & 1 deletion e2e/cases/css/css-modules-named-export/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
115 changes: 62 additions & 53 deletions e2e/cases/css/css-modules/index.test.ts
Original file line number Diff line number Diff line change
@@ -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,
});
Expand All @@ -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}/,
);
},
);
8 changes: 4 additions & 4 deletions e2e/cases/css/import-common-css/index.test.ts
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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();
Expand Down
29 changes: 16 additions & 13 deletions e2e/cases/css/import-loaders/index.test.ts
Original file line number Diff line number Diff line change
@@ -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}',
);
},
);
2 changes: 1 addition & 1 deletion e2e/cases/css/less-inline-js/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}');
});
6 changes: 3 additions & 3 deletions e2e/cases/css/less-inline-js/src/a.less
Original file line number Diff line number Diff line change
@@ -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)`;
}
8 changes: 4 additions & 4 deletions e2e/cases/css/multi-css/index.test.ts
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -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}');
});
Loading

0 comments on commit b564e57

Please sign in to comment.