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

add support for optimizing CSS :has / :is pseudo-selectors #1107

Conversation

thescientist13
Copy link
Member

@thescientist13 thescientist13 commented May 6, 2023

Related Issue

resolves #1106

So for example, with this HTML

<h1>Heading for :has (should be red)</h1>
<p>Testing :has!</p>

<h1>Heading for :is (should not be red)</h1>
<ol>
  <li>Saturn</li>
  <li>
    <ul>
      <li>Mimas</li>
      <li>Enceladus</li>
      <li>
        <ol>
          <li>Voyager</li>
          <li>Cassini</li>
        </ol>
      </li>
      <li>Tethys</li>
    </ul>
  </li>
  <li>Uranus</li>
  <li>
    <ol>
      <li>Titania</li>
      <li>Oberon</li>
    </ol>
  </li>
</ol>

And this CSS (from the MDN page)

h1:has(+ p) {
  color: red;
}

ol {
  list-style-type: upper-alpha;
  color: darkblue;
}

:is(ol, ul, menu:unsupported) :is(ol, ul) {
  color: green;
}

:is(ol, ul) :is(ol, ul) ol {
  list-style-type: lower-greek;
  color: chocolate;
}

The styles work as expected in dev and production builds
Screenshot 2023-11-03 at 7 37 48 PM
Screenshot 2023-11-03 at 7 51 25 PM

Summary of Changes

  1. Add support for optimizing :has
  2. Add support for optimizing :is
  3. Add test case

TODO

  1. Demo / test
  2. also need :is support?

@thescientist13 thescientist13 added CLI feature New feature or request labels May 6, 2023
@thescientist13 thescientist13 changed the title add support for optimizing CSS :has pseudo-selector add support for optimizing CSS :has / :is pseudo-selectors Nov 3, 2023
@thescientist13 thescientist13 force-pushed the feature/issue-1106-optimize-css-has-psuedo-selector branch from c472587 to 973d88b Compare November 4, 2023 00:11
@thescientist13 thescientist13 changed the base branch from master to release/0.29.0 November 4, 2023 00:12
@thescientist13 thescientist13 merged commit 9f087a3 into release/0.29.0 Nov 4, 2023
8 checks passed
@thescientist13 thescientist13 deleted the feature/issue-1106-optimize-css-has-psuedo-selector branch November 4, 2023 00:29
thescientist13 added a commit that referenced this pull request Nov 9, 2023
* add support for optimizing CSS :has pseudo-selector

* add support for :is
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLI feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

add support for optimizing the CSS :has / :is pseudo-selectors
1 participant