From 7355fa5d0f07fb9664b8dbf515c58b9f7dab67fb Mon Sep 17 00:00:00 2001 From: Aleks Hudochenkov Date: Tue, 7 Mar 2023 10:21:05 +0100 Subject: [PATCH] Fix sorting inside CSS-in-JS `css` helper --- package-lock.json | 42 ++++++++++++++-------------- package.json | 6 ++-- rules/properties-order/tests/flat.js | 20 +++++++++++++ utils/getContainingNode.js | 2 +- 4 files changed, 45 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index bff7a07..44c1846 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "MIT", "dependencies": { "postcss": "^8.4.21", - "postcss-sorting": "^8.0.1" + "postcss-sorting": "^8.0.2" }, "devDependencies": { "eslint": "^8.33.0", @@ -23,10 +23,10 @@ "lint-staged": "^13.1.1", "postcss-html": "^1.5.0", "postcss-less": "^6.0.0", - "postcss-styled-syntax": "^0.3.1", + "postcss-styled-syntax": "^0.4.0", "prettier": "~2.8.4", "prettier-config-hudochenkov": "^0.3.0", - "stylelint": "^15.0.0" + "stylelint": "^15.2.0" }, "peerDependencies": { "stylelint": "^14.0.0 || ^15.0.0" @@ -8196,17 +8196,17 @@ } }, "node_modules/postcss-sorting": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.1.tgz", - "integrity": "sha512-go9Zoxx7KQH+uLrJ9xa5wRErFeXu01ydA6O8m7koPXkmAN7Ts//eRcIqjo0stBR4+Nir2gMYDOWAOx7O5EPUZA==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz", + "integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==", "peerDependencies": { "postcss": "^8.4.20" } }, "node_modules/postcss-styled-syntax": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.3.1.tgz", - "integrity": "sha512-DmZ/IxBqBVRLWMPu2VPCGKc8AkV0dAqQ3VdxDlWckQVzMSxzZW3Y+5vqpSgTo2eQqa+6eBX85rdsrWyrAXhUoQ==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.4.0.tgz", + "integrity": "sha512-LvG++K8LtIyX1Q1mNuZVQYmBo+SCwn90cEkMigo4/I0QwXrEiYt8nPeJ5rrI5Uuh+5w7hRfPyJKlvQdhVZBhUg==", "dev": true, "dependencies": { "@typescript-eslint/typescript-estree": "^5.47.0", @@ -9111,9 +9111,9 @@ "dev": true }, "node_modules/stylelint": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.0.0.tgz", - "integrity": "sha512-K97Jgy0ZYMSs6gXoboXbWvc0KvvGnUftiI1Tiv70mQ/DpeDTHOlqQSk3o65Ien+ddYAJeLjzkYM0O6TWiHdoSg==", + "version": "15.2.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.2.0.tgz", + "integrity": "sha512-wjg5OLn8zQwjlj5cYUgyQpMWKzct42AG5dYlqkHRJQJqsystFFn3onqEc263KH4xfEI0W3lZCnlIhFfS64uwSA==", "dev": true, "dependencies": { "@csstools/css-parser-algorithms": "^2.0.1", @@ -15801,15 +15801,15 @@ } }, "postcss-sorting": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.1.tgz", - "integrity": "sha512-go9Zoxx7KQH+uLrJ9xa5wRErFeXu01ydA6O8m7koPXkmAN7Ts//eRcIqjo0stBR4+Nir2gMYDOWAOx7O5EPUZA==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz", + "integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==", "requires": {} }, "postcss-styled-syntax": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.3.1.tgz", - "integrity": "sha512-DmZ/IxBqBVRLWMPu2VPCGKc8AkV0dAqQ3VdxDlWckQVzMSxzZW3Y+5vqpSgTo2eQqa+6eBX85rdsrWyrAXhUoQ==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.4.0.tgz", + "integrity": "sha512-LvG++K8LtIyX1Q1mNuZVQYmBo+SCwn90cEkMigo4/I0QwXrEiYt8nPeJ5rrI5Uuh+5w7hRfPyJKlvQdhVZBhUg==", "dev": true, "requires": { "@typescript-eslint/typescript-estree": "^5.47.0", @@ -16473,9 +16473,9 @@ "dev": true }, "stylelint": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.0.0.tgz", - "integrity": "sha512-K97Jgy0ZYMSs6gXoboXbWvc0KvvGnUftiI1Tiv70mQ/DpeDTHOlqQSk3o65Ien+ddYAJeLjzkYM0O6TWiHdoSg==", + "version": "15.2.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.2.0.tgz", + "integrity": "sha512-wjg5OLn8zQwjlj5cYUgyQpMWKzct42AG5dYlqkHRJQJqsystFFn3onqEc263KH4xfEI0W3lZCnlIhFfS64uwSA==", "dev": true, "requires": { "@csstools/css-parser-algorithms": "^2.0.1", diff --git a/package.json b/package.json index 8f68fc1..d1fec88 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "main": "index.js", "dependencies": { "postcss": "^8.4.21", - "postcss-sorting": "^8.0.1" + "postcss-sorting": "^8.0.2" }, "peerDependencies": { "stylelint": "^14.0.0 || ^15.0.0" @@ -38,10 +38,10 @@ "lint-staged": "^13.1.1", "postcss-html": "^1.5.0", "postcss-less": "^6.0.0", - "postcss-styled-syntax": "^0.3.1", + "postcss-styled-syntax": "^0.4.0", "prettier": "~2.8.4", "prettier-config-hudochenkov": "^0.3.0", - "stylelint": "^15.0.0" + "stylelint": "^15.2.0" }, "scripts": { "lint": "eslint . --max-warnings=0 && prettier '**/*.js' --check", diff --git a/rules/properties-order/tests/flat.js b/rules/properties-order/tests/flat.js index caaf119..e8536a6 100644 --- a/rules/properties-order/tests/flat.js +++ b/rules/properties-order/tests/flat.js @@ -421,6 +421,26 @@ testRule({ unfixable: true, message: messages.expected('top', 'color'), }, + { + code: ` + const Component = styled.div\` + \${() => css\` + color: tomato; + top: 0; + \`} + \`; + `, + fixed: ` + const Component = styled.div\` + \${() => css\` + top: 0; + color: tomato; + \`} + \`; + `, + description: 'sort inside css helper', + message: messages.expected('top', 'color'), + }, ], }); diff --git a/utils/getContainingNode.js b/utils/getContainingNode.js index d2f8e0f..848194b 100644 --- a/utils/getContainingNode.js +++ b/utils/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; }