Skip to content
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 now :is() in the spec #19

Open
valtlai opened this Issue Nov 14, 2018 · 7 comments

Comments

Projects
None yet
5 participants
@valtlai
Copy link

valtlai commented Nov 14, 2018

The :matches() pseudo-class is now renamed to :is(). See the Github issue and the spec.

I think it’s probably worth of support both instead of creating a new extension for the :is().

@jonathantneal

This comment has been minimized.

Copy link
Member

jonathantneal commented Nov 15, 2018

Excellent. We should take a look. This plugin is getting long in the tooth, despite being used so often.

@valtlai

This comment has been minimized.

Copy link
Author

valtlai commented Nov 23, 2018

Could we simply rename matches to is and release a new major version? Or would it be too radical?

@equinusocio

This comment has been minimized.

Copy link

equinusocio commented Nov 28, 2018

Find and replace all 😂 @jonathantneal

@ExE-Boss

This comment has been minimized.

Copy link

ExE-Boss commented Nov 28, 2018

Also keep backwards compatibility for :matches(…) which is defined as an obsolete legacy alias for :is(…), but browsers don’t need to implement it.

@equinusocio

This comment has been minimized.

Copy link

equinusocio commented Nov 29, 2018

Yes it should be deprecated not replaced

@hacknug

This comment has been minimized.

Copy link

hacknug commented Feb 27, 2019

Is anyone able to review my fork to see if everything I did would solve this issue? All tests passing for both :matches and :is but maybe there's another catch i didn't account for?

I can open a PR if needed/preferred. Just let me know 👍

https://github.com/hacknug/postcss-selector-matches

@jonathantneal

This comment has been minimized.

Copy link
Member

jonathantneal commented Feb 28, 2019

The problem is that :matches has forked from the spec.

#16

For instance:

head ~ :is(html > body) {}

/* should become */

html > head ~ body {}

/* and should not become */

head ~ html > body {}

Given a CSS selector that is .foo head ~ :is(html > .bar ~ body) and HTML that is <html class="foo"><head class="bar"></head><body></body></html>, the CSS selector should match the HTML body tag. However, we must solve this without knowing the DOM tree.

To properly polyfill :is, we must first separate the context selector from the :is selector.

complex selector :is selector
.foo head ~ * (* is inferred) html > .bar ~ body

Next, we must separate and merge the last compound selector from its preceding complex selector.

complex selector matching selector merged selector
* body body (* and body can merge into body)

Note: These compound selectors must be merged into a single valid selector, correctly inferring universal selectors (*). If they cannot be merged, the rule must be skipped.

Next, all possible combinations of the preceding complex selectors (.foo head ~ and html > .bar ~) must be solved for, and I do not have an algorithm for this.

possible selectors
.foo html > head.bar ~ body
html.foo > head.bar ~ body
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.