Fix CSS modules ordering

[bluwy]

Changes

Fix #8558

Fix CSS modules ordering by rendering styles first before links. This is needed because in getStylesForURL, CSS modules are passed as links (importedCssUrls) (CSS module has no ssrModule.default):

astro/packages/astro/src/vite-plugin-astro-server/css.ts

Lines 34 to 46 in 5ea6ee0

	if (
	mode === 'development' && // only inline in development
	typeof ssrModule?.default === 'string' // ignore JS module styles
	) {
	importedStylesMap.set(importedModule.url, {
	id: importedModule.id ?? importedModule.url,
	url: importedModule.url,
	content: ssrModule.default,
	});
	} else {
	// NOTE: We use the `url` property here. `id` would break Windows.
	importedCssUrls.add(importedModule.url);
	}

We then put the CSS module links in links, and the other styles (global styles) in styles.

astro/packages/astro/src/vite-plugin-astro-server/route.ts

Lines 301 to 330 in 5ea6ee0

	let links = new Set<SSRElement>();
	[...styleUrls].forEach((href) => {
	links.add({
	props: {
	rel: 'stylesheet',
	href,
	},
	children: '',
	});
	});
	let styles = new Set<SSRElement>();
	importedStyles.forEach(({ id, url, content }) => {
	// Vite handles HMR for styles injected as scripts
	scripts.add({
	props: {
	type: 'module',
	src: url,
	},
	children: '',
	});
	// But we still want to inject the styles to avoid FOUC. The style tags
	// should emulate what Vite injects so further HMR works as expected.
	styles.add({
	props: {
	'data-vite-dev-id': id,
	},
	children: content,
	});
	});

Ultimately this creates a tricky situation where we shouldn't actually group head elements this way. Scripts/styles/links should all be in a single array but that takes a larger refactor which we could revisit in the future.

---

Also, the content rendering runtime also has styles first before links:

astro/packages/astro/src/content/runtime.ts

Line 316 in 5ea6ee0

unescapeHTML(styles + links + scripts) as any,

---

In most case, non-CSS links could be sorted anywhere though, and I can confirm CSS links are only for CSS modules, so I think this change is harmless. During builds, all CSS are links so there's no ordering issue.

Testing

Added a new integration test.

Docs

n/a. bug fix.

[changeset-bot]

🦋 Changeset detected

Latest commit: 0f289d3

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

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

[sarah11918]

Docs approves changeset!