Bundle all CSS/JS each to a single file

[dim karma]

Curious if there's a better way to get Astro to bundle all CSS/JS into single files per site (i.e. one style.css, one script.js), instead of splitting per page. Right now I'm using cssCodeSplit: false in the config and await Astro.glob('../components/*.astro'); in the main layout front matter, which seems to work pretty well. The main problem I've noticed is that style order while in dev doesn't always match the build. It seems like this happens when an imported component contains another imported component, and that nested component style gets placed before my front matter global style import.

Is there a better way to handle that? Seems like conditionally running the await Astro.glob only for build would work too (removing it appears to keep the correct order in dev), but in my testing it seems like that gets called no matter the conditional/mode. Thanks!

[mystic condor]

Still waiting for an answer?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

[shell thicket]

For js, not easily, astro's pipeline conflicts with vite settings... I haven't had time to dig into it, but if you do please ping me.
For css, I used tailwind and get single build file.

Nothing to do with spas.

[dim karma]

Yeah definitely not a SPA - looking for the build output to be one CSS file, one JS file, and multiple HTML files (one for each page). My current setup does handle all of that with pretty minimal config, so it's just the CSS ordering issue in dev that can be a problem. Seems like @layer can be used to fix this, but that would mean wrapping each Astro style block in @layer component {}. Not a huge deal, but figured someone might know a better way to handle something like this. It's strange to me that the order seems to always be correct when running build though - it's just dev that seems to occasionally rearrange things.

[shell thicket]

For component classes like that, I just use daisy ( build on tw )
When you say ordering, like they're set at different priorities? I'd guess any dev/build differences are due to caches and dup styles... which all get shaken at build

[dim karma]

For the ordering - the files get rearranged in the actual source by Astro - the style tags with data-astro-dev-id. Most of the time it's the global CSS import appearing first (correctly), but it seems like if a component with a nested component gets imported, then those nested components get placed before the global file. So instead of global, a, b, c it might become c, global, a, b in the dev source.

[shell thicket]

For scopes styles, it shouldn't matter since they're always more specific than global

If you use something like tailwind, you don't have to worry about this

[dim karma]

I'm using Astro in a pretty non-standard way - all the CSS use is:global so nothing is really scoped by Astro. The idea is to rely on the normal order/cascade.

[shell thicket]

I think that will be difficult to maintain, having global styles in all your components

[dim karma]

I understand, but it's what's necessary for this specific use case