This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
CSS define:vars should only add definitions to top-level components
#855
Comments
|
I want to see it deprecated altogether. Maybe we can offer a function as a replacement. -<div>
+<div style={defineVars({ color })}>
1111
<button type="button">button</button>
</div>
-<style define:vars={{ color }}>
+<style>
button {
color: var(--color)
}
</style> |
|
I'm all for it! |
|
I would also like to draw attention to the behavior when you actually set <style is:inline define:vars={{ cssVar: 'example' }}>...</style>Compiles to: <style>--cssVar: 'example';...</style>This way, you can't use the variable as it was inlined as-is right into the style tag. All you need would be if it either:
The first option would be perfect for use in Although, I don't see a use case for it outside of the
In the case of deprecating it, how would the function work for the |
|
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Astro Info
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
Right now,
<style define:vars={{}}>adds the variable definitions to every single element in the component. This drastically increases the footprint of components, it's difficult to read, and it will cause issues if a user intentionally wants to override a local variable within the component itself.What's the expected result?
The CSS var definitions should only be added to the top-level components.
This issue was closed before it was discussed in withastro/astro#7328.
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-sdeict-dc8tm6?file=src%2Fcomponents%2FDefineVars.astro
Participation
The text was updated successfully, but these errors were encountered: