Update supports (#45)

Author: gucong3000

README.md

@@ -13,17 +13,18 @@ PostCSS JSX Syntax
 
 [PostCSS](https://github.com/postcss/postcss) syntax for parsing [CSS in JS](https://github.com/MicheleBertoli/css-in-js) literals:
 
-- [emotion](https://github.com/emotion-js/emotion)
 - [aphrodite](https://github.com/Khan/aphrodite)
+- [astroturf](https://github.com/4Catalyzer/astroturf)
+- [emotion](https://github.com/emotion-js/emotion)
 - [glamor](https://github.com/threepointone/glamor)
 - [glamorous](https://github.com/paypal/glamorous)
+- [lit-css](https://github.com/bashmish/lit-css)
 - [react-native](https://github.com/necolas/react-native-web)
 - [react-style](https://github.com/js-next/react-style)
 - [reactcss](https://github.com/casesandberg/reactcss)
 - [styled-components](https://github.com/styled-components/styled-components)
 - [styletron-react](https://github.com/rtsao/styletron)
 - [typestyle](https://github.com/typestyle/typestyle)
-- [lit-css](https://github.com/bashmish/lit-css)
 
 ## Getting Started
 

extract.js

@@ -8,40 +8,40 @@ const {
 const getTemplate = require("./get-template");
 const loadSyntax = require("postcss-syntax/load-syntax");
 
-const partSport = {
+const supports = {
 	// https://github.com/Khan/aphrodite
-	aphrodite: [
-		"StyleSheet",
-		"create",
-	],
-
 	// https://github.com/necolas/react-native-web
-	"react-native": [
-		"StyleSheet",
-		"create",
-	],
-};
+	StyleSheet: true,
+
+	// https://github.com/emotion-js/emotion
+	// import styled from '@emotion/styled'
+	// https://github.com/threepointone/glamor
+	// import { styled } from 'glamor/styled'
+	// https://github.com/rtsao/styletron
+	// import { styled } from "styletron-react";
+	styled: true,
+
+	// https://github.com/typestyle/typestyle
+	// import { style } from "typestyle";
+	style: true,
 
-const supports = {
 	// https://github.com/4Catalyzer/astroturf
-	astroturf: true,
+	// import { css } from 'astroturf';
+	// https://github.com/bashmish/lit-css
+	// import { css } from 'lit-css';
+	// https://github.com/threepointone/glamor
+	// import { css } from 'glamor'
+	css: true,
 
 	// https://github.com/emotion-js/emotion
+	// import styled from "react-emotion";
 	emotion: true,
-	"@emotion/core": true,
-	"@emotion/styled": true,
 	"react-emotion": true,
 	"preact-emotion": true,
 
-	// https://github.com/threepointone/glamor
-	glamor: true,
-
 	// https://github.com/paypal/glamorous
 	glamorous: true,
 
-	// https://github.com/bashmish/lit-css
-	"lit-css": true,
-
 	// https://github.com/js-next/react-style
 	"react-style": true,
 
@@ -52,14 +52,9 @@ const supports = {
 	"styled-components": true,
 
 	// https://github.com/rtsao/styletron
+	// import {styled} from "styletron-react";
+	// import {withStyle} from "styletron-react";
 	"styletron-react": true,
-
-	// https://github.com/typestyle/typestyle
-	typestyle: true,
-};
-
-const cssPropImpliesStyle = {
-	"@emotion/core": true
 };
 
 const plugins = [
@@ -119,7 +114,6 @@ function literalParser (source, opts, styles) {
 	let objLiteral = new Set();
 	let tplLiteral = new Set();
 	const jobs = [];
-	let cssPropIsStyle = false;
 
 	function addObjectJob (path) {
 		jobs.push(() => {
@@ -155,6 +149,11 @@ function literalParser (source, opts, styles) {
 	}
 
 	function setSpecifier (id, nameSpace) {
+		nameSpace.unshift.apply(
+			nameSpace,
+			nameSpace.shift().replace(/^\W+/, "").split(/[/\\]+/g)
+		);
+
 		if (types.isIdentifier(id)) {
 			specifiers.set(id.name, nameSpace);
 			specifiers.set(id, nameSpace);
@@ -187,36 +186,21 @@ function literalParser (source, opts, styles) {
 				nameSpace.unshift(node.name);
 			}
 		} else {
-			if (node.name) {
-				getNameSpace(path.get("name"), nameSpace);
-			} else if (node.property) {
-				getNameSpace(path.get("property"), nameSpace);
-			}
-			if (node.object) {
-				getNameSpace(path.get("object"), nameSpace);
-			} else if (node.callee) {
-				getNameSpace(path.get("callee"), nameSpace);
-			}
+			[
+				"name",
+				"property",
+				"object",
+				"callee",
+			].forEach(prop => {
+				node[prop] && getNameSpace(path.get(prop), nameSpace);
+			});
 		}
 
 		return nameSpace;
 	}
 
 	function isStylePath (path) {
-		const nameSpace = getNameSpace(path, []).filter(Boolean);
-		if (nameSpace.length) {
-			if (/^(?:css|Styled?)(?:Sheets?)?$/i.test(nameSpace[0]) || supports[nameSpace[0]]) {
-				return nameSpace;
-			}
-
-			const prefix = partSport[nameSpace.shift()];
-
-			if (prefix && nameSpace.length >= prefix.length && prefix.every((name, i) => name === nameSpace[i])) {
-				return nameSpace;
-			}
-		}
-
-		return false;
+		return getNameSpace(path, []).some(name => name && supports[name]);
 	}
 
 	const visitor = {
@@ -228,23 +212,12 @@ function literalParser (source, opts, styles) {
 					nameSpace.push(specifier.imported.name);
 				}
 				setSpecifier(specifier.local, nameSpace);
-				if (cssPropImpliesStyle[moduleId]) {
-					cssPropIsStyle = true;
-				}
 			});
 		},
 		JSXAttribute: (path) => {
-			const attrName = path.node.name.name;
-			if (attrName === "css") {
-				const elePath = path.findParent(p => p.isJSXOpeningElement());
-				if (!cssPropIsStyle && !isStylePath(elePath)) {
-					return;
-				}
-			} else if (attrName !== "style") {
-				return;
+			if (supports[path.node.name.name]) {
+				addObjectJob(path.get("value.expression"));
 			}
-
-			addObjectJob(path.get("value.expression"));
 		},
 		VariableDeclarator: (path) => {
 			variableDeclarator.set(path.node.id, path.node.init ? [path.get("init")] : []);
@@ -331,25 +304,26 @@ function literalParser (source, opts, styles) {
 			node.start > style.endIndex || node.end < style.startIndex
 		))
 	)).map(node => {
-		const quasis = node.quasis;
-		const value = getTemplate(node, source);
-
+		const quasis = node.quasis.map(node => ({
+			start: node.start,
+			end: node.end,
+		}));
 		const style = {
 			startIndex: quasis[0].start,
 			endIndex: quasis[quasis.length - 1].end,
-			content: value,
+			content: getTemplate(node, source),
 		};
 		if (node.expressions.length) {
 			style.syntax = loadSyntax(opts, __dirname);
 			style.lang = "template-literal";
 			style.opts = {
-				node: node,
+				quasis: quasis,
 			};
 		} else {
 			style.lang = "css";
 		}
 		return style;
-	}).filter(Boolean);
+	});
 
 	return (styles || []).concat(objLiteral).concat(tplLiteral);
 };

object-parser.js

@@ -249,7 +249,7 @@ class objectParser {
 
 		const value = this.getNodeValue(node.value, rawValue);
 
-		if (key.value.startsWith("@")) {
+		if (key.value[0] === "@") {
 			const atRule = postcss.atRule({
 				name: unCamelCase(key.value),
 				params: value.value,

template-parse.js

@@ -5,7 +5,7 @@ const Input = require("postcss/lib/input");
 
 function templateParse (css, opts) {
 	const input = new Input(css, opts);
-	input.node = opts.node;
+	input.quasis = opts.quasis;
 	const parser = new TemplateParser(input);
 	parser.parse();
 

template-safe-parse.js

@@ -5,7 +5,7 @@ const Input = require("postcss/lib/input");
 
 function templateSafeParse (css, opts) {
 	const input = new Input(css, opts);
-	input.node = opts.node;
+	input.quasis = opts.quasis;
 	const parser = new TemplateSafeParser(input);
 	parser.parse();
 

template-tokenize.js

@@ -2,17 +2,18 @@
 const tokenize = require("postcss/lib/tokenize");
 
 function templateTokenize (input) {
-	const quasis = input.node.quasis.map((node) => ({
-		start: node.start,
-		end: node.end,
-	})).filter(quasi => quasi.start !== quasi.end);
-
-	let pos = input.node.start + 1;
-
+	let pos = input.quasis[0].start;
+	const quasis = input.quasis.filter(quasi => quasi.start !== quasi.end);
 	const tokenizer = tokenize.apply(this, arguments);
 
-	function tokenInQuasis (start, end) {
-		return quasis.some(quasi => (start >= quasi.start && end < quasi.end));
+	function tokenInExpressions (token, returned) {
+		const start = pos;
+		pos += token[1].length;
+		if (!quasis.some(quasi => start >= quasi.start && pos <= quasi.end) || (returned.length && token[0] === returned[0][0])) {
+			return true;
+		} else if (returned.length) {
+			back(token);
+		}
 	}
 
 	function back (token) {
@@ -24,34 +25,25 @@ function templateTokenize (input) {
 		const args = arguments;
 		const returned = [];
 		let token;
+		let line;
+		let column;
+
 		while (
 			(token = tokenizer.nextToken.apply(tokenizer, args)) &&
-			!tokenInQuasis(pos, (pos += token[1].length)) &&
-			(returned.length || /\$(?=\{|$)/.test(token[1]))
+			tokenInExpressions(token, returned)
 		) {
+			line = token[4] || token[2] || line;
+			column = token[5] || token[3] || column;
 			returned.push(token);
 		}
 		if (returned.length) {
-			let lastToken = returned[returned.length - 1];
-			if (token && token !== lastToken) {
-				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],
 				returned.map(token => token[1]).join(""),
 				returned[0][2],
 				returned[0][3],
-				lastToken[4] || lastToken[2],
-				lastToken[5] || lastToken[3],
+				line,
+				column,
 			];
 		}
 		return token;

test/fixtures/CssProp.jsx

@@ -1,8 +1,7 @@
 /* global render */
 /** @jsx jsx */
-
-import { jsx, css } from '@emotion/core';
-import styled from '@emotion/styled';
+import { css } from "@emotion/core";
+import styled from "@emotion/styled";
 
 const SomeComponent = styled.div`
 	display: flex;
@@ -25,7 +24,7 @@ render(
 				Some text.
 			</span>
 			<span css={{
-				color: 'sarahgreen'
+				color: "sarahgreen",
 			}}>
 				Some other text.
 			</span>