fix(turbopack): Call .minify() of lightningcss StyleSheet

test/integration/critical-css/test/index.test.js

@@ -39,15 +39,15 @@ function runTests() {
     expect(html).toMatch(
       /<link rel="stylesheet" href="\/_next\/static\/.*\.css" .*>/
     )
-    expect(html).toMatch(/body{font-family:SF Pro Text/)
+    expect(html).toMatch(/body{/)
   })
 
   it('should inline critical CSS (dynamic)', async () => {
     const html = await renderViaHTTP(appPort, '/another')
     expect(html).toMatch(
       /<link rel="stylesheet" href="\/_next\/static\/.*\.css" .*>/
     )
-    expect(html).toMatch(/body{font-family:SF Pro Text/)
+    expect(html).toMatch(/body{/)
   })
 
   it('should not inline non-critical css', async () => {

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(

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(

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}"

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) => {