Respect spacing between template values in embedded css (#9078)

* Respect no space for embedded css

* Fix by lint

* Add changelog

changelog_unreleased/javascript/pr-9078.md

@@ -0,0 +1,20 @@
+#### Respect spacing between template values in embedded css ([#9078](https://github.com/prettier/prettier/pull/9078) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+<!-- prettier-ignore -->
+```js
+// Input
+const style = css`
+  width: ${size}${sizeUnit};
+`;
+
+// Prettier stable
+const style = css`
+  width: ${size} ${sizeUnit};
+`;
+
+// Prettier master
+const style = css`
+  width: ${size}${sizeUnit};
+`;
+
+```

src/language-css/printer-postcss.js

@@ -72,6 +72,7 @@ const {
   isMediaAndSupportsKeywords,
   isColorAdjusterFuncNode,
   lastLineHasInlineComment,
+  isAtWordPlaceholderNode,
 } = require("./utils");
 
 function shouldPrintComma(options) {
@@ -572,8 +573,7 @@ function genericPrint(path, options, print) {
         if (
           iNode.type === "value-word" &&
           iNode.value.endsWith("-") &&
-          iNextNode.type === "value-atword" &&
-          iNextNode.value.startsWith("prettier-placeholder-")
+          isAtWordPlaceholderNode(iNextNode)
         ) {
           continue;
         }
@@ -793,6 +793,14 @@ function genericPrint(path, options, print) {
           continue;
         }
 
+        if (
+          isAtWordPlaceholderNode(iNode) &&
+          isAtWordPlaceholderNode(iNextNode) &&
+          options.locEnd(iNode) === options.locStart(iNextNode)
+        ) {
+          continue;
+        }
+
         // Be default all values go through `line`
         parts.push(line);
       }

src/language-css/utils.js

@@ -453,6 +453,14 @@ function stringifyNode(node) {
   return before + quote + atword + value + quote + unit + group + after;
 }
 
+function isAtWordPlaceholderNode(node) {
+  return (
+    node &&
+    node.type === "value-atword" &&
+    node.value.startsWith("prettier-placeholder-")
+  );
+}
+
 module.exports = {
   getAncestorCounter,
   getAncestorNode,
@@ -505,4 +513,5 @@ module.exports = {
   isColorAdjusterFuncNode,
   lastLineHasInlineComment,
   stringifyNode,
+  isAtWordPlaceholderNode,
 };

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

@@ -280,6 +280,44 @@ export const Group = styled.div\`
 ================================================================================
 `;
 
+exports[`issue-9072.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+const style1 = css\`
+  width:\${size+10}\${sizeUnit};
+  border:\${size/10} \${sizeUnit} solid \${color};
+\`;
+
+const style2 = css\`
+  width: \${size + 10}\${sizeUnit};
+  border: \${size / 10} \${sizeUnit} solid \${color};
+\`;
+
+const style3 = css\`
+  foo: \${foo}\${bar}       \${baz};
+\`;
+
+=====================================output=====================================
+const style1 = css\`
+  width: \${size + 10}\${sizeUnit};
+  border: \${size / 10} \${sizeUnit} solid \${color};
+\`;
+
+const style2 = css\`
+  width: \${size + 10}\${sizeUnit};
+  border: \${size / 10} \${sizeUnit} solid \${color};
+\`;
+
+const style3 = css\`
+  foo: \${foo}\${bar} \${baz};
+\`;
+
+================================================================================
+`;
+
 exports[`styled-components.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "typescript", "flow"]

tests/js/multiparser-css/issue-9072.js

@@ -0,0 +1,13 @@
+const style1 = css`
+  width:${size+10}${sizeUnit};
+  border:${size/10} ${sizeUnit} solid ${color};
+`;
+
+const style2 = css`
+  width: ${size + 10}${sizeUnit};
+  border: ${size / 10} ${sizeUnit} solid ${color};
+`;
+
+const style3 = css`
+  foo: ${foo}${bar}       ${baz};
+`;