Stabilize inline stylesheets (#7180)

* changeset * chore(inline stylesheets config): stabilize * grammar * not a major change * Update inlineStylesheets version in the configuration reference Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> --------- Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
2024-12-16 21:46:22 -05:00 · 2023-06-05 19:58:29 +05:30 · 2023-06-05 19:58:29 +05:30 · e3b8c62969
commit e3b8c62969
parent eb459577f0
5 changed files with 61 additions and 34 deletions
--- a/.changeset/stupid-pumpkins-perform.md
+++ b/.changeset/stupid-pumpkins-perform.md
@ -0,0 +1,24 @@
+---
+'astro': minor
+---
+
+The Inline Stylesheets RFC is now stable!
+
+You can now control how Astro bundles your css with a configuration change:
+
+```ts
+export default defineConfig({
+    ...
+    build: {
+        inlineStylesheets: "auto"
+    }
+    ...
+})
+```
+
+The options:
+- `inlineStylesheets: "never"`: This is the behavior you are familiar with. Every stylesheet is external, and added to the page via a `<link>` tag. Default.
+- `inlineStylesheets: "auto"`: Small stylesheets are inlined into `<style>` tags and inserted into `<head>`, while larger ones remain external.
+- `inlineStylesheets: "always"`: Every style required by the page is inlined.
+
+As always, css files in the `public` folder are not affected.
--- a/packages/astro/src/@types/astro.ts
+++ b/packages/astro/src/@types/astro.ts
@ -802,6 +802,27 @@ export interface AstroUserConfig {
 		 * ```
 		 */
 		redirects?: boolean;
+		/**
+		 * @docs
+		 * @name build.inlineStylesheets
+		 * @type {('always' | 'auto' | 'never')}
+		 * @default `never`
+		 * @version 2.6.0
+		 * @description
+		 * Control whether styles are sent to the browser in a separate css file or inlined into `<style>` tags. Choose from the following options:
+		 *  - `'always'` - all styles are inlined into `<style>` tags
+		 *  - `'auto'` - only stylesheets smaller than `ViteConfig.build.assetsInlineLimit` (default: 4kb) are inlined. Otherwise, styles are sent in external stylesheets.
+		 *  - `'never'` - all styles are sent in external stylesheets
+		 *
+		 * ```js
+		 * {
+		 * 	build: {
+		 *		inlineStylesheets: `auto`,
+		 * 	},
+		 * }
+		 * ```
+		 */
+		 inlineStylesheets?: 'always' | 'auto' | 'never';
 	};

 	/**
@ -1146,28 +1167,6 @@ export interface AstroUserConfig {
 		 */
 		assets?: boolean;

-		/**
-		 * @docs
-		 * @name experimental.inlineStylesheets
-		 * @type {('always' | 'auto' | 'never')}
-		 * @default `never`
-		 * @version 2.4.0
-		 * @description
-		 * Control whether styles are sent to the browser in a separate css file or inlined into `<style>` tags. Choose from the following options:
-		 *  - `'always'` - all styles are inlined into `<style>` tags
-		 *  - `'auto'` - only stylesheets smaller than `ViteConfig.build.assetsInlineLimit` (default: 4kb) are inlined. Otherwise, styles are sent in external stylesheets.
-		 *  - `'never'` - all styles are sent in external stylesheets
-		 *
-		 * ```js
-		 * {
-		 * 	experimental: {
-		 *		inlineStylesheets: `auto`,
-		 * 	},
-		 * }
-		 * ```
-		 */
-		inlineStylesheets?: 'always' | 'auto' | 'never';
-
 		/**
 		 * @docs
 		 * @name experimental.customClientDirectives
--- a/packages/astro/src/core/build/plugins/plugin-css.ts
+++ b/packages/astro/src/core/build/plugins/plugin-css.ts
@ -197,7 +197,7 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 		name: 'astro:rollup-plugin-inline-stylesheets',
 		enforce: 'post',
 		async generateBundle(_outputOptions, bundle) {
-			const inlineConfig = settings.config.experimental.inlineStylesheets;
+			const inlineConfig = settings.config.build.inlineStylesheets;
 			const { assetsInlineLimit = 4096 } = settings.config.vite?.build ?? {};

 			Object.entries(bundle).forEach(([id, stylesheet]) => {
--- a/packages/astro/src/core/config/schema.ts
+++ b/packages/astro/src/core/config/schema.ts
@ -23,6 +23,7 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = {
 		assets: '_astro',
 		serverEntry: 'entry.mjs',
 		redirects: true,
+		inlineStylesheets: 'never',
 	},
 	compressHTML: false,
 	server: {
@ -43,7 +44,6 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = {
 		assets: false,
 		hybridOutput: false,
 		customClientDirectives: false,
-		inlineStylesheets: 'never',
 		middleware: false,
 		redirects: false,
 	},
@ -119,6 +119,10 @@ export const AstroConfigSchema = z.object({
 			assetsPrefix: z.string().optional(),
 			serverEntry: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.serverEntry),
 			redirects: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.build.redirects),
+			inlineStylesheets: z
+				.enum(['always', 'auto', 'never'])
+				.optional()
+				.default(ASTRO_CONFIG_DEFAULTS.build.inlineStylesheets),
 		})
 		.optional()
 		.default({}),
@ -208,10 +212,6 @@ export const AstroConfigSchema = z.object({
 				.boolean()
 				.optional()
 				.default(ASTRO_CONFIG_DEFAULTS.experimental.customClientDirecives),
-			inlineStylesheets: z
-				.enum(['always', 'auto', 'never'])
-				.optional()
-				.default(ASTRO_CONFIG_DEFAULTS.experimental.inlineStylesheets),
 			middleware: z.oboolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.middleware),
 			hybridOutput: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.hybridOutput),
 			redirects: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.redirects),
@ -284,6 +284,10 @@ export function createRelativeSchema(cmd: string, fileProtocolRoot: URL) {
 				assetsPrefix: z.string().optional(),
 				serverEntry: z.string().optional().default(ASTRO_CONFIG_DEFAULTS.build.serverEntry),
 				redirects: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.build.redirects),
+				inlineStylesheets: z
+					.enum(['always', 'auto', 'never'])
+					.optional()
+					.default(ASTRO_CONFIG_DEFAULTS.build.inlineStylesheets),
 			})
 			.optional()
 			.default({}),
--- a/packages/astro/test/css-inline-stylesheets.test.js
+++ b/packages/astro/test/css-inline-stylesheets.test.js
@ -10,7 +10,7 @@ describe('Setting inlineStylesheets to never in static output', () => {
 		fixture = await loadFixture({
 			root: './fixtures/css-inline-stylesheets/never/',
 			output: 'static',
-			experimental: {
+			build: {
 				inlineStylesheets: 'never',
 			},
 		});
@ -44,7 +44,7 @@ describe('Setting inlineStylesheets to never in server output', () => {
 			root: './fixtures/css-inline-stylesheets/never/',
 			output: 'server',
 			adapter: testAdapter(),
-			experimental: {
+			build: {
 				inlineStylesheets: 'never',
 			},
 		});
@ -79,7 +79,7 @@ describe('Setting inlineStylesheets to auto in static output', () => {
 		fixture = await loadFixture({
 			root: './fixtures/css-inline-stylesheets/auto/',
 			output: 'static',
-			experimental: {
+			build: {
 				inlineStylesheets: 'auto',
 			},
 			vite: {
@ -120,7 +120,7 @@ describe('Setting inlineStylesheets to auto in server output', () => {
 			root: './fixtures/css-inline-stylesheets/auto/',
 			output: 'server',
 			adapter: testAdapter(),
-			experimental: {
+			build: {
 				inlineStylesheets: 'auto',
 			},
 			vite: {
@ -163,7 +163,7 @@ describe('Setting inlineStylesheets to always in static output', () => {
 		fixture = await loadFixture({
 			root: './fixtures/css-inline-stylesheets/always/',
 			output: 'static',
-			experimental: {
+			build: {
 				inlineStylesheets: 'always',
 			},
 		});
@ -196,7 +196,7 @@ describe('Setting inlineStylesheets to always in server output', () => {
 			root: './fixtures/css-inline-stylesheets/always/',
 			output: 'server',
 			adapter: testAdapter(),
-			experimental: {
+			build: {
 				inlineStylesheets: 'always',
 			},
 		});