mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
Consistent file hashes (#11628)
* Fix css plugin having inconsistent builds in different environments Astro's css plugin generates chunk ids that include a hash of all of the chunk's parent ids. These ids are currently the absolute file paths of the parent files. The generated chunk ids are then inserted into those pages as import statements. Because these import statements include a hash based on these absolute file paths, this causes rollup to generate different hashes for those pages when a build is run in different environments. The exact same project will produce identical assets with different filenames when built on different machines, or when built from different directories on the same machine, etc. To fix this, I've stripped out the working directory of these file paths before they are added to the hash. This means that the hash will still change if the files referencing it chacnge (which I believe is the intended behavior), but will be stable if the entire project is built in different environments. * add changeset * fixup! use settings.config.root and vite's normalizePath I've chosen to update the function signature of shortHashedName to match createSlugger's, so it now accepts the settings object and returns the actual hashing function. This way, createSlugger's function signature doesn't need to update to needlessly accept an additional argument. * fixup! remove unused import * Update .changeset/young-pillows-shave.md Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com> * fixup! use fileURLtoPath --------- Co-authored-by: Matt Lee <mdlee.md@gmail.com> Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
This commit is contained in:
parent
ca45fd93c1
commit
9aaf58c133
3 changed files with 30 additions and 10 deletions
5
.changeset/young-pillows-shave.md
Normal file
5
.changeset/young-pillows-shave.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'astro': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Ensures consistent CSS chunk hashes across different environments
|
|
@ -2,6 +2,8 @@ import type { GetModuleInfo, ModuleInfo } from 'rollup';
|
||||||
|
|
||||||
import crypto from 'node:crypto';
|
import crypto from 'node:crypto';
|
||||||
import npath from 'node:path';
|
import npath from 'node:path';
|
||||||
|
import { fileURLToPath } from 'node:url';
|
||||||
|
import { normalizePath } from 'vite';
|
||||||
import type { AstroSettings } from '../../@types/astro.js';
|
import type { AstroSettings } from '../../@types/astro.js';
|
||||||
import { viteID } from '../util.js';
|
import { viteID } from '../util.js';
|
||||||
import { getTopLevelPageModuleInfos } from './graph.js';
|
import { getTopLevelPageModuleInfos } from './graph.js';
|
||||||
|
@ -13,19 +15,32 @@ const confusingBaseNames = ['404', '500'];
|
||||||
// The short name for when the hash can be included
|
// 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
|
// We could get rid of this and only use the createSlugger implementation, but this creates
|
||||||
// slightly prettier names.
|
// slightly prettier names.
|
||||||
export function shortHashedName(id: string, ctx: { getModuleInfo: GetModuleInfo }): string {
|
export function shortHashedName(settings: AstroSettings) {
|
||||||
|
return function (id: string, ctx: { getModuleInfo: GetModuleInfo }): string {
|
||||||
const parents = getTopLevelPageModuleInfos(id, ctx);
|
const parents = getTopLevelPageModuleInfos(id, ctx);
|
||||||
return createNameHash(
|
return createNameHash(
|
||||||
getFirstParentId(parents),
|
getFirstParentId(parents),
|
||||||
parents.map((page) => page.id)
|
parents.map((page) => page.id),
|
||||||
|
settings
|
||||||
);
|
);
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export function createNameHash(baseId: string | undefined, hashIds: string[]): string {
|
export function createNameHash(
|
||||||
|
baseId: string | undefined,
|
||||||
|
hashIds: string[],
|
||||||
|
settings: AstroSettings
|
||||||
|
): string {
|
||||||
const baseName = baseId ? prettifyBaseName(npath.parse(baseId).name) : 'index';
|
const baseName = baseId ? prettifyBaseName(npath.parse(baseId).name) : 'index';
|
||||||
const hash = crypto.createHash('sha256');
|
const hash = crypto.createHash('sha256');
|
||||||
|
const root = fileURLToPath(settings.config.root);
|
||||||
|
|
||||||
for (const id of hashIds) {
|
for (const id of hashIds) {
|
||||||
hash.update(id, 'utf-8');
|
// Strip the project directory from the paths before they are hashed, so that assets
|
||||||
|
// that import these css files have consistent hashes when built in different environments.
|
||||||
|
const relativePath = npath.relative(root, id);
|
||||||
|
// Normalize the path to fix differences between windows and other environments
|
||||||
|
hash.update(normalizePath(relativePath), 'utf-8');
|
||||||
}
|
}
|
||||||
const h = hash.digest('hex').slice(0, 8);
|
const h = hash.digest('hex').slice(0, 8);
|
||||||
const proposedName = baseName + '.' + h;
|
const proposedName = baseName + '.' + h;
|
||||||
|
|
|
@ -70,7 +70,7 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
|
||||||
const assetFileNames = outputOptions.assetFileNames;
|
const assetFileNames = outputOptions.assetFileNames;
|
||||||
const namingIncludesHash = assetFileNames?.toString().includes('[hash]');
|
const namingIncludesHash = assetFileNames?.toString().includes('[hash]');
|
||||||
const createNameForParentPages = namingIncludesHash
|
const createNameForParentPages = namingIncludesHash
|
||||||
? assetName.shortHashedName
|
? assetName.shortHashedName(settings)
|
||||||
: assetName.createSlugger(settings);
|
: assetName.createSlugger(settings);
|
||||||
|
|
||||||
extendManualChunks(outputOptions, {
|
extendManualChunks(outputOptions, {
|
||||||
|
@ -94,7 +94,7 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
|
||||||
if (hasAssetPropagationFlag(pageInfo.id)) {
|
if (hasAssetPropagationFlag(pageInfo.id)) {
|
||||||
// Split delayed assets to separate modules
|
// Split delayed assets to separate modules
|
||||||
// so they can be injected where needed
|
// so they can be injected where needed
|
||||||
const chunkId = assetName.createNameHash(id, [id]);
|
const chunkId = assetName.createNameHash(id, [id], settings);
|
||||||
internals.cssModuleToChunkIdMap.set(id, chunkId);
|
internals.cssModuleToChunkIdMap.set(id, chunkId);
|
||||||
return chunkId;
|
return chunkId;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue