HTML Inline Style Plugin

A plugin for staticbolt that inlines external stylesheets into the HTML at build time. The stylesheet can be a local file or a remote URL.

Installation

The plugin ships as part of @staticbolt/core. You do not need to install another package.

Usage

In your .staticbolt.ts configuration file:

import { defineConfig } from "@staticbolt/core";
import { htmlInlineStylePlugin } from "@staticbolt/core/plugins";

export default defineConfig({
  plugins: [htmlInlineStylePlugin()],
});

Inlining a stylesheet

Add the inline attribute to any <link rel="stylesheet"> tag. At build time the plugin reads the file and replaces the <link> tag with a <style> tag that holds the stylesheet content. Every other attribute on the original <link> tag is kept.

<link rel="stylesheet" href="./styles.css" inline />

Inlining only happens in production builds. In development the plugin strips the inline attribute and the stylesheet keeps loading as an external file.

Using a remote URL

The href attribute can also point to a remote URL. The plugin downloads the stylesheet at build time and inlines its content.

<link rel="stylesheet" href="https://example.com/vendor.css" inline />

Combining with bundle

Register htmlBundleStylePlugin() before this plugin. A <link> carrying both bundle and inline is then bundled first. What gets inlined is the bundle, with its @import tree resolved.

<link rel="stylesheet" href="./styles.css" bundle inline />

Options

inlineAttribute

• Type: string
• Default: "inline"

The attribute name that marks a <link> tag for inlining.

htmlInlineStylePlugin({
  inlineAttribute: "embed",
});