Add ignore: ["keyframe-selectors"] to selector-disallowed-list (#7417)

Closes #7162.

---------

Co-authored-by: Masafumi Koba <473530+ybiquitous@users.noreply.github.com>
Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>

Author: 3 people

.changeset/sixty-lamps-type.md

@@ -0,0 +1,5 @@
+---
+"stylelint": minor
+---
+
+Added: `ignore: ["keyframe-selectors"]` to `selector-disallowed-list`

lib/rules/selector-disallowed-list/README.md

@@ -80,7 +80,7 @@ For example, with `true`.
 Given:
 
 ```json
-[".foo"]
+[".foo", { "splitList": true }]
 ```
 
 The following pattern is considered a problem:
@@ -104,7 +104,7 @@ Ignore selectors that are inside a block.
 Given:
 
 ```json
-[".foo"]
+[".foo", { "ignore": ["inside-block"] }]
 ```
 
 The following pattern is _not_ considered a problem:
@@ -115,3 +115,22 @@ The following pattern is _not_ considered a problem:
   .foo {}
 }
 ```
+
+### `ignore: ["keyframe-selectors"]`
+
+Ignore keyframe selectors.
+
+Given:
+
+```json
+["/from/", { "ignore": ["keyframe-selectors"] }]
+```
+
+The following pattern is _not_ considered a problem:
+
+<!-- prettier-ignore -->
+```css
+@keyframes fade-in {
+  from {}
+}
+```

lib/rules/selector-disallowed-list/__tests__/index.mjs

@@ -1,4 +1,6 @@
 import rule from '../index.mjs';
+import { stripIndent } from 'common-tags';
+
 const { messages, ruleName } = rule;
 
 testRule({
@@ -220,3 +222,73 @@ testRule({
 		},
 	],
 });
+
+testRule({
+	ruleName,
+	config: [[/[A-Za-z]/], { ignore: ['keyframe-selectors'] }],
+
+	accept: [
+		{
+			code: stripIndent`
+				@keyframes fade-in {
+					from {}
+				}
+			`,
+		},
+		{
+			code: stripIndent`
+				@keyframes fade-in {
+					to {}
+				}
+			`,
+		},
+		{
+			code: stripIndent`
+				@keyframes fade-in {
+					from, to {}
+				}
+			`,
+		},
+	],
+
+	reject: [
+		{
+			code: '.from {}',
+			message: messages.rejected('.from'),
+			line: 1,
+			column: 1,
+			endLine: 1,
+			endColumn: 6,
+		},
+		{
+			code: '.to {}',
+			message: messages.rejected('.to'),
+			line: 1,
+			column: 1,
+			endLine: 1,
+			endColumn: 4,
+		},
+	],
+});
+
+testRule({
+	ruleName,
+	config: [/from/, { ignore: ['keyframe-selectors'], splitList: true }],
+
+	accept: [
+		{
+			code: stripIndent`
+				@keyframes fade-in {
+					from {}
+				}
+			`,
+		},
+		{
+			code: stripIndent`
+				@keyframes fade-in {
+					from, to {}
+				}
+			`,
+		},
+	],
+});

lib/rules/selector-disallowed-list/index.cjs

@@ -3,6 +3,7 @@
 'use strict';
 
 const validateTypes = require('../../utils/validateTypes.cjs');
+const isKeyframeRule = require('../../utils/isKeyframeRule.cjs');
 const isStandardSyntaxRule = require('../../utils/isStandardSyntaxRule.cjs');
 const matchesStringOrRegExp = require('../../utils/matchesStringOrRegExp.cjs');
 const optionsMatches = require('../../utils/optionsMatches.cjs');
@@ -33,7 +34,7 @@ const rule = (primary, secondaryOptions) => {
 			{
 				actual: secondaryOptions,
 				possible: {
-					ignore: ['inside-block'],
+					ignore: ['inside-block', 'keyframe-selectors'],
 					splitList: [validateTypes.isBoolean],
 				},
 				optional: true,
@@ -45,13 +46,23 @@ const rule = (primary, secondaryOptions) => {
 		}
 
 		const ignoreInsideBlock = optionsMatches(secondaryOptions, 'ignore', 'inside-block');
+		const ignoreKeyframeSelectors = optionsMatches(
+			secondaryOptions,
+			'ignore',
+			'keyframe-selectors',
+		);
+
 		const splitList = secondaryOptions && secondaryOptions.splitList;
 
 		root.walkRules((ruleNode) => {
 			if (!isStandardSyntaxRule(ruleNode)) {
 				return;
 			}
 
+			if (ignoreKeyframeSelectors && isKeyframeRule(ruleNode)) {
+				return;
+			}
+
 			if (ignoreInsideBlock) {
 				const { parent } = ruleNode;
 				const isInsideBlock = parent && parent.type !== 'root';

lib/rules/selector-disallowed-list/index.mjs

@@ -1,4 +1,5 @@
 import { isBoolean, isRegExp, isString } from '../../utils/validateTypes.mjs';
+import isKeyframeRule from '../../utils/isKeyframeRule.mjs';
 import isStandardSyntaxRule from '../../utils/isStandardSyntaxRule.mjs';
 import matchesStringOrRegExp from '../../utils/matchesStringOrRegExp.mjs';
 import optionsMatches from '../../utils/optionsMatches.mjs';
@@ -29,7 +30,7 @@ const rule = (primary, secondaryOptions) => {
 			{
 				actual: secondaryOptions,
 				possible: {
-					ignore: ['inside-block'],
+					ignore: ['inside-block', 'keyframe-selectors'],
 					splitList: [isBoolean],
 				},
 				optional: true,
@@ -41,13 +42,23 @@ const rule = (primary, secondaryOptions) => {
 		}
 
 		const ignoreInsideBlock = optionsMatches(secondaryOptions, 'ignore', 'inside-block');
+		const ignoreKeyframeSelectors = optionsMatches(
+			secondaryOptions,
+			'ignore',
+			'keyframe-selectors',
+		);
+
 		const splitList = secondaryOptions && secondaryOptions.splitList;
 
 		root.walkRules((ruleNode) => {
 			if (!isStandardSyntaxRule(ruleNode)) {
 				return;
 			}
 
+			if (ignoreKeyframeSelectors && isKeyframeRule(ruleNode)) {
+				return;
+			}
+
 			if (ignoreInsideBlock) {
 				const { parent } = ruleNode;
 				const isInsideBlock = parent && parent.type !== 'root';