Add keyframe-selector-notation

[mattxwang]

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

Closes #4065.

Is there anything in the PR that needs further explanation?

Not sure if I'm implementing the detect & autofix features properly; I've made some comments below. My approach is inspired by alpha-value-notation.

[ybiquitous]

@mattxwang Thank you for your excellent work!

I think this pull request looks almost good though I've left some trivial comments. 👍🏼

[mattxwang]

Thanks for the quick comments! Let me see if I can rework the code given your suggestion.

[mattxwang]

Hm, the failed actions aren't me - it's a 503 on NPM's registry with npm install --global npm@latest.

[ybiquitous]

Hm, the failed actions aren't me - it's a 503 on NPM's registry with npm install --global npm@latest.

It seems to be due to the Cloudflare outage:
https://www.cloudflarestatus.com/

EDIT: https://status.npmjs.org/incidents/8cgldky16yk4

[jeddy3]

Looking great! Thank you.

Let's add tests for a couple of edge-cases that are valid syntax:

• duplicate keyframe selectors, e.g. @keyframes foo { from {} from {} to {} }
• mixed notations, e.g. @keyframes foo { from {} 50% {} to {} }
• keyframe selectors lists, e.g. @keyframes foo { from, to {} }

Let's add accept and reject tests for each of these.

[mattxwang]

Thanks @jeddy3 for the suggestion! Upon adding the test cases, I realized I didn't properly handle the selector list use-case. I've written a bit of a hacky solution that requires the selector parser, walks the tags, and then regenerates the selector; while it works, it doesn't feel like the most elegant solution. Do you have any suggestions (or places to look) for a better way to do this?

[jeddy3]

@mattxwang Thanks for making the changes. I think it's a valid use of the selector parser. @ybiquitous may have some thoughts on the code structure as he's done lots of refactoring lately to make our code consistent across rules.

[ybiquitous]

How about our transformSelector() utility?

stylelint/lib/utils/transformSelector.js

Line 11 in a6318d4

module.exports = function transformSelector(result, node, callback) {

[jeddy3]

Thanks for making all the changes.

LGTM!

[ybiquitous]

Thank you! LGTM 👍🏼

[jeddy3]

• Added: keyframe-selector-notation rule (#6164).