Astro supports this capability natively via
build.inlineStylesheetssince [email protected].
Astro integration to internalise all external style sheets in HTML files.
Before:
<html>
<head>
<link href="/foo.css" />
<link href="/bar.css" />
</head>
</html>/* foo.css */
.foo {
color: blue;
}/* bar.css */
.bar {
color: red;
}After:
<html>
<head>
<style type="text/css">
.foo {
color: red;
}
</style>
<style type="text/css">
.bar {
color: blue;
}
</style>
</head>
</html>And unreferenced external style sheets foo.css and bar.css removed!
npx astro add astro-internalise-cssOr manually:
npm install -D astro-internalise-css// astro.config.mjs
import astroInternaliseCSS from "astro-internalise-css";
export default {
integrations: [astroInternaliseCSS()],
};When a browser requests a website, the website is transferred to the client in packets. The size of these packet transfers will get incrementally larger (based on TCP slow start), but the first packet is 14KB.
Many websites are small enough to internalise external style sheets for each HTML file and still be under 14KB, thus the website can be delivered to the client in the first packet transfer. This is faster than delivering the HTML and external style sheets in separate packets where delays are incurred from extra fetches. Even if the website is not under 14KB, internalising CSS will usually be more performant for smaller sites.
Note: one such benefit of using external style sheets is the browser can cache individual CSS files, and so if the website is large and changes over time are made to select CSS files, then it may make sense to avoid this integration to take advantage of browser caching.
Please report any issues or feature requests on GitHub. Contributions are welcome!
I appreciate the current implementation is quite simple and naive but it gets the job done (for now).
Inspired by astro-single-file.
Astro is working on integrating CSS inlining natively. When this is available, this integration may be redundant.