michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Shorter CSS naming algorithm (#5036)

Browse source 
* 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>
This commit is contained in:
Matthew Phillips 2022-10-10 11:05:28 -04:00 committed by GitHub
parent d7bfb144ba
commit 38fdb4ca6f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/six-oranges-shop.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
New algorithm for shorter CSS bundle names

34
packages/astro/src/core/build/vite-plugin-css.ts
View file

@ -7,7 +7,6 @@ import esbuild from 'esbuild';
import npath from 'path'; import npath from 'path';
import { Plugin as VitePlugin, ResolvedConfig } from 'vite'; import { Plugin as VitePlugin, ResolvedConfig } from 'vite';
import { isCSSRequest } from '../render/util.js'; import { isCSSRequest } from '../render/util.js';
import { relativeToSrcDir } from '../util.js';
import { getTopLevelPages, moduleIsTopLevelPage, walkParentInfos } from './graph.js'; import { getTopLevelPages, moduleIsTopLevelPage, walkParentInfos } from './graph.js';
import { import {
eachPageData, eachPageData,
@ -23,47 +22,24 @@ interface PluginOptions {
target: 'client' | 'server'; target: 'client' | 'server';
} }
// Arbitrary magic number, can change.
const MAX_NAME_LENGTH = 70;
export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] { export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
const { internals, buildOptions } = options; const { internals, buildOptions } = options;
const { settings } = buildOptions; const { settings } = buildOptions;
let resolvedConfig: ResolvedConfig; 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 { function createNameForParentPages(id: string, ctx: { getModuleInfo: GetModuleInfo }): string {
const parents = Array.from(getTopLevelPages(id, ctx)); const parents = Array.from(getTopLevelPages(id, ctx));
const proposedName = parents const firstParentId = parents[0]?.[0].id
.map(([page]) => nameifyPage(page.id)) const firstParentName = firstParentId ? npath.parse(firstParentId).name : 'index'
.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 hash = crypto.createHash('sha256'); const hash = crypto.createHash('sha256');
for (const [page] of parents) { for (const [page] of parents) {
hash.update(page.id, 'utf-8'); 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( function* getParentClientOnlys(