ProjectEvergreen / greenwood

Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back.
https://www.greenwoodjs.io
MIT License
96 stars 9 forks source link

add support for optimizing the CSS `:has` / `:is` pseudo-selectors #1106

Closed thescientist13 closed 9 months ago

thescientist13 commented 1 year ago

Type of Change

Feature

Summary

The CSS :has psuedo-selector is neat new CSS feature (almost*) available in all browsers and can [come in pretty handy] (https://twitter.com/wesbos/status/1653401308022607874?s=43&t=23JfvPjOIJyZ9W8iFiZYyg). https://www.smashingmagazine.com/2023/01/level-up-css-skills-has-selector/

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) {
  margin-bottom: 0;
}

It is still outstanding in FF but will be [coming soon]() but it is a standard now, so no harm in supporting it in Greenwood https://caniuse.com/css-has Screen Shot 2023-05-05 at 7 44 48 PM

Details

So will just need to add support for this in our CSS resource plugin and add a test case.