`define:vars` not working with `is:inline` directive in `<style>` tags
jacobdalamb opened this issue · 2 comments
Astro Info
Astro v4.5.9
Node v18.18.0
System Linux (x64)
Package Manager npm
Output static
Adapter none
Integrations none
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 between define:vars
and is:inline
for <style> tags.
What's the expected result?
When using the define:vars
directive in a <style>
tag that also has the is:inline
directive, the variables passed through define: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
- I am willing to submit a pull request for this issue.
is:inline
skips processing steps. The magic done by define:vars
is a processing step. So it is not expected work.
However, the effect of the two together should be that a style
tag with the attribute `define:vars is rendered. This does not happen, either - invalid CSS is generated instead. That's something to fix.
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.
It should output code that renders define:vars
as an attribute.define:vars
is a skipped attribute. It would be more trouble than its worth to output it verbatim.