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.

Sign up for GitHub

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

Jump to bottom

Astro reverses the order of <style> tags in a page/component #12264

Open
1 task
JaneSmith opened this issue Oct 20, 2024 · 6 comments · May be fixed by withastro/compiler#1055
Open
1 task

Astro reverses the order of <style> tags in a page/component #12264

JaneSmith opened this issue Oct 20, 2024 · 6 comments · May be fixed by withastro/compiler#1055
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority) feat: styling Related to styles (scope)

Comments

@JaneSmith
Copy link

JaneSmith commented Oct 20, 2024 •
edited
Loading

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.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Oct 20, 2024
@JaneSmith JaneSmith changed the title Astro reverses the order of <script> tags in a page/component Astro reverses the order of <style> tags in a page/component Oct 20, 2024
@ematipico
Copy link
Member

Is there a particular reason why you require two or more <style> that affect the same classes?

@ematipico ematipico added the needs response Issue needs response from OP label Oct 21, 2024
@JaneSmith
Copy link
Author

I'm migrating a project that's already set up this way. Of course, I can go through and merge the <style> tags together, but in the meantime until I do that work, Astro is breaking it.

It's valid code to have multiple <style> tags in a document, so surely Astro should handle this correctly? I'm not familiar with Astro's internals, but since it's somehow generating them backwards, I'm guessing the order just needs to be reversed somewhere.

@ematipico
Copy link
Member

By the way, we require a valid reproduction. I can't access to the one you provided.

@ematipico ematipico added needs repro Issue needs a reproduction and removed needs response Issue needs response from OP labels Oct 21, 2024
@github-actions GitHub Actions
Copy link
Contributor

Hello @JaneSmith. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

@github-actions github-actions bot removed the needs triage Issue needs to be triaged label Oct 21, 2024
@JaneSmith
Copy link
Author

Apologies. The repro link was set to private for some reason — I'm not sure how, as it was working when I opened the issue. I've changed the permissions, so it should be accessible now.

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Oct 25, 2024
@bluwy bluwy added needs triage Issue needs to be triaged and removed needs repro Issue needs a reproduction labels Oct 25, 2024
@bluwy bluwy reopened this Oct 25, 2024
@ematipico ematipico added feat: styling Related to styles (scope) - P4: important Violate documented behavior or significantly impacts performance (priority) and removed needs triage Issue needs to be triaged labels Oct 25, 2024
@louisescher
Copy link
Contributor

Did some digging with @TheOtterlord, this was introduced with compiler#525 in Astro v1.4.0, although technically this was introduced even earlier in 0.21.0-next.2, where compiler#130 reversed the order of all rendered CSS/scripts/hydrated components.

So a regression from two years ago for a change from 3 years ago.

This also affects the order of scripts, even in the latest version of Astro.

@TheOtterlord TheOtterlord linked a pull request Dec 21, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority) feat: styling Related to styles (scope)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Reverse order of styles & scripts withastro/compiler
5 participants
@ematipico @JaneSmith @bluwy @louisescher and others