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.