1
- import { Compiler , Configuration } from 'webpack' ;
1
+ import { Compiler , Configuration } from 'webpack'
2
2
3
3
type File = {
4
4
[ key : string ] : string
5
- } ;
5
+ }
6
6
7
7
type Asset = {
8
8
source ( ) : string
9
9
size ( ) : number
10
- } ;
10
+ }
11
11
12
12
interface Compilation {
13
13
assets : { [ key : string ] : Asset }
@@ -16,7 +16,7 @@ interface Compilation {
16
16
interface ReplaceConfig {
17
17
position ?: 'before' | 'after'
18
18
removeTarget ?: boolean
19
- target : string ,
19
+ target : string
20
20
leaveCssFile ?: boolean
21
21
}
22
22
@@ -26,100 +26,106 @@ interface Config {
26
26
}
27
27
28
28
const DEFAULT_REPLACE_CONFIG : ReplaceConfig = {
29
- target : '</head>'
30
- } ;
29
+ target : '</head>' ,
30
+ }
31
31
32
- export default class Plugin
33
- {
32
+ export default class Plugin {
34
33
static addStyle ( html : string , style : string , replaceConfig : ReplaceConfig ) {
35
- const styleString = `<style type="text/css">${ style } </style>` ;
36
- const replaceValues = [ styleString , replaceConfig . target ] ;
34
+ const styleString = `<style type="text/css">${ style } </style>`
35
+ const replaceValues = [ styleString , replaceConfig . target ]
37
36
38
37
if ( replaceConfig . position === 'after' ) {
39
38
replaceValues . reverse ( )
40
39
}
41
40
42
- return html . replace ( replaceConfig . target , replaceValues . join ( '' ) ) ;
41
+ return html . replace ( replaceConfig . target , replaceValues . join ( '' ) )
43
42
}
44
43
45
44
static removeLinkTag ( html : string , cssFileName : string ) {
46
45
return html . replace (
47
46
new RegExp ( `<link[^>]+href=['"]${ cssFileName } ['"][^>]+(>|\/>|><\/link>)` ) ,
48
47
'' ,
49
- ) ;
48
+ )
50
49
}
51
50
52
51
static cleanUp ( html : string , replaceConfig : ReplaceConfig ) {
53
52
return replaceConfig . removeTarget
54
53
? html . replace ( replaceConfig . target , '' )
55
- : html ;
54
+ : html
56
55
}
57
56
58
- private css : File = { } ;
57
+ private css : File = { }
59
58
60
- private html : File = { } ;
59
+ private html : File = { }
61
60
62
61
constructor ( private readonly config : Config = { } ) { }
63
62
64
63
private filter ( fileName : string ) : boolean {
65
64
if ( typeof this . config . filter === 'function' ) {
66
- return this . config . filter ( fileName ) ;
65
+ return this . config . filter ( fileName )
67
66
} else {
68
- return true ;
67
+ return true
69
68
}
70
69
}
71
70
72
71
private prepare ( { assets } : Compilation ) {
73
- const isCSS = is ( 'css' ) ;
74
- const isHTML = is ( 'html' ) ;
75
- const { replace : replaceConfig = DEFAULT_REPLACE_CONFIG } = this . config ;
72
+ const isCSS = is ( 'css' )
73
+ const isHTML = is ( 'html' )
74
+ const { replace : replaceConfig = DEFAULT_REPLACE_CONFIG } = this . config
76
75
77
76
Object . keys ( assets ) . forEach ( ( fileName ) => {
78
77
if ( isCSS ( fileName ) ) {
79
- const isCurrentFileNeedsToBeInlined = this . filter ( fileName ) ;
78
+ const isCurrentFileNeedsToBeInlined = this . filter ( fileName )
80
79
if ( isCurrentFileNeedsToBeInlined ) {
81
- this . css [ fileName ] = assets [ fileName ] . source ( ) ;
80
+ this . css [ fileName ] = assets [ fileName ] . source ( )
82
81
if ( ! replaceConfig . leaveCssFile ) {
83
82
delete assets [ fileName ]
84
83
}
85
84
}
86
85
} else if ( isHTML ( fileName ) ) {
87
- this . html [ fileName ] = assets [ fileName ] . source ( ) ;
86
+ this . html [ fileName ] = assets [ fileName ] . source ( )
88
87
}
89
- } ) ;
88
+ } )
90
89
}
91
90
92
91
private process ( { assets } : Compilation , { output } : Configuration ) {
93
- const publicPath = ( output && output . publicPath ) || '' ;
94
- const { replace : replaceConfig = DEFAULT_REPLACE_CONFIG } = this . config ;
92
+ const publicPath = ( output && output . publicPath ) || ''
93
+ const { replace : replaceConfig = DEFAULT_REPLACE_CONFIG } = this . config
95
94
96
95
Object . keys ( this . html ) . forEach ( ( htmlFileName ) => {
97
- let html = this . html [ htmlFileName ] ;
96
+ let html = this . html [ htmlFileName ]
98
97
99
98
Object . keys ( this . css ) . forEach ( ( key ) => {
100
- html = Plugin . addStyle ( html , this . css [ key ] , replaceConfig ) ;
101
- html = Plugin . removeLinkTag ( html , publicPath + key ) ;
102
- } ) ;
99
+ html = Plugin . addStyle ( html , this . css [ key ] , replaceConfig )
100
+ html = Plugin . removeLinkTag ( html , publicPath + key )
101
+ } )
103
102
104
- html = Plugin . cleanUp ( html , replaceConfig ) ;
103
+ html = Plugin . cleanUp ( html , replaceConfig )
105
104
106
105
assets [ htmlFileName ] = {
107
- source ( ) { return html } ,
108
- size ( ) { return html . length } ,
109
- } ;
110
- } ) ;
106
+ source ( ) {
107
+ return html
108
+ } ,
109
+ size ( ) {
110
+ return html . length
111
+ } ,
112
+ }
113
+ } )
111
114
}
112
115
113
116
apply ( compiler : Compiler ) {
114
- compiler . hooks . emit . tapAsync ( 'html-inline-css-webpack-plugin' , ( compilation : Compilation , callback : ( ) => void ) => {
115
- this . prepare ( compilation ) ;
116
- this . process ( compilation , compiler . options ) ;
117
- callback ( ) ;
118
- } ) ;
117
+ compiler . hooks . emit . tapAsync (
118
+ 'html-inline-css-webpack-plugin' ,
119
+ ( compilation : Compilation , callback : ( ) => void ) => {
120
+ this . prepare ( compilation )
121
+ this . process ( compilation , compiler . options )
122
+ callback ( )
123
+ } ,
124
+ )
119
125
}
120
126
}
121
127
122
128
function is ( filenameExtension : string ) {
123
- const reg = new RegExp ( `\.${ filenameExtension } $` ) ;
124
- return ( fileName : string ) => reg . test ( fileName ) ;
129
+ const reg = new RegExp ( `\.${ filenameExtension } $` )
130
+ return ( fileName : string ) => reg . test ( fileName )
125
131
}
0 commit comments