add inlineStylesheets configuration

withastro · Mar 28, 2023 · 350446c · 350446c
1 parent 2df24e9
commit 350446c
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 2 deletions.
diff --git a/.changeset/friendly-fishes-sing.md b/.changeset/friendly-fishes-sing.md
@@ -0,0 +1,5 @@
+---
+'astro': minor
+---
+
+add a configuration option (build.inlineStylsheets) to let the user include small stylsheets in the html
diff --git a/packages/astro/src/core/build/generate.ts b/packages/astro/src/core/build/generate.ts
@@ -31,7 +31,11 @@ import { AstroError } from '../errors/index.js';
 import { debug, info } from '../logger/core.js';
 import { createEnvironment, createRenderContext, renderPage } from '../render/index.js';
 import { callGetStaticPaths } from '../render/route-cache.js';
-import { createLinkStylesheetElementSet, createModuleScriptsSet } from '../render/ssr-element.js';
+import {
+	createLinkStylesheetElementSet,
+	createInlineStylesheetSet,
+	createModuleScriptsSet,
+} from '../render/ssr-element.js';
 import { createRequest } from '../request.js';
 import { matchRoute } from '../routing/match.js';
 import { getOutputFilename } from '../util.js';
@@ -155,6 +159,7 @@ async function generatePage(
 	const pageInfo = getPageDataByComponent(internals, pageData.route.component);
 	const linkIds: string[] = sortedCSS(pageData);
 	const scripts = pageInfo?.hoistedScript ?? null;
+	const styles = pageInfo?.inlineStyles ?? null;
 
 	const pageModule = ssrEntry.pageMap?.get(pageData.component);
 
@@ -174,6 +179,7 @@ async function generatePage(
 		internals,
 		linkIds,
 		scripts,
+		styles,
 		mod: pageModule,
 		renderers,
 	};
@@ -264,6 +270,7 @@ interface GeneratePathOptions {
 	internals: BuildInternals;
 	linkIds: string[];
 	scripts: { type: 'inline' | 'external'; value: string } | null;
+	styles: Set<string> | null;
 	mod: ComponentInstance;
 	renderers: SSRLoadedRenderer[];
 }
@@ -331,7 +338,15 @@ async function generatePath(
 	gopts: GeneratePathOptions
 ) {
 	const { settings, logging, origin, routeCache } = opts;
-	const { mod, internals, linkIds, scripts: hoistedScripts, pageData, renderers } = gopts;
+	const {
+		mod,
+		internals,
+		linkIds,
+		scripts: hoistedScripts,
+		styles: _styles,
+		pageData,
+		renderers,
+	} = gopts;
 
 	// This adds the page name to the array so it can be shown as part of stats.
 	if (pageData.route.type === 'page') {
@@ -345,6 +360,7 @@ async function generatePath(
 		hoistedScripts ? [hoistedScripts] : [],
 		settings.config.base
 	);
+	const styles = createInlineStylesheetSet(_styles ? _styles : new Set());
 
 	if (settings.scripts.some((script) => script.stage === 'page')) {
 		const hashedFilePath = internals.entrySpecifierToBundleMap.get(PAGE_SCRIPT_ID);
@@ -407,6 +423,7 @@ async function generatePath(
 		request: createRequest({ url, headers: new Headers(), logging, ssr }),
 		componentMetadata: internals.componentMetadata,
 		scripts,
+		styles,
 		links,
 		route: pageData.route,
 	});

diff --git a/packages/astro/src/core/build/page-data.ts b/packages/astro/src/core/build/page-data.ts
@@ -57,6 +57,7 @@ export async function collectPagesData(
 				propagatedStyles: new Map(),
 				propagatedScripts: new Map(),
 				hoistedScript: undefined,
+				inlineStyles: new Set(),
 			};
 
 			clearInterval(routeCollectionLogTimeout);
@@ -80,6 +81,7 @@ export async function collectPagesData(
 			propagatedStyles: new Map(),
 			propagatedScripts: new Map(),
 			hoistedScript: undefined,
+			inlineStyles: new Set(),
 		};
 	}
 

diff --git a/packages/astro/src/core/build/plugins/plugin-css.ts b/packages/astro/src/core/build/plugins/plugin-css.ts
@@ -262,6 +262,30 @@ export function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[]
 				}
 			},
 		},
+		{
+			name: 'astro:rollup-plugin-inline-stylesheets',
+			// enforce: 'post',
+			async generateBundle(_outputOptions, bundle) {
+				if (settings.config.build.inlineStylesheets !== true) return;
+				const assetInlineLimit = settings.config.vite?.build?.assetsInlineLimit ?? 4096;
+				for (const [id, stylesheet] of Object.entries(bundle)) {
+					if (
+						stylesheet.type === 'asset' &&
+						stylesheet.name?.endsWith('.css') &&
+						typeof stylesheet.source === 'string' &&
+						Buffer.byteLength(stylesheet.source) <= assetInlineLimit
+					) {
+						for (const pageData of eachPageData(internals)) {
+							if (pageData.css.has(stylesheet.fileName)) {
+								pageData.inlineStyles.add(stylesheet.source);
+								pageData.css.delete(stylesheet.fileName);
+								delete bundle[id];
+							}
+						}
+					}
+				}
+			},
+		},
 	];
 }
 

diff --git a/packages/astro/src/core/build/types.ts b/packages/astro/src/core/build/types.ts
@@ -24,6 +24,7 @@ export interface PageBuildData {
 	propagatedStyles: Map<string, Set<string>>;
 	propagatedScripts: Map<string, Set<string>>;
 	hoistedScript: { type: 'inline' | 'external'; value: string } | undefined;
+	inlineStyles: Set<string>;
 }
 export type AllPagesData = Record<ComponentPath, PageBuildData>;
 

diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts
@@ -21,6 +21,7 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = {
 		server: './dist/server/',
 		assets: '_astro',
 		serverEntry: 'entry.mjs',
+		inlineStylesheets: false,
 	},
 	server: {
 		host: false,
@@ -98,6 +99,10 @@ export const AstroConfigSchema = z.object({
 				.transform((val) => new URL(val)),
 			assets: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.assets),
 			serverEntry: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.serverEntry),
+			inlineStylesheets: z
+				.boolean()
+				.optional()
+				.default(ASTRO_CONFIG_DEFAULTS.build.inlineStylesheets),
 		})
 		.optional()
 		.default({}),
@@ -223,6 +228,10 @@ export function createRelativeSchema(cmd: string, fileProtocolRoot: URL) {
 					.transform((val) => new URL(val, fileProtocolRoot)),
 				assets: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.assets),
 				serverEntry: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.serverEntry),
+				inlineStylesheets: z
+					.boolean()
+					.optional()
+					.default(ASTRO_CONFIG_DEFAULTS.build.inlineStylesheets),
 			})
 			.optional()
 			.default({}),

diff --git a/packages/astro/src/core/render/ssr-element.ts b/packages/astro/src/core/render/ssr-element.ts
@@ -26,6 +26,19 @@ export function createLinkStylesheetElementSet(hrefs: string[], base?: string) {
 	return new Set<SSRElement>(hrefs.map((href) => createLinkStylesheetElement(href, base)));
 }
 
+export function createInlineStylesheet(text: string): SSRElement {
+	return {
+		props: {
+			type: 'text/css',
+		},
+		children: text,
+	};
+}
+
+export function createInlineStylesheetSet(texts: Set<string>) {
+	return new Set([...texts].map(createInlineStylesheet));
+}
+
 export function createModuleScriptElement(
 	script: { type: 'inline' | 'external'; value: string },
 	base?: string