html-inline-css-rspack-plugin
v1.11.3
Published
☄️ A rspack plugin for convert external stylesheet to embedded stylesheet, aka document stylesheet
Downloads
12
Maintainers
huangtengReadme
html-inline-css-rspack-plugin
Forked the html-inline-css-webpack-plugin and modified it to be compatible with rspack
Convert external stylesheet to embedded stylesheet, aka document stylesheet.
<link rel="stylesheet" /> => <style>...<style/>Require rspack.CssExtractRspackPlugin and rspack.HtmlRspackPlugin
Install
NPM
npm i html-inline-css-rspack-plugin -DYarn
yarn add html-inline-css-rspack-plugin -DMinimal example
// 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.
Config
interface Config {
filter?: (fileName: string) => boolean
styleTagFactory?: (params: { style: string }) => string
leaveCSSFile?: boolean
replace?: {
target: string
position?: 'before' | 'after'
removeTarget?: boolean
}
}filter(optional)
filter?: (fileName: string) => booleanReturn true to make current file internal, otherwise ignore current file. Include both css file and html file name.
example
...
new HTMLInlineRspackPlugin({
filter(fileName) {
return fileName.includes('main');
},
}),
...styleTagFactory(optional)
styleTagFactory?: (params: { style: string }) => stringUsed to customize the style tag.
example
...
new HTMLInlineRspackPlugin({
styleTagFactory({ style }) {
return `<style type="text/css">${style}</style>`;
},
}),
...leaveCSSFile(optional)
if true, it will leave CSS files where they are when inlining
replace(optional)
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>
target
A target for adding the internal style sheet
position(optional)
Add internal style sheet before/after the target
removeTarget(optional)
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
example
<head>
<!-- inline_css_plugin -->
<style>
/* some hard code style */
</style>
</head>...
new HTMLInlineRspackPlugin({
replace: {
removeTarget: true,
target: '<!-- inline_css_plugin -->',
},
}),
...output:
<head>
<style>
/* style from *.css files */
</style>
<style>
/* some hard code style */
</style>
</head>