https://github.com/runjuu/html-inline-css-webpack-plugin
☄️ A webpack plugin to convert external stylesheets into embedded stylesheets
https://github.com/runjuu/html-inline-css-webpack-plugin
document-stylesheet embedded-stylesheet html-webpack-plugin inline-css inline-styles mini-css-extract-plugin webpack webpack-plugin webpack4 webpack5
Last synced: 11 months ago
JSON representation
☄️ A webpack plugin to convert external stylesheets into embedded stylesheets
- Host: GitHub
- URL: https://github.com/runjuu/html-inline-css-webpack-plugin
- Owner: runjuu
- License: mit
- Created: 2018-06-07T02:53:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-07-19T20:55:45.000Z (over 1 year ago)
- Last Synced: 2025-03-29T23:08:34.687Z (11 months ago)
- Topics: document-stylesheet, embedded-stylesheet, html-webpack-plugin, inline-css, inline-styles, mini-css-extract-plugin, webpack, webpack-plugin, webpack4, webpack5
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/html-inline-css-webpack-plugin
- Size: 737 KB
- Stars: 80
- Watchers: 3
- Forks: 22
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# html-inline-css-webpack-plugin
[](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.
```
=> ...<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)
## Install
#### NPM
```bash
npm i html-inline-css-webpack-plugin -D
```
#### Yarn
```bash
yarn add html-inline-css-webpack-plugin -D
```
## Minimal example
```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"
]
}
]
}
}
```
## Config
```typescript
interface Config {
filter?: (fileName: string) => boolean
styleTagFactory?: (params: { style: string }) => string
leaveCSSFile?: boolean
replace?: {
target: string
position?: 'before' | 'after'
removeTarget?: boolean
}
}
```
### filter(optional)
```typescript
filter?: (fileName: string) => boolean
```
Return `true` to make current file internal, otherwise ignore current file. Include both css file and html file name.
##### example
```typescript
...
new HTMLInlineCSSWebpackPlugin({
filter(fileName) {
return fileName.includes('main');
},
}),
...
```
### styleTagFactory(optional)
```typescript
styleTagFactory?: (params: { style: string }) => string
```
Used to customize the style tag.
##### example
```typescript
...
new HTMLInlineCSSWebpackPlugin({
styleTagFactory({ style }) {
return `<style type="text/css">${style}`;
},
}),
...
```
### leaveCSSFile(optional)
if `true`, it will leave CSS files where they are when inlining
### replace(optional)
```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 ``
#### 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-plugin` in production mode. [#16](https://github.com/Runjuu/html-inline-css-webpack-plugin/issues/16#issuecomment-527884514)
##### example
```html
/* some hard code style */
```
```typescript
...
new HTMLInlineCSSWebpackPlugin({
replace: {
removeTarget: true,
target: '',
},
}),
...
```
###### output:
```html
/* style from *.css files */
/* some hard code style */
```