Skip to content

Commit fa00a10

Browse files
committed
updated README with attributes option example
1 parent 5ca36b0 commit fa00a10

File tree

1 file changed

+93
-22
lines changed

1 file changed

+93
-22
lines changed

README.md

Lines changed: 93 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,45 @@
11
# html-inline-css-webpack-plugin
2+
23
[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)
34
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/Runjuu/html-inline-css-webpack-plugin/pulls)
45
[![Total downloads](https://img.shields.io/npm/dm/html-inline-css-webpack-plugin.svg)](https://www.npmjs.com/package/html-inline-css-webpack-plugin)
56
[![npm version](https://badge.fury.io/js/html-inline-css-webpack-plugin.svg)](https://www.npmjs.com/package/html-inline-css-webpack-plugin)
67

78
Convert external stylesheet to embedded stylesheet, aka document stylesheet.
9+
810
```
911
<link rel="stylesheet" /> => <style>...<style/>
1012
```
1113

1214
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)
1315

1416
## Install
17+
1518
#### NPM
19+
1620
```bash
1721
npm i html-inline-css-webpack-plugin -D
1822
```
23+
1924
#### Yarn
25+
2026
```bash
2127
yarn add html-inline-css-webpack-plugin -D
2228
```
2329

2430
## Minimal example
31+
2532
```js
26-
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
27-
const HtmlWebpackPlugin = require('html-webpack-plugin');
28-
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;
33+
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
34+
const HtmlWebpackPlugin = require('html-webpack-plugin')
35+
const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin')
36+
.default
2937

3038
module.exports = {
3139
plugins: [
3240
new MiniCssExtractPlugin({
33-
filename: "[name].css",
34-
chunkFilename: "[id].css"
41+
filename: '[name].css',
42+
chunkFilename: '[id].css',
3543
}),
3644
new HtmlWebpackPlugin(),
3745
new HTMLInlineCSSWebpackPlugin(),
@@ -40,17 +48,15 @@ module.exports = {
4048
rules: [
4149
{
4250
test: /\.css$/,
43-
use: [
44-
MiniCssExtractPlugin.loader,
45-
"css-loader"
46-
]
47-
}
48-
]
49-
}
51+
use: [MiniCssExtractPlugin.loader, 'css-loader'],
52+
},
53+
],
54+
},
5055
}
5156
```
5257

5358
## Config
59+
5460
```typescript
5561
interface Config {
5662
filter?(fileName: string): boolean
@@ -60,15 +66,20 @@ interface Config {
6066
position?: 'before' | 'after'
6167
removeTarget?: boolean
6268
}
69+
attributes?: any
6370
}
6471
```
6572

6673
### filter(optional)
74+
6775
```typescript
6876
filter?(fileName: string): boolean
6977
```
78+
7079
Return `true` to make current file internal, otherwise ignore current file. Include both css file and html file name.
80+
7181
##### example
82+
7283
```typescript
7384
...
7485
new HTMLInlineCSSWebpackPlugin({
@@ -80,31 +91,89 @@ Return `true` to make current file internal, otherwise ignore current file. Incl
8091
```
8192
8293
### leaveCSSFile(optional)
94+
8395
if `true`, it will leave CSS files where they are when inlining
8496
8597
### replace(optional)
98+
8699
```typescript
87100
replace?: {
88101
target: string
89102
position?: 'before' | 'after' // default is 'before'
90103
removeTarget?: boolean // default is false
91104
}
92105
```
106+
93107
A config for customizing the location of injection, default will add internal style sheet before the `</head>`
108+
109+
### attributes(optional)
110+
111+
Allows the adding of attributes to the style tag
112+
113+
##### example 1
114+
115+
```typescript
116+
...
117+
new HTMLInlineCSSWebpackPlugin({
118+
replace: {
119+
attributes: {
120+
'type': "text/css"
121+
},
122+
},
123+
}),
124+
...
125+
```
126+
127+
```html
128+
<style type="text/css">
129+
/* inlined css */
130+
</style>
131+
```
132+
133+
##### example 2
134+
135+
```typescript
136+
...
137+
new HTMLInlineCSSWebpackPlugin({
138+
replace: {
139+
attributes: {
140+
'amp-custom': ""
141+
},
142+
},
143+
}),
144+
...
145+
```
146+
147+
```html
148+
<style amp-custom="">
149+
/* inlined css */
150+
</style>
151+
```
152+
153+
Useful for amp pages
154+
94155
#### target
156+
95157
A target for adding the internal style sheet
158+
96159
#### position(optional)
160+
97161
Add internal style sheet `before`/`after` the `target`
162+
98163
#### removeTarget(optional)
164+
99165
if `true`, it will remove the `target` from the output HTML
166+
100167
> 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)
168+
101169
##### example
170+
102171
```html
103172
<head>
104-
<!-- inline_css_plugin -->
105-
<style>
106-
/* some hard code style */
107-
</style>
173+
<!-- inline_css_plugin -->
174+
<style>
175+
/* some hard code style */
176+
</style>
108177
</head>
109178
```
110179
@@ -118,14 +187,16 @@ if `true`, it will remove the `target` from the output HTML
118187
}),
119188
...
120189
```
190+
121191
###### output:
192+
122193
```html
123194
<head>
124-
<style>
125-
/* style from *.css files */
126-
</style>
127-
<style>
128-
/* some hard code style */
129-
</style>
195+
<style>
196+
/* style from *.css files */
197+
</style>
198+
<style>
199+
/* some hard code style */
200+
</style>
130201
</head>
131202
```

0 commit comments

Comments
 (0)