Change selector-pseudo-*-allowed-list not to include vendor prefixes automatically

[carlosjeurissen]

What is the problem you're trying to solve?

Currently, when just hover is specified in the allowlist, -webkit-hover will be allowed as well even tho :-webkit-hover is invalid. This is pretty unexpected for pseudo classes / elements. Considering:

• most of them do not have vendor prefixes
• you can not join them in one selector as this could invalidate the whole selector
• the vendor-prefix is named differently (:-moz-focusring, :-webkit-full-screen)

What solution would you like to see?

It would make more sense to explicitly add desired vendor prefixed pseudo elements/classes to the allowlist.

This can potentially be a breaking change. However:

• usage of allowlists in pseudo elements / classes seems rare
• rarely an equivalent vendor prefix ever existed (I could only found any-link, for which one would use :visited and :link as fallback)
• this can be specified in the stylelint changelog
• migration is fairly easy
• no breaking issues will occur, just a false positive

[ybiquitous]

@carlosjeurissen Thanks for opening the discussion. The suggestion seems to make sense to me. Vendor prefixes have been gradually less used, and people can easily migrate their config to keep the current behavior if they want. E.g.

{
  "selector-pseudo-class-allowed-list": [/^(-webkit-|-moz-)?hover$/]
}

But indeed, this can be a breaking change, even if it is a false positive. So, I think it's better to change in the next major release.

[ybiquitous]

Ref

stylelint/docs/about/semantic-versioning.md

Lines 29 to 33 in c49f9b5

	## Major release
	Likely to break your lint build:
	- a change in the documented behavior of an existing rule results in Stylelint reporting more errors by default

[carlosjeurissen]

@ybiquitous if we want to be extra careful we can indeed wait until a major release for this change to be implemented. However I do not see a single use-case of automatically allow-listing vendor prefixes. If you have one please let me know! Even the any-link example makes no sense as their is :link and :visited as fallbacks.

If we really want to wait, it could make sense to offer an option to the pseudo-allowed-list rules named "allowVendorPrefixes", which would be true by default until a major release.

So that:

"selector-pseudo-class-allowed-list": [[
  "hover", "-moz-last-node"
], {
  "includeVendorPrefixed": false
}]

Would not allow ":-moz-hover" or ":last-node" but would allow ""-moz-last-node" and "hover"

[ybiquitous]

The selector-pseudo-class-whitelist rule (before selector-pseudo-class-allowed-list) was added in 2c4bfa9 and published in https://github.com/stylelint/stylelint/releases/tag/7.1.0. That was 2016, 8 years ago. The rule initially supported vendor prefixes. Probably, I imagine including vendor prefixes by default was more important at that time.

stylelint/src/rules/selector-pseudo-class-whitelist/index.js

Line 41 in 6a987fc

if (matchesStringOrRegExp(vendor.unprefixed(name).toLowerCase(), whitelist)) { return }

I also don't have a use case, but I'm still concerned about the compatibility. Even if adding an option like includeVendorPrefixed, the option would become useless in the next major version, right?

[Mouvedia]

If we are going the option way, I would prefer something like strict: true or lax: false because

or ":last-node"

wouldn't be expected to not be permitted for

"includeVendorPrefixed": false

You can't change the statu quo default boolean value before a major release though.

[carlosjeurissen]

or ":last-node" wouldn't be expected to not be permitted for

@Mouvedia This would be expected if the allowlist only contains "-moz-last-node".

@ybiquitous Fair. The option in a next version would indeed be pretty useless unless people like it as a feature. Yet again I do not see a use case for this. Lets be safe and wait for a next major version and skip having an option for this.

Let me know if I can provide a PR and what the process for a delayed PR would be.

[ybiquitous]

I added this issue to the list in #7396, preparing 17.0.0.

[Mouvedia]

related: #7624
i.e. to ignore -webkit-box you gotta add box instead

[Mouvedia]

see also

…and add option noVendorIgnore…

checkPrefixed

i.e. the name chosen will have to be consistent for all affected rules