Fix sorting inside CSS-in-JS css helper

Author: hudochenkov

lib/getContainingNode.js

@@ -4,7 +4,7 @@ module.exports = function getContainingNode(node) {
 	}
 
 	// postcss-styled-syntax: declarations are children of Root node
-	if (node.parent?.type === 'root' && node.parent?.raws.styledSyntaxIsComponent) {
+	if (node.parent?.type === 'root' && node.parent?.raws.isRuleLike) {
 		return node.parent;
 	}
 

lib/properties-order/__tests__/fixtures/inside-css-helper.expected.js

@@ -0,0 +1,8 @@
+const Component = styled.div`
+	${() => css`
+		position: absolute;
+		top: 0;
+		display: block;
+		z-index: 2;
+	`};
+`;

lib/properties-order/__tests__/fixtures/inside-css-helper.js

@@ -0,0 +1,8 @@
+const Component = styled.div`
+	${() => css`
+		z-index: 2;
+		top: 0;
+		position: absolute;
+		display: block;
+	`};
+`;

lib/properties-order/__tests__/properties-order.js

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

package-lock.json

@@ -35,7 +35,7 @@
 		"lint-staged": "^13.1.0",
 		"postcss": "^8.4.20",
 		"postcss-html": "^1.5.0",
-		"postcss-styled-syntax": "^0.1.0",
+		"postcss-styled-syntax": "^0.4.0",
 		"prettier": "^2.8.1",
 		"prettier-config-hudochenkov": "^0.3.0"
 	},