Fix: escape double quote of url value in CSS url()

packages/core/integration-tests/test/css.js

@@ -244,6 +244,18 @@ describe('css', () => {
     );
   });
 
+  it('should handle quote in CSS URL correctly', async function () {
+    await bundle(path.join(__dirname, '/integration/css-url-quote/index.css'));
+
+    let css = await outputFS.readFile(path.join(distDir, 'index.css'), 'utf8');
+
+    assert(
+      css.includes(
+        'url("data:image/svg+xml;utf8,with quote \\" and escape \\\\");',
+      ),
+    );
+  });
+
   it('should ignore url() with IE behavior specifiers', async function () {
     let b = await bundle(
       path.join(__dirname, '/integration/css-url-behavior/index.css'),

packages/core/integration-tests/test/integration/css-url-quote/index.css

@@ -0,0 +1,5 @@
+.quotes {
+  background-image: url('data:image/svg+xml;utf8,with quote " and escape \\');
+  width: 100px;
+  height: 100px;
+}

packages/core/integration-tests/test/integration/css-url-quote/index.js

@@ -0,0 +1,5 @@
+require('./index.css');
+
+module.exports = function () {
+  return 2;
+};

packages/core/utils/src/replaceBundleReferences.js

@@ -33,13 +33,15 @@ export function replaceURLReferences({
   bundleGraph,
   contents,
   map,
+  getReplacement,
   relative = true,
 }: {|
   bundle: NamedBundle,
   bundleGraph: BundleGraph<NamedBundle>,
   contents: string,
   relative?: boolean,
   map?: ?SourceMap,
+  getReplacement: string => string,
 |}): {|+contents: string, +map: ?SourceMap|} {
   let replacements = new Map();
   let urlDependencies = [];
@@ -61,7 +63,7 @@ export function replaceURLReferences({
     if (resolved == null) {
       replacements.set(placeholder, {
         from: placeholder,
-        to: dependency.specifier,
+        to: getReplacement(dependency.specifier),
       });
       continue;
     }
@@ -79,6 +81,7 @@ export function replaceURLReferences({
         fromBundle: bundle,
         toBundle: resolved,
         relative,
+        getReplacement,
       }),
     );
   }
@@ -156,11 +159,13 @@ export function getURLReplacement({
   fromBundle,
   toBundle,
   relative,
+  getReplacement,
 }: {|
   dependency: Dependency,
   fromBundle: NamedBundle,
   toBundle: NamedBundle,
   relative: boolean,
+  getReplacement?: string => string,
 |}): {|from: string, to: string|} {
   let to;
 
@@ -191,9 +196,10 @@ export function getURLReplacement({
 
   let placeholder = dependency.meta?.placeholder ?? dependency.id;
   invariant(typeof placeholder === 'string');
+
   return {
     from: placeholder,
-    to,
+    to: getReplacement ? getReplacement(to) : to,
   };
 }
 

packages/packagers/css/src/CSSPackager.js

@@ -129,6 +129,7 @@ export default (new Packager({
       bundleGraph,
       contents,
       map,
+      getReplacement: escapeString,
     }));
 
     return replaceInlineReferences({
@@ -138,7 +139,7 @@ export default (new Packager({
       getInlineBundleContents,
       getInlineReplacement: (dep, inlineType, contents) => ({
         from: getSpecifier(dep),
-        to: contents,
+        to: escapeString(contents),
       }),
       map,
     });
@@ -153,6 +154,10 @@ export function getSpecifier(dep: Dependency): string {
   return dep.id;
 }
 
+function escapeString(contents: string): string {
+  return contents.replace(/(["\\])/g, '\\$1');
+}
+
 async function processCSSModule(
   options,
   logger,

packages/packagers/html/src/HTMLPackager.js

@@ -74,6 +74,7 @@ export default (new Packager({
       bundleGraph,
       contents: html,
       relative: false,
+      getReplacement: contents => contents.replace(/"/g, '"'),
     });
 
     return replaceInlineReferences({

packages/packagers/js/src/index.js

@@ -72,6 +72,7 @@ export default (new Packager({
         bundleGraph,
         contents,
         map,
+        getReplacement: s => JSON.stringify(s).slice(1, -1),
       }));
     }
 

packages/packagers/raw-url/src/RawUrlPackager.js

@@ -17,6 +17,7 @@ export default (new Packager({
       bundleGraph,
       contents: await assets[0].getCode(),
       relative: false,
+      getReplacement: s => s,
     });
     return {contents};
   },

packages/packagers/svg/src/SVGPackager.js

@@ -58,6 +58,7 @@ export default (new Packager({
       bundleGraph,
       contents: svg,
       relative: false,
+      getReplacement: contents => contents.replace(/"/g, '"'),
     });
 
     return replaceInlineReferences({

packages/packagers/xml/src/XMLPackager.js

@@ -68,6 +68,7 @@ export default (new Packager({
       bundleGraph,
       contents: code,
       relative: false,
+      getReplacement: contents => contents.replace(/"/g, '"'),
     });
 
     return replaceInlineReferences({

packages/transformers/css/src/CSSTransformer.js

@@ -83,12 +83,16 @@ export default (new Transformer({
             symbols: new Map([['*', {local: '*', isWeak: true, loc}]]),
           });
         } else if (dep.type === 'url') {
-          asset.addURLDependency(dep.url, {
-            loc,
-            meta: {
-              placeholder: dep.placeholder,
+          asset.addURLDependency(
+            // when URL is escaped, parcel resolver cannot resolve URL, so we need to unescape it in transformer
+            dep.url.replace(/\\"/g, '"').replace(/\\'/g, "'"),
+            {
+              loc,
+              meta: {
+                placeholder: dep.placeholder,
+              },
             },
-          });
+          );
         }
       }
     }