Forked the html-inline-css-webpack-plugin and modified it to be compatible with rspack
MIT Licence PRs Welcome Total downloads npm version
Convert external stylesheet to embedded stylesheet, aka document stylesheet.
<link rel="stylesheet" /> => <style>...<style/>
Require rspack.CssExtractRspackPlugin and rspack.HtmlRspackPlugin
npm i html-inline-css-rspack-plugin -D
yarn add html-inline-css-rspack-plugin -D
// const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // const HtmlWebpackPlugin = require('html-webpack-plugin'); // const HTMLInlineCSSWebpackPlugin = require("html-inline-css-rspack-plugin").default; import { rspack } from '@rspack/core'; import { HTMLInlineRspackPlugin } from 'html-inline-css-rspack-plugin' module.exports = { plugins: [ // new MiniCssExtractPlugin({ // filename: "[name].css", // chunkFilename: "[id].css" // }), // new HtmlWebpackPlugin(), new rspack.CssExtractRspackPlugin({}), new rspack.HtmlRspackPlugin(options); new HTMLInlineRspackPlugin(), ], module: { rules: [ { test: /\.css$/i, use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'], type: 'javascript/auto', }, ] } }
Keep the original config as
html-inline-css-webpack-plugin.
interface Config { filter?: (fileName: string) => boolean styleTagFactory?: (params: { style: string }) => string leaveCSSFile?: boolean replace?: { target: string position?: 'before' | 'after' removeTarget?: boolean } }
filter?: (fileName: string) => boolean
Return true to make current file internal, otherwise ignore current file. Include both css file and html file name.
... new HTMLInlineRspackPlugin({ filter(fileName) { return fileName.includes('main'); }, }), ...
styleTagFactory?: (params: { style: string }) => string
Used to customize the style tag.
... new HTMLInlineRspackPlugin({ styleTagFactory({ style }) { return `<style type="text/css">${style}</style>`; }, }), ...
if true, it will leave CSS files where they are when inlining
replace?: { target: string position?: 'before' | 'after' // default is 'before' removeTarget?: boolean // default is false }
A config for customizing the location of injection, default will add internal style sheet before the </head>
A target for adding the internal style sheet
Add internal style sheet before/after the target
if true, it will remove the target from the output HTML
Please note that HTML comment is removed by default by the
html-webpack-pluginin production mode. #16
<head> <!-- inline_css_plugin --> <style> /* some hard code style */ </style> </head>
... new HTMLInlineRspackPlugin({ replace: { removeTarget: true, target: '<!-- inline_css_plugin -->', }, }), ...
<head> <style> /* style from *.css files */ </style> <style> /* some hard code style */ </style> </head>