Parser of template placeholder (stylelint#42)

Author: gucong3000

object-stringifier.js

@@ -18,7 +18,7 @@ class ObjectStringifier extends Stringifier {
 		this.builder("}", node, "end");
 	}
 	literal (node, semicolon) {
-		this.builder(node.text + (semicolon ? "," : ""));
+		this.builder(node.text + (semicolon ? "," : ""), node);
 	}
 	decl (node, semicolon) {
 		let prop = this.rawValue(node, "prop");

template-parser-helper.js

@@ -0,0 +1,52 @@
+"use strict";
+const Literal = require("./literal");
+const isLiteral = token => token[0] === "word" && /^\$\{.*\}$/.test(token[1]);
+function literal (start) {
+	if (!isLiteral(start)) {
+		return;
+	}
+	const tokens = [];
+	let hasWord;
+	let type;
+	let token;
+	while ((token = this.tokenizer.nextToken())) {
+		tokens.push(token);
+		type = token[0];
+		if (type.length === 1) {
+			break;
+		} else if (type === "word") {
+			hasWord = true;
+		}
+	}
+
+	while (tokens.length) {
+		this.tokenizer.back(tokens.pop());
+	}
+
+	if (type === "{" || (type === ":" && !hasWord)) {
+		return;
+	}
+
+	const node = new Literal({
+		text: start[1],
+	});
+
+	this.init(node, start[2], start[3]);
+
+	return node;
+}
+
+function freeSemicolon (token) {
+	this.spaces += token[1];
+	const nodes = this.current.nodes;
+	const prev = nodes && nodes[nodes.length - 1];
+	if (prev && /^(rule|literal)$/.test(prev.type) && !prev.raws.ownSemicolon) {
+		prev.raws.ownSemicolon = this.spaces;
+		this.spaces = "";
+	}
+}
+
+module.exports = {
+	freeSemicolon: freeSemicolon,
+	literal: literal,
+};

template-parser.js

@@ -1,9 +1,18 @@
 "use strict";
 const Parser = require("postcss/lib/parser");
 const templateTokenize = require("./template-tokenize");
+const helper = require("./template-parser-helper");
+
 class TemplateParser extends Parser {
 	createTokenizer () {
 		this.tokenizer = templateTokenize(this.input);
 	}
+	other () {
+		const args = arguments;
+		return helper.literal.apply(this, args) || super.other.apply(this, args);
+	}
+	freeSemicolon () {
+		return helper.freeSemicolon.apply(this, arguments);
+	}
 }
 module.exports = TemplateParser;

template-safe-parser.js

@@ -1,9 +1,18 @@
 "use strict";
 const SafeParser = require("postcss-safe-parser/lib/safe-parser");
 const templateTokenize = require("./template-tokenize");
+const helper = require("./template-parser-helper");
+
 class TemplateSafeParser extends SafeParser {
 	createTokenizer () {
 		this.tokenizer = templateTokenize(this.input, { ignoreErrors: true });
 	}
+	other () {
+		const args = arguments;
+		return helper.literal.apply(this, args) || super.other.apply(this, args);
+	}
+	freeSemicolon () {
+		return helper.freeSemicolon.apply(this, arguments);
+	}
 }
 module.exports = TemplateSafeParser;

template-stringifier.js

@@ -0,0 +1,13 @@
+"use strict";
+const Stringifier = require("postcss/lib/stringifier");
+
+class TemplateStringifier extends Stringifier {
+	literal (node) {
+		this.builder(node.text, node);
+		if (node.raws.ownSemicolon) {
+			this.builder(node.raws.ownSemicolon, node, "end");
+		}
+	}
+};
+
+module.exports = TemplateStringifier;

template-stringify.js

@@ -0,0 +1,7 @@
+"use strict";
+const TemplateStringifier = require("./template-stringifier");
+
+module.exports = function TemplateStringify (node, builder) {
+	const str = new TemplateStringifier(builder);
+	str.stringify(node);
+};

template-tokenize.js

@@ -32,9 +32,18 @@ function templateTokenize (input) {
 			returned.push(token);
 		}
 		if (returned.length) {
-			const lastToken = returned[returned.length - 1];
+			let lastToken = returned[returned.length - 1];
 			if (token && token !== lastToken) {
-				back(token);
+				if (token[0] === returned[0][0]) {
+					returned.push(token);
+					lastToken = token;
+				} else {
+					back(token);
+				}
+			}
+			while (lastToken[0] === "space") {
+				back(returned.pop());
+				lastToken = returned[returned.length - 1];
 			}
 			token = [
 				returned[0][0],
@@ -45,7 +54,6 @@ function templateTokenize (input) {
 				lastToken[5] || lastToken[3],
 			];
 		}
-
 		return token;
 	}
 	return Object.assign({}, tokenizer, {

test/fixtures/interpolation-content.mjs

@@ -0,0 +1,27 @@
+import styled, { css } from "styled-components";
+
+export const buttonStyles = css`
+  display: inline-block;
+`;
+
+export const ButtonStyled1 = styled.button`
+  ${buttonStyles}
+  color: red;
+`;
+
+export const ButtonStyled2 = styled.button`
+  ${buttonStyles};
+  color: red;
+`;
+
+export const ButtonStyled3 = styled.button`
+;
+  color: red;
+  ${buttonStyles}
+`;
+
+export const ButtonStyled4 = styled.button`
+;
+  color: red;
+  ${buttonStyles};
+`;

test/fixtures/multiline-arrow-function.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const StatusText = styled.div`
+color: ${(props) =>
+		(props.status === "signed" && "red") ||
+		"blue"};
+`;