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

Offer a scoped option #384

Open jakobrosenberg opened 1 year ago

jakobrosenberg commented 1 year ago

I often work on SPA starter templates. To keep package.json dependencies light, I use CDN for the bundled examples.

Unfortunately when using Open Props this leaves me with two options.

  1. CDN - The styling bleeds into the user's code.
  2. NPM and node props.js '' true '.starter-examples' - This adds dependencies to package.json that the user might not want.

If Open Props had a scoped CDN option, like where(.open-props), it would be very simple to keep the project lean while styling specific elements without bleeding into the user's code.

Thanks for a great library!

argyleink commented 1 year ago

what about using Cascade Layers for this?

@import "https://unpkg.com/open-props" layer(design.system);

This easily lets authored code win if there in a different (higher) order. But also, are you looking for a scoped normalize? Because the props themselves dont do any styling, and scoping things to a classname seems odd for an import of just values? What are the "bleeding into users code" scenarios you're experiencing? 🙂

jakobrosenberg commented 1 year ago

Thanks for the quick reply.

So I'm working on a filebased router for Svelte (Routify 3). The starter template has an examples page that shows off various features. Users can delete this page when they no longer need the support wheels.

The problem is that once you click the link to /examples, open-props is imported permanently. So when you navigate back to / or /some-user-page, the imported CSS is still present until you refresh.

argyleink commented 1 year ago

could try the JS api adopted stylesheets, it's got a nice way to push and pull entire sheets from a context?