Add ignoreAtRules: [] to nesting-selector-no-missing-scoping-root (#8743)

karlhorky · jeddy3 · web-flow · commit cfbe7720b53b · 2025-09-06T15:56:43.000+09:00
Co-authored-by: Richard Hallows &lt;jeddy3@users.noreply.github.com&gt;
diff --git a/lib/rules/nesting-selector-no-missing-scoping-root/README.md b/lib/rules/nesting-selector-no-missing-scoping-root/README.md
@@ -64,3 +64,40 @@ a {
   @scope (&) {}
 }
 ```
+
+## Optional secondary options
+
+### `ignoreAtRules`
+
+```json
+{ "ignoreAtRules": ["array", "of", "at-rules", "/regex/"] }
+```
+
+Ignore nesting selectors within specified at-rules.
+
+Given:
+
+```json
+{
+  "nesting-selector-no-missing-scoping-root": [
+    true,
+    { "ignoreAtRules": ["--foo", "/^--bar-/"] }
+  ]
+}
+```
+
+The following patterns are _not_ considered problems:
+
+<!-- prettier-ignore -->
+```css
+@--foo {
+  & {}
+}
+```
+
+<!-- prettier-ignore -->
+```css
+@--bar-baz qux {
+  & {}
+}
+```
diff --git a/lib/rules/nesting-selector-no-missing-scoping-root/__tests__/index.mjs b/lib/rules/nesting-selector-no-missing-scoping-root/__tests__/index.mjs
@@ -226,3 +226,36 @@ testRule({
 		},
 	],
 });
+
+testRule({
+	ruleName,
+	config: [true, { ignoreAtRules: ['--foo', '/^--bar-/'] }],
+
+	accept: [
+		{
+			code: '@--foo { & {} }',
+		},
+		{
+			code: '@--bar-baz qux { & {} }',
+		},
+	],
+
+	reject: [
+		{
+			code: '@media all { & {} }',
+			message: messages.rejected,
+			line: 1,
+			column: 14,
+			endLine: 1,
+			endColumn: 15,
+		},
+		{
+			code: '@--baz { & {} }',
+			message: messages.rejected,
+			line: 1,
+			column: 10,
+			endLine: 1,
+			endColumn: 11,
+		},
+	],
+});
diff --git a/lib/rules/nesting-selector-no-missing-scoping-root/index.cjs b/lib/rules/nesting-selector-no-missing-scoping-root/index.cjs
diff --git a/lib/rules/nesting-selector-no-missing-scoping-root/index.mjs b/lib/rules/nesting-selector-no-missing-scoping-root/index.mjs
@@ -1,11 +1,13 @@
 import { parse, walk } from 'css-tree';
 
+import { isRegExp, isString } from '../../utils/validateTypes.mjs';
 import { atRuleParamIndex } from '../../utils/nodeFieldIndices.mjs';
 import { atRuleRegexes } from '../../utils/regexes.mjs';
 import getAtRuleParams from '../../utils/getAtRuleParams.mjs';
 import getRuleSelector from '../../utils/getRuleSelector.mjs';
 import isStandardSyntaxAtRule from '../../utils/isStandardSyntaxAtRule.mjs';
 import isStandardSyntaxRule from '../../utils/isStandardSyntaxRule.mjs';
+import optionsMatches from '../../utils/optionsMatches.mjs';
 import report from '../../utils/report.mjs';
 import ruleMessages from '../../utils/ruleMessages.mjs';
 import validateOptions from '../../utils/validateOptions.mjs';
@@ -21,20 +23,28 @@ const meta = {
 };
 
 /** @type {import('stylelint').CoreRules[ruleName]} */
-const rule = (primary) => {
+const rule = (primary, secondaryOptions) => {
 	return (root, result) => {
-		const validOptions = validateOptions(result, ruleName, {
-			actual: primary,
-			possible: [true],
-		});
+		const validOptions = validateOptions(
+			result,
+			ruleName,
+			{ actual: primary, possible: [true] },
+			{
+				actual: secondaryOptions,
+				possible: {
+					ignoreAtRules: [isString, isRegExp],
+				},
+				optional: true,
+			},
+		);
 
 		if (!validOptions) return;
 
 		root.walkRules(/&/, (ruleNode) => {
 			if (!isStandardSyntaxRule(ruleNode)) return;
 
 			// Check if the rule is nested within a scoping root
-			if (hasValidScopingRoot(ruleNode)) return;
+			if (hasValidScopingRoot(ruleNode, secondaryOptions)) return;
 
 			let ast;
 
@@ -56,7 +66,7 @@ const rule = (primary) => {
 			if (!atRule.params.includes('&')) return;
 
 			// Only check @scope at-rules that don't have a parent scoping context
-			if (hasValidScopingRoot(atRule)) return;
+			if (hasValidScopingRoot(atRule, secondaryOptions)) return;
 
 			let ast;
 
@@ -109,9 +119,10 @@ const rule = (primary) => {
 /**
  * Check if a node has a valid scoping root
  * @param {import('postcss').Rule | import('postcss').AtRule} node
+ * @param {object} secondaryOptions
  * @returns {boolean}
  */
-function hasValidScopingRoot(node) {
+function hasValidScopingRoot(node, secondaryOptions) {
 	let current = node.parent;
 
 	while (current) {
@@ -125,6 +136,14 @@ function hasValidScopingRoot(node) {
 			return true;
 		}
 
+		// If we find an ignored at-rule, it provides a scoping root
+		if (
+			current.type === 'atrule' &&
+			optionsMatches(secondaryOptions, 'ignoreAtRules', current.name)
+		) {
+			return true;
+		}
+
 		// If we reach the root without finding a scoping root
 		if (current.type === 'root') {
 			return false;
diff --git a/types/stylelint/index.d.ts b/types/stylelint/index.d.ts
@@ -783,7 +783,10 @@ declare namespace stylelint {
 			RejectedMessage<[name: string]>
 		>;
 		'named-grid-areas-no-invalid': CoreRule<true>;
-		'nesting-selector-no-missing-scoping-root': CoreRule<true>;
+		'nesting-selector-no-missing-scoping-root': CoreRule<
+			true,
+			{ ignoreAtRules: OneOrMany<StringOrRegex> }
+		>;
 		'no-descending-specificity': CoreRule<
 			true,
 			{ ignore: OneOrMany<'selectors-within-list'> },
