withastro/astro

`is:global` keyword of styles in conditional scopes are included in builds

Closed this issue · 3 comments

YektaDev commented

Astro Info

❯ npm run astro info

> @example/minimal@0.0.1 astro
> astro info

Astro                    v4.16.12
Node                     v18.20.3
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

Following up on this, I knew there were edge cases with this issue because I was experiencing them in my project. While trying to further isolate the issue, an edge case I found involves conditional scopes, where <style is:global> elements are included in the build output without having their is:global token stripped. This results in the following HTML validation error:

Attribute “is:global” not allowed on element “style” at this point.

This particular example is from the minimal reproducible case:

---
const { display } = Astro.props;
---

{ display &&
  <style is:global>
    body { background: fuchsia; }
  </style>
}

The corresponding output in /dist/:

<style is:global>
  body {
    background: fuchsia;
  }
</style>

What's the expected result?

All is:global tokens to be stripped from the output of npm run build.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-wdcfns?file=dist%2Findex.html

Participation

  • I am willing to submit a pull request for this issue.
bluwy commented

When you have style rendering conditionally like this, Astro is no longer processing it by default because it can't properly analyze how it can be optimized and bundled. The style tag will be printed as is as plain HTML. Hence the styles are already global and you wouldn't need is:global, and if you do put any attributes on it, because Astro doesn't process it anymore, it'll be rendered as is.

  • 👍1
YektaDev commented

Thanks for the reply!
I didn't know about this. Astro Components work in conditional scopes, so I assumed the normal "processing" happens regardless. Good to know! Should I close it then?

bluwy commented

Yeah for styles specifically it requires more static analysis, so features other than that aren't bound to this quirk. I don't think there's much we can fix here, maybe docs could be improved if it's not mentioned, otherwise we can close this.

  • 👍1