Support `vite.build.cssCodeSplit: false` option (#4458)

7 files changed, 98 insertions, 8 deletions

diff --git a/.changeset/sour-avocados-exercise.md b/.changeset/sour-avocados-exercise.md
new file mode 100644
index 000000000..0e625b23e
--- /dev/null
+++ b/.changeset/sour-avocados-exercise.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Support `vite.build.cssCodeSplit: false` option
diff --git a/packages/astro/src/core/build/vite-plugin-css.ts b/packages/astro/src/core/build/vite-plugin-css.ts
index aa76f6060..8dabd8ce3 100644
--- a/packages/astro/src/core/build/vite-plugin-css.ts
+++ b/packages/astro/src/core/build/vite-plugin-css.ts
@@ -6,11 +6,11 @@ import type { PageBuildData, StaticBuildOptions } from './types';
 import crypto from 'crypto';
 import esbuild from 'esbuild';
 import npath from 'path';
-import { Plugin as VitePlugin } from 'vite';
+import { Plugin as VitePlugin, ResolvedConfig } from 'vite';
 import { isCSSRequest } from '../render/util.js';
 import { relativeToSrcDir } from '../util.js';
 import { getTopLevelPages, walkParentInfos } from './graph.js';
-import { getPageDataByViteID, getPageDatasByClientOnlyID } from './internal.js';
+import { getPageDataByViteID, getPageDatasByClientOnlyID, eachPageData } from './internal.js';
 
 interface PluginOptions {
 	internals: BuildInternals;
@@ -26,6 +26,8 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[]
 	const { internals, buildOptions } = options;
 	const { astroConfig } = buildOptions;
 
+	let resolvedConfig: ResolvedConfig;
+
 	// Turn a page location into a name to be used for the CSS file.
 	function nameifyPage(id: string) {
 		let rel = relativeToSrcDir(astroConfig, id);
@@ -151,6 +153,28 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[]
 			},
 		},
 		{
+			name: 'astro:rollup-plugin-single-css',
+			enforce: 'post',
+			configResolved(config) {
+				resolvedConfig = config;
+			},
+			generateBundle(_, bundle) {
+				// If user disable css code-splitting, search for Vite's hardcoded
+				// `style.css` and add it as css for each page.
+				// Ref: https://github.com/vitejs/vite/blob/b2c0ee04d4db4a0ef5a084c50f49782c5f88587c/packages/vite/src/node/plugins/html.ts#L690-L705
+				if (!resolvedConfig.build.cssCodeSplit) {
+					const cssChunk = Object.values(bundle).find(
+						(chunk) => chunk.type === 'asset' && chunk.name === 'style.css'
+					);
+					if (cssChunk) {
+						for (const pageData of eachPageData(internals)) {
+							pageData.css.set(cssChunk.fileName, { depth: -1 });
+						}
+					}
+				}
+			},
+		},
+		{
 			name: 'astro:rollup-plugin-build-css-minify',
 			enforce: 'post',
 			async generateBundle(_outputOptions, bundle) {
diff --git a/packages/astro/test/css-no-code-split.test.js b/packages/astro/test/css-no-code-split.test.js
new file mode 100644
index 000000000..c10a9afdd
--- /dev/null
+++ b/packages/astro/test/css-no-code-split.test.js
@@ -0,0 +1,20 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('vite.build.cssCodeSplit: false', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({ root: './fixtures/css-no-code-split/' });
+		await fixture.build();
+	});
+
+	it('loads styles correctly', async () => {
+		let html = await fixture.readFile('/index.html');
+		let $ = cheerio.load(html);
+		const cssHref = $('link[rel=stylesheet][href^=/assets/]').attr('href');
+		expect(cssHref).to.match(/\/assets\/style\..*?\.css/);
+	});
+});
diff --git a/packages/astro/test/fixtures/css-no-code-split/astro.config.mjs b/packages/astro/test/fixtures/css-no-code-split/astro.config.mjs
new file mode 100644
index 000000000..a0a606100
--- /dev/null
+++ b/packages/astro/test/fixtures/css-no-code-split/astro.config.mjs
@@ -0,0 +1,11 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+    vite: {
+        build: {
+            cssCodeSplit: false,
+        },
+    },
+});
+
diff --git a/packages/astro/test/fixtures/css-no-code-split/package.json b/packages/astro/test/fixtures/css-no-code-split/package.json
new file mode 100644
index 000000000..4101e5d18
--- /dev/null
+++ b/packages/astro/test/fixtures/css-no-code-split/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@test/css-no-code-split",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/css-no-code-split/src/pages/index.astro b/packages/astro/test/fixtures/css-no-code-split/src/pages/index.astro
new file mode 100644
index 000000000..1e72f6ba4
--- /dev/null
+++ b/packages/astro/test/fixtures/css-no-code-split/src/pages/index.astro
@@ -0,0 +1,13 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <h1>css no code split</h1>
+    <style>
+      h1 {
+        color: red;
+      }
+    </style>
+  </body>
+</html>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a3fa9346e..29e613c5c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -361,7 +361,7 @@ importers:
       autoprefixer: 10.4.8_postcss@8.4.16
       canvas-confetti: 1.5.1
       postcss: 8.4.16
