search

argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.
https://open-props.style
MIT License
4.78k stars 193 forks source link

Shadow Imports for Normalize and Button Extras #253

Closed backlineint closed 2 years ago

backlineint commented 2 years ago

I've been working on a web component library that uses Open Props (https://www.drupal.org/project/gdwc) and am excited to take advantage of the recently added shadow DOM imports https://github.com/argyleink/open-props/issues/240.

While reviewing a contribution that started to implement this change, I found that there currently aren't host scoped versions of the normalize and button stylesheets. The library uses both of those. We're currently copying and modifying the files and would love to be able to instead use a version provided by open props.

I took a quick look at if the existing npm scripts could be modified to generate these as well, but the fix looks slightly more involved due to the way that the styles in /extra are structured.

argyleink commented 2 years ago

oh nice, i can make this happen 👍🏻

argyleink commented 2 years ago

what modifications are you doing? you're removing :where(), swapping html for :host, and button for :host? would love to hear what you did 🙂

backlineint commented 2 years ago

For normalize, here's the file I'm currently using: https://git.drupalcode.org/project/gdwc/-/blob/1.0.x/styles/normalize.css.js

If my memory serves me, I swapped where(html) for :host. And I think I used normalize.min.css for the original file.

Looking at the button styles on the other hand, I don't see any obvious replacements: https://git.drupalcode.org/project/gdwc/-/blob/1.0.x/styles/buttons.css.js

After some experimentation, I think the reason I created that button style is that if I imported the css file, button styles would leak outside of the shadow dom. Upon closer inspection, I think that is actually being caused by Vite (and technically would also happen for the normalize styles.) Disabling Vite's CSS injection (https://git.drupalcode.org/project/gdwc/-/blob/1.0.x/styles/buttons.css.js) seems to fix that. Wouldn't be shocked if this is only an issue that would happen in Storybook, not the distributed components.

So false alarm on the button request. A shadow export of normalize that swaps where(html) for :host looks like all we need here.

argyleink commented 2 years ago

https://unpkg.com/open-props@1.4.5/normalize.shadow.min.css 👍🏻

or import from npm like @import "open-props/shadow/normalize";

backlineint commented 2 years ago

Thanks @argyleink! Excited to try this out.