Respect spacing for between expressions and parentheses in embedded CSS (#11800)

* Fix embedded css formatting

* Add changelog

changelog_unreleased/javascript/11800.md

@@ -0,0 +1,22 @@
+#### Respect spacing for between expressions and parentheses in embedded CSS (#11800 by @sosukesuzuki)
+
+<!-- Optional description if it makes sense. -->
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+const paragraph2 = css`
+  transform: ${expr}(30px);
+`;
+
+// Prettier stable
+const paragraph2 = css`
+  transform: ${expr} (30px);
+`;
+
+// Prettier main
+const paragraph2 = css`
+  transform: ${expr}(30px);
+`;
+
+```

src/language-css/printer-postcss.js

@@ -75,6 +75,7 @@ const {
   lastLineHasInlineComment,
   isAtWordPlaceholderNode,
   isConfigurationNode,
+  isParenGroupNode,
 } = require("./utils.js");
 const { locStart, locEnd } = require("./loc.js");
 
@@ -810,14 +811,15 @@ function genericPrint(path, options, print) {
         }
 
         if (
-          iNode.value === "with" &&
-          iNextNode &&
-          iNextNode.type === "value-paren_group" &&
-          iNextNode.open &&
-          iNextNode.open.value === "(" &&
-          iNextNode.close &&
-          iNextNode.close.value === ")"
+          isAtWordPlaceholderNode(iNode) &&
+          isParenGroupNode(iNextNode) &&
+          locEnd(iNode) === locStart(iNextNode.open)
         ) {
+          parts.push(softline);
+          continue;
+        }
+
+        if (iNode.value === "with" && isParenGroupNode(iNextNode)) {
           parts.push(" ");
           continue;
         }

src/language-css/utils.js

@@ -508,6 +508,16 @@ function isConfigurationNode(node, parentNode) {
   return false;
 }
 
+function isParenGroupNode(node) {
+  return (
+    node.type === "value-paren_group" &&
+    node.open &&
+    node.open.value === "(" &&
+    node.close &&
+    node.close.value === ")"
+  );
+}
+
 module.exports = {
   getAncestorCounter,
   getAncestorNode,
@@ -564,4 +574,5 @@ module.exports = {
   isAtWordPlaceholderNode,
   isModuleRuleName,
   isConfigurationNode,
+  isParenGroupNode,
 };

tests/format/js/multiparser-css/__snapshots__/jsfmt.spec.js.snap

@@ -401,6 +401,43 @@ const style3 = css\`
 ================================================================================
 `;
 
+exports[`issue-11797.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+const paragraph1 = css\`
+  font-size: 12px;
+  transform: \${vert ? 'translateY' : 'translateX'}(\${translation + handleOffset}px);
+\`;
+
+const paragraph2 = css\`
+  transform: \${expr}(30px);
+\`;
+
+const paragraph3 = css\`
+  transform: \${expr} (30px);
+\`;
+
+=====================================output=====================================
+const paragraph1 = css\`
+  font-size: 12px;
+  transform: \${vert ? "translateY" : "translateX"}
+    (\${translation + handleOffset}px);
+\`;
+
+const paragraph2 = css\`
+  transform: \${expr}(30px);
+\`;
+
+const paragraph3 = css\`
+  transform: \${expr} (30px);
+\`;
+
+================================================================================
+`;
+
 exports[`styled-components.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "typescript", "flow"]

tests/format/js/multiparser-css/issue-11797.js

@@ -0,0 +1,12 @@
+const paragraph1 = css`
+  font-size: 12px;
+  transform: ${vert ? 'translateY' : 'translateX'}(${translation + handleOffset}px);
+`;
+
+const paragraph2 = css`
+  transform: ${expr}(30px);
+`;
+
+const paragraph3 = css`
+  transform: ${expr} (30px);
+`;