@mrhenry/stylelint-mrhenry-nesting 3.0.0 → 3.1.0

package/index.mjs

@@ -1,5 +1,6 @@
 import stylelint from 'stylelint';
 import selectorParser from 'postcss-selector-parser';
+import { compare, selectorSpecificity } from '@csstools/selector-specificity';
 
 const ruleName = "@mrhenry/stylelint-mrhenry-nesting";
 const messages = stylelint.utils.ruleMessages(ruleName, {
@@ -18,6 +19,9 @@ const messages = stylelint.utils.ruleMessages(ruleName, {
 	rejectedNestingSelectorIncorrectShape: () => {
 		return `Nested selectors must be compound selectors, starting with "&" and followed by a single pseudo selector.`;
 	},
+	rejectedMixedSpecificity: () => {
+		return `Each selector of a list in a nested context take the specificity of the most specific list item. This can lead to unexpected results.`;
+	},
 });
 
 const meta = {
@@ -25,13 +29,29 @@ const meta = {
 	fixable: true,
 };
 
-const ruleFunction = (primaryOption, secondaryOptionObject, context) => {
+/** @type {import('stylelint').Rule<true|null, Array<string | RegExp>>} */
+const ruleFunction = (primaryOption, secondaryOption, context) => {
 	return (postcssRoot, postcssResult) => {
-		if (!primaryOption) {
-			return;
-		}
+		const validPrimary = stylelint.utils.validateOptions(postcssResult, ruleName, {
+			actual: primaryOption,
+			possible: [true]
+		});
+
+		/* c8 ignore next */
+		if (!validPrimary) return;
+
+		const validSecondary = stylelint.utils.validateOptions(postcssResult, ruleName, {
+			actual: secondaryOption,
+			possible: {
+				ignoreAtRules: [isString, isRegExp],
+			},
+			optional: true,
+		});
+
+		/* c8 ignore next */
+		if (!validSecondary) return;
 		
-		const ignoreAtRulesOptions = secondaryOptionObject?.ignoreAtRules ?? [];
+		const ignoreAtRulesOptions = secondaryOption?.ignoreAtRules ?? [];
 
 		postcssRoot.walkAtRules((atrule) => {
 			let name = atrule.name.toLowerCase();
@@ -39,7 +59,8 @@ const ruleFunction = (primaryOption, secondaryOptionObject, context) => {
 				name === 'media' ||
 				name === 'supports' ||
 				name === 'container' ||
-				name === 'scope'
+				name === 'scope' ||
+				name === 'starting-style'
 			) {
 				// always allowed
 				return;
@@ -84,6 +105,39 @@ const ruleFunction = (primaryOption, secondaryOptionObject, context) => {
 			});
 		});
 
+		postcssRoot.walkRules((rule) => {
+			const containsBlocks = rule.nodes && rule.nodes.some((node) => node.type === 'rule' || node.type === 'atrule');
+			if (!containsBlocks) {
+				return;
+			}
+
+			const selectorAST = selectorParser().astSync(rule.selector);
+			if (selectorAST.nodes?.length < 2) {
+				return;
+			}
+
+			const specificities = selectorAST.nodes.map((node) => {
+				return selectorSpecificity(node);
+			});
+
+			const specificitiesAreEqual = specificities.every((specificity) => {
+				return compare(specificity, specificities[0]) === 0;
+			});
+
+			if (specificitiesAreEqual) {
+				return;
+			}
+
+			stylelint.utils.report({
+				message: messages.rejectedMixedSpecificity(),
+				node: rule,
+				index: 0,
+				endIndex: rule.selector.length,
+				result: postcssResult,
+				ruleName,
+			});
+		});
+
 		postcssRoot.walkRules((rule) => {
 			{
 				let rulesDepth = 1;
@@ -315,3 +369,11 @@ function getFirstCompoundOrSelf(x) {
 
 	return x.nodes[0];
 }
+
+function isRegExp(value) {
+	return value instanceof RegExp;
+}
+
+function isString(value) {
+	return typeof value === 'string' || value instanceof String;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrhenry/stylelint-mrhenry-nesting",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Mr. Henry's preferred way of writing nested CSS",
   "publishConfig": {
     "access": "public"
@@ -28,12 +28,13 @@
     "stylelint-plugin"
   ],
   "dependencies": {
-    "postcss-selector-parser": "^6.0.11"
+    "@csstools/selector-specificity": "^3.0.1",
+    "postcss-selector-parser": "^6.0.15"
   },
   "peerDependencies": {
     "stylelint": "^16.0.0"
   },
   "devDependencies": {
-    "stylelint": "^16.0.2"
+    "stylelint": "^16.1.0"
   }
 }