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

withastro · Aug 25, 2022 · aa55593 · aa55593
1 parent 1d9d72e
commit aa55593
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 8 deletions.
diff --git a/.changeset/sour-avocados-exercise.md 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
@@ -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);
@@ -150,6 +152,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',

diff --git a/packages/astro/test/css-no-code-split.test.js 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
@@ -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
@@ -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
@@ -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