-      tailwindcss: 3.1.8
+      tailwindcss: 3.1.8_postcss@8.4.16
 
   examples/with-vite-plugin-pwa:
     specifiers:
@@ -370,7 +370,7 @@ importers:
       workbox-window: ^6.5.3
     devDependencies:
       astro: link:../../packages/astro
-      vite-plugin-pwa: 0.11.11
+      vite-plugin-pwa: 0.11.11_workbox-window@6.5.4
       workbox-window: 6.5.4
 
   examples/with-vitest:
@@ -1469,6 +1469,12 @@ importers:
   packages/astro/test/fixtures/css-assets/packages/font-awesome:
     specifiers: {}
 
+  packages/astro/test/fixtures/css-no-code-split:
+    specifiers:
+      astro: workspace:*
+    dependencies:
+      astro: link:../../..
+
   packages/astro/test/fixtures/css-order:
     specifiers:
       astro: workspace:*
@@ -2045,7 +2051,7 @@ importers:
       astro: link:../../..
       autoprefixer: 10.4.8_postcss@8.4.16
       postcss: 8.4.16
-      tailwindcss: 3.1.8
+      tailwindcss: 3.1.8_postcss@8.4.16
 
   packages/astro/test/fixtures/type-imports:
     specifiers:
@@ -2584,7 +2590,7 @@ importers:
       '@proload/core': 0.3.2
       autoprefixer: 10.4.8_postcss@8.4.16
       postcss: 8.4.16
-      tailwindcss: 3.1.8
+      tailwindcss: 3.1.8_postcss@8.4.16
     devDependencies:
       astro: link:../../astro
       astro-scripts: link:../../../scripts
@@ -15959,10 +15965,12 @@ packages:
       tslib: 2.4.0
     dev: true
 
-  /tailwindcss/3.1.8:
+  /tailwindcss/3.1.8_postcss@8.4.16:
     resolution: {integrity: sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==}
     engines: {node: '>=12.13.0'}
     hasBin: true
+    peerDependencies:
+      postcss: ^8.0.9
     dependencies:
       arg: 5.0.2
       chokidar: 3.5.3
@@ -16712,10 +16720,11 @@ packages:
       magic-string: 0.26.2
     dev: true
 
-  /vite-plugin-pwa/0.11.11:
+  /vite-plugin-pwa/0.11.11_workbox-window@6.5.4:
     resolution: {integrity: sha512-/nSLS7VfGN5UrL4a1ALGEQAyga/H0hYZjEkwPehiEFW1PM1DTi1A8GkPCsmevKwR6vt10P+5wS1wrvSgwQemzw==}
     peerDependencies:
       vite: ^2.0.0
+      workbox-window: ^6.4.0
     peerDependenciesMeta:
       vite:
         optional: true