feat(cssnano): disable normalizeUrl while enabling output.injectStyles

.changeset/tidy-waves-sip.md

@@ -0,0 +1,6 @@
+---
+'@modern-js/uni-builder': patch
+---
+
+fix(cssnano): cssnano `normalizeUrl` optimization breaks resolving of CSS files
+fix(cssnano): cssnano `normalizeUrl` 优化导致 CSS 文件无法正确 resolving

packages/cli/uni-builder/src/rspack/index.ts

@@ -53,9 +53,7 @@ export async function parseConfig(
   if (Boolean(rsbuildConfig.tools!.lightningcssLoader) === false) {
     const { pluginPostcss } = await import('../shared/plugins/postcss');
     rsbuildPlugins.push(
-      pluginPostcss({
-        autoprefixer: uniBuilderConfig.tools?.autoprefixer,
-      }),
+      pluginPostcss({ autoprefixer: uniBuilderConfig.tools?.autoprefixer }),
     );
   }
 

packages/cli/uni-builder/src/shared/parseCommonConfig.ts

@@ -68,12 +68,12 @@ const isUseCssSourceMap = (disableSourceMap: DisableSourceMapOption = {}) => {
 
 export async function parseCommonConfig(
   uniBuilderConfig: UniBuilderConfig,
-  options: CreateBuilderCommonOptions,
+  options?: CreateBuilderCommonOptions,
 ): Promise<{
   rsbuildConfig: RsbuildConfig;
   rsbuildPlugins: RsbuildPlugin[];
 }> {
-  const { frameworkConfigPath } = options;
+  const frameworkConfigPath = options?.frameworkConfigPath;
 
   const {
     plugins: [...plugins] = [],

packages/cli/uni-builder/src/shared/plugins/postcss.ts

@@ -1,19 +1,23 @@
 import { applyOptionsChain, isProd } from '@modern-js/utils';
 import type { RsbuildPlugin } from '@rsbuild/core';
+import type { Options } from 'cssnano';
 import type { ToolsAutoprefixerConfig } from '../../types';
 import { getCssSupport } from '../getCssSupport';
 
-// enable autoprefixer and  support compat legacy browsers
-export const pluginPostcss = ({
-  autoprefixer,
-}: {
+export interface PluginPostcssOptions {
   autoprefixer?: ToolsAutoprefixerConfig;
-}): RsbuildPlugin => ({
+}
+
+// enable autoprefixer and  support compat legacy browsers
+export const pluginPostcss = (
+  options: PluginPostcssOptions = {},
+): RsbuildPlugin => ({
   name: 'uni-builder:postcss-plugins',
 
   pre: ['uni-builder:environment-defaults-plugin'],
 
   setup(api) {
+    const { autoprefixer } = options;
     api.modifyEnvironmentConfig((config, { mergeEnvironmentConfig }) => {
       if (config.output.target !== 'web') {
         return config;
@@ -25,6 +29,24 @@ export const pluginPostcss = ({
 
       const enableCssMinify = !enableExtractCSS && isProd;
 
+      const cssnanoOptions: Options = {
+        preset: [
+          'default',
+          {
+            // merge longhand will break safe-area-inset-top, so disable it
+            // https://github.com/cssnano/cssnano/issues/803
+            // https://github.com/cssnano/cssnano/issues/967
+            mergeLonghand: false,
+            /**
+             * normalizeUrl will transform relative url from `./assets/img.svg` to `assets/img.svg`.
+             * It may break the behavior of webpack resolver while using style-loader.
+             * So disable it while `output.injectStyles = true` or `output.disableCssExtract = true`.
+             */
+            normalizeUrl: false,
+          },
+        ],
+      };
+
       const plugins = [
         require('postcss-flexbugs-fixes'),
         !cssSupport.customProperties && require('postcss-custom-properties'),
@@ -33,19 +55,7 @@ export const pluginPostcss = ({
         !cssSupport.fontVariant && require('postcss-font-variant'),
         !cssSupport.mediaMinmax && require('postcss-media-minmax'),
         require('postcss-nesting'),
-        enableCssMinify
-          ? require('cssnano')({
-              preset: [
-                'default',
-                {
-                  // merge longhand will break safe-area-inset-top, so disable it
-                  // https://github.com/cssnano/cssnano/issues/803
-                  // https://github.com/cssnano/cssnano/issues/967
-                  mergeLonghand: false,
-                },
-              ],
-            })
-          : false,
+        enableCssMinify ? require('cssnano')(cssnanoOptions) : false,
         // The last insert autoprefixer
         require('autoprefixer')(
           applyOptionsChain(

packages/cli/uni-builder/src/webpack/index.ts

@@ -32,9 +32,7 @@ export async function parseConfig(
   );
 
   rsbuildPlugins.push(
-    pluginPostcss({
-      autoprefixer: uniBuilderConfig.tools?.autoprefixer,
-    }),
+    pluginPostcss({ autoprefixer: uniBuilderConfig.tools?.autoprefixer }),
   );
 
   const hasEnvironmentBabelConfig = Object.values(