CSS Inlining

[matthewp]

• Accepted Date: 2023-04-14
• Reference Issues/Discussions: https://github.com/withastro/roadmap/discussions/343
• Author: @lilnasy
• Champion(s): @lilnasy
• Implementation PR: https://github.com/withastro/astro/pull/6659

Summary

Provide a configuration option to specify inlining behavior of styles authored or imported in astro modules.

Background & Motivation

There has been a constant interest in inlining styles while still taking advantage of scoping and other processing steps since before 1.0 (see: withastro/astro#918), with many users incorrectly assuming that is:inline directive is the solution (see: withastro/astro#6388).

Simple one-page websites do not benefit from an external stylesheet, since there is no other page that could use the cached stylesheet. On the other hand, large websites are overoptimized for cacheability, since our chunking splits the styles too granularly. Case in point, Astro docs homepage has 20 linked stylesheets, 14 of them are less than 1kb (see: withastro/astro#6528).

So far we have not provided a way to allow inlining stylesheets, prompting workarounds. However, coming from other frameworks, users might expect to be able to configure this behavior.

• SvelteKit allows configuring a threshold under which CSS files will be inlined: https://kit.svelte.dev/docs/configuration#inlinestylethreshold
• Fresh lets plugins inject inline styles: https://fresh.deno.dev/docs/concepts/plugins#hook-render
• Nuxt has a global configuration: https://nuxt.com/docs/api/configuration/nuxt-config#inlinessrstyles at Astro and why this problem is worth solving. Why solve it now? Be brief!

Goals

• Provide a way to reduce the number of HTTP requests for stylesheets.
• Maintain current behavior when not explicitly configured.
• Works with both server and static outputs.

Non-Goals

• Identify "critical" CSS rules.
• Enable a single external stylesheet.
• Preloading.
• Inlining of scripts

[matthewp]

RFC: https://github.com/withastro/roadmap/pull/557

[jessaleks]

Hey there, great idea!

Playing devil's advocate: how will it be better/different than critters, for which there is an integration for Astro already?

[lilnasy]

Hey there, great idea!

Playing devil's advocate: how will it be better/different than critters, for which there is an integration for Astro already?

@jessaleks

• fast
• ssr

[matthewp]

This RFC was merged as approved.