Support grouping rules like @media and @layer and fix shadow DOM support

[m-akinc]

Fixes #41 and #93

• Added support for CSSGroupingRules like @layer, @media, etc.
• Fixed bugs in support for shadow DOM.
  • When multiple such elements on the page shared stylesheets, they would not all be added to shadowHosts because of the use of __pseudoStatesRewritten. This would prevent them from getting classes applied by shadowHosts.forEach(updateShadowHost).
  • When rewriting a selector like :host(.foo) .control:hover, it was incorrectly assuming any state selectors (e.g. :hover) occurred inside the :host() selector and generated a bogus selector like :host(.foo) .control.pseudo-hover-all. Now handling scenarios like this by writing :host(.foo.pseudo-hover-all) .control instead.
  • pseudo-*-all classes were being applied to a custom element (by the attachShadow override) even if none of its stylesheets were rewritten (and therefore it was not added to shadowHosts). This could result in those classes not being removed later.
  • updateShadowHost was only looking at classes on ancestors, so any pseudo-* class applied directly to the shadow host because of a selector (i.e. in applyParameter) would get removed.
  • updateShadowHost would propagate pseudo-hover, for example, from an ancestor to a shadow host. It should only be propagating pseudo-*-all.
  • updateShadowHost wouldn't cross shadow boundaries, so nested shadow DOM (i.e. a custom element in the shadow DOM of a custom element) wouldn't get the global pseudo-*-all class.
• Added support for targeting elements in shadow DOM with selectors:

parameters = {
  pseudo: {
    hover: ":host(.hover) .innerControl"
  }
}

• Added new rewriteStyleSheet test cases
• Had to update version of tsup due to error I was running into

[m-akinc]

@ghengeveld @JonathanKolnik 🙏 Could I get a review of this PR? I think it would open this addon up to a whole lot of new potential users that can't currently use it (like my team 😁).

[ghengeveld]

@m-akinc I'll take a good look at this and your other PRs tomorrow. You did a lot of great work here!

[ghengeveld]

Wow, this is really great work! 👏

I left a few minor suggestions which you may want to look at. I also would've appreciated some new Storybook stories to showcase the scenarios this PR is addressing, so that we also have visual confirmation that it works as intended (and Chromatic will snapshot them to detect future regressions). Any chance you can add some?

Thanks a lot for all the effort! I couldn't have done all this myself.

[m-akinc]

I added a story for a nested custom component and one for CSS at-rules. Let me know if you need anything else before merging.

[ghengeveld]

LGTM. Nice work! Ready to merge?

[m-akinc]

LGTM. Nice work! Ready to merge?

Yes! 🚀

[ghengeveld]

CI is failing to release, working on that...

[github-actions]

🚀 PR was released in v2.2.0 🚀