Switch build.inlineStylesheets default to auto (#8118)

* switch inlineStylesheets default

* use previous default for astro/test

* use previous default for content-collections-render.test.js

* integrations: node, deno, mdx, markdown

* typedocs: switch inlineStylesheets default

* Update example to show non-default

* add changeset

* reword changeset

---------

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

.changeset/smart-numbers-shout.md

@@ -0,0 +1,19 @@
+---
+'astro': patch
+---
+
+Astro is smarter about CSS! Small stylesheets are now inlined by default, and no longer incur the cost of additional requests to your server. Your visitors will have to wait less before they see your pages, especially those in remote locations or in a subway.
+
+This may not be news to you if you had opted-in via the `build.inlineStylesheets` configuration. Stabilized in Astro 2.6 and set to "auto" by default for Starlight, this configuration allows you to reduce the number of requests for stylesheets by inlining them into <style> tags. The new default is "auto", which selects assets smaller than 4kB and includes them in the initial response.
+
+To go back to the previous default behavior, change `build.inlineStylesheets` to "never".
+
+```ts
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+	build: {
+		inlineStylesheets: 'never',
+	},
+});
+```

packages/astro/src/@types/astro.ts

@@ -836,7 +836,7 @@ export interface AstroUserConfig {
 		 * @docs
 		 * @name build.inlineStylesheets
 		 * @type {('always' | 'auto' | 'never')}
-		 * @default `never`
+		 * @default `auto`
 		 * @version 2.6.0
 		 * @description
 		 * Control whether project styles are sent to the browser in a separate css file or inlined into `<style>` tags. Choose from the following options:
@@ -847,7 +847,7 @@ export interface AstroUserConfig {
 		 * ```js
 		 * {
 		 * 	build: {
-		 *		inlineStylesheets: `auto`,
+		 *		inlineStylesheets: `never`,
 		 * 	},
 		 * }
 		 * ```

packages/astro/src/core/config/schema.ts

@@ -25,7 +25,7 @@ const ASTRO_CONFIG_DEFAULTS = {
 		assets: '_astro',
 		serverEntry: 'entry.mjs',
 		redirects: true,
-		inlineStylesheets: 'never',
+		inlineStylesheets: 'auto',
 		split: false,
 		excludeMiddleware: false,
 	},

packages/astro/test/alias-tsconfig-baseurl-only.test.js

@@ -29,6 +29,8 @@ describe('Aliases with tsconfig.json - baseUrl only', () => {
 
 	before(async () => {
 		fixture = await loadFixture({
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 			root: './fixtures/alias-tsconfig-baseurl-only/',
 		});
 	});

packages/astro/test/alias-tsconfig.test.js

@@ -29,6 +29,8 @@ describe('Aliases with tsconfig.json', () => {
 
 	before(async () => {
 		fixture = await loadFixture({
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 			root: './fixtures/alias-tsconfig/',
 		});
 	});

packages/astro/test/asset-url-base.test.js

@@ -12,6 +12,8 @@ describe('Asset URL resolution in build', () => {
 				fixture = await loadFixture({
 					root: './fixtures/asset-url-base/',
 					site: 'http://example.com/sub/path/',
+					// test suite was authored when inlineStylesheets defaulted to never
+					build: { inlineStylesheets: 'never' },
 				});
 				await fixture.build();
 			});
@@ -30,6 +32,8 @@ describe('Asset URL resolution in build', () => {
 					root: './fixtures/asset-url-base/',
 					site: 'http://example.com/sub/path/',
 					base: '/another/base/',
+					// test suite was authored when inlineStylesheets defaulted to never
+					build: { inlineStylesheets: 'never' },
 				});
 				await fixture.build();
 			});

packages/astro/test/astro-client-only.test.js

@@ -9,6 +9,8 @@ describe('Client only components', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			root: './fixtures/astro-client-only/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 		await fixture.build();
 	});
@@ -72,6 +74,8 @@ describe('Client only components subpath', () => {
 			site: 'https://site.com',
 			base: '/blog',
 			root: './fixtures/astro-client-only/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 		await fixture.build();
 	});

packages/astro/test/astro-css-bundling.test.js

@@ -26,6 +26,8 @@ describe('CSS Bundling', function () {
 		before(async () => {
 			fixture = await loadFixture({
 				root: './fixtures/astro-css-bundling/',
+				// test suite was authored when inlineStylesheets defaulted to never
+				build: { inlineStylesheets: 'never' },
 			});
 			await fixture.build({ mode: 'production' });
 		});
@@ -76,6 +78,9 @@ describe('CSS Bundling', function () {
 			fixture = await loadFixture({
 				root: './fixtures/astro-css-bundling/',
 
+				// test suite was authored when inlineStylesheets defaulted to never
+				build: { inlineStylesheets: 'never' },
+
 				vite: {
 					build: {
 						rollupOptions: {

packages/astro/test/astro-directives.test.js

@@ -6,7 +6,11 @@ describe('Directives', async () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ root: './fixtures/astro-directives/' });
+		fixture = await loadFixture({
+			root: './fixtures/astro-directives/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' }
+		});
 		await fixture.build();
 	});
 

packages/astro/test/astro-head.test.js

@@ -10,6 +10,8 @@ describe('Head in its own component', () => {
 			root: './fixtures/astro-head/',
 			site: 'https://mysite.dev/',
 			base: '/blog',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 		await fixture.build();
 	});

packages/astro/test/build-assets.test.js

@@ -13,6 +13,8 @@ describe('build assets (static)', () => {
 			fixture = await loadFixture({
 				root: './fixtures/build-assets/',
 				integrations: [preact()],
+				// test suite was authored when inlineStylesheets defaulted to never
+				build: { inlineStylesheets: 'never' },
 			});
 			await fixture.build();
 		});
@@ -57,6 +59,7 @@ describe('build assets (static)', () => {
 				integrations: [preact()],
 				build: {
 					assets: 'custom-assets',
+					inlineStylesheets: 'never',
 				},
 			});
 			await fixture.build();
@@ -96,6 +99,8 @@ describe('build assets (server)', () => {
 				root: './fixtures/build-assets/',
 				integrations: [preact()],
 				adapter: testAdapter(),
+				// test suite was authored when inlineStylesheets defaulted to never
+				build: { inlineStylesheets: 'never' },
 			});
 			await fixture.build();
 		});
@@ -140,6 +145,7 @@ describe('build assets (server)', () => {
 				integrations: [preact()],
 				build: {
 					assets: 'custom-assets',
+					inlineStylesheets: 'never',
 				},
 				adapter: testAdapter(),
 			});

packages/astro/test/component-library.test.js

@@ -13,6 +13,8 @@ describe('Component Libraries', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			root: './fixtures/component-library/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 	});
 

packages/astro/test/config-vite-css-target.test.js

@@ -10,7 +10,11 @@ let fixture;
 
 describe('CSS', function () {
 	before(async () => {
-		fixture = await loadFixture({ root: './fixtures/config-vite-css-target/' });
+		fixture = await loadFixture({
+			root: './fixtures/config-vite-css-target/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
+		});
 	});
 
 	describe('build', () => {

packages/astro/test/config-vite.test.js

@@ -6,7 +6,11 @@ describe('Vite Config', async () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ root: './fixtures/config-vite/' });
+		fixture = await loadFixture({
+			root: './fixtures/config-vite/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
+		});
 		await fixture.build();
 	});
 

packages/astro/test/content-collections-render.test.js

@@ -13,6 +13,8 @@ describe('Content Collections - render()', () => {
 		before(async () => {
 			fixture = await loadFixture({
 				root: './fixtures/content/',
+				// test suite was authored when inlineStylesheets defaulted to never
+				build: { inlineStylesheets: 'never' },
 			});
 			await fixture.build();
 		});
@@ -106,6 +108,8 @@ describe('Content Collections - render()', () => {
 				output: 'server',
 				root: './fixtures/content/',
 				adapter: testAdapter(),
+				// test suite was authored when inlineStylesheets defaulted to never
+				build: { inlineStylesheets: 'never' },
 			});
 			await fixture.build();
 		});

packages/astro/test/css-import-as-inline.test.js

@@ -7,6 +7,8 @@ describe('Importing raw/inlined CSS', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			root: './fixtures/css-import-as-inline/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 	});
 	describe('Build', () => {

packages/astro/test/css-no-code-split.test.js

@@ -7,7 +7,11 @@ describe('vite.build.cssCodeSplit: false', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ root: './fixtures/css-no-code-split/' });
+		fixture = await loadFixture({
+			root: './fixtures/css-no-code-split/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
+		});
 		await fixture.build();
 	});
 

packages/astro/test/css-order-import.test.js

@@ -8,6 +8,8 @@ describe('CSS ordering - import order', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			root: './fixtures/css-order-import/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 	});
 
@@ -133,6 +135,8 @@ describe('CSS ordering - import order', () => {
 		before(async () => {
 			fixture = await loadFixture({
 				root: './fixtures/css-order-dynamic-import/',
+				// test suite was authored when inlineStylesheets defaulted to never
+				build: { inlineStylesheets: 'never' },
 			});
 			await fixture.build();
 		});

packages/astro/test/css-order-layout.test.js

@@ -8,6 +8,8 @@ describe('CSS ordering - import order with layouts', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			root: './fixtures/css-order-layout/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 	});
 

packages/astro/test/css-order.test.js

@@ -75,6 +75,8 @@ describe('CSS production ordering', () => {
 		before(async () => {
 			fixture = await loadFixture({
 				root: './fixtures/css-order/',
+				// test suite was authored when inlineStylesheets defaulted to never
+				build: { inlineStylesheets: 'never' },
 			});
 			await fixture.build();
 		});

packages/astro/test/glob-pages-css.test.js

@@ -8,6 +8,8 @@ describe('Astro.glob on pages/ directory', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			root: './fixtures/glob-pages-css/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 		await fixture.build();
 	});

packages/astro/test/head-injection.test.js

@@ -9,6 +9,8 @@ describe('Head injection', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			root: './fixtures/head-injection/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 	});
 

packages/astro/test/lazy-layout.test.js

@@ -7,7 +7,11 @@ describe('Lazily imported layouts', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ root: './fixtures/lazy-layout/' });
+		fixture = await loadFixture({
+			root: './fixtures/lazy-layout/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
+		});
 		await fixture.build();
 	});
 

packages/astro/test/minification-html.test.js

@@ -47,7 +47,11 @@ describe('HTML minification', () => {
 	describe('Build SSG', () => {
 		let fixture;
 		before(async () => {
-			fixture = await loadFixture({ root: './fixtures/minification-html/' });
+			fixture = await loadFixture({
+				root: './fixtures/minification-html/',
+				// test suite was authored when inlineStylesheets defaulted to never
+				build: { inlineStylesheets: 'never' },
+			});
 			await fixture.build();
 		});
 
@@ -64,6 +68,8 @@ describe('HTML minification', () => {
 				root: './fixtures/minification-html/',
 				output: 'server',
 				adapter: testAdapter(),
+				// test suite was authored when inlineStylesheets defaulted to never
+				build: { inlineStylesheets: 'never' },
 			});
 			await fixture.build();
 		});

packages/astro/test/page-level-styles.test.js

@@ -9,6 +9,8 @@ describe('Page-level styles', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			root: './fixtures/page-level-styles/',
+				// test suite was authored when inlineStylesheets defaulted to never
+				build: { inlineStylesheets: 'never' },
 		});
 		await fixture.build();
 	});

packages/astro/test/postcss.test.js

@@ -10,6 +10,8 @@ describe('PostCSS', function () {
 		this.timeout(45000); // test needs a little more time in CI
 		fixture = await loadFixture({
 			root: './fixtures/postcss',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 		await fixture.build();
 

packages/astro/test/remote-css.test.js

@@ -8,6 +8,8 @@ describe('Remote CSS', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			root: './fixtures/remote-css/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 		await fixture.build();
 	});

packages/astro/test/root-srcdir-css.test.js

@@ -8,6 +8,8 @@ describe('srcDir', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			root: './fixtures/root-srcdir-css/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 		await fixture.build();
 	});

packages/astro/test/scoped-style-strategy.test.js

@@ -12,6 +12,8 @@ describe('scopedStyleStrategy', () => {
 			fixture = await loadFixture({
 				root: './fixtures/scoped-style-strategy/',
 				scopedStyleStrategy: 'where',
+				// test suite was authored when inlineStylesheets defaulted to never
+				build: { inlineStylesheets: 'never' },
 			});
 			await fixture.build();
 
@@ -40,6 +42,8 @@ describe('scopedStyleStrategy', () => {
 			fixture = await loadFixture({
 				root: './fixtures/scoped-style-strategy/',
 				scopedStyleStrategy: 'class',
+				// test suite was authored when inlineStylesheets defaulted to never
+				build: { inlineStylesheets: 'never' },
 			});
 			await fixture.build();
 
@@ -67,6 +71,8 @@ describe('scopedStyleStrategy', () => {
 		before(async () => {
 			fixture = await loadFixture({
 				root: './fixtures/scoped-style-strategy/',
+				// test suite was authored when inlineStylesheets defaulted to never
+				build: { inlineStylesheets: 'never' },
 			});
 			await fixture.build();
 

packages/astro/test/ssr-404-500-pages.test.js

@@ -12,6 +12,8 @@ describe('404 and 500 pages', () => {
 			root: './fixtures/ssr-api-route-custom-404/',
 			output: 'server',
 			adapter: testAdapter(),
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 	});
 

packages/astro/test/ssr-assets.test.js

@@ -11,6 +11,8 @@ describe('SSR Assets', () => {
 			root: './fixtures/ssr-assets/',
 			output: 'server',
 			adapter: testAdapter(),
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 		await fixture.build();
 	});

packages/astro/test/ssr-dynamic.test.js

@@ -25,6 +25,8 @@ describe('Dynamic pages in SSR', () => {
 				},
 			],
 			adapter: testAdapter(),
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 		await fixture.build();
 	});

packages/astro/test/ssr-manifest.test.js

@@ -12,6 +12,8 @@ describe('astro:ssr-manifest', () => {
 			root: './fixtures/ssr-manifest/',
 			output: 'server',
 			adapter: testAdapter(),
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 		await fixture.build();
 	});

packages/astro/test/ssr-split-manifest.test.js

@@ -26,6 +26,8 @@ describe('astro:ssr-manifest, split', () => {
 					currentRoutes = routes;
 				},
 			}),
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 		await fixture.build();
 	});

packages/astro/test/static-build.test.js

@@ -34,6 +34,8 @@ describe('Static build', () => {
 
 		fixture = await loadFixture({
 			root: './fixtures/static-build/',
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 		await fixture.build({ logging });
 	});

packages/astro/test/virtual-astro-file.test.js

@@ -6,7 +6,11 @@ describe('Loading virtual Astro files', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ root: './fixtures/virtual-astro-file/' });
+		fixture = await loadFixture({
+			root: './fixtures/virtual-astro-file/',
+				// test suite was authored when inlineStylesheets defaulted to never
+				build: { inlineStylesheets: 'never' },
+		});
 		await fixture.build();
 	});
 

packages/integrations/deno/test/basics.test.ts

@@ -48,14 +48,11 @@ Deno.test({
 			const html = await resp.text();
 
 			const doc = new DOMParser().parseFromString(html, `text/html`);
-			const link = doc!.querySelector('link');
+			const style = doc!.querySelector('style');
-			const href = link!.getAttribute('href');
 
-			resp = await fetch(new URL(href!, app.url));
+			assertEquals(style?.getAttribute('type'), 'text/css');
-			assertEquals(resp.status, 200);
+
-			const ct = resp.headers.get('content-type');
+			assert(style?.textContent?.includes('Courier New'))
-			assertEquals(ct, 'text/css; charset=UTF-8');
-			await resp.body!.cancel();
 		});
 
 		await t.step('Correctly loads run-time env variables', async () => {

packages/integrations/markdoc/test/propagated-assets.test.js

@@ -8,6 +8,8 @@ describe('Markdoc - propagated assets', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			root: new URL('./fixtures/propagated-assets/', import.meta.url),
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 	});
 

packages/integrations/mdx/test/css-head-mdx.test.js

@@ -12,6 +12,8 @@ describe('Head injection w/ MDX', () => {
 		fixture = await loadFixture({
 			root: new URL('./fixtures/css-head-mdx/', import.meta.url),
 			integrations: [mdx()],
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 	});
 

packages/integrations/mdx/test/mdx-page.test.js

@@ -8,6 +8,8 @@ describe('MDX Page', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			root: new URL('./fixtures/mdx-page/', import.meta.url),
+			// test suite was authored when inlineStylesheets defaulted to never
+			build: { inlineStylesheets: 'never' },
 		});
 	});
 

packages/integrations/node/test/prerender-404-500.test.js

@@ -101,7 +101,7 @@ describe('Prerender 404', () => {
 			const $ = cheerio.load(html);
 
 			// length will be 0 if the stylesheet does not get included
-			expect($('link[rel=stylesheet]')).to.have.a.lengthOf(1);
+			expect($('style[type="text/css"]')).to.have.a.lengthOf(1);
 		});
 	});