diff --git a/packages/astro/src/core/build/css-asset-name.ts b/packages/astro/src/core/build/css-asset-name.ts index 1148cb9aa..225dd12aa 100644 --- a/packages/astro/src/core/build/css-asset-name.ts +++ b/packages/astro/src/core/build/css-asset-name.ts @@ -2,9 +2,9 @@ import type { GetModuleInfo } from 'rollup'; import crypto from 'crypto'; import npath from 'path'; -import { getTopLevelPages } from './graph.js'; import { AstroSettings } from '../../@types/astro'; import { viteID } from '../util.js'; +import { getTopLevelPages } from './graph.js'; // The short name for when the hash can be included // We could get rid of this and only use the createSlugger implementation, but this creates @@ -27,12 +27,12 @@ export function createSlugger(settings: AstroSettings) { const pagesDir = viteID(new URL('./pages', settings.config.srcDir)); const map = new Map>(); const sep = '-'; - return function(id: string, ctx: { getModuleInfo: GetModuleInfo }): string { + return function (id: string, ctx: { getModuleInfo: GetModuleInfo }): string { const parents = Array.from(getTopLevelPages(id, ctx)); const allParentsKey = parents - .map(([page]) => page.id) - .sort() - .join('-'); + .map(([page]) => page.id) + .sort() + .join('-'); const firstParentId = parents[0]?.[0].id || 'index'; // Use the last two segments, for ex /docs/index @@ -40,12 +40,12 @@ export function createSlugger(settings: AstroSettings) { let key = ''; let i = 0; while (i < 2) { - if(dir === pagesDir) { + if (dir === pagesDir) { break; } const name = npath.parse(npath.basename(dir)).name; - key = key.length ? (name + sep + key) : name; + key = key.length ? name + sep + key : name; dir = npath.dirname(dir); i++; } @@ -56,13 +56,13 @@ export function createSlugger(settings: AstroSettings) { // The map keeps track of how many times a key, like `pages_index` is used as the name. // If the same key is used more than once we increment a number so it becomes `pages-index-1`. // This guarantees that it stays unique, without sacrificing pretty names. - if(!map.has(key)) { + if (!map.has(key)) { map.set(key, new Map([[allParentsKey, 0]])); } else { const inner = map.get(key)!; - if(inner.has(allParentsKey)) { + if (inner.has(allParentsKey)) { const num = inner.get(allParentsKey)!; - if(num > 0) { + if (num > 0) { name = name + sep + num; } } else { @@ -71,7 +71,7 @@ export function createSlugger(settings: AstroSettings) { name = name + sep + num; } } - + return name; }; } diff --git a/packages/astro/src/core/build/vite-plugin-css.ts b/packages/astro/src/core/build/vite-plugin-css.ts index 881870f88..eb4f6f3ac 100644 --- a/packages/astro/src/core/build/vite-plugin-css.ts +++ b/packages/astro/src/core/build/vite-plugin-css.ts @@ -6,6 +6,7 @@ import esbuild from 'esbuild'; import { Plugin as VitePlugin, ResolvedConfig } from 'vite'; import { isCSSRequest } from '../render/util.js'; +import * as assetName from './css-asset-name.js'; import { moduleIsTopLevelPage, walkParentInfos } from './graph.js'; import { eachPageData, @@ -14,7 +15,6 @@ import { getPageDatasByHoistedScriptId, isHoistedScript, } from './internal.js'; -import * as assetName from './css-asset-name.js'; interface PluginOptions { internals: BuildInternals; @@ -45,7 +45,9 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] const manualChunks = outputOptions.manualChunks || Function.prototype; const assetFileNames = outputOptions.assetFileNames; const namingIncludesHash = assetFileNames?.toString().includes('[hash]'); - const createNameForParentPages = namingIncludesHash ? assetName.shortHashedName : assetName.createSlugger(settings); + const createNameForParentPages = namingIncludesHash + ? assetName.shortHashedName + : assetName.createSlugger(settings); outputOptions.manualChunks = function (id, ...args) { // Defer to user-provided `manualChunks`, if it was provided. if (typeof manualChunks == 'object') { diff --git a/packages/astro/test/astro-css-bundling.test.js b/packages/astro/test/astro-css-bundling.test.js index ec80e75dc..a039a94d4 100644 --- a/packages/astro/test/astro-css-bundling.test.js +++ b/packages/astro/test/astro-css-bundling.test.js @@ -29,15 +29,15 @@ describe('CSS Bundling', function () { }); await fixture.build({ mode: 'production' }); }); - + it('Bundles CSS', async () => { const builtCSS = new Set(); - + // for all HTML files… for (const [filepath, css] of Object.entries(EXPECTED_CSS)) { const html = await fixture.readFile(filepath); const $ = cheerio.load(html); - + // test 1: assert new bundled CSS is present for (const href of css) { const link = $(`link[rel="stylesheet"][href^="${href}"]`); @@ -45,13 +45,13 @@ describe('CSS Bundling', function () { const outHref = link.attr('href'); builtCSS.add(outHref.startsWith('../') ? outHref.slice(2) : outHref); } - + // test 2: assert old CSS was removed for (const href of UNEXPECTED_CSS) { const link = $(`link[rel="stylesheet"][href="${href}"]`); expect(link).to.have.lengthOf(0); } - + // test 3: assert all bundled CSS was built and contains CSS for (const url of builtCSS.keys()) { const bundledCss = await fixture.readFile(url); @@ -80,12 +80,12 @@ describe('CSS Bundling', function () { build: { rollupOptions: { output: { - assetFileNames: "assets/[name][extname]", - entryFileNames: "[name].js", - } - } - } - } + assetFileNames: 'assets/[name][extname]', + entryFileNames: '[name].js', + }, + }, + }, + }, }); await fixture.build({ mode: 'production' }); }); @@ -102,7 +102,7 @@ describe('CSS Bundling', function () { it('there are 2 index named CSS files', async () => { const dir = await fixture.readdir('/assets'); - const indexNamedFiles = dir.filter(name => name.startsWith('index')) + const indexNamedFiles = dir.filter((name) => name.startsWith('index')); expect(indexNamedFiles).to.have.a.lengthOf(2); }); });