Update: escape double quote in CSSPackager

parcel-bundler · Mar 6, 2022 · ea56294 · ea56294
1 parent c6c4fac
commit ea56294
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/packages/core/utils/src/replaceBundleReferences.js b/packages/core/utils/src/replaceBundleReferences.js
@@ -34,12 +34,14 @@ export function replaceURLReferences({
   contents,
   map,
   relative = true,
+  shouldBeEscaped = false,
 }: {|
   bundle: NamedBundle,
   bundleGraph: BundleGraph<NamedBundle>,
   contents: string,
   relative?: boolean,
   map?: ?SourceMap,
+  shouldBeEscaped?: boolean,
 |}): {|+contents: string, +map: ?SourceMap|} {
   let replacements = new Map();
   let urlDependencies = [];
@@ -83,7 +85,7 @@ export function replaceURLReferences({
     );
   }
 
-  return performReplacement(replacements, contents, map);
+  return performReplacement(replacements, contents, map, shouldBeEscaped);
 }
 
 /*
@@ -201,9 +203,11 @@ function performReplacement(
   replacements: ReplacementMap,
   contents: string,
   map?: ?SourceMap,
+  shouldBeEscaped = true,
 ): {|+contents: string, +map: ?SourceMap|} {
   let finalContents = contents;
   for (let {from, to} of replacements.values()) {
+    to = shouldBeEscaped ? to.replace(/"/g, '\\"').replace(/'/g, "\\'") : to;
     // Perform replacement
     finalContents = finalContents.split(from).join(to);
   }

diff --git a/packages/packagers/css/src/CSSPackager.js b/packages/packagers/css/src/CSSPackager.js
@@ -129,6 +129,7 @@ export default (new Packager({
       bundleGraph,
       contents,
       map,
+      shouldBeEscaped: true,
     }));
 
     return replaceInlineReferences({

diff --git a/packages/transformers/css-experimental/src/CSSTransformer.js b/packages/transformers/css-experimental/src/CSSTransformer.js
@@ -83,13 +83,16 @@ export default (new Transformer({
             symbols: new Map([['*', {local: '*', isWeak: true, loc}]]),
           });
         } else if (dep.type === 'url') {
-          // if dependency imported with url() includes ", escape " double quotes because this url value will be enclosed with double quote "
-          asset.addURLDependency(dep.url.replace(/"/g, '\\"'), {
-            loc,
-            meta: {
-              placeholder: dep.placeholder,
+          // if dependency imported with url() includes \" or \' (escaped quote), this escaped quote should be non-escaped because parcel resolver cannot resolve URL includes escaped quote. URL in url() will be enclosed with double quotes("), so this URL will be re-escaped in the packager.
+          asset.addURLDependency(
+            dep.url.replace(/\\"/g, '"').replace(/\\'/g, "'"),
+            {
+              loc,
+              meta: {
+                placeholder: dep.placeholder,
+              },
             },
-          });
+          );
         }
       }
     }

diff --git a/packages/transformers/css/src/CSSTransformer.js b/packages/transformers/css/src/CSSTransformer.js
@@ -171,8 +171,8 @@ export default (new Transformer({
           ) {
             let urlNode = node.nodes[0];
             let url = asset.addURLDependency(
-              // if dependency imported with url() includes ", escape " double quotes because this url value will be enclosed with double quote "
-              urlNode.value.replace(/"/g, '\\"'),
+              // if dependency imported with url() includes \" or \' (escaped quote), this escaped quote should be non-escaped because parcel resolver cannot resolve URL includes escaped quote. URL in url() will be enclosed with double quotes("), so this URL will be re-escaped in the packager.
+              urlNode.value.replace(/\\"/g, '"').replace(/\\'/g, "'"),
               {
                 loc:
                   decl.source &&