Astro Info

Astro                    v4.16.6
Node                     v20.18.0
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

N/A

Describe the Bug

If a page or component contains multiple <style> tags, Astro seems to reverse the order of them.

For example, a page with the following code...

<style>
  body {
    background: red;
  }
</style>
<style>
  body {
    background: yellow;
  }
</style>

...ends up producing the following output in the dev server...

<style data-vite-dev-id="/project/workspace/src/pages/index.astro?astro&#38;type=style&#38;index=0&#38;lang.css">body{background:yellow}</style>
<style data-vite-dev-id="/project/workspace/src/pages/index.astro?astro&#38;type=style&#38;index=1&#38;lang.css">body{background:red}</style>

...and the following final output from the build command...

<style>body{background:#ff0}body{background:red}
</style>

I defined a red style followed by a yellow style, but instead I got the yellow style followed by the red style. This is reversed.

Changing the order of the style tags has significant effects on the appearance of the page in the browser, as normally styles that come later in the document will override styles that come earlier in the document.

I don't see any reason why Astro would be doing this intentionally, and the behaviour is not documented anywhere as far as I can tell, so I believe this is a bug. It had me quite confused for a while as to why my styles weren't working, until I looked at the generated output and realised Astro was randomly changing this...

What's the expected result?

I expect the <style> tags (or lifted styles) to stay in the same order I put them in.

Link to Minimal Reproducible Example

https://codesandbox.io/p/devbox/amazing-meitner-6c8kkc?file=%2Fsrc%2Fpages%2Findex.astro

Participation

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