Add support for CSS-in-JS

Author: hudochenkov

.eslintignore

@@ -0,0 +1 @@
+**/fixtures/*.js

.prettierignore

@@ -0,0 +1 @@
+**/fixtures/*.js

jest-setup.js

@@ -2,6 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const plugin = require('./');
 const postcss = require('postcss');
+const jsx = require('postcss-jsx');
 
 global.groupTest = function(testGroups) {
 	testGroups.forEach(group => {
@@ -51,7 +52,10 @@ global.runTest = function(input, opts, dirname) {
 	}
 
 	return postcss([plugin(opts)])
-		.process(inputCSS, { from: inputPath })
+		.process(inputCSS, {
+			from: inputPath,
+			syntax: inputExt === 'js' ? jsx : undefined,
+		})
 		.then(result => {
 			const actualCSS = result.css;
 

lib/getContainingNode.js

@@ -0,0 +1,14 @@
+module.exports = function getContainingNode(node) {
+	// For styled-components declarations are children of Root node
+	if (
+		node.type !== 'rule' &&
+		node.type !== 'atrule' &&
+		node.parent.document &&
+		node.parent.document.nodes &&
+		node.parent.document.nodes.some(item => item.type === 'root')
+	) {
+		return node.parent;
+	}
+
+	return node;
+};

lib/isRuleWithNodes.js

@@ -1,10 +1,9 @@
 const atRuleExcludes = ['function', 'if', 'else', 'for', 'each', 'while'];
 
 module.exports = function isRuleWithNodes(node) {
-	return (
-		(node.type === 'rule' || node.type === 'atrule') &&
-		node.nodes &&
-		node.nodes.length &&
-		atRuleExcludes.indexOf(node.name) === -1
-	);
+	if (node.type === 'atrule' && atRuleExcludes.includes(node.name)) {
+		return false;
+	}
+
+	return node.nodes && node.nodes.length && !node.nodes.some(item => item.type === 'literal');
 };

lib/order/__tests__/fixtures/ignore-template-literals.expected.js

@@ -0,0 +1,37 @@
+const Component1 = styled.div`
+	a {
+		color: blue;
+	}
+	color: tomato;
+	${props => props.great && 'color: red'};
+
+	@media screen {
+		color: black;
+	}
+`;
+
+const Component3 = styled.div`
+	${props => props.great && 'color: red'};
+	div {
+		color: tomato;
+		a {
+			color: blue;
+		}
+	}
+`;
+
+const Component5 = styled.div`
+	div {
+		${props => props.great && 'color: red'};
+		span {
+		}
+
+		display: none;
+
+		@media (min-width: 100px) {
+		}
+
+		div {
+		}
+	}
+`;

lib/order/__tests__/fixtures/ignore-template-literals.js

@@ -0,0 +1,37 @@
+const Component1 = styled.div`
+	a {
+		color: blue;
+	}
+	color: tomato;
+	${props => props.great && 'color: red'};
+
+	@media screen {
+		color: black;
+	}
+`;
+
+const Component3 = styled.div`
+	${props => props.great && 'color: red'};
+	div {
+		a {
+			color: blue;
+		}
+		color: tomato;
+	}
+`;
+
+const Component5 = styled.div`
+	div {
+		${props => props.great && 'color: red'};
+		span {
+		}
+
+		display: none;
+
+		@media (min-width: 100px) {
+		}
+
+		div {
+		}
+	}
+`;

lib/order/__tests__/fixtures/keywords.expected.js

@@ -0,0 +1,57 @@
+const Component1 = styled.div`
+	color: tomato;
+	a {
+		color: blue;
+	}
+
+	@media screen {
+		color: black;
+	}
+`;
+
+const Component2 = styled.div`
+	color: tomato;
+	${Button} {
+		color: blue;
+	}
+	@media screen {
+		color: black;
+	}
+`;
+
+const Component3 = styled.div`
+	div {
+		color: tomato;
+		a {
+			color: blue;
+		}
+	}
+`;
+
+const Component4 = styled.div`
+
+	display: none;
+	span {
+	}
+
+	div {
+	}
+
+	@media (min-width: 100px) {
+	}
+`;
+
+const Component5 = styled.div`
+	div {
+
+		display: none;
+		span {
+		}
+
+		div {
+		}
+
+		@media (min-width: 100px) {
+		}
+	}
+`;

lib/order/__tests__/fixtures/keywords.js

@@ -0,0 +1,57 @@
+const Component1 = styled.div`
+	a {
+		color: blue;
+	}
+	color: tomato;
+
+	@media screen {
+		color: black;
+	}
+`;
+
+const Component2 = styled.div`
+	@media screen {
+		color: black;
+	}
+	${Button} {
+		color: blue;
+	}
+	color: tomato;
+`;
+
+const Component3 = styled.div`
+	div {
+		a {
+			color: blue;
+		}
+		color: tomato;
+	}
+`;
+
+const Component4 = styled.div`
+	span {
+	}
+
+	display: none;
+
+	@media (min-width: 100px) {
+	}
+
+	div {
+	}
+`;
+
+const Component5 = styled.div`
+	div {
+		span {
+		}
+
+		display: none;
+
+		@media (min-width: 100px) {
+		}
+
+		div {
+		}
+	}
+`;

lib/order/__tests__/order.js

@@ -595,3 +595,21 @@ groupTest([
 		],
 	},
 ]);
+
+test('Should sort by keywords (styled)', () =>
+	runTest(
+		'keywords.js',
+		{
+			order: ['declarations', 'rules', 'at-rules'],
+		},
+		__dirname
+	));
+
+test('Ignore nodes with template literals (styled)', () =>
+	runTest(
+		'ignore-template-literals.js',
+		{
+			order: ['declarations', 'rules', 'at-rules'],
+		},
+		__dirname
+	));