Skip to content
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

Open
1 task
jacobdalamb opened this issue Mar 25, 2024 · 2 comments · May be fixed by #1001
Open
1 task

define:vars not working with is:inline directive in <style> tags #1000

jacobdalamb opened this issue Mar 25, 2024 · 2 comments · May be fixed by #1001
Labels
- P3: minor bug An edge case that only affects very specific usage (priority)

Comments

@jacobdalamb
Copy link

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.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Mar 25, 2024
@lilnasy
Copy link
Contributor

lilnasy commented Mar 25, 2024

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.

@lilnasy lilnasy added - P3: minor bug An edge case that only affects very specific usage (priority) and removed needs triage Issue needs to be triaged labels Mar 25, 2024
@lilnasy lilnasy transferred this issue from withastro/astro Apr 11, 2024
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Apr 11, 2024
@lilnasy
Copy link
Contributor

lilnasy commented Apr 11, 2024

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.

@lilnasy lilnasy removed the needs triage Issue needs to be triaged label Apr 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P3: minor bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants
@jacobdalamb @lilnasy and others