Fix selector-attribute-quotes false positives for "never"

[mattxwang]

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

Closes #4300.

Is there anything in the PR that needs further explanation?

First - should I add some documentation to explain this new behaviour? Or do we think the current setup is enough.

There's a bit of discussion in #4300. To reiterate @Mouvedia's point:

so to me

[href='te\'s\'t'] { }
[href="te\"s\"t"] { }

can be processed and become

[href=te\'s\'t] { }
[href=te\"s\"t] { }

but

[href="te'st"] { }
[href='te"st'] { }

should remain untouched.

As such, I've adjusted the relevant test cases. The latter two are moved from being rejected to accepted; let me know if that was the desired change (or if instead we should still report, but not fix).

Regex alternative

I realized that the CSS grammar actually has a FLEX tokenizer, so I tried to directly copy the rule as a Regex:

// directly taken from spec: https://www.w3.org/TR/CSS21/grammar.html#scanner
const h = "[0-9a-f]";
const nonascii = "[\\240-\\377]";
const unicode = "\\\\{h}{1,6}(\\r\\n|[ \\t\\r\\n\\f])?".replace("{h}", h);
const escape = "({unicode}|\\\\[^\\r\\n\\f0-9a-fA-F])".replace("{unicode}", unicode);
const nmstart = "([_a-zA-Z]|{nonascii}|{escape})".replace("{nonascii}", nonascii).replace("{escape}", escape);
const nmchar = "([_a-zA-Z0-9-]|{nonascii}|{escape})".replace("{nonascii}", nonascii).replace("{escape}", escape);
const identifier = "-?{nmstart}{nmchar}*".replace("{nmstart}", nmstart).replace("{nmchar}", nmchar);
	
return Boolean(ident.match(identifier));

Unfortunately, this doesn't work! It misses some "basic" cases, including strings with spaces in them. If anybody has any ideas on what I've done wrong, that would be great - I feel like using the CSS spec when possible seems like a good idea.

[changeset-bot]

🦋 Changeset detected

Latest commit: e6d6781

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

This PR includes changesets to release 1 package

Name	Type
stylelint	Patch

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

[mattxwang]

This ended up being a bit more of a deep dive into the CSS spec than I thought! I think this PR is now ready for review. I've left some comments where I'm unsure of how I'm doing.

[mattxwang]

Should this be its own file? And hopefully, I haven't missed an existing version of this util!

[mattxwang]

Would we prefer for me to collapse this into one expression? I did it this way since I felt that it was more naturally readable.

Alt: see my note on the full FLEX-based regex option.

[Mouvedia]

question

I dunno the stylelint conventions, but did you check if an npm package already existed?
Even if it does maybe we recommend not relying on dependencies whenever possible.
Iv done an id assert package for HTML/XML so I wouldn't be surprised if something similar existed for your case.

[mattxwang]

Hm, to be honest I didn't look too in-depth; I did a quick site:npmjs.com valid css identifier and found nothing on the first page or so of Google (much more support for valid JS identifiers or CSS selectors). If you're aware of one and we think we should use it though, happy to refactor!

[mattxwang]

Thanks for the quick review @ybiquitous! Think I've addressed each of the comments, let me know what you think.

[ybiquitous]

Thank you. LGTM 👍🏼