Shorter CSS naming algorithm (#5036)

* Shorter CSS naming algorithm

* Adding a changeset

* Update packages/astro/src/core/build/vite-plugin-css.ts

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>

2 files changed, 10 insertions, 29 deletions

diff --git a/.changeset/six-oranges-shop.md b/.changeset/six-oranges-shop.md
new file mode 100644
index 000000000..7bb52016f
--- /dev/null
+++ b/.changeset/six-oranges-shop.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+New algorithm for shorter CSS bundle names
diff --git a/packages/astro/src/core/build/vite-plugin-css.ts b/packages/astro/src/core/build/vite-plugin-css.ts
index 50c0dba75..5b413dc13 100644
--- a/packages/astro/src/core/build/vite-plugin-css.ts
+++ b/packages/astro/src/core/build/vite-plugin-css.ts
@@ -7,7 +7,6 @@ import esbuild from 'esbuild';
 import npath from 'path';
 import { Plugin as VitePlugin, ResolvedConfig } from 'vite';
 import { isCSSRequest } from '../render/util.js';
-import { relativeToSrcDir } from '../util.js';
 import { getTopLevelPages, moduleIsTopLevelPage, walkParentInfos } from './graph.js';
 import {
 	eachPageData,
@@ -23,47 +22,24 @@ interface PluginOptions {
 	target: 'client' | 'server';
 }
 
-// Arbitrary magic number, can change.
-const MAX_NAME_LENGTH = 70;
-
 export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 	const { internals, buildOptions } = options;
 	const { settings } = 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(settings.config, id);
-		// Remove pages, ex. blog/posts/something.astro
-		if (rel.startsWith('pages/')) {
-			rel = rel.slice(6);
-		}
-		// Remove extension, ex. blog/posts/something
-		const ext = npath.extname(rel);
-		const noext = rel.slice(0, rel.length - ext.length);
-		// Replace slashes with dashes, ex. blog-posts-something
-		const named = noext.replace(/\//g, '-');
-		return named;
-	}
-
 	function createNameForParentPages(id: string, ctx: { getModuleInfo: GetModuleInfo }): string {
 		const parents = Array.from(getTopLevelPages(id, ctx));
-		const proposedName = parents
-			.map(([page]) => nameifyPage(page.id))
-			.sort()
-			.join('-');
-
-		// We don't want absurdedly long chunk names, so if this is too long create a hashed version instead.
-		if (proposedName.length <= MAX_NAME_LENGTH) {
-			return proposedName;
-		}
+		const firstParentId = parents[0]?.[0].id
+		const firstParentName = firstParentId ? npath.parse(firstParentId).name : 'index'
 
 		const hash = crypto.createHash('sha256');
 		for (const [page] of parents) {
 			hash.update(page.id, 'utf-8');
 		}
-		return hash.digest('hex').slice(0, 8);
+		const h = hash.digest('hex').slice(0, 8);
+		const proposedName = firstParentName + '.' + h;
+		return proposedName;
 	}
 
 	function* getParentClientOnlys(