-
Notifications
You must be signed in to change notification settings - Fork 55
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
define:vars
not working with is:inline
directive in <style>
tags
#1000
Comments
However, the effect of the two together should be that a We could add a warning through our editor tooling as well. |
For this input: <style is:inline define:vars={{ textColor: foregroundColor, backgroundColor }}>
h1 {
background-color: var(--backgroundColor);
color: var(--textColor);
}
</style> The compiler outputs: $$render`<style>${$$defineStyleVars({ textColor: foregroundColor, backgroundColor })}
h1 {
background-color: var(--backgroundColor);
color: var(--textColor);
}
</style>` ...which renders a non-parseable inline stylesheet.
|
Astro Info
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
According to the Astro documentation, the
define:vars
directive should allow passing server-side variables from the component frontmatter into the<style>
tags. The documentation does not mention any specific limitations or incompatibilities betweendefine:vars
andis:inline
for <style> tags.What's the expected result?
When using the
define:vars
directive in a<style>
tag that also has theis:inline
directive, the variables passed throughdefine:vars
do not seem to be properly injected or accessible within the styles. The styles do not apply as expected, and there is an error message but goes away once the page is reloaded.Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-zbqqwf?file=src%2Fpages%2Findex.astro
Participation
The text was updated successfully, but these errors were encountered: