withastro/roadmap

CSS Inlining

matthewp opened this issue · 4 comments

matthewp commented

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.

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 commented

RFC: #557

jessaleks commented

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 commented

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
  • 👍2
matthewp commented

This RFC was merged as approved.