Skip to content

Commit

Permalink
feat(turbopack): Minify CSS files while building (vercel#71130)
Browse files Browse the repository at this point in the history 
### What?

Enable minification of CSS when building for production.

### Why?

It's generally required.
  • Loading branch information
@kdy1
kdy1 authored Oct 12, 2024
1 parent 3764381 commit 92e84f4
Show file tree
Hide file tree
Showing 76 changed files with 278 additions and 656 deletions.
1 change: 1 addition & 0 deletions crates/next-core/src/next_client/context.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,6 +322,7 @@ pub async fn get_client_module_options_context(
enable_mdx_rs,
css: CssOptionsContext {
use_swc_css,
minify_type: next_mode.minify_type(),
..module_options_context.css
},
rules: vec![
Expand Down
36 changes: 12 additions & 24 deletions test/e2e/app-dir/scss/compilation-and-prefixing/compilation-and-prefixing.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,25 +47,13 @@ describe.each([

if (process.env.TURBOPACK) {
if (dependencies.sass) {
expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(`
".redText ::placeholder {
color: red;
}
.flex-parsing {
flex: 0 0 calc(50% - var(--vertical-gutter));
}"
`)
expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
`".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}"`
)
} else {
expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(`
".redText ::placeholder {
color: red;
}
.flex-parsing {
flex: 0 0 calc(50% - var(--vertical-gutter));
}"
`)
expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
`".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}"`
)
}
} else {
if (dependencies.sass) {
Expand Down Expand Up @@ -103,7 +91,7 @@ describe.each([
"sections": [
{
"map": {
"mappings": "AAAA;;;;AAAiC",
"mappings": "AAAA,iCAAiC",
"names": [],
"sources": [
"turbopack://[project]/styles/global.scss.css",
Expand All @@ -126,8 +114,8 @@ describe.each([
"version": 3,
},
"offset": {
"column": 0,
"line": 8,
"column": 91,
"line": 1,
},
},
],
Expand All @@ -140,7 +128,7 @@ describe.each([
"sections": [
{
"map": {
"mappings": "AAAA;;;;AAAiC",
"mappings": "AAAA,iCAAiC",
"names": [],
"sources": [
"turbopack://[project]/styles/global.scss.css",
Expand All @@ -163,8 +151,8 @@ describe.each([
"version": 3,
},
"offset": {
"column": 0,
"line": 8,
"column": 91,
"line": 1,
},
},
],
Expand Down
9 changes: 3 additions & 6 deletions test/integration/css-features/test/css-modules.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,12 +101,9 @@ describe('CSS Modules: Import Global CSS', () => {
.trim()

if (process.env.TURBOPACK) {
expect(cssContent.replace(/\/\*.*?\*\//g, '').trim())
.toMatchInlineSnapshot(`
"a .foo {
all: initial;
}"
`)
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
).toMatchInlineSnapshot(`"a .foo{all:initial}"`)
} else {
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
Expand Down
26 changes: 6 additions & 20 deletions test/integration/css-features/test/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,9 @@ describe('Custom Properties: Pass-Through IE11', () => {
.trim()

if (process.env.TURBOPACK) {
expect(cssContent.replace(/\/\*.*?\*\//g, '').trim())
.toMatchInlineSnapshot(`
":root {
--color: red;
}
h1 {
color: var(--color);
}"
`)
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
).toMatchInlineSnapshot(`":root{--color:red}h1{color:var(--color)}"`)
} else {
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
Expand Down Expand Up @@ -109,16 +102,9 @@ describe('Custom Properties: Pass-Through Modern', () => {
.trim()

if (process.env.TURBOPACK) {
expect(cssContent.replace(/\/\*.*?\*\//g, '').trim())
.toMatchInlineSnapshot(`
":root {
--color: red;
}
h1 {
color: var(--color);
}"
`)
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
).toMatchInlineSnapshot(`":root{--color:red}h1{color:var(--color)}"`)
} else {
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
Expand Down
78 changes: 23 additions & 55 deletions test/integration/css-modules/test/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,9 @@ describe('Basic CSS Module Support', () => {
)

if (process.env.TURBOPACK) {
expect(cssContent.replace(/\/\*.*?\*\//g, '').trim())
.toMatchInlineSnapshot(`
".index-module__VJHdSq__redText {
color: red;
}"
`)
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
).toMatchInlineSnapshot(`".index-module__VJHdSq__redText{color:red}"`)
} else {
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
Expand Down Expand Up @@ -137,25 +134,11 @@ describe('3rd Party CSS Module Support', () => {
res.text()
)
if (process.env.TURBOPACK) {
expect(cssContent.replace(/\/\*.*?\*\//g, '').trim())
.toMatchInlineSnapshot(`
".index-module__jAE1EW__foo {
position: relative;
}
.index-module__jAE1EW__foo .bar, .index-module__jAE1EW__foo .baz {
height: 100%;
overflow: hidden;
}
.index-module__jAE1EW__foo .lol {
width: 80%;
}
.index-module__jAE1EW__foo > .lel {
width: 80%;
}"
`)
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
).toMatchInlineSnapshot(
`".index-module__jAE1EW__foo{position:relative}.index-module__jAE1EW__foo .bar,.index-module__jAE1EW__foo .baz{height:100%;overflow:hidden}.index-module__jAE1EW__foo .lol{width:80%}.index-module__jAE1EW__foo>.lel{width:80%}"`
)
} else {
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
Expand Down Expand Up @@ -416,12 +399,9 @@ describe('Valid CSS Module Usage from within node_modules', () => {
)

if (process.env.TURBOPACK) {
expect(cssContent.replace(/\/\*.*?\*\//g, '').trim())
.toMatchInlineSnapshot(`
".index-module__kwuKnq__redText {
color: red;
}"
`)
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
).toMatchInlineSnapshot(`".index-module__kwuKnq__redText{color:red}"`)
} else {
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
Expand Down Expand Up @@ -539,17 +519,11 @@ describe('CSS Module Composes Usage (Basic)', () => {
)

if (process.env.TURBOPACK) {
expect(cssContent.replace(/\/\*.*?\*\//g, '').trim())
.toMatchInlineSnapshot(`
".index-module__QppuLW__className {
background: red;
color: #ff0;
}
.index-module__QppuLW__subClass {
background: #00f;
}"
`)
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
).toMatchInlineSnapshot(
`".index-module__QppuLW__className{background:red;color:#ff0}.index-module__QppuLW__subClass{background:#00f;}"`
)
} else {
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
Expand Down Expand Up @@ -666,12 +640,11 @@ describe('Dynamic Route CSS Module Usage', () => {
res.text()
)
if (process.env.TURBOPACK) {
expect(cssContent.replace(/\/\*.*?\*\//g, '').trim())
.toMatchInlineSnapshot(`
".index-module__Iury9a__home {
background: red;
}"
`)
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
).toMatchInlineSnapshot(
`".index-module__Iury9a__home{background:red}"`
)
} else {
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
Expand Down Expand Up @@ -735,15 +708,10 @@ describe('Catch-all Route CSS Module Usage', () => {
if (process.env.TURBOPACK) {
expect(cssContent.replace(/\/\*.*?\*\//g, '').trim())
.toMatchInlineSnapshot(`
".index-module___rV4CG__home {
background: red;
}
".index-module___rV4CG__home{background:red}
.\\35 5css-module__qe774W__home {
color: green;
}"
.\\35 5css-module__qe774W__home{color:green}"
`)
} else {
expect(
Expand Down
Loading

0 comments on commit 92e84f4

Please sign in to comment.