Preserve spaces between CSS words and embedded expression (#17398)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

changelog_unreleased/javascript/17398.md

@@ -0,0 +1,19 @@
+#### Preserve spaces between CSS words and embedded expression (#17398 by @sosukesuzuki)
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+const Heading = styled.h1`
+    font-size: var(--font-size-h${level});
+`;
+
+// Prettier stable
+const Heading = styled.h1`
+    font-size: var(--font-size-h ${level});
+`;
+
+// Prettier main
+const Heading = styled.h1`
+    font-size: var(--font-size-h${level});
+`;
+```

src/language-css/loc.js

@@ -2,6 +2,14 @@ import isNonEmptyArray from "../utils/is-non-empty-array.js";
 import lineColumnToIndex from "../utils/line-column-to-index.js";
 import { skipEverythingButNewLine } from "../utils/skip.js";
 
+function fixValueWordLoc(node, originalIndex) {
+  const { value } = node;
+  if (value === "-" || value === "--" || value.charAt(0) !== "-") {
+    return originalIndex;
+  }
+  return originalIndex - (value.charAt(1) === "-" ? 2 : 1);
+}
+
 function calculateLocStart(node, text) {
   // `postcss>=8`
   if (typeof node.source?.start?.offset === "number") {
@@ -10,6 +18,9 @@ function calculateLocStart(node, text) {
 
   // value-* nodes have this
   if (typeof node.sourceIndex === "number") {
+    if (node.type === "value-word") {
+      return fixValueWordLoc(node, node.sourceIndex);
+    }
     return node.sourceIndex;
   }
 
@@ -33,7 +44,11 @@ function calculateLocEnd(node, text) {
 
   if (node.source) {
     if (node.source.end) {
-      return lineColumnToIndex(node.source.end, text);
+      const index = lineColumnToIndex(node.source.end, text);
+      if (node.type === "value-word") {
+        return fixValueWordLoc(node, index);
+      }
+      return index;
     }
 
     if (isNonEmptyArray(node.nodes)) {

src/language-css/print/comma-separated-value-group.js

@@ -147,11 +147,15 @@ function printCommaSeparatedValueGroup(path, options, print) {
       continue;
     }
 
-    // styled.div` background: var(--${one}); `
+    // We should keep spaces between words in a embedded JS expression
+    // examples:
+    //   styled.div` font-size: var(--font-size-h${({ level }) => level}); `;
+    //   styled.div` grid-area: area-${({ area }) => area}; `;
+    //   styled.div` border: 1px ${solid} red; `;
     if (
       iNode.type === "value-word" &&
-      iNode.value.endsWith("-") &&
-      isAtWordPlaceholderNode(iNextNode)
+      isAtWordPlaceholderNode(iNextNode) &&
+      locEnd(iNode) === locStart(iNextNode)
     ) {
       continue;
     }

tests/format/js/multiparser-css/__snapshots__/format.test.js.snap

@@ -480,6 +480,56 @@ const paragraph3 = css\`
 ================================================================================
 `;
 
+exports[`issue-16692.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+const c1 = styled.div\`
+    border:    1px     \${solid}      red;
+\`;
+
+const c2 = styled.div\`
+ font-size:      var(--font-size-h\${level});
+\`;
+
+const c3 = styled.div\`
+    grid-area:       area-\${area};
+\`;
+
+const c4 = styled.div\`
+    grid-area:       var(--\${one});
+\`;
+
+const c5 = styled.div\`
+ font-size:      var(--font-size-h \${level});
+\`;
+
+=====================================output=====================================
+const c1 = styled.div\`
+  border: 1px \${solid} red;
+\`;
+
+const c2 = styled.div\`
+  font-size: var(--font-size-h\${level});
+\`;
+
+const c3 = styled.div\`
+  grid-area: area-\${area};
+\`;
+
+const c4 = styled.div\`
+  grid-area: var(--\${one});
+\`;
+
+const c5 = styled.div\`
+  font-size: var(--font-size-h \${level});
+\`;
+
+================================================================================
+`;
+
 exports[`styled-components.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "typescript", "flow"]

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

@@ -0,0 +1,19 @@
+const c1 = styled.div`
+    border:    1px     ${solid}      red;
+`;
+
+const c2 = styled.div`
+ font-size:      var(--font-size-h${level});
+`;
+
+const c3 = styled.div`
+    grid-area:       area-${area};
+`;
+
+const c4 = styled.div`
+    grid-area:       var(--${one});
+`;
+
+const c5 = styled.div`
+ font-size:      var(--font-size-h ${level});
+`;