chore(module-tools): simplify logic in rewrite css url (#5086)

web-infra-dev · Dec 20, 2023 · 0696cdd · 0696cdd
1 parent 83415e3
commit 0696cdd
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 27 deletions.
diff --git a/.changeset/purple-bottles-dream.md b/.changeset/purple-bottles-dream.md
@@ -0,0 +1,6 @@
+---
+'@modern-js/module-tools': patch
+---
+
+chore(module-tools): simplify logic in rewrite css url
+chore(module-tools): 简化更新 css url 的逻辑
diff --git a/packages/solutions/module-tools/src/builder/feature/style/postcssUrlPlugin.ts b/packages/solutions/module-tools/src/builder/feature/style/postcssUrlPlugin.ts
@@ -17,7 +17,9 @@ export const postcssUrlPlugin = (options: {
     postcssPlugin: 'postcss-url',
     async Declaration(decl) {
       const isProcessed = (decl as any)[Processed];
-
+      if (isProcessed) {
+        return;
+      }
       decl.value = await rewriteCssUrls(
         decl.value,
         false,
@@ -26,8 +28,7 @@ export const postcssUrlPlugin = (options: {
             URL &&
             !HTTP_PATTERNS.test(URL) &&
             !HASH_PATTERNS.test(URL) &&
-            !DATAURL_PATTERNS.test(URL) &&
-            !isProcessed
+            !DATAURL_PATTERNS.test(URL)
           ) {
             let filePath = URL;
             const { outDir, sourceDir, buildType } = options.compilation.config;

diff --git a/packages/solutions/module-tools/src/builder/feature/style/utils.ts b/packages/solutions/module-tools/src/builder/feature/style/utils.ts
@@ -87,12 +87,17 @@ export async function rebaseUrls(
   }
 }
 
-export function rewriteCssUrls(
+export async function rewriteCssUrls(
   css: string,
   type: false | string,
   replacer: CssUrlReplacer,
 ): Promise<string> {
-  return asyncReplace(css, cssUrlRE, async match => {
+  let match: RegExpExecArray | null;
+  let remaining = css;
+  let rewritten = '';
+  // eslint-disable-next-line no-cond-assign
+  while ((match = cssUrlRE.exec(remaining))) {
+    rewritten += remaining.slice(0, match.index);
     const matched = match[0];
     let rawUrl = match[1];
     let wrap = '';
@@ -101,33 +106,15 @@ export function rewriteCssUrls(
       wrap = first;
       rawUrl = rawUrl.slice(1, -1);
     }
-    if (
+    const result =
       (type === 'less' && rawUrl.startsWith('@')) ||
       ((type === 'sass' || type === 'scss') && rawUrl.startsWith('$')) ||
       isExternalUrl(rawUrl) ||
       isDataUrl(rawUrl) ||
       rawUrl.startsWith('#')
-    ) {
-      // do not rewrite
-      return matched;
-    }
-
-    return `url(${wrap}${normalizeSlashes(await replacer(rawUrl))}${wrap})`;
-  });
-}
-
-async function asyncReplace(
-  input: string,
-  re: RegExp,
-  replacer: (match: RegExpExecArray) => string | Promise<string>,
-): Promise<string> {
-  let match: RegExpExecArray | null;
-  let remaining = input;
-  let rewritten = '';
-  // eslint-disable-next-line no-cond-assign
-  while ((match = re.exec(remaining))) {
-    rewritten += remaining.slice(0, match.index);
-    rewritten += await replacer(match);
+        ? matched
+        : `url(${wrap}${normalizeSlashes(await replacer(rawUrl))}${wrap})`;
+    rewritten += result;
     remaining = remaining.slice(match.index + match[0].length);
   }
   rewritten += remaining;