fix(css): stringify unquoted data urls (#3877)

src/language-css/parser-postcss.js

@@ -39,6 +39,25 @@ function parseValueNodes(nodes) {
 
   for (let i = 0; i < nodes.length; ++i) {
     const node = nodes[i];
+    const isUnquotedDataURLCall =
+      node.type === "func" &&
+      node.value === "url" &&
+      node.group &&
+      node.group.groups &&
+      node.group.groups[0] &&
+      node.group.groups[0].groups &&
+      node.group.groups[0].groups.length > 2 &&
+      node.group.groups[0].groups[0].type === "word" &&
+      node.group.groups[0].groups[0].value === "data" &&
+      node.group.groups[0].groups[1].type === "colon" &&
+      node.group.groups[0].groups[1].value === ":";
+
+    if (isUnquotedDataURLCall) {
+      node.group.groups = [stringifyGroup(node)];
+
+      return node;
+    }
+
     if (node.type === "paren" && node.value === "(") {
       parenGroup = {
         open: node,
@@ -86,6 +105,31 @@ function parseValueNodes(nodes) {
   return rootParenGroup;
 }
 
+function stringifyGroup(node) {
+  if (node.group) {
+    return stringifyGroup(node.group);
+  }
+
+  if (node.groups) {
+    return node.groups.reduce((previousValue, currentValue, index) => {
+      return (
+        previousValue +
+        stringifyGroup(currentValue) +
+        (currentValue.type === "comma_group" && index !== node.groups.length - 1
+          ? ","
+          : "")
+      );
+    }, "");
+  }
+
+  const before = node.raws && node.raws.before ? node.raws.before : "";
+  const value = node.value ? node.value : "";
+  const unit = node.unit ? node.unit : "";
+  const after = node.raws && node.raws.after ? node.raws.after : "";
+
+  return before + value + unit + after;
+}
+
 function flattenGroups(node) {
   if (
     node.type === "paren_group" &&

src/language-css/printer-postcss.js

@@ -466,7 +466,7 @@ function genericPrint(path, options, print) {
             n.groups[0].type === "value-comma_group" &&
             n.groups[0].groups.length > 0 &&
             n.groups[0].groups[0].type === "value-word" &&
-            n.groups[0].groups[0].value === "data"))
+            n.groups[0].groups[0].value.startsWith("data:")))
       ) {
         return concat([
           n.open ? path.call(print, "open") : "",

tests/css_inline_url/__snapshots__/jsfmt.spec.js.snap

@@ -18,6 +18,7 @@ exports[`inline_url.css 1`] = `
   -fb-sprite: url(fbglyph:cross-outline, fig-white);
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=);
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=");
+  background-image: url(data:application/font-woff;charset=utf-8;base64,ThisIsNormalBut/+0ThisIsLowerCased);
 }
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 .breadItem {
@@ -26,6 +27,7 @@ exports[`inline_url.css 1`] = `
   -fb-sprite: url(fbglyph:cross-outline, fig-white);
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=);
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=");
+  background-image: url(data:application/font-woff;charset=utf-8;base64,ThisIsNormalBut/+0ThisIsLowerCased);
 }
 
 `;

tests/css_inline_url/inline_url.css

@@ -4,4 +4,5 @@
   -fb-sprite: url(fbglyph:cross-outline, fig-white);
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=);
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO4/B8AAqgB0yr7dJgAAAAASUVORK5CYII=");
+  background-image: url(data:application/font-woff;charset=utf-8;base64,ThisIsNormalBut/+0ThisIsLowerCased);
 }