@@ -13,8 +13,6 @@ import type {
13
13
14
14
const require = createRequire ( import . meta. url )
15
15
16
- type StyleRule = Config . Rule < Config . Rule < Config . Module > >
17
-
18
16
/**
19
17
* Set webpack module to handle style files
20
18
*/
@@ -29,36 +27,19 @@ export const handleModuleStyles = ({
29
27
isBuild : boolean
30
28
isServer : boolean
31
29
} ) : void => {
32
- const createStyleRules = ( {
30
+ const handleStyle = < T extends LoaderOptions = LoaderOptions > ( {
33
31
lang,
34
32
test,
33
+ loaderName,
34
+ loaderOptions,
35
35
} : {
36
36
lang : string
37
37
test : RegExp
38
- } ) : {
39
- modulesRule : StyleRule
40
- normalRule : StyleRule
41
- } => {
42
- const baseRule = config . module . rule ( lang ) . test ( test )
43
- const modulesRule = baseRule . oneOf ( 'modules' ) . resourceQuery ( / m o d u l e / )
44
- const normalRule = baseRule . oneOf ( 'normal' )
45
- return {
46
- modulesRule,
47
- normalRule,
48
- }
49
- }
50
-
51
- const applyStyleHandlers = ( {
52
- rule,
53
- cssModules,
54
- loaderName,
55
- loaderOptions = { } ,
56
- } : {
57
- rule : StyleRule
58
- cssModules : boolean
59
38
loaderName ?: string
60
- loaderOptions ?: LoaderOptions
39
+ loaderOptions ?: T
61
40
} ) : void => {
41
+ const rule = config . module . rule ( lang ) . test ( test )
42
+
62
43
if ( ! isServer ) {
63
44
if ( isBuild ) {
64
45
rule . use ( 'extract-css-loader' ) . loader ( MiniCssExtractPlugin . loader )
@@ -72,13 +53,14 @@ export const handleModuleStyles = ({
72
53
. use ( 'css-loader' )
73
54
. loader ( require . resolve ( 'css-loader' ) )
74
55
. options ( {
75
- modules : cssModules
76
- ? {
77
- localIdentName : `[local]_[contenthash:base64:8]` ,
78
- exportOnlyLocals : isServer ,
79
- }
80
- : false ,
81
- importLoaders : 1 ,
56
+ modules : {
57
+ auto : true ,
58
+ exportLocalsConvention : 'as-is' ,
59
+ exportOnlyLocals : isServer ,
60
+ localIdentName : `[local]_[contenthash:base64:8]` ,
61
+ namedExport : false ,
62
+ } ,
63
+ importLoaders : loaderName ? 2 : 1 ,
82
64
} )
83
65
84
66
// use postcss-loader
@@ -94,41 +76,13 @@ export const handleModuleStyles = ({
94
76
95
77
// use extra loader
96
78
if ( loaderName ) {
97
- rule . use ( loaderName ) . loader ( loaderName ) . options ( loaderOptions )
79
+ rule
80
+ . use ( loaderName )
81
+ . loader ( loaderName )
82
+ . options ( loaderOptions ?? { } )
98
83
}
99
84
}
100
85
101
- const handleStyle = < T extends LoaderOptions = LoaderOptions > ( {
102
- lang,
103
- test,
104
- loaderName,
105
- loaderOptions,
106
- } : {
107
- lang : string
108
- test : RegExp
109
- loaderName ?: string
110
- loaderOptions ?: T
111
- } ) : void => {
112
- const { modulesRule, normalRule } = createStyleRules ( {
113
- lang,
114
- test,
115
- } )
116
-
117
- applyStyleHandlers ( {
118
- rule : modulesRule ,
119
- cssModules : true ,
120
- loaderName,
121
- loaderOptions,
122
- } )
123
-
124
- applyStyleHandlers ( {
125
- rule : normalRule ,
126
- cssModules : false ,
127
- loaderName,
128
- loaderOptions,
129
- } )
130
- }
131
-
132
86
handleStyle ( {
133
87
lang : 'css' ,
134
88
test : / \. c s s $ / ,
0 commit comments