Miserlou
🐛 BUG: scoped CSS, leakage via CSS custom properties in practice
What version of astro are you using?
1.0.0-beta.63
Are you using an SSR adapter? If so, which one?
None
What package manager are you using?
npm
What operating system are you using?
Mac
Describe the Bug
The scoped CSS is so very nice, but custom properties stemming from define:vars leak into child components to use, by mistake or not.
I think it would be best to (internally) scope the names of the CSS custom properties, in the same way that the components get a generated class name for its "scope", and have the user be specific about CSS properties and whether they should be (in practice) visible outside the component's scoped styles or not.
Repo with details and example provided: https://github.com/npup/astro-css-definevars-question
Link to Minimal Reproducible Example
https://github.com/npup/astro-css-definevars-question
Participation
- [X] I am willing to submit a pull request for this issue.
Hi @natemoo-re could you possibly take a look at this, The user has posed a very interesting question surrounding the behaviour of define:vars if you would be so kind,
👊
This makes sense! I know this has been a problem, but it will require a bit of restructuring to the way that define:vars.
Going to tag this as nice-to-have for now, hoping we can address this after v1.0 is out the door.
