fix: mangles template literal when you use `prettier-ignore` (#4220)

src/language-js/embed.js

@@ -26,7 +26,16 @@ function embed(path, print, textToDoc /*, options */) {
       if (isCss) {
         // Get full template literal with expressions replaced by placeholders
         const rawQuasis = node.quasis.map(q => q.value.raw);
-        const text = rawQuasis.join("@prettier-placeholder");
+        let placeholderID = 0;
+        const text = rawQuasis.reduce((prevVal, currVal, idx) => {
+          return idx == 0
+            ? currVal
+            : prevVal +
+                "@prettier-placeholder-" +
+                placeholderID++ +
+                "-id" +
+                currVal;
+        }, "");
         const doc = textToDoc(text, { parser: "css" });
         return transformCssDoc(doc, path, print);
       }
@@ -233,6 +242,7 @@ function replacePlaceholders(quasisDoc, expressionDocs) {
   }
 
   const expressions = expressionDocs.slice();
+  let replaceCounter = 0;
   const newDoc = docUtils.mapDoc(quasisDoc, doc => {
     if (!doc || !doc.parts || !doc.parts.length) {
       return doc;
@@ -261,12 +271,16 @@ function replacePlaceholders(quasisDoc, expressionDocs) {
     if (atPlaceholderIndex > -1) {
       const placeholder = parts[atPlaceholderIndex];
       const rest = parts.slice(atPlaceholderIndex + 1);
-
+      const placeholderMatch = placeholder.match(
+        /@prettier-placeholder-(.+)-id(.*)/
+      );
+      const placeholderID = placeholderMatch[1];
       // When the expression has a suffix appended, like:
       // animation: linear ${time}s ease-out;
-      const suffix = placeholder.slice("@prettier-placeholder".length);
+      const suffix = placeholderMatch[2];
+      const expression = expressions[placeholderID];
 
-      const expression = expressions.shift();
+      replaceCounter++;
       parts = parts
         .slice(0, atPlaceholderIndex)
         .concat(["${", expression, "}" + suffix])
@@ -277,7 +291,7 @@ function replacePlaceholders(quasisDoc, expressionDocs) {
     });
   });
 
-  return expressions.length === 0 ? newDoc : null;
+  return expressions.length === replaceCounter ? newDoc : null;
 }
 
 function printGraphqlComments(lines) {

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

@@ -30,6 +30,42 @@ border : rebeccapurple\`;
 
 styled(ExistingComponent).attr({})\`
 border : rebeccapurple\`;
+
+styled.div\`
+  color: \${props => props.theme.colors.paragraph};
+  /* prettier-ignore */
+  \${props => props.small ? 'font-size: 0.8em;' : ''};
+\`
+
+styled.div\`
+  color: \${props => props.theme.colors.paragraph};
+  /* prettier-ignore */
+  \${props => props.small ? 'font-size: 0.8em;' : ''}
+\`
+
+styled.div\`
+   /* prettier-ignore */
+  color: \${props => props.theme.colors.paragraph};
+  \${props => props.small ? 'font-size: 0.8em;' : ''};
+\`
+
+styled.div\`
+  color: \${props => props.theme.colors.paragraph};
+  /* prettier-ignore */
+  \${props => props.small ? 'font-size: 0.8em;' : ''};
+  /* prettier-ignore */
+  \${props => props.red ? 'color: red;' : ''};
+\`
+
+styled.div\`
+  /* prettier-ignore */
+  color: \${props => props.theme.colors.paragraph};
+  /* prettier-ignore */
+  \${props => props.small ? 'font-size: 0.8em;' : ''};
+  /* prettier-ignore */
+  \${props => props.red ? 'color: red;' : ''};
+  /* prettier-ignore */
+\`
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 const ListItem = styled.li\`\`;
 
@@ -64,4 +100,40 @@ styled(ExistingComponent).attr({})\`
   border: rebeccapurple;
 \`;
 
+styled.div\`
+  color: \${props => props.theme.colors.paragraph};
+  /* prettier-ignore */
+  \${props => (props.small ? "font-size: 0.8em;" : "")};
+\`;
+
+styled.div\`
+  color: \${props => props.theme.colors.paragraph};
+  /* prettier-ignore */
+  \${props => (props.small ? "font-size: 0.8em;" : "")}
+\`;
+
+styled.div\`
+   /* prettier-ignore */
+  color: \${props => props.theme.colors.paragraph};
+  \${props => (props.small ? "font-size: 0.8em;" : "")};
+\`;
+
+styled.div\`
+  color: \${props => props.theme.colors.paragraph};
+  /* prettier-ignore */
+  \${props => (props.small ? "font-size: 0.8em;" : "")};
+  /* prettier-ignore */
+  \${props => (props.red ? "color: red;" : "")};
+\`;
+
+styled.div\`
+  /* prettier-ignore */
+  color: \${props => props.theme.colors.paragraph};
+  /* prettier-ignore */
+  \${props => (props.small ? "font-size: 0.8em;" : "")};
+  /* prettier-ignore */
+  \${props => (props.red ? "color: red;" : "")};
+  /* prettier-ignore */
+\`;
+
 `;

tests/multiparser_js_css/styled-components.js

@@ -27,3 +27,39 @@ border : rebeccapurple`;
 
 styled(ExistingComponent).attr({})`
 border : rebeccapurple`;
+
+styled.div`
+  color: ${props => props.theme.colors.paragraph};
+  /* prettier-ignore */
+  ${props => props.small ? 'font-size: 0.8em;' : ''};
+`
+
+styled.div`
+  color: ${props => props.theme.colors.paragraph};
+  /* prettier-ignore */
+  ${props => props.small ? 'font-size: 0.8em;' : ''}
+`
+
+styled.div`
+   /* prettier-ignore */
+  color: ${props => props.theme.colors.paragraph};
+  ${props => props.small ? 'font-size: 0.8em;' : ''};
+`
+
+styled.div`
+  color: ${props => props.theme.colors.paragraph};
+  /* prettier-ignore */
+  ${props => props.small ? 'font-size: 0.8em;' : ''};
+  /* prettier-ignore */
+  ${props => props.red ? 'color: red;' : ''};
+`
+
+styled.div`
+  /* prettier-ignore */
+  color: ${props => props.theme.colors.paragraph};
+  /* prettier-ignore */
+  ${props => props.small ? 'font-size: 0.8em;' : ''};
+  /* prettier-ignore */
+  ${props => props.red ? 'color: red;' : ''};
+  /* prettier-ignore */
+`