Use import order to sort CSS in prod

[matthewp]

Changes

• Order CSS sorting algorithm now uses import order to determine the order that CSS is injected into the page. That means that if you have something like:

---
import './one.css';
import './two.css';
---

And these end up in separate bundles, the bundle that one.css is within will be in the first link tag and two.css in the second. This means you can control CSS ordering by controlling your own import ordering.

• This consequentially fixes Tailwind core/reset file added after other css files in astro build #4614 because integrations using injectScript are prepended.

Testing

• Test added to mirror Tailwind integration scenario.

Docs

N/A, bug fix.

[changeset-bot]

🦋 Changeset detected

Latest commit: d4dcfde

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
astro	Patch
@e2e/astro-component	Patch
@e2e/error-cyclic	Patch
@e2e/error-react-spectrum	Patch
@e2e/error-sass	Patch
@e2e/errors	Patch
@e2e/hydration-race	Patch
@e2e/lit-component	Patch
@e2e/preact-component	Patch
@e2e/react-component	Patch
@e2e/solid-component	Patch
@e2e/solid-recurse	Patch
@e2e/svelte-component	Patch
@e2e/e2e-tailwindcss	Patch
@e2e/ts-resolution	Patch
@e2e/third-party-astro	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[natemoo-re]

LGTM but there will still be an inconsistency in dev, is that correct?

[matthewp]

This should match dev more closely since now it orders them by source order, which is what dev does too:

astro/packages/astro/src/core/render/dev/vite.ts

Line 42 in 56e225b

for (const importedModule of entry.importedModules) {

[natemoo-re]

Awesome, just wanted to check!