diff --git a/test/integration/critical-css/test/index.test.js b/test/integration/critical-css/test/index.test.js
index 09913ad88b703..acd225bb90a53 100644
--- a/test/integration/critical-css/test/index.test.js
+++ b/test/integration/critical-css/test/index.test.js
@@ -39,7 +39,7 @@ function runTests() {
expect(html).toMatch(
//
)
- expect(html).toMatch(/body{font-family:SF Pro Text/)
+ expect(html).toMatch(/body{/)
})
it('should inline critical CSS (dynamic)', async () => {
@@ -47,7 +47,7 @@ function runTests() {
expect(html).toMatch(
//
)
- expect(html).toMatch(/body{font-family:SF Pro Text/)
+ expect(html).toMatch(/body{/)
})
it('should not inline non-critical css', async () => {
diff --git a/test/integration/css-minify/test/index.test.js b/test/integration/css-minify/test/index.test.js
index 3a5a84c8ef89b..b78fbf547a583 100644
--- a/test/integration/css-minify/test/index.test.js
+++ b/test/integration/css-minify/test/index.test.js
@@ -22,11 +22,11 @@ function runTests() {
const css = await renderViaHTTP(appPort, href)
if (process.env.TURBOPACK) {
expect(css).toMatchInlineSnapshot(`
- "/* [project]/test/integration/css-minify/styles/global.css [client] (css) */
- .a{--var-1:0;--var-2:0;--var-1:-50%;--var-2:-50%}.b{--var-1:0;--var-2:0;--var-2:-50%}
+ "/* [project]/test/integration/css-minify/styles/global.css [client] (css) */
+ .a{--var-1:-50%;--var-2:-50%}.b{--var-1:0;--var-2:-50%}
- /*# sourceMappingURL=test_integration_css-minify_styles_global_411632c3.css.map*/
- "
+ /*# sourceMappingURL=test_integration_css-minify_styles_global_411632c3.css.map*/
+ "
`)
} else {
expect(css).toMatchInlineSnapshot(
diff --git a/test/integration/css-modules/test/index.test.js b/test/integration/css-modules/test/index.test.js
index 29ff86cc062c0..add3a210d87ce 100644
--- a/test/integration/css-modules/test/index.test.js
+++ b/test/integration/css-modules/test/index.test.js
@@ -522,7 +522,7 @@ describe('CSS Module Composes Usage (Basic)', () => {
expect(
cssContent.replace(/\/\*.*?\*\//g, '').trim()
).toMatchInlineSnapshot(
- `".index-module__QppuLW__className{background:red;color:#ff0}.index-module__QppuLW__subClass{background:#00f;}"`
+ `".index-module__QppuLW__className{color:#ff0;background:red}.index-module__QppuLW__subClass{background:#00f;}"`
)
} else {
expect(
diff --git a/test/integration/css/test/basic-global-support.test.js b/test/integration/css/test/basic-global-support.test.js
index 40baad0497d53..c532fcb2b6e26 100644
--- a/test/integration/css/test/basic-global-support.test.js
+++ b/test/integration/css/test/basic-global-support.test.js
@@ -534,7 +534,7 @@ module.exports = {
- .blue-text{color:orange;font-weight:bolder;background-image:url(../media/light.180573e4.svg)}
+ .blue-text{color:orange;background-image:url(../media/light.180573e4.svg);font-weight:bolder}
.blue-text{color:#00f}"
@@ -547,7 +547,7 @@ module.exports = {
- .blue-text{color:orange;font-weight:bolder;background-image:url(../media/light.180573e4.svg)}
+ .blue-text{color:orange;background-image:url(../media/light.180573e4.svg);font-weight:bolder}
.blue-text{color:#00f}"
@@ -611,7 +611,7 @@ describe('CSS URL via `file-loader` and asset prefix (1)', () => {
".red-text{color:red;background-image:url(../media/dark.993bedd3.svg) url(../media/dark2.993bedd3.svg)}
- .blue-text{color:orange;font-weight:bolder;background-image:url(../media/light.180573e4.svg)}
+ .blue-text{color:orange;background-image:url(../media/light.180573e4.svg);font-weight:bolder}
.blue-text{color:#00f}"
`)
@@ -670,7 +670,7 @@ describe('CSS URL via `file-loader` and asset prefix (2)', () => {
- .blue-text{color:orange;font-weight:bolder;background-image:url(../media/light.180573e4.svg)}
+ .blue-text{color:orange;background-image:url(../media/light.180573e4.svg);font-weight:bolder}
.blue-text{color:#00f}"
diff --git a/turbopack/crates/turbopack-css/src/process.rs b/turbopack/crates/turbopack-css/src/process.rs
index 425074a79aee5..7fb90659d6a41 100644
--- a/turbopack/crates/turbopack-css/src/process.rs
+++ b/turbopack/crates/turbopack-css/src/process.rs
@@ -1,6 +1,6 @@
use std::sync::{Arc, RwLock};
-use anyhow::{bail, Result};
+use anyhow::{bail, Context, Result};
use lightningcss::{
css_modules::{CssModuleExport, CssModuleExports, Pattern, Segment},
stylesheet::{ParserOptions, PrinterOptions, StyleSheet, ToCssResult},
@@ -191,6 +191,8 @@ pub async fn process_css_with_placeholder(
_ => bail!("this case should be filtered out while parsing"),
};
+ // We use NoMinify because this is not a final css. We need to replace url references,
+ // and we do final codegen with proper minification.
let (result, _) = stylesheet.to_css(&code, MinifyType::NoMinify, false, false)?;
let exports = result.exports.map(|exports| {
@@ -435,6 +437,14 @@ async fn process_content(
}
}
+ // minify() is actually transform, and it performs operations like CSS modules
+ // handling.
+ //
+ //
+ // See: https://github.com/parcel-bundler/lightningcss/issues/935#issuecomment-2739325537
+ ss.minify(Default::default())
+ .context("failed to transform css")?;
+
stylesheet_into_static(&ss, without_warnings(config.clone()))
}
Err(e) => {
diff --git a/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/output/4e721_crates_turbopack-tests_tests_snapshot_css_embed-url_input_style_css_b7298ed4._.single.css b/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/output/4e721_crates_turbopack-tests_tests_snapshot_css_embed-url_input_style_css_b7298ed4._.single.css
index 21f7c2b498d80..16fd0e94b17cf 100644
--- a/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/output/4e721_crates_turbopack-tests_tests_snapshot_css_embed-url_input_style_css_b7298ed4._.single.css
+++ b/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/output/4e721_crates_turbopack-tests_tests_snapshot_css_embed-url_input_style_css_b7298ed4._.single.css
@@ -1,3 +1,3 @@
/* [project]/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/input/style.css [test] (css) */
-.style{cursor:url(../static/image.b151aca5.png);list-style-image:url(../static/image.b151aca5.png);background-image:url(../static/image.b151aca5.png)}
+.style{cursor:url(../static/image.b151aca5.png);background-image:url(../static/image.b151aca5.png);list-style-image:url(../static/image.b151aca5.png)}
/*# sourceMappingURL=4e721_crates_turbopack-tests_tests_snapshot_css_embed-url_input_style_css_b7298ed4._.single.css.map*/
\ No newline at end of file
diff --git a/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/output/b1abf_turbopack-tests_tests_snapshot_css_embed-url_input_style_module_css_b7298ed4._.single.css b/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/output/b1abf_turbopack-tests_tests_snapshot_css_embed-url_input_style_module_css_b7298ed4._.single.css
index 405cbee6072f1..f9a614c68b46e 100644
--- a/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/output/b1abf_turbopack-tests_tests_snapshot_css_embed-url_input_style_module_css_b7298ed4._.single.css
+++ b/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/output/b1abf_turbopack-tests_tests_snapshot_css_embed-url_input_style_module_css_b7298ed4._.single.css
@@ -1,3 +1,3 @@
/* [project]/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/input/style.module.css [test] (css) */
-.style-module__3oVw9q__module-style{cursor:url(../static/image.b151aca5.png);list-style-image:url(../static/image.b151aca5.png);background-image:url(../static/image.b151aca5.png)}
+.style-module__3oVw9q__module-style{cursor:url(../static/image.b151aca5.png);background-image:url(../static/image.b151aca5.png);list-style-image:url(../static/image.b151aca5.png)}
/*# sourceMappingURL=b1abf_turbopack-tests_tests_snapshot_css_embed-url_input_style_module_css_b7298ed4._.single.css.map*/
\ No newline at end of file
diff --git a/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/output/turbopack_crates_turbopack-tests_tests_snapshot_css_embed-url_input_14a7ded7._.css b/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/output/turbopack_crates_turbopack-tests_tests_snapshot_css_embed-url_input_14a7ded7._.css
index 2c452d3b4a50b..8b7bc221c10cf 100644
--- a/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/output/turbopack_crates_turbopack-tests_tests_snapshot_css_embed-url_input_14a7ded7._.css
+++ b/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/output/turbopack_crates_turbopack-tests_tests_snapshot_css_embed-url_input_14a7ded7._.css
@@ -2,9 +2,9 @@
/* embedded static asset "/static/image.b151aca5.png" */
/* [project]/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/input/style.module.css [test] (css) */
-.style-module__3oVw9q__module-style{cursor:url(../static/image.b151aca5.png);list-style-image:url(../static/image.b151aca5.png);background-image:url(../static/image.b151aca5.png)}
+.style-module__3oVw9q__module-style{cursor:url(../static/image.b151aca5.png);background-image:url(../static/image.b151aca5.png);list-style-image:url(../static/image.b151aca5.png)}
/* [project]/turbopack/crates/turbopack-tests/tests/snapshot/css/embed-url/input/style.css [test] (css) */
-.style{cursor:url(../static/image.b151aca5.png);list-style-image:url(../static/image.b151aca5.png);background-image:url(../static/image.b151aca5.png)}
+.style{cursor:url(../static/image.b151aca5.png);background-image:url(../static/image.b151aca5.png);list-style-image:url(../static/image.b151aca5.png)}
/*# sourceMappingURL=turbopack_crates_turbopack-tests_tests_snapshot_css_embed-url_input_14a7ded7._.css.map*/
\ No newline at end of file
diff --git a/turbopack/crates/turbopack-tests/tests/snapshot/cssmodules/composes/output/b1abf_turbopack-tests_tests_snapshot_cssmodules_composes_input_index_module_22660277.css b/turbopack/crates/turbopack-tests/tests/snapshot/cssmodules/composes/output/b1abf_turbopack-tests_tests_snapshot_cssmodules_composes_input_index_module_22660277.css
index b695a686b90f2..c8316bc6f31f0 100644
--- a/turbopack/crates/turbopack-tests/tests/snapshot/cssmodules/composes/output/b1abf_turbopack-tests_tests_snapshot_cssmodules_composes_input_index_module_22660277.css
+++ b/turbopack/crates/turbopack-tests/tests/snapshot/cssmodules/composes/output/b1abf_turbopack-tests_tests_snapshot_cssmodules_composes_input_index_module_22660277.css
@@ -1,4 +1,4 @@
/* [project]/turbopack/crates/turbopack-tests/tests/snapshot/cssmodules/composes/input/index.module.css [test] (css) */
-.index-module__H6xp9G__className{background:red;color:#ff0}.index-module__H6xp9G__subClass{background:#00f;}
+.index-module__H6xp9G__className{color:#ff0;background:red}.index-module__H6xp9G__subClass{background:#00f;}
/*# sourceMappingURL=b1abf_turbopack-tests_tests_snapshot_cssmodules_composes_input_index_module_22660277.css.map*/
\ No newline at end of file