Skip to content
@staticbolt/core

HTML Merge Styles Plugin

A plugin for staticbolt that merges consecutive inline <style> tags in the <head> into a single tag at build time. The final HTML then holds fewer style blocks.

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 { htmlMergeStylesPlugin } from "@staticbolt/core/plugins";


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

This plugin takes no options.

How it works

During a production build the plugin scans the <head> for consecutive inline <style> tags that share the same attributes. It merges the contents of each group into the group's first tag and removes the rest.

<!-- Before -->
<style>
  body {
    margin: 0;
  }
</style>
<style>
  h1 {
    font-size: 2rem;
  }
</style>
<style>
  p {
    line-height: 1.5;
  }
</style>


<!-- After -->
<style>
  body {
    margin: 0;
  }
  h1 {
    font-size: 2rem;
  }
  p {
    line-height: 1.5;
  }
</style>

Only tags with matching attributes are grouped together. A <style media="print"> is never merged with a plain <style>.

<!-- These two will not be merged — different attributes -->
<style>
  body {
    margin: 0;
  }
</style>
<style media="print">
  body {
    margin: 1cm;
  }
</style>

A <link rel="stylesheet"> anywhere between two <style> tags breaks the consecutive chain. The tags on each side of it are then considered as separate groups.

Merging only happens in production builds and only applies to the <head>.