HTML Inline CSS Webpack Plugin

1.11.2 verified Sat Apr 25 auth: no javascript

A webpack plugin that converts external stylesheets (from MiniCssExtractPlugin) into embedded <style> tags in the HTML output. Current stable version is 1.11.2. It works with webpack 4/5, html-webpack-plugin v3-5, and requires mini-css-extract-plugin. Key differentiators: supports filtering files, custom style tag factory, optional leave CSS file, and custom injection position via replace config. This is a simple, focused plugin with no extra dependencies beyond its peer deps. Ship TypeScript types. Actively maintained.

Common errors

error TypeError: HTMLInlineCSSWebpackPlugin is not a constructor ↓

cause Using require without .default

fix

Change const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin') to require('html-inline-css-webpack-plugin').default

error Error: Cannot find module 'html-webpack-plugin' ↓

cause Missing peer dependency html-webpack-plugin

fix

npm install html-webpack-plugin -D

error Error: Cannot find module 'mini-css-extract-plugin' ↓

cause Missing peer dependency mini-css-extract-plugin

fix

npm install mini-css-extract-plugin -D

error Error: Plugin could not be applied to the compiler ↓

cause Plugin placed before MiniCssExtractPlugin or HtmlWebpackPlugin in plugins array

fix

Reorder plugins: list HTMLInlineCSSWebpackPlugin after MiniCssExtractPlugin and HtmlWebpackPlugin

error The 'style' inside the style tag is empty or incomplete] ↓

cause CSS files not processed by MiniCssExtractPlugin.loader and css-loader

fix

Ensure webpack rules for .css use MiniCssExtractPlugin.loader and css-loader

Warnings

gotcha Default import requires .default in CommonJS require ↓

fix Use require('html-inline-css-webpack-plugin').default instead of require('html-inline-css-webpack-plugin')

gotcha HTML comments are removed by html-webpack-plugin in production mode, breaking replace config with comment targets ↓

fix Disable comment removal in html-webpack-plugin config: new HtmlWebpackPlugin({ minify: { removeComments: false } })

gotcha The filter function receives both CSS file names and HTML file names - may cause unexpected inclusion ↓

fix Add logic to distinguish file types, e.g., fileName.endsWith('.css')

gotcha Order of plugins matters: must be after MiniCssExtractPlugin and HtmlWebpackPlugin in plugins array ↓

fix Ensure HTMLInlineCSSWebpackPlugin is listed after both in plugins array

breaking In v1.x, default export changed from a named export to a default export ↓

fix Use import HTMLInlineCSSWebpackPlugin from 'html-inline-css-webpack-plugin' or require('...').default

Install

npm install html-inline-css-webpack-plugin

yarn add html-inline-css-webpack-plugin

pnpm add html-inline-css-webpack-plugin

Imports

default

wrong

const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin')

correct

import HTMLInlineCSSWebpackPlugin from 'html-inline-css-webpack-plugin'

Package exports default export only. Use named import .default in CommonJS.

Config

wrong

const Config = require('html-inline-css-webpack-plugin').Config

correct

import type { Config } from 'html-inline-css-webpack-plugin'

Type-only import; not a runtime value

HTMLInlineCSSWebpackPlugin with filter option

wrong

new HTMLInlineCSSWebpackPlugin({ filter: (fileName) => { return fileName.includes('main') } })

correct

new HTMLInlineCSSWebpackPlugin({ filter: (fileName) => fileName.includes('main') })

Filter function receives both CSS and HTML file names

Quickstart

Minimal webpack config to inline all extracted CSS into <style> tags in HTML.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin').default;

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({ filename: '[name].css' }),
    new HtmlWebpackPlugin(),
    new HTMLInlineCSSWebpackPlugin()
  ],
  module: {
    rules: [
      { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader' ] }
    ]
  }
};