fix(core): Advance the order of lightningcssLoader

web-infra-dev · Aug 20, 2024 · af9bc8e · af9bc8e
1 parent b7ed52d
commit af9bc8e
Showing 1 changed file with 18 additions and 17 deletions.
diff --git a/packages/core/src/plugins/css.ts b/packages/core/src/plugins/css.ts
@@ -236,12 +236,27 @@ async function applyCSSRule({
 
   rule.use(CHAIN_ID.USE.CSS).loader(getCompiledPath('css-loader'));
 
+  const postcssLoaderOptions = await getPostcssLoaderOptions({
+    config,
+    root: context.rootPath,
+  });
+
+  // enable postcss-loader if using PostCSS plugins
+  if (postcssLoaderOptions.postcssOptions?.plugins?.length) {
+    importLoaders++;
+    rule
+      .use(CHAIN_ID.USE.POSTCSS)
+      .loader(getCompiledPath('postcss-loader'))
+      .options(postcssLoaderOptions);
+  }
+
+  // Put `builtin:lightningcss-loader` in front of `PostCSS`
+  // `buildin:lightningcss-loader` affects `normalizewhitespace` in the PostCss by cssnano
   if (target === 'web') {
-    // `builtin:lightningcss-loader` is not supported when using webpack and inject styles
+    // `builtin:lightningcss-loader` is not supported when using webpack
     if (
       context.bundlerType === 'rspack' &&
-      config.tools.lightningcssLoader !== false &&
-      config.output.injectStyles !== true
+      config.tools.lightningcssLoader !== false
     ) {
       importLoaders++;
 
@@ -262,20 +277,6 @@ async function applyCSSRule({
         .loader('builtin:lightningcss-loader')
         .options(loaderOptions);
     }
-
-    const postcssLoaderOptions = await getPostcssLoaderOptions({
-      config,
-      root: context.rootPath,
-    });
-
-    // enable postcss-loader if using PostCSS plugins
-    if (postcssLoaderOptions.postcssOptions?.plugins?.length) {
-      importLoaders++;
-      rule
-        .use(CHAIN_ID.USE.POSTCSS)
-        .loader(getCompiledPath('postcss-loader'))
-        .options(postcssLoaderOptions);
-    }
   }
 
   const localIdentName = getCSSModulesLocalIdentName(config, isProd);