Skip to content

Commit

Permalink
refactor(css build plugin): maps -> records
Browse files Browse the repository at this point in the history
  • Loading branch information
@lilnasy
lilnasy authored May 3, 2023
1 parent 4d2cb94 commit c1f1c80
Showing 1 changed file with 26 additions and 43 deletions.
69 changes: 26 additions & 43 deletions packages/astro/src/core/build/plugins/plugin-css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
let resolvedConfig: ResolvedConfig;

// stylesheet filenames are kept in here until "post", when they are rendered and ready to be inlined
const pagesToCss = new Map<string, Map<string, { order: number; depth: number }>>();
const pagesToPropagatedCss = new Map<string, Map<string, Set<string>>>();
const pagesToCss: Record<string, Record<string, { order: number; depth: number }>> = {}
const pagesToPropagatedCss: Record<string, Record<string, Set<string>>> = {}

const cssBuildPlugin: VitePlugin = {
name: 'astro:rollup-plugin-build-css',
Expand Down Expand Up @@ -88,17 +88,18 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
after(id, meta) {
// For CSS, create a hash of all of the pages that use it.
// This causes CSS to be built into shared chunks when used by multiple pages.
if (isBuildableCSSRequest(id) === false) return;
for (const [pageInfo] of walkParentInfos(id, {
getModuleInfo: meta.getModuleInfo,
})) {
if (new URL(pageInfo.id, 'file://').searchParams.has(PROPAGATED_ASSET_FLAG)) {
// Split delayed assets to separate modules
// so they can be injected where needed
return createNameHash(id, [id]);
if (isBuildableCSSRequest(id)) {
for (const [pageInfo] of walkParentInfos(id, {
getModuleInfo: meta.getModuleInfo,
})) {
if (new URL(pageInfo.id, 'file://').searchParams.has(PROPAGATED_ASSET_FLAG)) {
// Split delayed assets to separate modules
// so they can be injected where needed
return createNameHash(id, [id]);
}
}
return createNameForParentPages(id, meta);
}
return createNameForParentPages(id, meta);
},
});
},
Expand All @@ -109,7 +110,7 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
if ('viteMetadata' in chunk === false) continue;
const meta = chunk.viteMetadata as ViteMetadata;

// Chunks that have the viteMetadata.importedCss are CSS chunks
// Skip if the chunk has no CSS, we want to handle CSS chunks only
if (meta.importedCss.size < 1) continue;

// In the SSR build, keep track of all CSS chunks' modules as the client build may
Expand All @@ -128,13 +129,8 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
for (const id of Object.keys(chunk.modules)) {
for (const pageData of getParentClientOnlys(id, this, internals)) {
for (const importedCssImport of meta.importedCss) {
const cssToInfoMap =
pagesToCss.get(pageData.moduleSpecifier) ??
pagesToCss
.set(pageData.moduleSpecifier, new Map())
.get(pageData.moduleSpecifier)!;

cssToInfoMap.set(importedCssImport, { depth: -1, order: -1 });
const cssToInfoRecord = pagesToCss[pageData.moduleSpecifier] ??= {}
cssToInfoRecord[importedCssImport] = { depth: -1, order: -1 };
}
}
}
Expand All @@ -159,15 +155,8 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
if (pageData === undefined) continue;

for (const css of meta.importedCss) {
const propagatedStyles =
pagesToPropagatedCss.get(pageData.moduleSpecifier) ??
pagesToPropagatedCss
.set(pageData.moduleSpecifier, new Map())
.get(pageData.moduleSpecifier)!;

const existingCss =
propagatedStyles.get(pageInfo.id) ??
propagatedStyles.set(pageInfo.id, new Set()).get(pageInfo.id)!;
const propagatedStyles = pagesToPropagatedCss[pageData.moduleSpecifier] ??= {}
const existingCss = propagatedStyles[pageInfo.id] ??= new Set();

existingCss.add(css);
}
Expand Down Expand Up @@ -205,11 +194,8 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
);
if (cssChunk === undefined) return;
for (const pageData of eachPageData(internals)) {
const cssToInfoMap =
pagesToCss.get(pageData.moduleSpecifier) ??
pagesToCss.set(pageData.moduleSpecifier, new Map()).get(pageData.moduleSpecifier)!;

cssToInfoMap.set(cssChunk.fileName, { depth: -1, order: -1 });
const cssToInfoMap = pagesToCss[pageData.moduleSpecifier]
cssToInfoMap[cssChunk.fileName] = { depth: -1, order: -1 };
}
},
};
Expand Down Expand Up @@ -249,12 +235,12 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
const pages = Array.from(eachPageData(internals));

pages.forEach((pageData) => {
const orderingInfo = pagesToCss.get(pageData.moduleSpecifier)?.get(stylesheet.fileName);
const orderingInfo = pagesToCss[pageData.moduleSpecifier]?.[stylesheet.fileName];
if (orderingInfo !== undefined) return pageData.styles.push({ ...orderingInfo, sheet });

const propagatedPaths = pagesToPropagatedCss.get(pageData.moduleSpecifier);
const propagatedPaths = pagesToPropagatedCss[pageData.moduleSpecifier];
if (propagatedPaths === undefined) return;
Array.from(propagatedPaths.entries()).forEach(([pageInfoId, css]) => {
Object.entries(propagatedPaths).forEach(([pageInfoId, css]) => {
// return early if sheet does not need to be propagated
if (css.has(stylesheet.fileName) !== true) return;

Expand Down Expand Up @@ -306,14 +292,14 @@ type ViteMetadata = {
function appendCSSToPage(
pageData: PageBuildData,
meta: ViteMetadata,
pagesToCss: Map<string, Map<string, { order: number; depth: number }>>,
pagesToCss: Record<string, Record<string, { order: number; depth: number }>>,
depth: number,
order: number
) {
for (const importedCssImport of meta.importedCss) {
// CSS is prioritized based on depth. Shared CSS has a higher depth due to being imported by multiple pages.
// Depth info is used when sorting the links on the page.
const cssInfo = pagesToCss.get(pageData.moduleSpecifier)?.get(importedCssImport);
const cssInfo = pagesToCss[pageData.moduleSpecifier]?.[importedCssImport];
if (cssInfo !== undefined) {
if (depth < cssInfo.depth) {
cssInfo.depth = depth;
Expand All @@ -326,11 +312,8 @@ function appendCSSToPage(
cssInfo.order = order;
}
} else {
const cssToInfoMap =
pagesToCss.get(pageData.moduleSpecifier) ??
pagesToCss.set(pageData.moduleSpecifier, new Map()).get(pageData.moduleSpecifier)!;

cssToInfoMap.set(importedCssImport, { depth, order });
const cssToInfoRecord = pagesToCss[pageData.moduleSpecifier] ??= {};
cssToInfoRecord[importedCssImport] = { depth, order };
}
}
}

0 comments on commit c1f1c80

Please sign in to comment.