Scoped styles working on dev but not applied on build if `<head>` is missing

taktran commented 11 months ago

Astro Info

Astro                    v4.0.2
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

When a page is missing a <head> element on the page, some scoped styles are missing. The dev server shows styles as expected, but depending on where styles are imported, some styles will be missing on build.

In the following examples, the dev server (npm run dev) works with styles on pages with and without <head> tag, however on build (npm run buildAndPreview), the page without <head> is missing styles:

❌ Not working on Astro 3.6.4: https://stackblitz.com/edit/github-9xbsxw-xpfak6 (green styles missing)
❌ Not working on Astro 4.0.2: https://stackblitz.com/edit/github-9xbsxw-2nth4g (green styles missing)
❌ Not working on Astro 4.0.2 + uncommented Nav component scoped styles: https://stackblitz.com/edit/github-9xbsxw-zcdksw (green styles come through, but nav styles missing)

From the last example, it seems like the first component on the page has it's styles skipped. My guess is that it's related to page partials, as that got added in v3.4, and that could impact how components with <head> are affected.

I found this issue from digging into another issue I have with the Astro 3.x upgrade, where markdoc nodes/tags would be missing styles only on build. I can't replicate this markdoc problem on clean installs of Astro 3.x and 4.x, but am hoping it's somehow related to this <head> issue (maybe markdoc components changed it's rendering since v3 too?).

What's the expected result?

Build files are the same as the dev server and render scoped styles regardless of whether there is a <head> element on the page or not.

It does work on Astro 2.8.0 ✅: https://stackblitz.com/edit/github-9xbsxw-twtnxp

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-9xbsxw-2nth4g

Participation

[X] I am willing to submit a pull request for this issue.

taktran commented 11 months ago

I found this issue from digging into another issue I have with the Astro 3.x upgrade, where markdoc nodes/tags would be missing styles only on build. I can't replicate this markdoc problem on clean installs of Astro 3.x and 4.x, but am hoping it's somehow related to this <head> issue (maybe markdoc components changed it's rendering since v3 too?)

☝🏼 We found the solution to this particular issue, and it was to do with us using nx and the working directory being different during build. A fix was created here: https://github.com/withastro/astro/pull/9378, however, this <head> issue isn't related to that. The <head> issue doesn't actually affect us though, so not sure if anyone is actually impacted by it. I'll let the Astro team determine if it's worth fixing or not. Feel free to close if not 😄

matthewp commented 10 months ago

Thanks @taktran! Since we haven't heard any other reports of this and your issue was unrelated, going to close for now and let a new issue come up if others are having the problem.

sgalcheung commented 3 months ago

This BUG exists still, when the project uses Taildwind, the partial page still doesn't work. This discussion(https://github.com/withastro/roadmap/discussions/939#discussioncomment-10357551) also talks about it.

withastro / astro