Add ignore: ["keyframe-selectors"] to selector-disallowed-list

[mattxwang]

Which issue, if any, is this issue related to?

Closes #7162.

Is there anything in the PR that needs further explanation?

Two quick questions:

1. I used the isKeyframeSelector util (used elsewhere) to heuristically guess if the item is a keyframe selector, rather than seeing if it's actually in a keyframe. Does this make sense? Am now using isKeyframeRule instead!
2. I assumed that there should be nothing "special" about this option's interaction with splitList; in particular, if the list is not split, given /from/ the current implementation will still flag from, to; it's only if the rule is given /from/, { splitList: true } that from, to is properly ignored. However, it'd be simple for me to reverse this behaviour - what are our thoughts? Resolved by the former :)

[changeset-bot]

🦋 Changeset detected

Latest commit: 5e3675c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
stylelint	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[ybiquitous]

@mattxwang Thanks for the pull request!

I think it's better to check if the rule node is inside @keyframes {} block rather than using isKeyframeSelector() like this:

if (ignoreKeyframeSelectors && isInsideKeyframes(ruleNode)) {
	return;
}

// ...

const keyframesPattern = /^keyframes$/i;

/**
 * @param {import('postcss').Node} node
 * @returns {boolean}
 */
function isInsideKeyframes({ parent }) {
	return Boolean(parent && isAtRule(parent) && keyframesPattern.test(parent.name));
}

If doing so, splitList is unnecessary for ignore: ['keyframe-selectors']. Any thoughts?

[Mouvedia]

I think it's better to check if the rule node is inside @keyframes {} block rather than using isKeyframeSelector() like this:

[…]

const keyframesPattern = /^keyframes$/i;

/**
 * @param {import('postcss').Node} node
 * @returns {boolean}
 */
function isInsideKeyframes({ parent }) {
	return Boolean(parent && isAtRule(parent) && keyframesPattern.test(parent.name));
}

This looks similar to /lib/utils/isKeyframeRule.mjs.

[ybiquitous]

Ah, I forgot isKeyframeRule. Nice catch! 👍🏼

[jeddy3]

Looking good. I've requested some changes to align the docs and tests with our conventions.

[mattxwang]

Thanks for the feedback everyone! Have just made the requested changes - let me know what y'all think!

[ybiquitous]

Thank you! LGTM 👍🏼

[jeddy3]

LGTM, thank you!