Add limited autofix for properties in rules containing interpolation in CSS-in-JS syntax

Author: hudochenkov

README.md

@@ -52,7 +52,7 @@ Every rule supports autofixing with `stylelint --fix`. [postcss-sorting] is used
 
 Automatic sorting has some limitations that are described for every rule, if any. Please, take a look at [how comments are handled](https://github.com/hudochenkov/postcss-sorting#handling-comments) by `postcss-sorting`.
 
-CSS-in-JS styles with template interpolation [could be ignored by autofixing](https://github.com/hudochenkov/postcss-sorting#css-in-js) to avoid style corruption.
+CSS-in-JS styles with template interpolation [has limited autofixing](https://github.com/hudochenkov/postcss-sorting#css-in-js) to avoid style corruption.
 
 Autofixing in Less syntax may work but isn't officially supported.
 

package-lock.json

@@ -27,7 +27,7 @@
 	},
 	"dependencies": {
 		"postcss": "^8.5.8",
-		"postcss-sorting": "^9.1.0"
+		"postcss-sorting": "^10.0.0"
 	},
 	"peerDependencies": {
 		"stylelint": "^16.18.0 || ^17.0.0"

package.json

@@ -394,6 +394,40 @@ testRule({
 			`,
 			message: messages.expected('top', 'color'),
 		},
+		{
+			code: `
+				const Component = styled.div\`
+					\${props => props.great && 'color: red;'}
+					color: tomato;
+					top: 0;
+				\`;
+			`,
+			fixed: `
+				const Component = styled.div\`
+					\${props => props.great && 'color: red;'}
+					top: 0;
+					color: tomato;
+				\`;
+			`,
+			message: messages.expected('top', 'color'),
+		},
+		{
+			code: `
+				const Component = styled.div\`
+					color: tomato;
+					top: 0;
+					\${props => props.great && 'color: red;'}
+				\`;
+			`,
+			fixed: `
+				const Component = styled.div\`
+					top: 0;
+					color: tomato;
+					\${props => props.great && 'color: red;'}
+				\`;
+			`,
+			message: messages.expected('top', 'color'),
+		},
 		{
 			code: `
 				const Component = styled.div\`
@@ -460,6 +494,44 @@ testRule({
 	],
 });
 
+testRule({
+	ruleName,
+	config: [['top', 'color', 'position', 'display']],
+	customSyntax: 'postcss-styled-syntax',
+	fix: true,
+
+	reject: [
+		{
+			code: `
+				const Component = styled.div\`
+					color: tomato;
+					top: 0;
+					\${props => props.great && 'color: red;'}
+					display: block;
+					position: relative;
+				\`;
+			`,
+			fixed: `
+				const Component = styled.div\`
+					top: 0;
+					color: tomato;
+					\${props => props.great && 'color: red;'}
+					position: relative;
+					display: block;
+				\`;
+			`,
+			warnings: [
+				{
+					message: messages.expected('top', 'color'),
+				},
+				{
+					message: messages.expected('position', 'display'),
+				},
+			],
+		},
+	],
+});
+
 testRule({
 	ruleName,
 	config: [['top', 'color']],