fix: mangles template literal when you use `prettier-ignore` (#4220)
parent
7e1906d7c7
commit
30bcd110e4
|
@ -26,7 +26,16 @@ function embed(path, print, textToDoc /*, options */) {
|
||||||
if (isCss) {
|
if (isCss) {
|
||||||
// Get full template literal with expressions replaced by placeholders
|
// Get full template literal with expressions replaced by placeholders
|
||||||
const rawQuasis = node.quasis.map(q => q.value.raw);
|
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" });
|
const doc = textToDoc(text, { parser: "css" });
|
||||||
return transformCssDoc(doc, path, print);
|
return transformCssDoc(doc, path, print);
|
||||||
}
|
}
|
||||||
|
@ -233,6 +242,7 @@ function replacePlaceholders(quasisDoc, expressionDocs) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const expressions = expressionDocs.slice();
|
const expressions = expressionDocs.slice();
|
||||||
|
let replaceCounter = 0;
|
||||||
const newDoc = docUtils.mapDoc(quasisDoc, doc => {
|
const newDoc = docUtils.mapDoc(quasisDoc, doc => {
|
||||||
if (!doc || !doc.parts || !doc.parts.length) {
|
if (!doc || !doc.parts || !doc.parts.length) {
|
||||||
return doc;
|
return doc;
|
||||||
|
@ -261,12 +271,16 @@ function replacePlaceholders(quasisDoc, expressionDocs) {
|
||||||
if (atPlaceholderIndex > -1) {
|
if (atPlaceholderIndex > -1) {
|
||||||
const placeholder = parts[atPlaceholderIndex];
|
const placeholder = parts[atPlaceholderIndex];
|
||||||
const rest = parts.slice(atPlaceholderIndex + 1);
|
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:
|
// When the expression has a suffix appended, like:
|
||||||
// animation: linear ${time}s ease-out;
|
// 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
|
parts = parts
|
||||||
.slice(0, atPlaceholderIndex)
|
.slice(0, atPlaceholderIndex)
|
||||||
.concat(["${", expression, "}" + suffix])
|
.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) {
|
function printGraphqlComments(lines) {
|
||||||
|
|
|
@ -30,6 +30,42 @@ border : rebeccapurple\`;
|
||||||
|
|
||||||
styled(ExistingComponent).attr({})\`
|
styled(ExistingComponent).attr({})\`
|
||||||
border : rebeccapurple\`;
|
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\`\`;
|
const ListItem = styled.li\`\`;
|
||||||
|
|
||||||
|
@ -64,4 +100,40 @@ styled(ExistingComponent).attr({})\`
|
||||||
border: rebeccapurple;
|
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 */
|
||||||
|
\`;
|
||||||
|
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -27,3 +27,39 @@ border : rebeccapurple`;
|
||||||
|
|
||||||
styled(ExistingComponent).attr({})`
|
styled(ExistingComponent).attr({})`
|
||||||
border : rebeccapurple`;
|
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 */
|
||||||
|
`
|
||||||
|
|
Loading…
Reference in New Issue