Global dynamic values scope locally only
AverTry opened this issue · comments
Anything with a dynamic value is scoped locally, If I replace the signals or const with say "red" my app buttons are changed.
The same using the css import with :global(button){...};
<style jsx global>
{`
button {
color: ${color()};
border: solid 2px rgb(128, 0, 105);
outline: 4px dotted ${color()};
}
button:focus,
button:focus-visible {
outline: 8px ridge rgba(170, 50, 220, 0.6);
border-radius: 2rem;
}
`}
</style>
Yeah I never really considered global styles to be dynamic. The values themselves are tied to the top-most element, which is why it is still "scoped".
I'm not sure if I should fix this or not as it is in a weird state.
If it can be fixed, please do as vercel's styled-jsx can do this.
https://nextjs.org/blog/styling-next-with-styled-jsx#creating-a-site-theme
For instance a theme component, in that can affect global styles. Doesn't this put a limit on the dynamics of Global, as you may as well leave all global values in a CSS file?
Thanks.
Good point. will check if it's doable in the current structure
Hi Alexis, did you have a chance to look if it's a possibility?
Been trying Tailwind, and dynamically changing values there, means listing all possible dynamic values for the JIT compiler to add them. So this is a no-go. Your solution is looking better everyday.
I haven't yet. Will give it time over the weekend.
Great that I found a workaround. Wait for a new minor release in a couple of days.
Oh wow, that's brilliant, thanks can't wait... All the best to you sir.
Not sure if this is relevant or fixable, but I thought you should know as you will be looking at the code.
CSS after the "&:active" fails globally, but locally still works.
:global(button) {
max-width: fit-content;
box-shadow: var(--shadow-4);
&:active {
box-shadow: var(--shadow-1);
background-color: var(--camo-11);
}
}
This works
:global(button) {
max-width: fit-content;
box-shadow: var(--shadow-4);
}
:global(button:active) {
box-shadow: var(--shadow-1);
background-color: var(--camo-11);
}
@AverTry That's by design, the same way :global(button):active is different from :global(button:active).
Unless others do this differently, I will implement it accordingly. Vue 3 also has this kind of behavior.
Ah yes a nesting dilemma, I've only just started to use them as browsers have now adopted them.
Alexis before your final commit, could you fix the peer dependencies, as I need to --force on the vite plugins.
Vite 5 is also out now, but SolidJS is yet to be updated, so I haven't tried Solid-Styled with it yet.
Thank you so much.
@AverTry thank you for the reminder. Will do a release tomorrow.
should be fixed in 0.10