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

[thybzi]

What is the problem you're trying to solve?

We try avoid any unnecessary quotes in selectors, so we use "selector-attribute-quotes": "never".

But some selectors really require quotes to be valid.

div[style='*'] { ... }
li[data-id='42'] { ... }

And here is why:

According to the spec http://www.w3.org/TR/CSS2/selector.html#attribute-selectors:

Attribute values must be identifiers or strings

Furthermore, according to the spec http://www.w3.org/TR/CSS2/syndata.html#value-def-identifier:

identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

And, according to the spec http://www.w3.org/TR/CSS2/syndata.html#strings:

Strings can either be written with double quotes or with single quotes.

What solution would you like to see?

A new option for selector-attribute-quotes (e.g. "only-required" or "only-necessary"), which would work like "never", but allow/require quotes when the correspondent part of selector:

• contains chars other than latin letters, digits, hyphen and underscore
• starts with a digit
• starts with double hyphen
• starts with a hyphen followed by a digit

[alexander-akait]

Mark as enhancement

[jeddy3]

@thybzi Thanks for the suggestion.

SGTM as there's precedent for this in font-family-name-quotes "always-where-required" option.

Labelling as help wanted. You're welcome to submit a PR if you like. Most of the answers should already been in the font-family-name-quotes source.

[jeddy3]

Revisiting this. It sounds like the never option produces invalid CSS. Rather than add a new option, let's fix the never option so that it doesn't removes quotes when the part of the selector:

• contains chars other than latin letters, digits, hyphen and underscore
• starts with a digit
• starts with double hyphen
• starts with a hyphen followed by a digit

I've labelled the issue as ready to implement. Please consider contributing if you have time.

There are steps on how to fix a bug in a rule in the Developer guide.

[mattxwang]

Hey all, I gave a quick spin to the suggested proposal in #6571. I just wanted to clarify the expected behaviour - after implementing the logic enumerated by @jeddy3, some existing tests for the "never" option fail - namely, those involving attributes with quotes within them:

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

Currently, the new implementation skips these; the current implementation of the rule flags a warning. To me, it seems like the rule shouldn't remove these quotes, since the resulting attribute value wouldn't be a valid identifier. Wanted to make sure that this wasn't necessarily a regression (since it does change the rule behaviour).

If we agree, I can then write a few more tests to capture other behaviour and mark the PR as ready to review!

[jeddy3]

To me, it seems like the rule shouldn't remove these quotes,

SGTM, it seems safer not to remove the outer quotes if there are inner quotes (escaped or otherwise).

[Mouvedia]

a valid unquoted attribute value in HTML is any string of text that is not the empty string and that doesn’t contain spaces, tabs, line feeds, form feeds, carriage returns, ", ', `, =, <, or >
…
valid unquoted attribute value in CSS is any string of text that is not the empty string, is not just a hyphen (-), consists of escaped characters and/or characters matching /[-_\u00A0-\u10FFFF]/ entirely, and doesn’t start with a digit or two hyphens or a hyphen followed by a digit

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.

ref https://mothereff.in/unquoted-attributes

[mattxwang]

Thanks for your patience everyone, have updated #6571 with what I believe is now the desired behaviour.