Fix a bug: css urls are incorrectly stripped of commas

changelog_unreleased/css/14476.md

@@ -0,0 +1,19 @@
+#### Fix a bug that incorrectly strips of commas in some cases (#14476 by @seiyab)
+
+<!-- prettier-ignore -->
+```css
+/* Input */
+@font-face {
+  src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
+}
+
+/* Prettier stable */
+@font-face {
+  src: url(RobotoFlex-VariableFont_GRADXTRAYOPQYTASYTDEYTFIYTLCYTUCopszslntwdthwght.ttf);
+}
+
+/* Prettier main */
+@font-face {
+  src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
+}
+```

src/language-css/parser-postcss.js

@@ -8,19 +8,13 @@ const { locStart, locEnd } = require("./loc.js");
 const { calculateLoc, replaceQuotesInInlineComments } = require("./loc.js");
 const hasSCSSInterpolation = require("./utils/has-scss-interpolation.js");
 const hasStringOrFunction = require("./utils/has-string-or-function.js");
+const stringifyFuncParam = require("./utils/stringify-func-param.js");
 const isLessParser = require("./utils/is-less-parser.js");
 const isSCSS = require("./utils/is-scss.js");
 const isSCSSNestedPropertyNode = require("./utils/is-scss-nested-property-node.js");
 const isSCSSVariable = require("./utils/is-scss-variable.js");
-const stringifyNode = require("./utils/stringify-node.js");
 const isModuleRuleName = require("./utils/is-module-rule-name.js");
-
-const getHighestAncestor = (node) => {
-  while (node.parent) {
-    node = node.parent;
-  }
-  return node;
-};
+const getHighestAncestor = require("./utils/get-highest-ancestor.js");
 
 function parseValueNode(valueNode, options) {
   const { nodes } = valueNode;
@@ -84,10 +78,7 @@ function parseValueNode(valueNode, options) {
         hasSCSSInterpolation(groupList) ||
         (!hasStringOrFunction(groupList) && !isSCSSVariable(groupList[0]))
       ) {
-        const stringifiedContent = stringifyNode({
-          groups: node.group.groups,
-        });
-        node.group.groups = [stringifiedContent.trim()];
+        node.group.groups = [stringifyFuncParam(node)];
       }
     }
     if (node.type === "paren" && node.value === "(") {
@@ -201,7 +192,6 @@ function parseNestedValue(node, options) {
         }
       }
     }
-    delete node.parent;
   }
   return node;
 }

src/language-css/utils/get-highest-ancestor.js

@@ -0,0 +1,10 @@
+"use strict";
+
+const getHighestAncestor = (node) => {
+  while (node.parent) {
+    node = node.parent;
+  }
+  return node;
+};
+
+module.exports = getHighestAncestor;

src/language-css/utils/has-string-or-function.js

@@ -2,7 +2,11 @@
 
 function hasStringOrFunction(groupList) {
   return groupList.some(
-    (group) => group.type === "string" || group.type === "func"
+    (group) =>
+      group.type === "string" ||
+      (group.type === "func" &&
+        // workaround false-positive func
+        !group.value.endsWith("\\"))
   );
 }
 

src/language-css/utils/stringify-func-param.js

@@ -0,0 +1,18 @@
+"use strict";
+
+const getHighestAncestor = require("./get-highest-ancestor.js");
+
+/**
+ * @param {*} node
+ * @returns {string}
+ */
+function stringifyFuncParam(node) {
+  const text = getHighestAncestor(node).text.slice(
+    node.group.open.sourceIndex + 1,
+    node.group.close.sourceIndex
+  );
+  const innerText = text.trim();
+  return innerText;
+}
+
+module.exports = stringifyFuncParam;

tests/format/css/url/__snapshots__/jsfmt.spec.js.snap

@@ -11,11 +11,40 @@ div {
   background: -fb-url(/images/bg.png);
 }
 
+@font-face {
+  src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
+}
+
+@font-face {
+  src: url(foo.ttf?query=foo,bar,);
+  src: url(foo.woff2?foo=rgb\\(255,255,0\\));
+}
+
+a {
+  content: url(https://example.com/\\)\\).jpg);
+  content: url(https://example.com/\\(\\(.jpg);
+  content: url(https://example.com/\\ \\ .jpg);
+}
 =====================================output=====================================
 div {
   background: url(/images/bg.png);
   background: -fb-url(/images/bg.png);
 }
 
+@font-face {
+  src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
+}
+
+@font-face {
+  src: url(foo.ttf?query=foo,bar,);
+  src: url(foo.woff2?foo=rgb\\(255,255,0\\));
+}
+
+a {
+  content: url(https://example.com/\\)\\).jpg);
+  content: url(https://example.com/\\(\\(.jpg);
+  content: url(https://example.com/\\ \\ .jpg);
+}
+
 ================================================================================
 `;

tests/format/css/url/url.css

@@ -2,3 +2,18 @@ div {
   background: url(/images/bg.png);
   background: -fb-url(/images/bg.png);
 }
+
+@font-face {
+  src: url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
+}
+
+@font-face {
+  src: url(foo.ttf?query=foo,bar,);
+  src: url(foo.woff2?foo=rgb\(255,255,0\));
+}
+
+a {
+  content: url(https://example.com/\)\).jpg);
+  content: url(https://example.com/\(\(.jpg);
+  content: url(https://example.com/\ \ .jpg);
+}