Allow limited sorting for properties in CSS-in-JS rules containing interpolation. Closes #99

Author: hudochenkov

README.md

@@ -50,19 +50,19 @@ Some at-rules, like [control](https://sass-lang.com/documentation/file.SASS_REFE
 
 ### CSS-in-JS
 
-Plugin will ignore rules, which have template literal interpolation, to avoid breaking the logic:
+To avoid breaking the logic if the rule has a template literal interpolation, properties will be sorted only among neighbouring properties before or after the interpolation:
 
 ```js
 const Component = styled.div`
-	/* The following properties WILL NOT be sorted, because interpolation is on properties level */
+	/* 'z-index' and 'top' will be sorted as a single group. 'position' and 'display' will be sorted as a second group. Interpolation separates properties into groups. */
 	z-index: 1;
 	top: 1px;
 	${props => props.great && 'color: red'};
 	position: absolute;
 	display: block;
 
 	div {
-		/* The following properties WILL be sorted, because interpolation for property value only */
+		/* The following properties WILL be sorted together, because interpolation is for property value only */
 		z-index: 2;
 		position: static;
 		top: ${2 + 10}px;

lib/getComments.js

@@ -67,9 +67,6 @@ function beforeDeclaration(comments, previousNode, nodeData, currentInitialIndex
 
 	commentData.initialIndex = initialIndex - 0.0001;
 
-	// add a marker
-	previousNode.sortProperty = true;
-
 	const newComments = [commentData, ...comments];
 
 	return beforeDeclaration(newComments, previousNode.prev(), nodeData, commentData.initialIndex);
@@ -96,9 +93,6 @@ function afterDeclaration(comments, nextNode, nodeData, currentInitialIndex) {
 
 	commentData.initialIndex = initialIndex + 0.0001;
 
-	// add a marker
-	nextNode.sortProperty = true;
-
 	return afterDeclaration(
 		[...comments, commentData],
 		nextNode.next(),

lib/isAllowedToProcess.js

@@ -1,6 +1,6 @@
 const atRuleExcludes = ['function', 'if', 'else', 'for', 'each', 'while'];
 
-module.exports = function isAllowedToProcess(node) {
+module.exports = function isAllowedToProcess(node, options) {
 	if (node.type === 'atrule' && atRuleExcludes.includes(node.name)) {
 		return false;
 	}
@@ -9,14 +9,18 @@ module.exports = function isAllowedToProcess(node) {
 		return false;
 	}
 
-	// postcss-styled-syntax: Interpolations at the end of node
-	if (node.raws.after?.includes('${')) {
-		return false;
-	}
+	const ignoreInterpolations = options && options.ignoreInterpolations;
 
-	// postcss-styled-syntax: Interpolations among children of a node
-	if (node.nodes.some((item) => item.raws.before.includes('${'))) {
-		return false;
+	if (!ignoreInterpolations) {
+		// postcss-styled-syntax: Interpolations at the end of node
+		if (node.raws.after?.includes('${')) {
+			return false;
+		}
+
+		// postcss-styled-syntax: Interpolations among children of a node
+		if (node.nodes.some((item) => item.raws.before.includes('${'))) {
+			return false;
+		}
 	}
 
 	// @stylelint/postcss-css-in-js only

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

@@ -0,0 +1,52 @@
+// Only first group is unordered
+const Component = styled.div`
+	top: 0;
+	z-index: 2;
+	${props => props.great && 'color: red'};
+	position: absolute;
+	display: block;
+`;
+
+// Only second group is unordered
+const Component2 = styled.div`
+	top: 0;
+	z-index: 2;
+	${props => props.great && 'color: red'};
+	position: absolute;
+	display: block;
+`;
+
+// Both groups are unordered
+const Component3 = styled.div`
+	top: 0;
+	z-index: 2;
+	${props => props.great && 'color: red'};
+	position: absolute;
+	display: block;
+`;
+
+// Interpolation at the top
+const Component4 = styled.div`
+	${props => props.great && 'color: red'}
+	position: absolute;
+	top: 0;
+`;
+
+// Interpolation at the bottom
+const Component5 = styled.div`
+	position: absolute;
+	top: 0;
+	${props => props.great && 'color: red'}
+`;
+
+// Three groups
+const Component6 = styled.div`
+	top: 0;
+	z-index: 2;
+	${props => props.great && 'color: red'}
+	position: absolute;
+	display: block;
+	${props => props.great && 'color: blue'}
+	top: 0;
+	display: block;
+`;

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

@@ -0,0 +1,52 @@
+// Only first group is unordered
+const Component = styled.div`
+	z-index: 2;
+	top: 0;
+	${props => props.great && 'color: red'};
+	position: absolute;
+	display: block;
+`;
+
+// Only second group is unordered
+const Component2 = styled.div`
+	top: 0;
+	z-index: 2;
+	${props => props.great && 'color: red'};
+	display: block;
+	position: absolute;
+`;
+
+// Both groups are unordered
+const Component3 = styled.div`
+	z-index: 2;
+	top: 0;
+	${props => props.great && 'color: red'};
+	display: block;
+	position: absolute;
+`;
+
+// Interpolation at the top
+const Component4 = styled.div`
+	${props => props.great && 'color: red'}
+	top: 0;
+	position: absolute;
+`;
+
+// Interpolation at the bottom
+const Component5 = styled.div`
+	top: 0;
+	position: absolute;
+	${props => props.great && 'color: red'}
+`;
+
+// Three groups
+const Component6 = styled.div`
+	top: 0;
+	z-index: 2;
+	${props => props.great && 'color: red'}
+	display: block;
+	position: absolute;
+	${props => props.great && 'color: blue'}
+	display: block;
+	top: 0;
+`;

lib/properties-order/__tests__/fixtures/template-literals-flat.expected.js

@@ -1,6 +1,6 @@
 const Component = styled.div`
-	z-index: 1;
 	top: 1px;
+	z-index: 1;
 	${props => props.great && 'color: red'};
 	position: absolute;
 	display: block;
@@ -55,9 +55,9 @@ const Component3 = styled.div`
 		z-index: 2;
 
 		span {
-			z-index: 3;
 			top: 3px;
 			display: flex;
+			z-index: 3;
 			${props => props.great && 'color: red'};
 			position: relative;
 		}

lib/properties-order/__tests__/fixtures/template-literals-flat.js

@@ -29,8 +29,8 @@ const Component2 = styled.div`
 	div {
 		z-index: 2;
 		${props => props.great && 'color: red'};
-		position: static;
 		top: 2px;
+		position: static;
 		display: inline-block;
 
 		span {

…ore-template-literals-nested.expected.js …res/template-literals-nested.expected.jslib/properties-order/__tests__/fixtures/ignore-template-literals-nested.expected.js renamed to lib/properties-order/__tests__/fixtures/template-literals-nested.expected.js lib/properties-order/__tests__/fixtures/ignore-template-literals-nested.expected.js renamed to lib/properties-order/__tests__/fixtures/template-literals-nested.expected.js

@@ -236,18 +236,18 @@ test('Should sort properties in css helper (styled)', () =>
 		__dirname,
 	));
 
-test('Ignore template literals in flat components (styled)', () =>
+test('Template literals in flat components (styled)', () =>
 	runTest(
-		'ignore-template-literals-flat.js',
+		'template-literals-flat.js',
 		{
 			'properties-order': ['position', 'top', 'display', 'z-index'],
 		},
 		__dirname,
 	));
 
-test('Ignore template literals in nested components (styled)', () =>
+test('Template literals in nested components (styled)', () =>
 	runTest(
-		'ignore-template-literals-nested.js',
+		'template-literals-nested.js',
 		{
 			'properties-order': ['position', 'top', 'display', 'z-index'],
 		},