{"id":20100,"library":"html-inline-css-webpack-plugin","title":"HTML Inline CSS Webpack Plugin","description":"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.","status":"active","version":"1.11.2","language":"javascript","source_language":"en","source_url":"https://github.com/Runjuu/html-inline-css-webpack-plugin","tags":["javascript","webpack","webpack4","webpack5","webpack-plugin","inline","internal","embedded","document","typescript"],"install":[{"cmd":"npm install html-inline-css-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add html-inline-css-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-inline-css-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for hooking into HTML generation","package":"html-webpack-plugin","optional":false},{"reason":"Required peer dependency for extracting CSS files to inline","package":"mini-css-extract-plugin","optional":false}],"imports":[{"note":"Package exports default export only. Use named import .default in CommonJS.","wrong":"const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin')","symbol":"default","correct":"import HTMLInlineCSSWebpackPlugin from 'html-inline-css-webpack-plugin'"},{"note":"Type-only import; not a runtime value","wrong":"const Config = require('html-inline-css-webpack-plugin').Config","symbol":"Config","correct":"import type { Config } from 'html-inline-css-webpack-plugin'"},{"note":"Filter function receives both CSS and HTML file names","wrong":"new HTMLInlineCSSWebpackPlugin({ filter: (fileName) => { return fileName.includes('main') } })","symbol":"HTMLInlineCSSWebpackPlugin with filter option","correct":"new HTMLInlineCSSWebpackPlugin({ filter: (fileName) => fileName.includes('main') })"}],"quickstart":{"code":"const MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin').default;\n\nmodule.exports = {\n  plugins: [\n    new MiniCssExtractPlugin({ filename: '[name].css' }),\n    new HtmlWebpackPlugin(),\n    new HTMLInlineCSSWebpackPlugin()\n  ],\n  module: {\n    rules: [\n      { test: /\\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader' ] }\n    ]\n  }\n};","lang":"javascript","description":"Minimal webpack config to inline all extracted CSS into <style> tags in HTML."},"warnings":[{"fix":"Use require('html-inline-css-webpack-plugin').default instead of require('html-inline-css-webpack-plugin')","message":"Default import requires .default in CommonJS require","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Disable comment removal in html-webpack-plugin config: new HtmlWebpackPlugin({ minify: { removeComments: false } })","message":"HTML comments are removed by html-webpack-plugin in production mode, breaking replace config with comment targets","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add logic to distinguish file types, e.g., fileName.endsWith('.css')","message":"The filter function receives both CSS file names and HTML file names - may cause unexpected inclusion","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure HTMLInlineCSSWebpackPlugin is listed after both in plugins array","message":"Order of plugins matters: must be after MiniCssExtractPlugin and HtmlWebpackPlugin in plugins array","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use import HTMLInlineCSSWebpackPlugin from 'html-inline-css-webpack-plugin' or require('...').default","message":"In v1.x, default export changed from a named export to a default export","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Change const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin') to require('html-inline-css-webpack-plugin').default","cause":"Using require without .default","error":"TypeError: HTMLInlineCSSWebpackPlugin is not a constructor"},{"fix":"npm install html-webpack-plugin -D","cause":"Missing peer dependency html-webpack-plugin","error":"Error: Cannot find module 'html-webpack-plugin'"},{"fix":"npm install mini-css-extract-plugin -D","cause":"Missing peer dependency mini-css-extract-plugin","error":"Error: Cannot find module 'mini-css-extract-plugin'"},{"fix":"Reorder plugins: list HTMLInlineCSSWebpackPlugin after MiniCssExtractPlugin and HtmlWebpackPlugin","cause":"Plugin placed before MiniCssExtractPlugin or HtmlWebpackPlugin in plugins array","error":"Error: Plugin could not be applied to the compiler"},{"fix":"Ensure webpack rules for .css use MiniCssExtractPlugin.loader and css-loader","cause":"CSS files not processed by MiniCssExtractPlugin.loader and css-loader","error":"The 'style' inside the style tag is empty or incomplete]"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}