@zohodesk/react-cli 0.0.1-beta.172 → 0.0.1-beta.173
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +1 -0
- package/README.md +15 -2
- package/docs/VariableConversion.md +678 -0
- package/lib/configs/webpack.dev.config.js +12 -11
- package/lib/configs/webpack.docs.config.js +5 -4
- package/lib/configs/webpack.impact.config.js +5 -4
- package/lib/configs/webpack.prod.config.js +13 -12
- package/lib/loaderUtils/getCSSLoaders.js +22 -10
- package/lib/postcss-plugins/variableModificationPlugin/ErrorHandler.js +37 -0
- package/lib/postcss-plugins/variableModificationPlugin/index.js +247 -0
- package/lib/postcss-plugins/variableModifier.js +1 -0
- package/lib/schemas/index.js +10 -4
- package/package.json +1 -1
package/.eslintrc.js
CHANGED
|
@@ -125,6 +125,7 @@ let commonConfigs = {
|
|
|
125
125
|
'semi-spacing': [logLevel],
|
|
126
126
|
'arrow-spacing': [logLevel],
|
|
127
127
|
'arrow-body-style': [logLevel],
|
|
128
|
+
'prefer-const': [logLevel],
|
|
128
129
|
'arrow-parens': [logLevel, 'as-needed'],
|
|
129
130
|
'no-const-assign': [logLevel],
|
|
130
131
|
'no-dupe-class-members': [logLevel],
|
package/README.md
CHANGED
|
@@ -2,9 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
A CLI tool for build modern web application and libraries
|
|
4
4
|
|
|
5
|
+
# 0.0.1-beta.173
|
|
6
|
+
|
|
7
|
+
Conversion for Variables from Variables to px in Supportapp completed (`variableIgnore.js` && `pxParserPostcss.js` to be referred to), and px to custom variables through the new `variableModificationPlugin`. Error Log generation can also be converted on enabling
|
|
8
|
+
|
|
9
|
+
Features:
|
|
10
|
+
1. variables are converted from px to custom variables ( options are consumed from `cssVariableReplacementOptions.json` present in source folder )
|
|
11
|
+
2. To enable the error log generation `errorLog` is to be made `true` in `cssVariableReplacementOptions.json` ( it will take a little longer than usual build time )
|
|
12
|
+
3. To enable the console display of errors that are generated, `errorInConsole` is to be made `true` in `cssVariableReplacementOptions.json`
|
|
13
|
+
4. To enable specific errors in the error log generation / error display on console, `DECLARATION_IGNORED`(for ignoring that particular line / declaration),`UNIT_ERROR` (when the Unit doesnt match the available units for the property),`RANGE_ERROR` (when the value does not fall within the range that is given for the property), `VARIABLE_PRESENT`(whether the value supposed to be in px for conversion sake is not converted from var() to px or if it's properly converted to px for conversion from px to var through our plugin) are to be individually made `true` in `cssVariableReplacementOptions.json`
|
|
14
|
+
|
|
15
|
+
For an more information and reference, refer to : `docs/VariableConversion.md `
|
|
16
|
+
|
|
5
17
|
# 0.0.1-beta.172
|
|
6
18
|
We have renamed some options, For Our future features convenience.
|
|
7
|
-
We have given fallback support.
|
|
19
|
+
We have given fallback support.
|
|
8
20
|
Deprecation Warnings:-
|
|
9
21
|
* `react-cli.app.hasRTL` ==> `react-cli.app.plugins.hasRTL`
|
|
10
22
|
* `react-cli.app.rtlExclude` ==> `react-cli.app.exclude.rtl`
|
|
@@ -15,7 +27,8 @@ these options have fallback support.
|
|
|
15
27
|
|
|
16
28
|
# 0.0.1-beta.171
|
|
17
29
|
|
|
18
|
-
|
|
30
|
+
Features added :
|
|
31
|
+
1. `react-cli.app.mediaQueryHoverActiveString` and `react-cli.docs.mediaQueryHoverActiveString` templates support added for @media(hover: hover) and @media(hover: none) queries. We can modify these to modify respective queries.
|
|
19
32
|
|
|
20
33
|
# 0.0.1-beta.170
|
|
21
34
|
|
|
@@ -0,0 +1,678 @@
|
|
|
1
|
+
# Variable Conversion
|
|
2
|
+
|
|
3
|
+
<!-- file paths :
|
|
4
|
+
|
|
5
|
+
# react - cli :
|
|
6
|
+
src\postcss-plugins\variableModificationPlugin\index.js
|
|
7
|
+
|
|
8
|
+
# source folder :
|
|
9
|
+
jsapps\supportapp\cssVariableReplacementOptions.json ( options json file )
|
|
10
|
+
jsapps\supportapp\plugins\pxParserPostcss.js ( px parsing as a process before plugin conversion to custom css variables in react -cli )
|
|
11
|
+
jsapps\supportapp\plugins\variableIgnore.js ( adding variable:ignore comment to ignore the line for any conversion beforehand to preserve the declaration )
|
|
12
|
+
|
|
13
|
+
-->
|
|
14
|
+
|
|
15
|
+
# Added support for Properties ( Cut 1 ) :
|
|
16
|
+
|
|
17
|
+
* font-size
|
|
18
|
+
* margin
|
|
19
|
+
* margin-top
|
|
20
|
+
* margin-bottom
|
|
21
|
+
* margin-left
|
|
22
|
+
* margin-right
|
|
23
|
+
* padding
|
|
24
|
+
* padding-top
|
|
25
|
+
* padding-bottom
|
|
26
|
+
* padding-left
|
|
27
|
+
* padding-right
|
|
28
|
+
* top
|
|
29
|
+
* right
|
|
30
|
+
* bottom
|
|
31
|
+
* left
|
|
32
|
+
* width
|
|
33
|
+
* min-width
|
|
34
|
+
* max-width
|
|
35
|
+
* height
|
|
36
|
+
* min-height
|
|
37
|
+
* max-height
|
|
38
|
+
|
|
39
|
+
# Css variable conversion consists of three steps :
|
|
40
|
+
|
|
41
|
+
. addition of comment variable:ignore for the seperation of values to be considered for the conversion and the ones that are not to be considered for conversion. ( `variableIgnore.js` )
|
|
42
|
+
. conversion of the variable from current css variables to corresponding px value manually. ( `pxParserPostcss.js` )
|
|
43
|
+
. conversion of the resultant px values to custom variables present in settings ( `cssVariableReplacementOptions.json` )
|
|
44
|
+
|
|
45
|
+
`cssVariableReplacementOptions.json example` :
|
|
46
|
+
|
|
47
|
+
```json
|
|
48
|
+
{
|
|
49
|
+
"errorLog": false,
|
|
50
|
+
"errorInConsole": false,
|
|
51
|
+
"errorsAllowed":{
|
|
52
|
+
"DECLARATION_IGNORED" : true,
|
|
53
|
+
"UNIT_ERROR" : true,
|
|
54
|
+
"RANGE_ERROR" : true,
|
|
55
|
+
"VARIABLE_PRESENT" : true
|
|
56
|
+
},
|
|
57
|
+
"settings": {
|
|
58
|
+
"font-size": {
|
|
59
|
+
"allowed": [
|
|
60
|
+
"px",
|
|
61
|
+
"em",
|
|
62
|
+
"%",
|
|
63
|
+
"0",
|
|
64
|
+
"vh",
|
|
65
|
+
"initial"
|
|
66
|
+
],
|
|
67
|
+
"replacements": {
|
|
68
|
+
"px": "var(--zd_font_size$$)",
|
|
69
|
+
"em": "var(--zd_font_size$$em)"
|
|
70
|
+
},
|
|
71
|
+
"range": {
|
|
72
|
+
"start": 0,
|
|
73
|
+
"end": 1650
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
"margin": {
|
|
77
|
+
"allowed": [
|
|
78
|
+
"px",
|
|
79
|
+
"em",
|
|
80
|
+
"fit-content",
|
|
81
|
+
"auto",
|
|
82
|
+
"%",
|
|
83
|
+
"inherit",
|
|
84
|
+
"-moz-fit-content",
|
|
85
|
+
"vh",
|
|
86
|
+
"0",
|
|
87
|
+
"initial",
|
|
88
|
+
"vw"
|
|
89
|
+
],
|
|
90
|
+
"replacements": {
|
|
91
|
+
"px": "var(--zd_size$$)"
|
|
92
|
+
},
|
|
93
|
+
"range": {
|
|
94
|
+
"start": -1650,
|
|
95
|
+
"end": 1650
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
"margin-left": {
|
|
99
|
+
"allowed": [
|
|
100
|
+
"px",
|
|
101
|
+
"em",
|
|
102
|
+
"fit-content",
|
|
103
|
+
"auto",
|
|
104
|
+
"%",
|
|
105
|
+
"inherit",
|
|
106
|
+
"-moz-fit-content",
|
|
107
|
+
"vh",
|
|
108
|
+
"0",
|
|
109
|
+
"initial",
|
|
110
|
+
"vw"
|
|
111
|
+
],
|
|
112
|
+
"replacements": {
|
|
113
|
+
"px": "var(--zd_size$$)"
|
|
114
|
+
},
|
|
115
|
+
"range": {
|
|
116
|
+
"start": -1650,
|
|
117
|
+
"end": 1650
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
"margin-right": {
|
|
121
|
+
"allowed": [
|
|
122
|
+
"px",
|
|
123
|
+
"em",
|
|
124
|
+
"fit-content",
|
|
125
|
+
"auto",
|
|
126
|
+
"%",
|
|
127
|
+
"inherit",
|
|
128
|
+
"-moz-fit-content",
|
|
129
|
+
"vh",
|
|
130
|
+
"0",
|
|
131
|
+
"initial",
|
|
132
|
+
"vw"
|
|
133
|
+
],
|
|
134
|
+
"replacements": {
|
|
135
|
+
"px": "var(--zd_size$$)"
|
|
136
|
+
},
|
|
137
|
+
"range": {
|
|
138
|
+
"start": -1650,
|
|
139
|
+
"end": 1650
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
"margin-top": {
|
|
143
|
+
"allowed": [
|
|
144
|
+
"px",
|
|
145
|
+
"em",
|
|
146
|
+
"fit-content",
|
|
147
|
+
"auto",
|
|
148
|
+
"%",
|
|
149
|
+
"inherit",
|
|
150
|
+
"-moz-fit-content",
|
|
151
|
+
"vh",
|
|
152
|
+
"0",
|
|
153
|
+
"initial",
|
|
154
|
+
"vw"
|
|
155
|
+
],
|
|
156
|
+
"replacements": {
|
|
157
|
+
"px": "var(--zd_size$$)"
|
|
158
|
+
},
|
|
159
|
+
"range": {
|
|
160
|
+
"start": -1650,
|
|
161
|
+
"end": 1650
|
|
162
|
+
}
|
|
163
|
+
},
|
|
164
|
+
"margin-bottom": {
|
|
165
|
+
"allowed": [
|
|
166
|
+
"px",
|
|
167
|
+
"em",
|
|
168
|
+
"fit-content",
|
|
169
|
+
"auto",
|
|
170
|
+
"%",
|
|
171
|
+
"inherit",
|
|
172
|
+
"-moz-fit-content",
|
|
173
|
+
"vh",
|
|
174
|
+
"0",
|
|
175
|
+
"initial",
|
|
176
|
+
"vw"
|
|
177
|
+
],
|
|
178
|
+
"replacements": {
|
|
179
|
+
"px": "var(--zd_size$$)"
|
|
180
|
+
},
|
|
181
|
+
"range": {
|
|
182
|
+
"start": -1650,
|
|
183
|
+
"end": 1650
|
|
184
|
+
}
|
|
185
|
+
},
|
|
186
|
+
"padding": {
|
|
187
|
+
"allowed": [
|
|
188
|
+
"px",
|
|
189
|
+
"em",
|
|
190
|
+
"fit-content",
|
|
191
|
+
"auto",
|
|
192
|
+
"%",
|
|
193
|
+
"inherit",
|
|
194
|
+
"-moz-fit-content",
|
|
195
|
+
"vh",
|
|
196
|
+
"0",
|
|
197
|
+
"initial",
|
|
198
|
+
"vw"
|
|
199
|
+
],
|
|
200
|
+
"replacements": {
|
|
201
|
+
"px": "var(--zd_size$$)"
|
|
202
|
+
},
|
|
203
|
+
"range": {
|
|
204
|
+
"start": -1650,
|
|
205
|
+
"end": 1650
|
|
206
|
+
}
|
|
207
|
+
},
|
|
208
|
+
"padding-left": {
|
|
209
|
+
"allowed": [
|
|
210
|
+
"px",
|
|
211
|
+
"em",
|
|
212
|
+
"fit-content",
|
|
213
|
+
"auto",
|
|
214
|
+
"%",
|
|
215
|
+
"inherit",
|
|
216
|
+
"-moz-fit-content",
|
|
217
|
+
"vh",
|
|
218
|
+
"0",
|
|
219
|
+
"initial",
|
|
220
|
+
"vw"
|
|
221
|
+
],
|
|
222
|
+
"replacements": {
|
|
223
|
+
"px": "var(--zd_size$$)"
|
|
224
|
+
},
|
|
225
|
+
"range": {
|
|
226
|
+
"start": -1650,
|
|
227
|
+
"end": 1650
|
|
228
|
+
}
|
|
229
|
+
},
|
|
230
|
+
"padding-right": {
|
|
231
|
+
"allowed": [
|
|
232
|
+
"px",
|
|
233
|
+
"em",
|
|
234
|
+
"fit-content",
|
|
235
|
+
"auto",
|
|
236
|
+
"%",
|
|
237
|
+
"inherit",
|
|
238
|
+
"-moz-fit-content",
|
|
239
|
+
"vh",
|
|
240
|
+
"0",
|
|
241
|
+
"initial",
|
|
242
|
+
"vw"
|
|
243
|
+
],
|
|
244
|
+
"replacements": {
|
|
245
|
+
"px": "var(--zd_size$$)"
|
|
246
|
+
},
|
|
247
|
+
"range": {
|
|
248
|
+
"start": -1650,
|
|
249
|
+
"end": 1650
|
|
250
|
+
}
|
|
251
|
+
},
|
|
252
|
+
"padding-top": {
|
|
253
|
+
"allowed": [
|
|
254
|
+
"px",
|
|
255
|
+
"em",
|
|
256
|
+
"fit-content",
|
|
257
|
+
"auto",
|
|
258
|
+
"%",
|
|
259
|
+
"inherit",
|
|
260
|
+
"-moz-fit-content",
|
|
261
|
+
"vh",
|
|
262
|
+
"0",
|
|
263
|
+
"initial",
|
|
264
|
+
"vw"
|
|
265
|
+
],
|
|
266
|
+
"replacements": {
|
|
267
|
+
"px": "var(--zd_size$$)"
|
|
268
|
+
},
|
|
269
|
+
"range": {
|
|
270
|
+
"start": -1650,
|
|
271
|
+
"end": 1650
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
"padding-bottom": {
|
|
275
|
+
"allowed": [
|
|
276
|
+
"px",
|
|
277
|
+
"em",
|
|
278
|
+
"fit-content",
|
|
279
|
+
"auto",
|
|
280
|
+
"%",
|
|
281
|
+
"inherit",
|
|
282
|
+
"-moz-fit-content",
|
|
283
|
+
"vh",
|
|
284
|
+
"0",
|
|
285
|
+
"initial",
|
|
286
|
+
"vw"
|
|
287
|
+
],
|
|
288
|
+
"replacements": {
|
|
289
|
+
"px": "var(--zd_size$$)"
|
|
290
|
+
},
|
|
291
|
+
"range": {
|
|
292
|
+
"start": -1650,
|
|
293
|
+
"end": 1650
|
|
294
|
+
}
|
|
295
|
+
},
|
|
296
|
+
"height": {
|
|
297
|
+
"allowed": [
|
|
298
|
+
"px",
|
|
299
|
+
"em",
|
|
300
|
+
"fit-content",
|
|
301
|
+
"auto",
|
|
302
|
+
"%",
|
|
303
|
+
"inherit",
|
|
304
|
+
"-moz-fit-content",
|
|
305
|
+
"vh",
|
|
306
|
+
"0",
|
|
307
|
+
"initial",
|
|
308
|
+
"vw"
|
|
309
|
+
],
|
|
310
|
+
"replacements": {
|
|
311
|
+
"px": "var(--zd_size$$)"
|
|
312
|
+
},
|
|
313
|
+
"range": {
|
|
314
|
+
"start": -1650,
|
|
315
|
+
"end": 1650
|
|
316
|
+
}
|
|
317
|
+
},
|
|
318
|
+
"width": {
|
|
319
|
+
"allowed": [
|
|
320
|
+
"px",
|
|
321
|
+
"em",
|
|
322
|
+
"fit-content",
|
|
323
|
+
"auto",
|
|
324
|
+
"%",
|
|
325
|
+
"inherit",
|
|
326
|
+
"-moz-fit-content",
|
|
327
|
+
"vh",
|
|
328
|
+
"0",
|
|
329
|
+
"initial",
|
|
330
|
+
"vw"
|
|
331
|
+
],
|
|
332
|
+
"replacements": {
|
|
333
|
+
"px": "var(--zd_size$$)"
|
|
334
|
+
},
|
|
335
|
+
"range": {
|
|
336
|
+
"start": -1650,
|
|
337
|
+
"end": 1650
|
|
338
|
+
}
|
|
339
|
+
},
|
|
340
|
+
"min-width": {
|
|
341
|
+
"allowed": [
|
|
342
|
+
"px",
|
|
343
|
+
"em",
|
|
344
|
+
"fit-content",
|
|
345
|
+
"auto",
|
|
346
|
+
"%",
|
|
347
|
+
"inherit",
|
|
348
|
+
"-moz-fit-content",
|
|
349
|
+
"vh",
|
|
350
|
+
"0",
|
|
351
|
+
"initial",
|
|
352
|
+
"vw"
|
|
353
|
+
],
|
|
354
|
+
"replacements": {
|
|
355
|
+
"px": "var(--zd_size$$)"
|
|
356
|
+
},
|
|
357
|
+
"range": {
|
|
358
|
+
"start": -1650,
|
|
359
|
+
"end": 1650
|
|
360
|
+
}
|
|
361
|
+
},
|
|
362
|
+
"max-width": {
|
|
363
|
+
"allowed": [
|
|
364
|
+
"px",
|
|
365
|
+
"em",
|
|
366
|
+
"fit-content",
|
|
367
|
+
"auto",
|
|
368
|
+
"%",
|
|
369
|
+
"inherit",
|
|
370
|
+
"-moz-fit-content",
|
|
371
|
+
"vh",
|
|
372
|
+
"0",
|
|
373
|
+
"initial",
|
|
374
|
+
"vw"
|
|
375
|
+
],
|
|
376
|
+
"replacements": {
|
|
377
|
+
"px": "var(--zd_size$$)"
|
|
378
|
+
},
|
|
379
|
+
"range": {
|
|
380
|
+
"start": -1650,
|
|
381
|
+
"end": 1650
|
|
382
|
+
}
|
|
383
|
+
},
|
|
384
|
+
"min-height": {
|
|
385
|
+
"allowed": [
|
|
386
|
+
"px",
|
|
387
|
+
"em",
|
|
388
|
+
"fit-content",
|
|
389
|
+
"auto",
|
|
390
|
+
"%",
|
|
391
|
+
"inherit",
|
|
392
|
+
"-moz-fit-content",
|
|
393
|
+
"vh",
|
|
394
|
+
"0",
|
|
395
|
+
"initial",
|
|
396
|
+
"vw"
|
|
397
|
+
],
|
|
398
|
+
"replacements": {
|
|
399
|
+
"px": "var(--zd_size$$)"
|
|
400
|
+
},
|
|
401
|
+
"range": {
|
|
402
|
+
"start": -1650,
|
|
403
|
+
"end": 1650
|
|
404
|
+
}
|
|
405
|
+
},
|
|
406
|
+
"max-height": {
|
|
407
|
+
"allowed": [
|
|
408
|
+
"px",
|
|
409
|
+
"em",
|
|
410
|
+
"fit-content",
|
|
411
|
+
"auto",
|
|
412
|
+
"%",
|
|
413
|
+
"inherit",
|
|
414
|
+
"-moz-fit-content",
|
|
415
|
+
"vh",
|
|
416
|
+
"0",
|
|
417
|
+
"initial",
|
|
418
|
+
"vw"
|
|
419
|
+
],
|
|
420
|
+
"replacements": {
|
|
421
|
+
"px": "var(--zd_size$$)"
|
|
422
|
+
},
|
|
423
|
+
"range": {
|
|
424
|
+
"start": -1650,
|
|
425
|
+
"end": 1650
|
|
426
|
+
}
|
|
427
|
+
},
|
|
428
|
+
"top": {
|
|
429
|
+
"allowed": [
|
|
430
|
+
"px",
|
|
431
|
+
"em",
|
|
432
|
+
"fit-content",
|
|
433
|
+
"auto",
|
|
434
|
+
"%",
|
|
435
|
+
"inherit",
|
|
436
|
+
"-moz-fit-content",
|
|
437
|
+
"vh",
|
|
438
|
+
"0",
|
|
439
|
+
"initial",
|
|
440
|
+
"vw"
|
|
441
|
+
],
|
|
442
|
+
"replacements": {
|
|
443
|
+
"px": "var(--zd_size$$)"
|
|
444
|
+
},
|
|
445
|
+
"range": {
|
|
446
|
+
"start": -1650,
|
|
447
|
+
"end": 1650
|
|
448
|
+
}
|
|
449
|
+
},
|
|
450
|
+
"bottom": {
|
|
451
|
+
"allowed": [
|
|
452
|
+
"px",
|
|
453
|
+
"em",
|
|
454
|
+
"fit-content",
|
|
455
|
+
"auto",
|
|
456
|
+
"%",
|
|
457
|
+
"inherit",
|
|
458
|
+
"-moz-fit-content",
|
|
459
|
+
"vh",
|
|
460
|
+
"0",
|
|
461
|
+
"initial",
|
|
462
|
+
"vw"
|
|
463
|
+
],
|
|
464
|
+
"replacements": {
|
|
465
|
+
"px": "var(--zd_size$$)"
|
|
466
|
+
},
|
|
467
|
+
"range": {
|
|
468
|
+
"start": -1650,
|
|
469
|
+
"end": 1650
|
|
470
|
+
}
|
|
471
|
+
},
|
|
472
|
+
"left": {
|
|
473
|
+
"allowed": [
|
|
474
|
+
"px",
|
|
475
|
+
"em",
|
|
476
|
+
"fit-content",
|
|
477
|
+
"auto",
|
|
478
|
+
"%",
|
|
479
|
+
"inherit",
|
|
480
|
+
"-moz-fit-content",
|
|
481
|
+
"vh",
|
|
482
|
+
"0",
|
|
483
|
+
"initial",
|
|
484
|
+
"vw"
|
|
485
|
+
],
|
|
486
|
+
"replacements": {
|
|
487
|
+
"px": "var(--zd_size$$)"
|
|
488
|
+
},
|
|
489
|
+
"range": {
|
|
490
|
+
"start": -1650,
|
|
491
|
+
"end": 1650
|
|
492
|
+
}
|
|
493
|
+
},
|
|
494
|
+
"right": {
|
|
495
|
+
"allowed": [
|
|
496
|
+
"px",
|
|
497
|
+
"em",
|
|
498
|
+
"fit-content",
|
|
499
|
+
"auto",
|
|
500
|
+
"%",
|
|
501
|
+
"inherit",
|
|
502
|
+
"-moz-fit-content",
|
|
503
|
+
"vh",
|
|
504
|
+
"0",
|
|
505
|
+
"initial",
|
|
506
|
+
"vw"
|
|
507
|
+
],
|
|
508
|
+
"replacements": {
|
|
509
|
+
"px": "var(--zd_size$$)"
|
|
510
|
+
},
|
|
511
|
+
"range": {
|
|
512
|
+
"start": -1650,
|
|
513
|
+
"end": 1650
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
}
|
|
518
|
+
```
|
|
519
|
+
|
|
520
|
+
Step 1 : Adding variable:ignore
|
|
521
|
+
|
|
522
|
+
use command `npm run variable:addignore` on source folder
|
|
523
|
+
|
|
524
|
+
before :
|
|
525
|
+
```css
|
|
526
|
+
.a{
|
|
527
|
+
font-size: var(--zd_size14);
|
|
528
|
+
margin: var(--zd_size12);
|
|
529
|
+
padding: 12px;
|
|
530
|
+
}
|
|
531
|
+
```
|
|
532
|
+
|
|
533
|
+
after :
|
|
534
|
+
|
|
535
|
+
```css
|
|
536
|
+
/* explanation : since padding has declaration in px instead of var, it is considered unique and thereby no conversion should take place, hence we add variable:ignore preceding the line */
|
|
537
|
+
.a{
|
|
538
|
+
font-size: var(--zd_size14);
|
|
539
|
+
margin: var(--zd_size12);
|
|
540
|
+
/*Variable:Ignore*/
|
|
541
|
+
padding: 12px;
|
|
542
|
+
}
|
|
543
|
+
```
|
|
544
|
+
|
|
545
|
+
Step 2 : Converting vars to px
|
|
546
|
+
|
|
547
|
+
use command `npm run variable:convert` on source folder
|
|
548
|
+
|
|
549
|
+
before :
|
|
550
|
+
```css
|
|
551
|
+
.a{
|
|
552
|
+
font-size: var(--zd_size14);
|
|
553
|
+
margin: var(--zd_size12);
|
|
554
|
+
/*Variable:Ignore*/
|
|
555
|
+
padding: 12px;
|
|
556
|
+
}
|
|
557
|
+
```
|
|
558
|
+
|
|
559
|
+
after :
|
|
560
|
+
```css
|
|
561
|
+
/* explanation : conversion from vars to px is done making the declarations convertable to custom variables further by the react-cli plugin*/
|
|
562
|
+
.a{
|
|
563
|
+
font-size: 14px;
|
|
564
|
+
margin: 12px;
|
|
565
|
+
/*Variable:Ignore*/
|
|
566
|
+
padding: 12px;
|
|
567
|
+
}
|
|
568
|
+
```
|
|
569
|
+
|
|
570
|
+
Step 3 : Conversion from px to custom variables present in settings
|
|
571
|
+
|
|
572
|
+
Things that are considered in the conversion :
|
|
573
|
+
=> `allowed` is the allowed units that can be converted through the plugin
|
|
574
|
+
=> `replacements` are the conversion strings where `$$` will be converted to respective numbers
|
|
575
|
+
=> `range` is the starting and ending value within numbers will be allowed.
|
|
576
|
+
|
|
577
|
+
`variableModificationPlugin` in react-cli folder is where the conversion takes place.
|
|
578
|
+
|
|
579
|
+
and output would be as follows :
|
|
580
|
+
|
|
581
|
+
before :
|
|
582
|
+
|
|
583
|
+
```css
|
|
584
|
+
/* explanation : conversion from px to variable is allowed since, all the conditions for font-size and margin are satisfied, the numbers are within range and the unit is in the allowed array, replacements are thereby taken from the values in replacements and conversion is done to custom variables */
|
|
585
|
+
|
|
586
|
+
/*
|
|
587
|
+
"font-size": {
|
|
588
|
+
"allowed": [
|
|
589
|
+
"px",
|
|
590
|
+
"em",
|
|
591
|
+
"%",
|
|
592
|
+
"0",
|
|
593
|
+
"vh",
|
|
594
|
+
"initial"
|
|
595
|
+
],
|
|
596
|
+
"replacements": {
|
|
597
|
+
"px": "var(--zd_font_size$$)",
|
|
598
|
+
"em": "var(--zd_font_size$$em)"
|
|
599
|
+
},
|
|
600
|
+
"range": {
|
|
601
|
+
"start": 0,
|
|
602
|
+
"end": 1650
|
|
603
|
+
}
|
|
604
|
+
},
|
|
605
|
+
*/
|
|
606
|
+
/*
|
|
607
|
+
|
|
608
|
+
"margin": {
|
|
609
|
+
"allowed": [
|
|
610
|
+
"px",
|
|
611
|
+
"em",
|
|
612
|
+
"fit-content",
|
|
613
|
+
"auto",
|
|
614
|
+
"%",
|
|
615
|
+
"inherit",
|
|
616
|
+
"-moz-fit-content",
|
|
617
|
+
"vh",
|
|
618
|
+
"0",
|
|
619
|
+
"initial",
|
|
620
|
+
"vw"
|
|
621
|
+
],
|
|
622
|
+
"replacements": {
|
|
623
|
+
"px": "var(--zd_size$$)"
|
|
624
|
+
},
|
|
625
|
+
"range": {
|
|
626
|
+
"start": -1650,
|
|
627
|
+
"end": 1650
|
|
628
|
+
}
|
|
629
|
+
},
|
|
630
|
+
|
|
631
|
+
*/
|
|
632
|
+
.a{
|
|
633
|
+
font-size: 14px;
|
|
634
|
+
margin: 12px;
|
|
635
|
+
/*Variable:Ignore*/
|
|
636
|
+
padding: 12px;
|
|
637
|
+
}
|
|
638
|
+
```
|
|
639
|
+
|
|
640
|
+
after :
|
|
641
|
+
|
|
642
|
+
```css
|
|
643
|
+
|
|
644
|
+
.a{
|
|
645
|
+
font-size: var(--zd_size14);
|
|
646
|
+
margin: var(--zd_size12);
|
|
647
|
+
/*Variable:Ignore*/
|
|
648
|
+
padding: 12px;
|
|
649
|
+
}
|
|
650
|
+
```
|
|
651
|
+
|
|
652
|
+
Output configuration :
|
|
653
|
+
|
|
654
|
+
Consider the below mentioned :
|
|
655
|
+
```json
|
|
656
|
+
"errorLog": false,
|
|
657
|
+
"errorInConsole": false,
|
|
658
|
+
"errorsAllowed":{
|
|
659
|
+
"DECLARATION_IGNORED" : true,
|
|
660
|
+
"UNIT_ERROR" : true,
|
|
661
|
+
"RANGE_ERROR" : true,
|
|
662
|
+
"VARIABLE_PRESENT" : true
|
|
663
|
+
},
|
|
664
|
+
```
|
|
665
|
+
. if an error log is necessary, a physical file `css_error.log` will be created in the source directory upon making `errorLog` true. will take generally more than usual time to write in the file, so delay in build is present.
|
|
666
|
+
|
|
667
|
+
. if error is needed to be seen in the console, `errorInConsole` should be enabled, all errors will be printed in the console.
|
|
668
|
+
|
|
669
|
+
. Individual errors can be enabled in `errorsAllowed` to collaboratively produce the error log file / errors in console. Here each of the errors mean the following :
|
|
670
|
+
|
|
671
|
+
=> `DECLARATION_IGNORED` : Lines that succeed the /*Variable:Ignore*/ comment.
|
|
672
|
+
=> `UNIT_ERROR` : the units that are not present in the corresponding property's `allowed` array are used.
|
|
673
|
+
=> `RANGE_ERROR` : numerical values that are not present within the range of the corresponding property's `range` is used.
|
|
674
|
+
=> `VARIABLE_PRESENT` : conversion to px (Step 2) wasn't done properly and hence there are residues that contain `var` in it are found.
|
|
675
|
+
|
|
676
|
+
|
|
677
|
+
* First two conversions are to be done manually by the use of the commands, `npm run variable:addignore` and `npm run variable:convert`
|
|
678
|
+
* Final conversion is done by react-cli on compilation of the source folder `npm run start --app:port=**** --app:domain=****`
|
|
@@ -16,8 +16,8 @@ var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
|
|
|
16
16
|
|
|
17
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
const options = (0, _utils.getOptions)();
|
|
20
|
+
const {
|
|
21
21
|
unstableDepsInverse,
|
|
22
22
|
app: {
|
|
23
23
|
folder,
|
|
@@ -27,6 +27,7 @@ let {
|
|
|
27
27
|
plugins,
|
|
28
28
|
exclude,
|
|
29
29
|
mediaQueryHoverActiveString,
|
|
30
|
+
cssVariableReplacementConfig,
|
|
30
31
|
cssUniqueness,
|
|
31
32
|
seperateCssModules,
|
|
32
33
|
changeRuntimeChunkChar,
|
|
@@ -41,13 +42,13 @@ let {
|
|
|
41
42
|
crossorigin
|
|
42
43
|
}
|
|
43
44
|
} = options;
|
|
44
|
-
|
|
45
|
+
const {
|
|
45
46
|
disableContextURL
|
|
46
47
|
} = server;
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
const appPath = process.cwd();
|
|
49
|
+
const contextURL = disableContextURL ? '' : context;
|
|
50
|
+
const serverUrl = (0, _utils.getServerURL)(server, 'https');
|
|
51
|
+
const output = {
|
|
51
52
|
path: _path.default.join(appPath, outputFolder),
|
|
52
53
|
filename: 'js/[name].js',
|
|
53
54
|
chunkFilename: 'js/[name].js',
|
|
@@ -86,9 +87,9 @@ module.exports = {
|
|
|
86
87
|
test: /\.js$/,
|
|
87
88
|
use: (0, _loaderUtils.getDevJsLoaders)(options),
|
|
88
89
|
include: module => {
|
|
89
|
-
|
|
90
|
+
const srcPath = _path.default.join(appPath, folder);
|
|
90
91
|
|
|
91
|
-
|
|
92
|
+
const depsPath = _path.default.join(appPath, 'node_modules', '@zohodesk');
|
|
92
93
|
|
|
93
94
|
if (module.includes(srcPath) || devConsoleExculde && module.includes(depsPath)) {
|
|
94
95
|
return true;
|
|
@@ -99,10 +100,10 @@ module.exports = {
|
|
|
99
100
|
}, seperateCssModules ? {
|
|
100
101
|
test: /\.css$/,
|
|
101
102
|
exclude: /\.module\.css$/,
|
|
102
|
-
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, '[local]', false, null)
|
|
103
|
+
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, '[local]', false, null)
|
|
103
104
|
} : null, {
|
|
104
105
|
test: seperateCssModules ? /\.module\.css$/ : /(\.module)?\.css$/,
|
|
105
|
-
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, null, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
|
|
106
|
+
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, null, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
|
|
106
107
|
}, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), {
|
|
107
108
|
test: /\.tmpl$/,
|
|
108
109
|
use: [{
|
|
@@ -14,8 +14,8 @@ var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
|
|
|
14
14
|
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
const options = (0, _utils.getOptions)();
|
|
18
|
+
const {
|
|
19
19
|
unstableDepsInverse,
|
|
20
20
|
docs: {
|
|
21
21
|
componentFolder,
|
|
@@ -25,6 +25,7 @@ let {
|
|
|
25
25
|
plugins,
|
|
26
26
|
exclude,
|
|
27
27
|
mediaQueryHoverActiveString,
|
|
28
|
+
cssVariableReplacementConfig,
|
|
28
29
|
cssHashSelectors,
|
|
29
30
|
classNamePrefix
|
|
30
31
|
},
|
|
@@ -32,7 +33,7 @@ let {
|
|
|
32
33
|
folder
|
|
33
34
|
}
|
|
34
35
|
} = options;
|
|
35
|
-
|
|
36
|
+
const appPath = process.cwd();
|
|
36
37
|
const nameTemplate = (0, _configsAssetsLoaders.createNameTemplate)(enableChunkHash);
|
|
37
38
|
|
|
38
39
|
module.exports = isSSTest => ({
|
|
@@ -74,7 +75,7 @@ module.exports = isSSTest => ({
|
|
|
74
75
|
exclude: /node_modules/
|
|
75
76
|
}, {
|
|
76
77
|
test: /(\.module)?\.css$/,
|
|
77
|
-
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
|
|
78
|
+
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
|
|
78
79
|
}, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
|
|
79
80
|
test: /\.html$/,
|
|
80
81
|
use: {
|
|
@@ -12,14 +12,15 @@ var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
|
|
|
12
12
|
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
const options = (0, _utils.getOptions)();
|
|
16
|
+
const {
|
|
17
17
|
docs: {
|
|
18
18
|
componentFolder,
|
|
19
19
|
cssUniqueness,
|
|
20
20
|
plugins,
|
|
21
21
|
exclude,
|
|
22
22
|
mediaQueryHoverActiveString,
|
|
23
|
+
cssVariableReplacementConfig,
|
|
23
24
|
cssHashSelectors,
|
|
24
25
|
enableChunkHash,
|
|
25
26
|
classNamePrefix
|
|
@@ -28,7 +29,7 @@ let {
|
|
|
28
29
|
folder
|
|
29
30
|
}
|
|
30
31
|
} = options;
|
|
31
|
-
|
|
32
|
+
const appPath = process.cwd();
|
|
32
33
|
const nameTemplate = (0, _configsAssetsLoaders.createNameTemplate)(enableChunkHash);
|
|
33
34
|
module.exports = {
|
|
34
35
|
entry: {
|
|
@@ -69,7 +70,7 @@ module.exports = {
|
|
|
69
70
|
exclude: /node_modules/
|
|
70
71
|
}, {
|
|
71
72
|
test: /(\.module)?\.css$/,
|
|
72
|
-
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
|
|
73
|
+
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
|
|
73
74
|
}, (0, _configsAssetsLoaders.configImageLoader)(nameTemplate), (0, _configsAssetsLoaders.configFontLoader)(nameTemplate), (0, _configsAssetsLoaders.configSVGLoader)(nameTemplate), (0, _configsAssetsLoaders.configAudioLoader)(nameTemplate), (0, _configsAssetsLoaders.configVideoLoader)(nameTemplate), {
|
|
74
75
|
test: /\.html$/,
|
|
75
76
|
use: {
|
|
@@ -17,7 +17,7 @@ var _configsAssetsLoaders = require("../loaderUtils/configsAssetsLoaders");
|
|
|
17
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
18
|
|
|
19
19
|
// import TerserPlugin from 'terser-webpack-plugin';
|
|
20
|
-
|
|
20
|
+
const options = (0, _utils.getOptions)();
|
|
21
21
|
let {
|
|
22
22
|
unstableDepsInverse,
|
|
23
23
|
app: {
|
|
@@ -32,6 +32,7 @@ let {
|
|
|
32
32
|
plugins,
|
|
33
33
|
exclude,
|
|
34
34
|
mediaQueryHoverActiveString,
|
|
35
|
+
cssVariableReplacementConfig,
|
|
35
36
|
cssUniqueness,
|
|
36
37
|
server: {
|
|
37
38
|
mode
|
|
@@ -46,10 +47,10 @@ let {
|
|
|
46
47
|
crossorigin
|
|
47
48
|
}
|
|
48
49
|
} = options;
|
|
49
|
-
|
|
50
|
-
|
|
50
|
+
const appPath = process.cwd();
|
|
51
|
+
const isDevelopment = mode === 'prod' || mode === 'dev' || mode === 'dev-no-warn';
|
|
51
52
|
enableChunkHash = !isDevelopment && enableChunkHash;
|
|
52
|
-
|
|
53
|
+
const output = {
|
|
53
54
|
path: _path.default.resolve(appPath, outputFolder),
|
|
54
55
|
filename: enableChunkHash ? 'js/[name].[chunkhash:20]_.js' : 'js/[name]_.js',
|
|
55
56
|
chunkFilename: enableChunkHash ? 'js/[name].[chunkhash:20]_.js' : 'js/[name]_.js',
|
|
@@ -62,15 +63,15 @@ if (crossorigin) {
|
|
|
62
63
|
}
|
|
63
64
|
|
|
64
65
|
if (isDevelopment) {
|
|
65
|
-
|
|
66
|
+
const {
|
|
66
67
|
disableContextURL
|
|
67
68
|
} = server;
|
|
68
|
-
|
|
69
|
-
|
|
69
|
+
const contextURL = disableContextURL ? '' : context;
|
|
70
|
+
const serverUrl = (0, _utils.getServerURL)(server, 'https');
|
|
70
71
|
output.publicPath = `${[serverUrl, contextURL].filter(a => a).join('/')}/`;
|
|
71
72
|
}
|
|
72
73
|
|
|
73
|
-
|
|
74
|
+
const shouldRemovePropTypes = !isDevelopment && removePropTypes;
|
|
74
75
|
module.exports = {
|
|
75
76
|
entry: (0, _common.getEntries)(options, 'production'),
|
|
76
77
|
devtool: isDevelopment ? 'cheap-module-source-map' : enableSMap ? 'hidden-source-map' : 'none',
|
|
@@ -134,9 +135,9 @@ module.exports = {
|
|
|
134
135
|
}].filter(Boolean),
|
|
135
136
|
// include: path.join(appPath, folder)
|
|
136
137
|
include: module => {
|
|
137
|
-
|
|
138
|
+
const srcPath = _path.default.join(appPath, folder);
|
|
138
139
|
|
|
139
|
-
|
|
140
|
+
const depsPath = _path.default.join(appPath, 'node_modules', '@zohodesk');
|
|
140
141
|
|
|
141
142
|
if (module.includes(srcPath) || devConsoleExculde && module.includes(depsPath)) {
|
|
142
143
|
return true;
|
|
@@ -147,10 +148,10 @@ module.exports = {
|
|
|
147
148
|
}, seperateCssModules ? {
|
|
148
149
|
test: /\.css$/,
|
|
149
150
|
exclude: /\.module\.css$/,
|
|
150
|
-
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, '[local]', false, null)
|
|
151
|
+
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, cssVariableReplacementConfig, mediaQueryHoverActiveString, '[local]', false, null)
|
|
151
152
|
} : null, {
|
|
152
153
|
test: seperateCssModules ? /\.module\.css$/ : /\.css$/,
|
|
153
|
-
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, false, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
|
|
154
|
+
use: (0, _loaderUtils.getCSSLoaders)(plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, false, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix)
|
|
154
155
|
}, {
|
|
155
156
|
test: /\.jpe?g$|\.gif$|\.png$/,
|
|
156
157
|
use: [{
|
|
@@ -13,8 +13,10 @@ var _utils = require("../utils");
|
|
|
13
13
|
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
const fs = require('fs');
|
|
17
|
+
|
|
18
|
+
const options = (0, _utils.getOptions)();
|
|
19
|
+
const isWin = process.platform === 'win32';
|
|
18
20
|
|
|
19
21
|
function windowsModification(array) {
|
|
20
22
|
return isWin ? array.map(r => r.replace(/\//g, '\\')) : array;
|
|
@@ -31,7 +33,7 @@ function excludeEmptyCheckPlugin({
|
|
|
31
33
|
})] : [];
|
|
32
34
|
}
|
|
33
35
|
|
|
34
|
-
|
|
36
|
+
const getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, cssVariableReplacementConfig, classNameBlob, cssUniqueness, selectorReplace, cssHashSelectors, classNamePrefix) => {
|
|
35
37
|
// console.log('plugins:')
|
|
36
38
|
// console.log(plugins)
|
|
37
39
|
// console.log('exclude:')
|
|
@@ -45,10 +47,12 @@ let getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, classNameBlo
|
|
|
45
47
|
const {
|
|
46
48
|
cssSelectorZipPath
|
|
47
49
|
} = options.impactService;
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
fs.writeFileSync('./css_error.log', '');
|
|
51
|
+
const rtlExcludeLocal = windowsModification(exclude.rtl);
|
|
52
|
+
const hoverActiveExcludeLocal = windowsModification(exclude.hoverActive);
|
|
53
|
+
const combinerMediaQueryExcludeLocal = windowsModification(exclude.combinerMediaQuery);
|
|
54
|
+
const cssVariableReplacementExcludeLocal = windowsModification(exclude.cssVariableReplacement);
|
|
55
|
+
const cssLoaderOptions = {
|
|
52
56
|
// importLoaders: hasRTL||hoverActive ? 1 : 0,
|
|
53
57
|
importLoaders: 1,
|
|
54
58
|
modules: {},
|
|
@@ -61,7 +65,12 @@ let getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, classNameBlo
|
|
|
61
65
|
cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix);
|
|
62
66
|
}
|
|
63
67
|
|
|
64
|
-
const postcssPlugins = [valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), selectorReplace && require('postcss-selector-replace')(selectorReplace), ...excludeEmptyCheckPlugin({
|
|
68
|
+
const postcssPlugins = [valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), selectorReplace && require('postcss-selector-replace')(selectorReplace), // ...excludeEmptyCheckPlugin({
|
|
69
|
+
// enable: true,
|
|
70
|
+
// ignore: [],
|
|
71
|
+
// plugins: [require('../postcss-plugins/variablePropertiesCollector').default()]
|
|
72
|
+
// }),
|
|
73
|
+
...excludeEmptyCheckPlugin({
|
|
65
74
|
enable: plugins.hasRTL,
|
|
66
75
|
ignore: rtlExcludeLocal,
|
|
67
76
|
plugins: [require('@zohodesk/postcss-rtl')({
|
|
@@ -81,8 +90,11 @@ let getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, classNameBlo
|
|
|
81
90
|
enable: plugins.hoverActive,
|
|
82
91
|
ignore: hoverActiveExcludeLocal,
|
|
83
92
|
plugins: [require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString)]
|
|
84
|
-
})
|
|
85
|
-
|
|
93
|
+
}), ...excludeEmptyCheckPlugin({
|
|
94
|
+
enable: plugins.cssVariableReplacement,
|
|
95
|
+
ignore: cssVariableReplacementExcludeLocal,
|
|
96
|
+
plugins: [require('../postcss-plugins/variableModificationPlugin/index')(cssVariableReplacementConfig)]
|
|
97
|
+
})].filter(Boolean);
|
|
86
98
|
return [cssSelectorZipPath && {
|
|
87
99
|
loader: require.resolve('../loaders/selectorMappingLoader')
|
|
88
100
|
}, {
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ErrorHandler = void 0;
|
|
7
|
+
|
|
8
|
+
class ErrorHandler {
|
|
9
|
+
constructor(allowedErrs) {
|
|
10
|
+
this.errors = [];
|
|
11
|
+
this.allowedErrs = allowedErrs;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
addError(errstr) {
|
|
15
|
+
this.errors.push(`{\n${errstr}\n}\n`);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
errorFunction(errStr, type) {
|
|
19
|
+
const {
|
|
20
|
+
addError,
|
|
21
|
+
allowedErrs
|
|
22
|
+
} = this;
|
|
23
|
+
|
|
24
|
+
if (type === 'DECLARATION_IGNORED' && allowedErrs.DECLARATION_IGNORED) {
|
|
25
|
+
addError(errStr);
|
|
26
|
+
} else if (type === 'UNIT_ERROR' && allowedErrs.UNIT_ERROR) {
|
|
27
|
+
addError(errStr);
|
|
28
|
+
} else if (type === 'RANGE_ERROR' && allowedErrs.RANGE_ERROR) {
|
|
29
|
+
addError(errStr);
|
|
30
|
+
} else if (type === 'VARIABLE_PRESENT' && allowedErrs.VARIABLE_PRESENT) {
|
|
31
|
+
addError(errStr);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
exports.ErrorHandler = ErrorHandler;
|
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
const postcss = require('postcss');
|
|
4
|
+
|
|
5
|
+
const fs = require('fs');
|
|
6
|
+
|
|
7
|
+
const path = require('path');
|
|
8
|
+
|
|
9
|
+
const errors = [];
|
|
10
|
+
let allowedErrs = {};
|
|
11
|
+
const convertableProps = {
|
|
12
|
+
'font-size': true,
|
|
13
|
+
margin: true,
|
|
14
|
+
'margin-left': true,
|
|
15
|
+
'margin-right': true,
|
|
16
|
+
'margin-top': true,
|
|
17
|
+
'margin-bottom': true,
|
|
18
|
+
padding: true,
|
|
19
|
+
'padding-top': true,
|
|
20
|
+
'padding-bottom': true,
|
|
21
|
+
'padding-left': true,
|
|
22
|
+
'padding-right': true,
|
|
23
|
+
width: true,
|
|
24
|
+
'min-width': true,
|
|
25
|
+
'max-width': true,
|
|
26
|
+
height: true,
|
|
27
|
+
'min-height': true,
|
|
28
|
+
'max-height': true,
|
|
29
|
+
top: true,
|
|
30
|
+
bottom: true,
|
|
31
|
+
left: true,
|
|
32
|
+
right: true
|
|
33
|
+
};
|
|
34
|
+
const constantValues = {
|
|
35
|
+
inherit: true,
|
|
36
|
+
initial: true,
|
|
37
|
+
auto: true,
|
|
38
|
+
'fit-content': true,
|
|
39
|
+
unset: true
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
function getNumericValue(value) {
|
|
43
|
+
if (value.includes('var')) {
|
|
44
|
+
return parseInt(value.replace(/var\(--zd_size(\d+)\)/gi, '$1').replace(/var\(--zd_font_size(\d+)\)/gi, '$1'));
|
|
45
|
+
} // Not need for this dum loop
|
|
46
|
+
// allowed.forEach(alwdUnit => {
|
|
47
|
+
// if (value.includes(alwdUnit)) {
|
|
48
|
+
// return parseInt(value);
|
|
49
|
+
// }
|
|
50
|
+
// });
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
if (constantValues[value.toLowerCase()]) {
|
|
54
|
+
return 1;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
return parseInt(value);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
function pxToCalc(value) {
|
|
61
|
+
const arr = value.split(' ');
|
|
62
|
+
arr.forEach((val, index) => {
|
|
63
|
+
['px'].forEach(unit => {
|
|
64
|
+
const valWithUnit = new RegExp(`(\\d+)${unit}`, 'gi');
|
|
65
|
+
|
|
66
|
+
if (valWithUnit.test(val)) {
|
|
67
|
+
arr[index] = val.replace(valWithUnit, '(var(--zd_size$1))');
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
return arr.join(' ');
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
const addError = errstr => {
|
|
75
|
+
errors.push(`{\n${errstr}\n}\n`);
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
const errorFunction = (errStr, type) => {
|
|
79
|
+
if (type === 'DECLARATION_IGNORED' && allowedErrs.DECLARATION_IGNORED) {
|
|
80
|
+
addError(errStr);
|
|
81
|
+
} else if (type === 'UNIT_ERROR' && allowedErrs.UNIT_ERROR) {
|
|
82
|
+
addError(errStr);
|
|
83
|
+
} else if (type === 'RANGE_ERROR' && allowedErrs.RANGE_ERROR) {
|
|
84
|
+
addError(errStr);
|
|
85
|
+
} else if (type === 'VARIABLE_PRESENT' && allowedErrs.VARIABLE_PRESENT) {
|
|
86
|
+
addError(errStr);
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
const singleConvertor = (value, changeVal, details, range) => {
|
|
91
|
+
const {
|
|
92
|
+
path,
|
|
93
|
+
filename,
|
|
94
|
+
decl
|
|
95
|
+
} = details;
|
|
96
|
+
|
|
97
|
+
if (getNumericValue(value) >= range.start && getNumericValue(value) <= range.end || getNumericValue(value) === 0) {
|
|
98
|
+
let retVal = value.replace(/(\d+)px/gi, changeVal.replace('$$', '$1'));
|
|
99
|
+
|
|
100
|
+
if (/^-var/.test(retVal)) {
|
|
101
|
+
retVal = `calc( ${retVal.substring(1)} * -1 )`;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
return retVal;
|
|
105
|
+
} // if(unitErrorVal && unitErrorVal != '0' ){
|
|
106
|
+
// console.log(value, 'not within range')
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
errorFunction(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n message : value (${value}) (${typeof value}) not within range (${range.start},${range.end})\r`, 'RANGE_ERROR'); // }
|
|
110
|
+
// addError(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n message : value (${value}) not within range (${range.start},${range.end})\r`)
|
|
111
|
+
|
|
112
|
+
return value;
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
module.exports = postcss.plugin('postcss-variable-report', cssVariableReplacementConfig => {
|
|
116
|
+
const rawdata = fs.readFileSync(cssVariableReplacementConfig);
|
|
117
|
+
const data = JSON.parse(rawdata);
|
|
118
|
+
const {
|
|
119
|
+
errorsAllowed,
|
|
120
|
+
settings: settingsObject,
|
|
121
|
+
errorLog: errorLogStatus,
|
|
122
|
+
errorInConsole: errorConsoleStatus
|
|
123
|
+
} = data; // const keys = Object.keys(settingsObject);
|
|
124
|
+
|
|
125
|
+
allowedErrs = errorsAllowed;
|
|
126
|
+
const replacementArray = [];
|
|
127
|
+
Object.keys(settingsObject).forEach(key => {
|
|
128
|
+
Object.values(settingsObject[key].replacements).forEach(val => {
|
|
129
|
+
if (!replacementArray.includes(val)) {
|
|
130
|
+
replacementArray.push(val);
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
});
|
|
134
|
+
let regValStr = '';
|
|
135
|
+
replacementArray.forEach((val, index) => {
|
|
136
|
+
if (index !== replacementArray.length - 1) {
|
|
137
|
+
regValStr += `${val.replace('$$', '\\d+')}|`;
|
|
138
|
+
} else {
|
|
139
|
+
regValStr += `${val.replace('$$', '\\d+')}`;
|
|
140
|
+
}
|
|
141
|
+
});
|
|
142
|
+
const valRegex = new RegExp(regValStr, 'gi');
|
|
143
|
+
return rootOriginal => {
|
|
144
|
+
rootOriginal.walkRules(rule => {
|
|
145
|
+
// rule.nodes[-1] = {}
|
|
146
|
+
// need map, forEach fine less memory
|
|
147
|
+
rule.nodes.forEach((decl, position) => {
|
|
148
|
+
// case font-size
|
|
149
|
+
const commentStr = 'variable:ignore';
|
|
150
|
+
const prevNode = rule.nodes[position - 1];
|
|
151
|
+
const fromPath = rootOriginal.source.input.from; // this will be problem for linux and mac use require('path').sep
|
|
152
|
+
// split not need use slice and lastIndexOf less memory
|
|
153
|
+
|
|
154
|
+
const filename = fromPath.split(path.sep).pop();
|
|
155
|
+
|
|
156
|
+
if (prevNode && prevNode.type === 'comment' && prevNode.text.toLowerCase().includes(commentStr)) {
|
|
157
|
+
const errStr = ` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${fromPath} ,\n line : ${decl.source.start.line} ,\n message : Declaration Ignored \r`;
|
|
158
|
+
errorFunction(errStr, 'DECLARATION_IGNORED');
|
|
159
|
+
return;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
if (settingsObject[decl.prop] && !decl.value.includes('var(--')) {
|
|
163
|
+
const settings = settingsObject[decl.prop]; // console.log(settings)
|
|
164
|
+
|
|
165
|
+
const {
|
|
166
|
+
allowed,
|
|
167
|
+
range
|
|
168
|
+
} = settings; // suggestion filter !decl.value.includes('calc')
|
|
169
|
+
// Reason below some of logic happen based on this
|
|
170
|
+
|
|
171
|
+
const unit = decl.value.toString() // no need round braket since you do not need group for less memory
|
|
172
|
+
.replace(/\d+/gi, '').replace('var(--zd_size)', 'px').replace('var(--zd_font_size)', 'px').split(' ').filter(x => x !== ''); // unit = unit.replace(unit, unit.replace('-',''))
|
|
173
|
+
// console.log('unit : ');
|
|
174
|
+
// console.log(unit);
|
|
175
|
+
|
|
176
|
+
unit.forEach((val, index) => {
|
|
177
|
+
allowed.forEach(alwdVal => {
|
|
178
|
+
if (val.includes(alwdVal)) {
|
|
179
|
+
// ## for what purpose
|
|
180
|
+
unit[index] = val.replace(`-${alwdVal}`, `${alwdVal}`).replace(`-.${alwdVal}`, `${alwdVal}`);
|
|
181
|
+
}
|
|
182
|
+
});
|
|
183
|
+
});
|
|
184
|
+
let unitError = false;
|
|
185
|
+
let unitErrorVal = '';
|
|
186
|
+
unit.forEach(val => {
|
|
187
|
+
if (!val.includes('calc')) {
|
|
188
|
+
if (!allowed.includes(val.toString())) {
|
|
189
|
+
unitError = true;
|
|
190
|
+
unitErrorVal = val;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}); // console.log(allowed, replacements, range)
|
|
194
|
+
|
|
195
|
+
if (!unitError) {
|
|
196
|
+
// use variable decl.value.split(' ')
|
|
197
|
+
if (range) {
|
|
198
|
+
// console.log('multiple :', decl.value)
|
|
199
|
+
let newVal = '';
|
|
200
|
+
decl.value.split(' ').forEach(singleVal => {
|
|
201
|
+
newVal += `${singleConvertor(singleVal, settings.replacements.px, {
|
|
202
|
+
decl,
|
|
203
|
+
filename,
|
|
204
|
+
path: fromPath
|
|
205
|
+
}, range)} `;
|
|
206
|
+
});
|
|
207
|
+
decl.value = newVal;
|
|
208
|
+
}
|
|
209
|
+
} else {
|
|
210
|
+
if (!decl.value.includes('calc')) {
|
|
211
|
+
// addError(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n unit : ${unitErrorVal} ,\n message : ${unitErrorVal} (Unit) Not Allowed \r`);
|
|
212
|
+
errorFunction(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${fromPath} ,\n line : ${decl.source.start.line} ,\n unit : ${unitErrorVal} ,\n message : ${unitErrorVal} (Unit) Not Allowed \r`, 'UNIT_ERROR');
|
|
213
|
+
} else {
|
|
214
|
+
decl.value = pxToCalc(decl.value);
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
} else {
|
|
218
|
+
if (decl.prop && decl.value && !decl.prop.includes('--') && valRegex.test(decl.value) && (settingsObject[decl.prop] || convertableProps[decl.prop]) && decl.value.includes('var') && !decl.value.includes('calc')) {
|
|
219
|
+
errorFunction(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${fromPath} ,\n line : ${decl.source.start.line} ,\n message : value (${decl.value}) has var in it, kindly check`, 'VARIABLE_PRESENT');
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
});
|
|
223
|
+
}); // console.log(filename)
|
|
224
|
+
// console.log('Done!')
|
|
225
|
+
// console.log('----------------------------------------------------------------------------------------------------------------------')
|
|
226
|
+
|
|
227
|
+
if (errorLogStatus) {
|
|
228
|
+
fs.writeFileSync('./css_error.log', '');
|
|
229
|
+
|
|
230
|
+
if (errors.length > 0) {
|
|
231
|
+
errors.forEach(err => {
|
|
232
|
+
fs.appendFileSync('./css_error.log', err);
|
|
233
|
+
}); // console.log('----------------------------------------------------------------------------------------------------------------------')
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
if (errorConsoleStatus) {
|
|
238
|
+
if (errors.length > 0) {
|
|
239
|
+
errors.forEach(err => {
|
|
240
|
+
// fs.appendFileSync('./css_error.log', err);
|
|
241
|
+
console.log(err);
|
|
242
|
+
});
|
|
243
|
+
console.log('----------------------------------------------------------------------------------------------------------------------');
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
};
|
|
247
|
+
});
|
|
@@ -101,6 +101,7 @@ module.exports = postcss.plugin('postcss-variable-report', () => rootOriginal =>
|
|
|
101
101
|
rule.walkDecls((decl, position) => {
|
|
102
102
|
// case font-size
|
|
103
103
|
if (!hasIgnoreComment(rule.nodes[position - 1])) {
|
|
104
|
+
console.log(settings);
|
|
104
105
|
let unit = decl.value.replace(/[0-9]/g, '');
|
|
105
106
|
let settings = numberObject[decl.prop];
|
|
106
107
|
let path = rootOriginal.source.input.from;
|
package/lib/schemas/index.js
CHANGED
|
@@ -216,13 +216,16 @@ var _default = {
|
|
|
216
216
|
plugins: {
|
|
217
217
|
hasRTL: false,
|
|
218
218
|
hoverActive: false,
|
|
219
|
-
combinerMediaQuery: false
|
|
219
|
+
combinerMediaQuery: false,
|
|
220
|
+
cssVariableReplacement: false
|
|
220
221
|
},
|
|
221
222
|
exclude: {
|
|
222
223
|
rtl: [],
|
|
223
224
|
hoverActive: [],
|
|
224
|
-
combinerMediaQuery: []
|
|
225
|
+
combinerMediaQuery: [],
|
|
226
|
+
cssVariableReplacement: []
|
|
225
227
|
},
|
|
228
|
+
cssVariableReplacementConfig: '',
|
|
226
229
|
seperateCssModules: {
|
|
227
230
|
value: false,
|
|
228
231
|
cli: 'sep_cssmodules'
|
|
@@ -302,13 +305,16 @@ var _default = {
|
|
|
302
305
|
plugins: {
|
|
303
306
|
hasRTL: false,
|
|
304
307
|
hoverActive: false,
|
|
305
|
-
combinerMediaQuery: false
|
|
308
|
+
combinerMediaQuery: false,
|
|
309
|
+
cssVariableReplacement: false
|
|
306
310
|
},
|
|
307
311
|
exclude: {
|
|
308
312
|
rtl: [],
|
|
309
313
|
hoverActive: [],
|
|
310
|
-
combinerMediaQuery: []
|
|
314
|
+
combinerMediaQuery: [],
|
|
315
|
+
cssVariableReplacement: []
|
|
311
316
|
},
|
|
317
|
+
cssVariableReplacementConfig: '',
|
|
312
318
|
cssHashSelectors: {
|
|
313
319
|
filenames: [],
|
|
314
320
|
packages: []
|