SSR loads bundled CSS files in incorrect order

[tracer99]

If you have component less files, you expect to be able to override global CSS from the main less file using the same specificity. However, if you use bundles, the bundles may not be loaded in the way you expect. In our case, the main css file is loaded last. Meaning your component CSS has to have a higher specificity.

They don't seem to be in any specific order, other than the main css file being last every time. Not alphabetical. Not in order that the bundles are declared in package.json.

[matthewp]

I created 8dbe834 but unfortunately this bug does not show up there :( . Going to create a fresh project and play around and see if I can recreate it.

[matthewp]

Hey @tracer99, I created https://github.com/matthewp/done-ssr-css-ordering-bug-example, which is a project that attempts to replicate this bug. Currently it is outputting them in the correct order.

Would it be possible for you to see if you can break it? I don't know what is different about this project vs. yours. If we can get that one to break I can better figure out what the bug is.

I've made you a collaborator so you can go in and do whatever you want.

[tracer99]

Will work on this next week.

[tracer99]

OK. First I tried my donejs-example app
It's reproducable here
https://github.com/tucows/donejs-example

It loads 3 component styles first, then the main one, then the bundle one. So it's not even bundles, that's the problem, as the bundles are loaded after in this case.

Trying to break the one you setup.

[tracer99]

@matthewp I've set things up with your example app and things also break now.
I can't seem to push to that repo though.

[matthewp]

@tracer99 I think you need to go here first and accept the invitation to be a collaborator: https://github.com/matthewp/done-ssr-css-ordering-bug-example/invitations

[matthewp]

@tracer99 let me know when you've gotten that pushed and i'll take a look. Thanks again! I love getting these kinds of bugs fixed.

[tracer99]

OK. Finally pushed my mods to https://github.com/matthewp/done-ssr-css-ordering-bug-example
If you build and run in production, you'll see that the main style is not first.

Note: I was not able to reproduce the issue exactly like we are experiencing in production. But I was able to get the CSS to load out of order. Hopefully the solution to this issue will fix ours.

[tracer99]

@matthewp any chance to look into this?

[matthewp]

I'll look at it today.

[matthewp]

Ok, when I build and run in production I get:

a

<link rel="stylesheet" href="/dist/bundles/bundle-order/index.css" asset-id="bundles/bundle-order/[email protected]#css">
<link rel="stylesheet" href="/dist/bundles/bundle-order/components/a.css" asset-id="bundles/bundle-order/components/[email protected]#css">

b

<link rel="stylesheet" href="/dist/bundles/bundle-order/index.css" asset-id="bundles/bundle-order/[email protected]#css">
<link rel="stylesheet" href="/dist/bundles/bundle-order/components/b.css" asset-id="bundles/bundle-order/components/[email protected]#css">

Do you get something different?

[tracer99]

My output is completely different. I don't get linked less but included compiled css

A

<style asset-id="[email protected]#components/[email protected]#less">
<style asset-id="[email protected]#[email protected]#less">
<style asset-id="[email protected]#components/[email protected]#less">

B

<style asset-id="[email protected]#components/[email protected]#less">
<style asset-id="[email protected]#[email protected]#less">
<style asset-id="[email protected]#components/[email protected]#less">

donejs build
donejs start

[matthewp]

Those style tags should only appear in dev mode. Your'e seeing them in prod? That would be a totally different problem... I suspect you started the app without switching on production. NODE_ENV=production donejs start is what you want (if using a *nix OS).

[tracer99]

Riiight. (hangs head in shame).

OK. Back to trying to reproduce.

[matthewp]

Let me know if you get something different from #450 (comment) in prod mode. It's possible there's a race condition that might cause different results on different computers.

[tracer99]

Prod mode was the same as your output.

Have to go back to trying to replicate. It's still an ongoing problem in our app so it's definitely an issue, I just have to figure out what is triggering it.

[matthewp]

Ok, sorry to hear this 😞.

The place to probably poke around is probably this module. The stuff around pages especially. What does that array contain each time applyPages is called?