-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
:matches is incorrectly implemented #16
Comments
https://drafts.csswg.org/selectors-4/#matches
If I'm understanding this correctly, pseudo-elements shouldn't be allowed inside :matches per specification. I tested this code: .test :matches(input, ::placeholder) { ... } And it will produce this result: .test input, .test ::placeholder { ... } Not sure if the intention is to follow specification as closely as possible. If it is, I'm guessing we could check for appearance of Any thoughts? |
I’m all for following the spec. I think this plugin needs to be deprecated. Otherwise, people will demand that this plugin support both the old pattern and the new pattern. It would be better if we let this plugin do what it has always done (and allow people to explicitly enable it in the next major release of PostCSS Preset Env), and then also create a new plugin for |
Fairly significant news: w3c/csswg-drafts#1027
UPDATED: May 31, 2018
The CSSWG has resolved 2 issues with
:matches()
.1. Matches uses the hierarchy of the entire document
The matches the behavior of
:not
, DOMmatches
, andquerySelector
.Therefore, the following selector would match
<body>
:And it would effectively expand to:
It would not expand to:
2. Matches uses the selector weight of the highest-weighted argument
This matches the behavior of
:not
and:nth-child(A of B)
. Therefore, the following selector would match<span class="foo bar"></span>
with a weight of[1, 1, 0]
:The id weight would apply and the class weight would not, despite the match being the opposite. This could not be expanded in any yet-known polyfill, whether at build time or live.
You would otherwise somehow need to do this:
:matches(.bar, #qux)
and calculate its weight as[1, 0, 0]
.<span class="foo bar"></span>
using.foo.bar
.In HTML:
<span class="foo bar" id="matches-bar"></span>
And CSS:
.foo#matches-bar
The text was updated successfully, but these errors were encountered: