From 30bcd110e4781c46d5d3ffa94df4763853387f6f Mon Sep 17 00:00:00 2001
From: Evilebot Tnawi <evilebottnawi@users.noreply.github.com>
Date: Fri, 30 Mar 2018 21:40:14 +0300
Subject: [PATCH] fix: mangles template literal when you use `prettier-ignore`
 (#4220)

---
 src/language-js/embed.js                      | 24 +++++--
 .../__snapshots__/jsfmt.spec.js.snap          | 72 +++++++++++++++++++
 tests/multiparser_js_css/styled-components.js | 36 ++++++++++
 3 files changed, 127 insertions(+), 5 deletions(-)

diff --git a/src/language-js/embed.js b/src/language-js/embed.js
index 7bddab22..9d191f4f 100644
--- a/src/language-js/embed.js
+++ b/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) {
diff --git a/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap
index 33079547..3a93d54f 100644
--- a/tests/multiparser_js_css/__snapshots__/jsfmt.spec.js.snap
+++ b/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 */
+\`;
+
 `;
diff --git a/tests/multiparser_js_css/styled-components.js b/tests/multiparser_js_css/styled-components.js
index 08372911..ddd68baa 100644
--- a/tests/multiparser_js_css/styled-components.js
+++ b/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 */
+`