Add support for postcss-styled-syntax

Author: hudochenkov

README.md

@@ -12,7 +12,7 @@ Lint and autofix stylesheet order with [stylelint-order].
 * Sorts properties.
 * Sorts at-rules by different options.
 * Groups properties, custom properties, dollar variables, nested rules, nested at-rules.
-* Supports CSS, SCSS (using [postcss-scss]), CSS-in-JS (with [@stylelint/postcss-css-in-js]), HTML (with [postcss-html]), and most likely any other syntax added by other PostCSS plugins.
+* Supports CSS, SCSS (using [postcss-scss]), CSS-in-JS (with [postcss-styled-syntax]), HTML (with [postcss-html]), and most likely any other syntax added by other PostCSS plugins.
 
 ## Installation
 
@@ -167,7 +167,7 @@ I recommend [Prettier] for formatting stylesheets.
 [gulp-postcss]: https://github.com/postcss/gulp-postcss
 [postcss-scss]: https://github.com/postcss/postcss-scss
 [postcss-html]: https://github.com/gucong3000/postcss-html
-[@stylelint/postcss-css-in-js]: https://github.com/stylelint/postcss-css-in-js
+[postcss-styled-syntax]: https://github.com/hudochenkov/postcss-styled-syntax
 [Prettier]: https://prettier.io/
 [stylelint]: https://stylelint.io/
 [stylelint-order]: https://github.com/hudochenkov/stylelint-order

jest-setup.js

@@ -2,7 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const plugin = require('.');
 const postcss = require('postcss');
-const cssInJS = require('@stylelint/postcss-css-in-js'); // eslint-disable-line import/no-extraneous-dependencies
+const cssInJS = require('postcss-styled-syntax'); // eslint-disable-line import/no-extraneous-dependencies
 const html = require('postcss-html'); // eslint-disable-line import/no-extraneous-dependencies
 
 global.groupTest = function groupTest(testGroups) {

lib/getContainingNode.js

@@ -1,12 +1,6 @@
 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')
-	) {
+	// For styled-components: declarations are children of Root node
+	if (node.type !== 'rule' && node.type !== 'atrule' && node.parent.type === 'root') {
 		return node.parent;
 	}
 

lib/isAllowedToProcess.js

@@ -0,0 +1,28 @@
+const atRuleExcludes = ['function', 'if', 'else', 'for', 'each', 'while'];
+
+module.exports = function isAllowedToProcess(node) {
+	if (node.type === 'atrule' && atRuleExcludes.includes(node.name)) {
+		return false;
+	}
+
+	if (!node?.nodes?.length) {
+		return false;
+	}
+
+	// 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
+	if (node.nodes.some((item) => item.type === 'literal')) {
+		return false;
+	}
+
+	return true;
+};

lib/isRuleWithNodes.js

@@ -1,11 +1,11 @@
 const createExpectedOrder = require('./createExpectedOrder');
-const isRuleWithNodes = require('../isRuleWithNodes');
+const isAllowedToProcess = require('../isAllowedToProcess');
 const processLastComments = require('./processLastComments');
 const processMostNodes = require('./processMostNodes');
 const sortByIndexes = require('./sortByIndexes');
 
 module.exports = function sortNode(node, optsOrder) {
-	if (!isRuleWithNodes(node)) {
+	if (!isAllowedToProcess(node)) {
 		return;
 	}
 

lib/order/sortNode.js

@@ -2,14 +2,14 @@ let createExpectedPropertiesOrder = require('./createExpectedPropertiesOrder');
 let getComments = require('../getComments');
 let getPropertiesOrderData = require('./getPropertiesOrderData');
 let isCustomProperty = require('../isCustomProperty');
-let isRuleWithNodes = require('../isRuleWithNodes');
+let isAllowedToProcess = require('../isAllowedToProcess');
 let isStandardSyntaxProperty = require('../isStandardSyntaxProperty');
 let sortDeclarations = require('./sortDeclarations');
 let sortDeclarationsAlphabetically = require('./sortDeclarationsAlphabetically');
 let vendor = require('./vendor');
 
 module.exports = function sortNodeProperties(node, { order, unspecifiedPropertiesPosition }) {
-	if (!isRuleWithNodes(node)) {
+	if (!isAllowedToProcess(node)) {
 		return;
 	}