Styles are added to head in wrong order in prod

[IanVS]

What version of astro are you using?

1.6.10

Are you using an SSR adapter? If so, which one?

no

What package manager are you using?

npm

What operating system are you using?

mac

Describe the Bug

I got bitten by a really strange error when trying to add a new page to our site. The hamburger button in the top nav started showing up in desktop sizes, but only in production builds. I traced it down to an issue in the order that styles were being added to the head, global styles were being added after component styles. I've created as minimal of a reproduction that I could, hopefully it's helpful.

I've noticed a lot of times where the styles in dev don't match production, which is pretty concerning, so I'm hopeful that this reproduction can expose an issue that can be solved and might help bring dev and prod builds more into line.

Link to Minimal Reproducible Example

https://github.com/IanVS/astro-style-order-reproduction

Participation

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

[prodkt]

Happening to us as well! Watching in case we can provide additional detail as a discussion around this continues.

[JerryWu1234]

Help me check out

[IanVS]

@wulinsheng123 thanks for taking a look, I just tested again in a fresh git clone, and the button is green for me. What is the Simple Browser that you're opening this in? The URL looks strange. What happens if you open http:localhost:3000 in firefox or chromium?

[JerryWu1234]

I used gitpod that online editor, to open your project.
It runs on Chrome.
Perhaps you could clear your cached of browser

[IanVS]

Did you try cloning the project and building it locally, without gitpod?

[jasikpark]

looks like it doesn't reproduce for me on gitpod either?

[IanVS]

@wulinsheng123 @jasikpark can either of you reproduce in a standard environment? Running in gitpod could be a confounding factor.

[JerryWu1234]

I will try late. Recently I have had a little busy

[JerryWu1234]

@wulinsheng123 @jasikpark can either of you reproduce in a standard environment? Running in gitpod could be a confounding factor.

same

[IanVS]

Thanks, there must be some tricky caching going on in my end. Rats. This is a tough one to reproduce.

[IanVS]

OK, After some more work, I found that adding a postcss config file that adds autoprefixer causes the issue to reproduce.

To break caching, it's necessary to change the project folder name, and rebuild. And I've been using npx http-server dist -p 8085 to launch in a fresh port, since it's not possible to specify the port when using astro preview.

Would y'all mind pulling the latest commit from my reproduction (maybe clone it into a new folder?) and trying again?

[jasikpark]

@wulinsheng123 @jasikpark can either of you reproduce in a standard environment? Running in gitpod could be a confounding factor.

i would expect gitpod to be amenable to a local linux build since it's a full remote box rather than something esoteric like stackblitz, tho ig it's always good to remove confounding variables

[jasikpark]

was able to reproduce with the commit that contained autoprefixer and postcss

https://pr.new/https://github.com/IanVS/astro-style-order-reproduction

[JerryWu1234]

was able to reproduce with the commit that contained autoprefixer and postcss

https://pr.new/https://github.com/IanVS/astro-style-order-reproduction

Do you copy his code directly into the Stackblitz?
My computer also can't replicate it.

[JerryWu1234]

OK, I got it. Why happens in production

[JerryWu1234]

I need some clarification.
The first picture was correct; we didn't change anything.

I only change the index.astro name to admin.astro, and admin.astro to index.astro
The second picture was wrong; also, we kept everyone the same.

The primary reasons will cause this bug. I found it.
Rollup's bundled result was in the wrong order because three pages(index, beta, admin files) build once, but the common file CSS global.css was used in a different .astor file, and then the CSS would build late.
I haven't a better idea about this bug.
@matthewp Could you give me some suggestions?

[IanVS]

Thanks so much for looking into this @wulinsheng123! Crossing my fingers for a fix, or at the very least a workaround, since this issue is blocking us from adding a new page to our site.

[matthewp]

I'm looking into this now.

[jasikpark]

Thanks for the tip about global css too @matthewp - setting up import sorting to always throw the Layouts and MainHead at the top of our imports has mostly fixed the global css cascade problem

[matthewp]

So the issue here is that the sort order only takes into account the order within the page component. I think what it should be is a sum of all sort orders from each module going all the way down. Will try and see if that can fix it.

[matthewp]

That does indeed fix it, let me see if I can turn this example into a test.

[matthewp]

Fix is in #5549