Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f5e4af9

Browse files
authored
Merge pull request #18 from hamidadelyar/master
Added attributes to the Config
2 parents e8db0a5 + 2ddf496 commit f5e4af9

File tree

3 files changed

+119
-23
lines changed

3 files changed

+119
-23
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?: { [name: string]: string }
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
```

‎src/core/base-plugin.ts‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,27 @@ export class BasePlugin {
6666
}
6767
}
6868

69+
protected getAttributesString(config: Config): string {
70+
if (config.attributes && typeof config.attributes === 'object') {
71+
return (
72+
' ' +
73+
Object.keys(config.attributes)
74+
.map((key) => `${key}="${config.attributes![key] || ''}"`)
75+
.join(' ')
76+
)
77+
}
78+
79+
if (config.attributes === undefined && config.attributes === null) {
80+
throw new Error(
81+
`Please provide a key/value object if intending to use the attributes option, not ${
82+
config.attributes
83+
}`,
84+
)
85+
}
86+
87+
return ''
88+
}
89+
6990
protected addStyle({
7091
html,
7192
htmlFileName,
@@ -75,7 +96,10 @@ export class BasePlugin {
7596
htmlFileName: string
7697
style: string
7798
}) {
78-
const styleString = `<style type="text/css">${style}</style>`
99+
const styleString = `<style${this.getAttributesString(
100+
this.config,
101+
)}>${style}</style>`
102+
79103
const replaceValues = [styleString, this.replaceConfig.target]
80104

81105
if (this.replaceConfig.position === 'after') {

‎src/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export interface Config {
1414
filter?(fileName: string): boolean
1515
leaveCSSFile?: boolean
1616
replace?: ReplaceConfig
17+
attributes?: { [name: string]: string }
1718
}
1819

1920
export interface FileCache {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /