Skip to content

Commit 382cda0

Browse files
ota-meshiota-meshi
committed
Fixed incorrect parsing/stringifying for nested tagged template literals
1 parent 9d729fe commit 382cda0

16 files changed

+1843
-11
lines changed

‎extract.js‎

Lines changed: 38 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -337,7 +337,7 @@ function literalParser (source, opts, styles) {
337337
traverse(ast, visitor);
338338
jobs.forEach(job => job());
339339

340-
objLiteral = Array.from(objLiteral).map(endNode => {
340+
const objLiteralStyles = Array.from(objLiteral).map(endNode => {
341341
const objectSyntax = require("./object-syntax");
342342
let startNode = endNode;
343343
if (startNode.leadingComments && startNode.leadingComments.length) {
@@ -361,11 +361,14 @@ function literalParser (source, opts, styles) {
361361
};
362362
});
363363

364-
tplLiteral = Array.from(tplLiteral).filter(node => (
365-
objLiteral.every(style => (
366-
node.start > style.endIndex || node.end < style.startIndex
367-
))
368-
)).map(node => {
364+
const tplLiteralStyles = [];
365+
Array.from(tplLiteral).forEach(node => {
366+
if (objLiteralStyles.some(style => (
367+
style.startIndex <= node.end && node.start < style.endIndex
368+
))) {
369+
return
370+
}
371+
369372
const quasis = node.quasis.map(node => ({
370373
start: node.start,
371374
end: node.end,
@@ -376,18 +379,45 @@ function literalParser (source, opts, styles) {
376379
content: getTemplate(node, source),
377380
};
378381
if (node.expressions.length) {
382+
const expressions = node.expressions.map(node => ({
383+
start: node.start,
384+
end: node.end,
385+
}));
379386
style.syntax = loadSyntax(opts, __dirname);
380387
style.lang = "template-literal";
381388
style.opts = {
382389
quasis: quasis,
390+
expressions: expressions,
383391
};
384392
} else {
385393
style.lang = "css";
386394
}
387-
return style;
395+
396+
let parent = null;
397+
let targetStyles = tplLiteralStyles;
398+
while (targetStyles) {
399+
const target = targetStyles.find(targetStyle =>
400+
targetStyle.opts && targetStyle.opts.expressions.some(expr =>
401+
expr.start <= style.startIndex && style.endIndex < expr.end
402+
)
403+
);
404+
if (target) {
405+
parent = target;
406+
targetStyles = target.opts.templateLiteralStyles;
407+
} else {
408+
break
409+
}
410+
}
411+
412+
if (parent) {
413+
const templateLiteralStyles = parent.opts.templateLiteralStyles || (parent.opts.templateLiteralStyles = []);
414+
templateLiteralStyles.push(style);
415+
} else {
416+
tplLiteralStyles.push(style);
417+
}
388418
});
389419

390-
return (styles || []).concat(objLiteral).concat(tplLiteral);
420+
return (styles || []).concat(objLiteralStyles).concat(tplLiteralStyles);
391421
};
392422

393423
module.exports = literalParser;

‎literal.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
"use strict";
3-
const Node = require("postcss/lib/node");
3+
const Container = require("postcss/lib/container");
44

55
/**
66
* Represents a JS literal
@@ -13,7 +13,7 @@ const Node = require("postcss/lib/node");
1313
* literal.type //=> 'literal'
1414
* literal.toString() //=> 'a{}'
1515
*/
16-
class Literal extends Node {
16+
class Literal extends Container {
1717
constructor (defaults) {
1818
super(defaults);
1919
this.type = "literal";

‎template-parse.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ const Input = require("postcss/lib/input");
66
function templateParse (css, opts) {
77
const input = new Input(css, opts);
88
input.quasis = opts.quasis;
9+
input.templateLiteralStyles = opts.templateLiteralStyles;
10+
input.parseOptions = opts
911
const parser = new TemplateParser(input);
1012
parser.parse();
1113

‎template-parser-helper.js‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
"use strict";
22
const Literal = require("./literal");
3+
const postcssParse = require("postcss/lib/parse");
4+
const Input = require("postcss/lib/input");
5+
const reNewLine = /(?:\r?\n|\r)/gm;
36
const isLiteral = token => token[0] === "word" && /^\$\{[\s\S]*\}$/.test(token[1]);
47
function literal (start) {
58
if (!isLiteral(start)) {
@@ -33,6 +36,28 @@ function literal (start) {
3336

3437
this.init(node, start[2], start[3]);
3538

39+
const input = this.input;
40+
if (input.templateLiteralStyles) {
41+
const offset = input.quasis[0].start;
42+
const nodeIndex = getNodeIndex(node, input);
43+
const start = offset + nodeIndex;
44+
const end = start + node.text.length;
45+
const templateLiteralStyles = input.templateLiteralStyles.filter(style =>
46+
style.startIndex <= end && start < style.endIndex
47+
);
48+
if (templateLiteralStyles.length) {
49+
const nodes = parseTemplateLiteralStyles(
50+
templateLiteralStyles,
51+
input,
52+
[nodeIndex, nodeIndex + node.text.length]
53+
);
54+
if (nodes.length) {
55+
node.nodes = nodes;
56+
nodes.forEach(n => n.parent = node);
57+
}
58+
}
59+
}
60+
3661
return node;
3762
}
3863

@@ -50,3 +75,137 @@ module.exports = {
5075
freeSemicolon: freeSemicolon,
5176
literal: literal,
5277
};
78+
79+
function parseTemplateLiteralStyles(styles, input, range) {
80+
const offset = input.quasis[0].start;
81+
const source = input.css;
82+
const parseStyle = docFixer(source, input.parseOptions);
83+
84+
const nodes = [];
85+
let index = range[0];
86+
styles.sort((a, b) => (
87+
a.startIndex - b.startIndex
88+
)).forEach(style => {
89+
const root = parseStyle(style);
90+
if (!root || !root.nodes.length) {
91+
return
92+
}
93+
root.raws.beforeStart = source.slice(index, style.startIndex - offset);
94+
root.raws.afterEnd = '';
95+
if (style.endIndex) {
96+
index = style.endIndex - offset;
97+
} else {
98+
index = style.startIndex - offset + (style.content || root.source.input.css).length;
99+
}
100+
nodes.push(root);
101+
})
102+
if (nodes.length) {
103+
nodes[nodes.length - 1].raws.afterEnd = source.slice(index, range[1]);
104+
}
105+
return nodes;
106+
}
107+
108+
class LocalFixer {
109+
constructor (lines, style, templateParse) {
110+
let line = 0;
111+
let column = style.startIndex;
112+
lines.some((lineEndIndex, lineNumber) => {
113+
if (lineEndIndex >= style.startIndex) {
114+
line = lineNumber--;
115+
if (lineNumber in lines) {
116+
column = style.startIndex - lines[lineNumber] - 1;
117+
}
118+
return true;
119+
}
120+
});
121+
122+
this.line = line;
123+
this.column = column;
124+
this.style = style;
125+
this.templateParse = templateParse
126+
}
127+
object (object) {
128+
if (object) {
129+
if (object.line === 1) {
130+
object.column += this.column;
131+
}
132+
object.line += this.line;
133+
}
134+
}
135+
node (node) {
136+
this.object(node.source.start);
137+
this.object(node.source.end);
138+
}
139+
root (root) {
140+
this.node(root);
141+
root.walk(node => {
142+
this.node(node);
143+
});
144+
}
145+
error (error) {
146+
if (error && error.name === "CssSyntaxError") {
147+
this.object(error);
148+
this.object(error.input);
149+
error.message = error.message.replace(/:\d+:\d+:/, ":" + error.line + ":" + error.column + ":");
150+
}
151+
return error;
152+
}
153+
parse (opts) {
154+
const style = this.style;
155+
const syntax = style.syntax;
156+
let root = style.root;
157+
try {
158+
root = this.templateParse(style.content, Object.assign({}, opts, {
159+
map: false,
160+
}, style.opts));
161+
} catch (error) {
162+
if (style.ignoreErrors) {
163+
return;
164+
} else if (!style.skipConvert) {
165+
this.error(error);
166+
}
167+
throw error;
168+
}
169+
if (!style.skipConvert) {
170+
this.root(root);
171+
}
172+
173+
root.source.inline = Boolean(style.inline);
174+
root.source.lang = style.lang;
175+
root.source.syntax = syntax;
176+
return root;
177+
}
178+
}
179+
180+
function docFixer (source, opts) {
181+
let match;
182+
const lines = [];
183+
reNewLine.lastIndex = 0;
184+
while ((match = reNewLine.exec(source))) {
185+
lines.push(match.index);
186+
}
187+
lines.push(source.length);
188+
return function parseStyle (style) {
189+
const parse = style.syntax ? style.syntax.parse : postcssParse
190+
return new LocalFixer(lines, style, parse).parse(opts);
191+
};
192+
}
193+
194+
function getNodeIndex(node, input) {
195+
const source = input.css
196+
let match;
197+
let line = 1
198+
let lastIndex = -1
199+
reNewLine.lastIndex = 0;
200+
while ((match = reNewLine.exec(source))) {
201+
if (line === node.source.start.line) {
202+
return lastIndex + node.source.start.column
203+
}
204+
lastIndex = match.index
205+
line++
206+
}
207+
if (line === node.source.start.line) {
208+
return lastIndex + node.source.start.column
209+
}
210+
return source.length
211+
}

‎template-safe-parse.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ const Input = require("postcss/lib/input");
66
function templateSafeParse (css, opts) {
77
const input = new Input(css, opts);
88
input.quasis = opts.quasis;
9+
input.templateLiteralStyles = opts.templateLiteralStyles;
10+
input.parseOptions = opts
911
const parser = new TemplateSafeParser(input);
1012
parser.parse();
1113

‎template-stringifier.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,15 @@ const Stringifier = require("postcss/lib/stringifier");
33

44
class TemplateStringifier extends Stringifier {
55
literal (node) {
6-
this.builder(node.text, node);
6+
if (node.nodes && node.nodes.length) {
7+
node.nodes.forEach(root => {
8+
this.builder(root.raws.beforeStart, root, "beforeStart");
9+
this.stringify(root)
10+
this.builder(root.raws.afterEnd, root, "afterEnd");
11+
})
12+
} else {
13+
this.builder(node.text, node);
14+
}
715
if (node.raws.ownSemicolon) {
816
this.builder(node.raws.ownSemicolon, node, "end");
917
}

‎test/fixtures/styled-components-nesting-nesting.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import styled, { css } from 'styled-components';
2+
const Message1 = styled.p`
3+
padding: 10px;
4+
${css`
5+
color: #b02d00;
6+
${css`
7+
background: white;
8+
`}
9+
`}
10+
`;

0 commit comments

Comments
 (0)