Registry / devops / html-inline-css-webpack-plugin

html-inline-css-webpack-plugin

library1.11.2jsnpmunverified

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.

devops

npm install html-inline-css-webpack-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · HTML-INLINE-CSS-WE

html-inline-css-webpack-plugin

devopsjavascriptv1.11.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

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

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

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

Config

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

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

Type-only import; not a runtime value

HTMLInlineCSSWebpackPlugin with filter option

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

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

Filter function receives both CSS and HTML file names

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

Debug

Known issues

gotchaDefault import requires .default in CommonJS require

fix

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

affects: >=1.0.0

gotchaHTML 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 } })

affects: >=1.0.0

gotchaThe 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')

affects: >=1.0.0

gotchaOrder of plugins matters: must be after MiniCssExtractPlugin and HtmlWebpackPlugin in plugins array

fix

Ensure HTMLInlineCSSWebpackPlugin is listed after both in plugins array

affects: >=1.0.0

breakingIn 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

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: HTMLInlineCSSWebpackPlugin is not a constructor

Using require without .default

fix

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

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

Missing peer dependency html-webpack-plugin

fix

npm install html-webpack-plugin -D

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

Missing peer dependency mini-css-extract-plugin

fix

npm install mini-css-extract-plugin -D

Error: Plugin could not be applied to the compiler

Plugin placed before MiniCssExtractPlugin or HtmlWebpackPlugin in plugins array

fix

Reorder plugins: list HTMLInlineCSSWebpackPlugin after MiniCssExtractPlugin and HtmlWebpackPlugin

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

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

fix

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

Upgrade

Version history

1.11.2latest on npm

Audit

Dependencies

html-webpack-pluginrequiredRequired peer dependency for hooking into HTML generation

mini-css-extract-pluginrequiredRequired peer dependency for extracting CSS files to inline

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/Runjuu/html-inline-css-webpack-plugin ↗

packagehttps://www.npmjs.com/package/html-inline-css-webpack-plugin ↗