1
- /**
2
- * Module dependencies.
3
- */
4
-
5
- var postcss = require ( "postcss" )
6
- var balanced = require ( "balanced-match" )
1
+ import postcss from "postcss"
2
+ import balanced from "balanced-match"
7
3
8
- /**
9
- * Constants.
10
- */
11
-
12
- var VAR_PROP_IDENTIFIER = "--"
13
- var VAR_FUNC_IDENTIFIER = "var"
4
+ const VAR_PROP_IDENTIFIER = "--"
5
+ const VAR_FUNC_IDENTIFIER = "var"
14
6
// matches `name[, fallback]`, captures "name" and "fallback"
15
- var RE_VAR = / ( [ \w - ] + ) (?: \s * , \s * ) ? \s * ( .* ) ? /
7
+ const RE_VAR = / ( [ \w - ] + ) (?: \s * , \s * ) ? \s * ( .* ) ? /
16
8
17
9
/**
18
10
* Resolve CSS variables.
19
11
*
20
- * The second argument to the CSS variable function, var(name[, fallback]),
12
+ * The second argument to the CSS variable function, var(name[, fallback]),
21
13
* is used in the event that first argument cannot be resolved.
22
14
*
23
15
* @param {String } value May contain the CSS variable function
@@ -26,28 +18,27 @@ var RE_VAR = /([\w-]+)(?:\s*,\s*)?\s*(.*)?/
26
18
* @param {Object } decl The declaration containing the rule
27
19
* @return {String } A property value with all CSS variables substituted.
28
20
*/
29
-
30
21
function resolveValue ( value , variables , result , decl ) {
31
- var results = [ ]
22
+ const results = [ ]
32
23
33
- var start = value . indexOf ( VAR_FUNC_IDENTIFIER + "(" )
24
+ const start = value . indexOf ( VAR_FUNC_IDENTIFIER + "(" )
34
25
if ( start === - 1 ) {
35
26
return [ value ]
36
27
}
37
28
38
- var matches = balanced ( "(" , ")" , value . substring ( start ) )
29
+ const matches = balanced ( "(" , ")" , value . substring ( start ) )
39
30
40
31
if ( ! matches ) {
41
- throw decl . error ( " missing closing ')' in the value '" + value + "'" )
32
+ throw decl . error ( ` missing closing ')' in the value '${ value } '` )
42
33
}
43
34
44
35
if ( matches . body === "" ) {
45
36
throw decl . error ( "var() must contain a non-whitespace string" )
46
37
}
47
38
48
39
matches . body . replace ( RE_VAR , function ( _ , name , fallback ) {
49
- var variable = variables [ name ]
50
- var post
40
+ const variable = variables [ name ]
41
+ let post
51
42
// undefined and without fallback, just keep original value
52
43
if ( ! variable && ! fallback ) {
53
44
result . warn (
@@ -75,8 +66,8 @@ function resolveValue(value, variables, result, decl) {
75
66
post = matches . post
76
67
? resolveValue ( matches . post , variables , result , decl )
77
68
: [ "" ]
78
- fallback . forEach ( function ( fbValue ) {
79
- post . forEach ( function ( afterValue ) {
69
+ fallback . forEach ( ( fbValue ) => {
70
+ post . forEach ( ( afterValue ) => {
80
71
results . push ( value . slice ( 0 , start ) + fbValue + afterValue )
81
72
} )
82
73
} )
@@ -113,8 +104,8 @@ function resolveValue(value, variables, result, decl) {
113
104
post = matches . post
114
105
? resolveValue ( matches . post , variables , result , decl )
115
106
: [ "" ]
116
- variable . value . forEach ( function ( replacementValue ) {
117
- post . forEach ( function ( afterValue ) {
107
+ variable . value . forEach ( ( replacementValue ) => {
108
+ post . forEach ( ( afterValue ) => {
118
109
results . push ( value . slice ( 0 , start ) + replacementValue + afterValue )
119
110
} )
120
111
} )
@@ -124,14 +115,14 @@ function resolveValue(value, variables, result, decl) {
124
115
}
125
116
126
117
function prefixVariables ( variables ) {
127
- var prefixedVariables = { }
118
+ const prefixedVariables = { }
128
119
129
120
if ( ! variables ) {
130
121
return prefixVariables
131
122
}
132
123
133
- Object . keys ( variables ) . forEach ( function ( name ) {
134
- var val = variables [ name ]
124
+ Object . keys ( variables ) . forEach ( ( name ) => {
125
+ const val = variables [ name ]
135
126
if ( name . slice ( 0 , 2 ) !== "--" ) {
136
127
name = "--" + name
137
128
}
@@ -144,43 +135,41 @@ function prefixVariables(variables) {
144
135
/**
145
136
* Module export.
146
137
*/
147
-
148
- module . exports = postcss . plugin ( "postcss-custom-properties" , function ( options ) {
149
- options = options || { }
138
+ export default postcss . plugin ( "postcss-custom-properties" , ( options = { } ) => {
150
139
151
140
function setVariables ( variables ) {
152
141
options . variables = prefixVariables ( variables )
153
142
}
154
143
155
144
function plugin ( style , result ) {
156
- var warnings = options . warnings === undefined ? true : options . warnings
157
- var variables = prefixVariables ( options . variables )
158
- var strict = options . strict === undefined ? true : options . strict
159
- var appendVariables = options . appendVariables
160
- var preserve = options . preserve
161
- var map = { }
162
- var importantMap = { }
145
+ const warnings = options . warnings === undefined ? true : options . warnings
146
+ const variables = prefixVariables ( options . variables )
147
+ const strict = options . strict === undefined ? true : options . strict
148
+ const appendVariables = options . appendVariables
149
+ const preserve = options . preserve
150
+ const map = { }
151
+ const importantMap = { }
163
152
164
153
// define variables
165
- style . walkRules ( function ( rule ) {
166
- var toRemove = [ ]
154
+ style . walkRules ( ( rule ) => {
155
+ const toRemove = [ ]
167
156
168
157
// only variables declared for `:root` are supported for now
169
158
if (
170
159
rule . selectors . length !== 1 ||
171
160
rule . selectors [ 0 ] !== ":root" ||
172
161
rule . parent . type !== "root"
173
162
) {
174
- rule . each ( function ( decl ) {
175
- var prop = decl . prop
163
+ rule . each ( ( decl ) => {
164
+ const prop = decl . prop
176
165
if (
177
166
warnings &&
178
167
prop &&
179
168
prop . indexOf ( VAR_PROP_IDENTIFIER ) === 0
180
169
) {
181
170
result . warn (
182
171
"Custom property ignored: not scoped to the top-level :root " +
183
- " element (" + rule . selectors + " { ... " + prop + " : ... })" +
172
+ ` element (${ rule . selectors } { ... ${ prop } : ... })` +
184
173
( rule . parent . type !== "root" ? ", in " + rule . parent . type : "" ) ,
185
174
{ node : decl }
186
175
)
@@ -189,8 +178,8 @@ module.exports = postcss.plugin("postcss-custom-properties", function(options) {
189
178
return
190
179
}
191
180
192
- rule . each ( function ( decl , index ) {
193
- var prop = decl . prop
181
+ rule . each ( ( decl , index ) => {
182
+ const prop = decl . prop
194
183
if ( prop && prop . indexOf ( VAR_PROP_IDENTIFIER ) === 0 ) {
195
184
if ( ! map [ prop ] || ! importantMap [ prop ] || decl . important ) {
196
185
map [ prop ] = {
@@ -207,7 +196,7 @@ module.exports = postcss.plugin("postcss-custom-properties", function(options) {
207
196
208
197
// optionally remove `--*` properties from the rule
209
198
if ( ! preserve ) {
210
- for ( var i = toRemove . length - 1 ; i >= 0 ; i -- ) {
199
+ for ( let i = toRemove . length - 1 ; i >= 0 ; i -- ) {
211
200
rule . nodes . splice ( toRemove [ i ] , 1 )
212
201
}
213
202
@@ -219,7 +208,7 @@ module.exports = postcss.plugin("postcss-custom-properties", function(options) {
219
208
} )
220
209
221
210
// apply js-defined custom properties
222
- Object . keys ( variables ) . forEach ( function ( variable ) {
211
+ Object . keys ( variables ) . forEach ( ( variable ) => {
223
212
map [ variable ] = {
224
213
value : variables [ variable ] ,
225
214
deps : [ ] ,
@@ -229,8 +218,8 @@ module.exports = postcss.plugin("postcss-custom-properties", function(options) {
229
218
} )
230
219
231
220
if ( preserve ) {
232
- Object . keys ( map ) . forEach ( function ( name ) {
233
- var variable = map [ name ]
221
+ Object . keys ( map ) . forEach ( ( name ) => {
222
+ const variable = map [ name ]
234
223
if ( ! variable . resolved ) {
235
224
variable . value = resolveValue ( variable . value , map , result )
236
225
variable . resolved = true
@@ -239,20 +228,20 @@ module.exports = postcss.plugin("postcss-custom-properties", function(options) {
239
228
}
240
229
241
230
// resolve variables
242
- style . walkDecls ( function ( decl ) {
243
- var value = decl . value
231
+ style . walkDecls ( ( decl ) => {
232
+ const value = decl . value
244
233
245
234
// skip values that don’t contain variable functions
246
235
if ( ! value || value . indexOf ( VAR_FUNC_IDENTIFIER + "(" ) === - 1 ) {
247
236
return
248
237
}
249
238
250
- var resolved = resolveValue ( value , map , result , decl )
239
+ let resolved = resolveValue ( value , map , result , decl )
251
240
if ( ! strict ) {
252
241
resolved = [ resolved . pop ( ) ]
253
242
}
254
- resolved . forEach ( function ( resolvedValue ) {
255
- var clone = decl . cloneBefore ( )
243
+ resolved . forEach ( ( resolvedValue ) => {
244
+ const clone = decl . cloneBefore ( )
256
245
clone . value = resolvedValue
257
246
} )
258
247
@@ -262,19 +251,19 @@ module.exports = postcss.plugin("postcss-custom-properties", function(options) {
262
251
} )
263
252
264
253
if ( preserve && appendVariables ) {
265
- var names = Object . keys ( map )
254
+ const names = Object . keys ( map )
266
255
if ( names . length ) {
267
- var container = postcss . rule ( {
256
+ const container = postcss . rule ( {
268
257
selector : ":root" ,
269
258
raws : { semicolon : true } ,
270
259
} )
271
- names . forEach ( function ( name ) {
272
- var variable = map [ name ]
273
- var val = variable . value
260
+ names . forEach ( ( name ) => {
261
+ const variable = map [ name ]
262
+ let val = variable . value
274
263
if ( variable . resolved ) {
275
264
val = val [ val . length - 1 ]
276
265
}
277
- var decl = postcss . decl ( {
266
+ const decl = postcss . decl ( {
278
267
prop : name ,
279
268
value : val ,
280
269
} )
0 commit comments