html-inline-css-webpack-plugin
Version:
☄️ A webpack plugin for convert external stylesheet to embedded stylesheet, aka document stylesheet
151 lines (137 loc) • 3.81 kB
Markdown
[](https://opensource.org/licenses/mit-license.php)
[](https://github.com/Runjuu/html-inline-css-webpack-plugin/pulls)
[](https://www.npmjs.com/package/html-inline-css-webpack-plugin)
[](https://www.npmjs.com/package/html-inline-css-webpack-plugin)
Convert external stylesheet to embedded stylesheet, aka document stylesheet.
```
<link rel="stylesheet" /> => <style>...<style/>
```
Require [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) and [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
```bash
npm i html-inline-css-webpack-plugin -D
```
```bash
yarn add html-inline-css-webpack-plugin -D
```
```js
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",
chunkFilename: "[id].css"
}),
new HtmlWebpackPlugin(),
new HTMLInlineCSSWebpackPlugin(),
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
}
```
```typescript
interface Config {
filter?: (fileName: string) => boolean
styleTagFactory?: (params: { style: string }) => string
leaveCSSFile?: boolean
replace?: {
target: string
position?: 'before' | 'after'
removeTarget?: boolean
}
}
```
```typescript
filter?: (fileName: string) => boolean
```
Return `true` to make current file internal, otherwise ignore current file. Include both css file and html file name.
```typescript
...
new HTMLInlineCSSWebpackPlugin({
filter(fileName) {
return fileName.includes('main');
},
}),
...
```
```typescript
styleTagFactory?: (params: { style: string }) => string
```
Used to customize the style tag.
```typescript
...
new HTMLInlineCSSWebpackPlugin({
styleTagFactory({ style }) {
return `<style type="text/css">${style}</style>`;
},
}),
...
```
if `true`, it will leave CSS files where they are when inlining
```typescript
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-plugin` in production mode. [
```html
<head>
<!-- inline_css_plugin -->
<style>
/* some hard code style */
</style>
</head>
```
```typescript
...
new HTMLInlineCSSWebpackPlugin({
replace: {
removeTarget: true,
target: '<!-- inline_css_plugin -->',
},
}),
...
```
```html
<head>
<style>
/* style from *.css files */
</style>
<style>
/* some hard code style */
</style>
</head>
```