@zohodesk/react-cli 0.0.1-exp.176.1 → 0.0.1-exp.176.11

Sign up to get free protection for your applications and to get access to all the features.
Files changed (111) hide show
  1. package/.eslintignore +7 -7
  2. package/.eslintrc.js +180 -180
  3. package/.prettierrc +6 -6
  4. package/README.md +1023 -1025
  5. package/bin/cli.js +482 -482
  6. package/cert/Tsicsezwild-22-23.crt +37 -37
  7. package/cert/Tsicsezwild-22-23.key +27 -27
  8. package/docs/CustomChunks.md +26 -26
  9. package/docs/DevStart.md +18 -18
  10. package/docs/HoverActive.md +12 -12
  11. package/docs/InstallNode.md +28 -28
  12. package/docs/SelectorWeight.md +6 -6
  13. package/docs/TODOS.md +10 -10
  14. package/docs/ValueReplacer.md +60 -60
  15. package/docs/VariableConversion.md +710 -719
  16. package/docs/warnings_while_install.txt +35 -35
  17. package/files/eslintrc.js +62 -62
  18. package/files/prettierrc.js +3 -3
  19. package/lib/configs/webpack.css.umd.config.js +4 -4
  20. package/lib/loaderUtils/configsAssetsLoaders.js +33 -33
  21. package/lib/loaders/workerLoader.js +9 -9
  22. package/lib/pluginUtils/getDevPlugins.js +5 -5
  23. package/lib/pluginUtils/getProdPlugins.js +5 -5
  24. package/lib/plugins/EFCPlugin.md +6 -6
  25. package/lib/plugins/I18NInjectIntoIndexPlugin.js +4 -4
  26. package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js +38 -38
  27. package/lib/plugins/I18nSplitPlugin/I18nFilesEmitter.js +30 -30
  28. package/lib/plugins/I18nSplitPlugin/I18nKeysIdentifer.js +8 -8
  29. package/lib/plugins/I18nSplitPlugin/I18nSplit.md +95 -95
  30. package/lib/plugins/I18nSplitPlugin/README.md +25 -25
  31. package/lib/plugins/I18nSplitPlugin/index.js +57 -57
  32. package/lib/plugins/ResourceHintsPlugin.js +17 -17
  33. package/lib/plugins/RtlSplitPlugin/RtlCssPlugin.js +6 -6
  34. package/lib/plugins/RtlSplitPlugin/RtrSplit.md +30 -30
  35. package/lib/plugins/ServiceWorkerPlugin.js +9 -9
  36. package/lib/plugins/TPHashMappingPlugin.js +4 -4
  37. package/lib/plugins/VariableConversionCollector.js +92 -162
  38. package/lib/postcss-plugins/RTLSplitPlugin.js +10 -10
  39. package/lib/postcss-plugins/__test__/test1Input.css +38 -38
  40. package/lib/postcss-plugins/__test__/test1Output.css +38 -38
  41. package/lib/postcss-plugins/hoverActivePlugin.js +3 -3
  42. package/lib/postcss-plugins/variableModificationPlugin/ErrorHandler.js +2 -4
  43. package/lib/postcss-plugins/variableModificationPlugin/index.js +1 -2
  44. package/lib/sh/pre-commit.sh +34 -34
  45. package/lib/sh/reportPublish.sh +45 -45
  46. package/lib/utils/buildstats.html +148 -148
  47. package/lib/utils/cssURLReplacer.js +30 -43
  48. package/lib/utils/getFileType.js +49 -0
  49. package/lib/utils/resultSchema.json +73 -73
  50. package/npm8.md +9 -9
  51. package/package.json +147 -146
  52. package/postpublish.js +6 -6
  53. package/templates/app/.eslintrc.js +140 -140
  54. package/templates/app/README.md +12 -12
  55. package/templates/app/app/index.html +24 -24
  56. package/templates/app/app/properties/ApplicationResources_en_US.properties +1 -1
  57. package/templates/app/app/properties/i18nkeys.json +3 -3
  58. package/templates/app/docs/all.html +69 -69
  59. package/templates/app/mockapi/index.js +18 -18
  60. package/templates/app/package.json +37 -37
  61. package/templates/app/src/actions/SampleActions/index.js +37 -37
  62. package/templates/app/src/actions/index.js +65 -65
  63. package/templates/app/src/appUrls.js +19 -19
  64. package/templates/app/src/components/Alert/Alert.js +134 -134
  65. package/templates/app/src/components/Alert/Alert.module.css +79 -79
  66. package/templates/app/src/components/FreezeLayer/FreezeLayer.css +37 -37
  67. package/templates/app/src/components/FreezeLayer/FreezeLayer.js +84 -84
  68. package/templates/app/src/components/Sample/Sample.module.css +11 -11
  69. package/templates/app/src/components/Sample/SampleList.js +61 -61
  70. package/templates/app/src/components/Slider/Slider.css +41 -41
  71. package/templates/app/src/components/Slider/Slider.js +55 -55
  72. package/templates/app/src/containers/AlertContainer/index.js +15 -15
  73. package/templates/app/src/containers/AppContainer/index.js +96 -96
  74. package/templates/app/src/containers/AppContainer/index.module.css +27 -27
  75. package/templates/app/src/containers/CustomMatch/index.js +65 -65
  76. package/templates/app/src/containers/DevTools/index.js +10 -10
  77. package/templates/app/src/containers/Header/index.js +67 -67
  78. package/templates/app/src/containers/Header/index.module.css +43 -43
  79. package/templates/app/src/containers/Redirect/index.js +63 -63
  80. package/templates/app/src/containers/Redirector/index.js +47 -47
  81. package/templates/app/src/containers/SampleListContainer/ListContainer.js +42 -42
  82. package/templates/app/src/containers/SampleListContainer/ListContainer.module.css +3 -3
  83. package/templates/app/src/historyChange.js +5 -5
  84. package/templates/app/src/index.html +10 -10
  85. package/templates/app/src/index.js +24 -24
  86. package/templates/app/src/middleware/PromiseMiddleware.js +59 -59
  87. package/templates/app/src/reducers/alertData.js +11 -11
  88. package/templates/app/src/reducers/index.js +6 -6
  89. package/templates/app/src/reducers/samples.js +19 -19
  90. package/templates/app/src/store/configureStore.dev.js +51 -51
  91. package/templates/app/src/store/configureStore.js +5 -5
  92. package/templates/app/src/store/configureStore.prod.js +26 -26
  93. package/templates/app/src/util/Common.js +5 -5
  94. package/templates/app/src/util/RequestAPI.js +132 -132
  95. package/templates/docs/all.html +249 -249
  96. package/templates/docs/component.html +178 -178
  97. package/templates/docs/components.html +221 -221
  98. package/templates/docs/css/b.min.css +6 -6
  99. package/templates/docs/css/component.css +42 -42
  100. package/templates/docs/css/componentTest.css +6 -6
  101. package/templates/docs/css/hopscotch.css +585 -585
  102. package/templates/docs/css/style.css +1022 -1022
  103. package/templates/docs/impactReportTemplate.html +154 -154
  104. package/templates/docs/index.html +1501 -1501
  105. package/templates/docs/js/active-line.js +72 -72
  106. package/templates/docs/js/b.min.js +7 -7
  107. package/templates/docs/js/codemirror.js +9680 -9680
  108. package/templates/docs/js/designTokens.js +334 -334
  109. package/templates/docs/js/j.min.js +4 -4
  110. package/templates/docs/js/javascript.js +874 -874
  111. package/templates/docs/js/matchbrackets.js +145 -145
package/docs/VariableConversion.md CHANGED
@@ -1,719 +1,710 @@
1
- # Variable Conversion
2
-
3
- ## Overview
4
-
5
- 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
6
-
7
- **Features:**
8
- # Features below are added form `0.0.1-beta.173`
9
- 1. variables are converted from px to custom variables ( options are consumed from `cssVariableReplacementOptions.json` present in source folder )
10
- 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 )
11
- 3. To enable the console display of errors that are generated, `errorInConsole` is to be made `true` in `cssVariableReplacementOptions.json`
12
- 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`
13
-
14
- # Features below are added form `0.0.1-beta.176`
15
-
16
- * variables with -- are now supported due to the webpack plugin `VariableConversionCollector` that is generated for the same.
17
- * `DECIMAL_CHECK`, `DECIMAL_REJECT` are two new errors supported.
18
- * support for text-indent, clip, flex, flex-basis, row-gap, column-gap, gap properties are now given.
19
-
20
- # Features below are added form `0.0.1-beta.177`
21
-
22
- * new Error `MULTIPLE_OCCURANCES` supported.
23
- * In case css --variables are not assigned an error will be thrown. The unassigned variables can be manually assigned in `variableMapping.json`
24
- For more information and reference, refer to `[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/VariableConversion.md)
25
-
26
-
27
- <!-- file paths :
28
-
29
- # react - cli :
30
- src\postcss-plugins\variableModificationPlugin\index.js
31
-
32
- # source folder :
33
- jsapps\supportapp\cssVariableReplacementOptions.json ( options json file )
34
- jsapps\supportapp\plugins\pxParserPostcss.js ( px parsing as a process before plugin conversion to custom css variables in react -cli )
35
- jsapps\supportapp\plugins\variableIgnore.js ( adding variable:ignore comment to ignore the line for any conversion beforehand to preserve the declaration )
36
-
37
- -->
38
-
39
- # Added support for Properties ( Cut 1 ) : (0.0.1-beta.173)
40
-
41
- * font-size
42
- * margin
43
- * margin-top
44
- * margin-bottom
45
- * margin-left
46
- * margin-right
47
- * padding
48
- * padding-top
49
- * padding-bottom
50
- * padding-left
51
- * padding-right
52
- * top
53
- * right
54
- * bottom
55
- * left
56
- * width
57
- * min-width
58
- * max-width
59
- * height
60
- * min-height
61
- * max-height
62
-
63
- # Added support for Properties ( Cut 2 ) : (0.0.1-beta.176)
64
-
65
- * text-indent
66
- * clip
67
- * flex
68
- * flex-basis
69
- * row-gap
70
- * column-gap
71
- * gap
72
-
73
- # Css variable conversion consists of three steps :
74
-
75
- . 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` )
76
- . conversion of the variable from current css variables to corresponding px value manually. ( `pxParserPostcss.js` )
77
- . conversion of the resultant px values to custom variables present in settings ( `cssVariableReplacementOptions.json` )
78
-
79
- `cssVariableReplacementOptions.json example` :
80
-
81
- ```json
82
- {
83
- "errorLog": false,
84
- "errorInConsole": false,
85
- "errorsAllowed":{
86
- "DECLARATION_IGNORED": true,
87
- "UNIT_ERROR": true,
88
- "DECIMAL_CHECK": true,
89
- "DECIMAL_REJECT": true,
90
- "RANGE_ERROR": true,
91
- "VARIABLE_PRESENT": true,
92
- "MULTIPLE_OCCURANCES": false
93
- },
94
- "settings": {
95
- "font-size": {
96
- "allowed": [
97
- "px",
98
- "em",
99
- "%",
100
- "0",
101
- "vh",
102
- "initial"
103
- ],
104
- "replacements": {
105
- "px": "var(--zd_font_size$$)",
106
- "em": "var(--zd_font_size$$em)"
107
- },
108
- "range": {
109
- "start": 0,
110
- "end": 1650
111
- }
112
- },
113
- "margin": {
114
- "allowed": [
115
- "px",
116
- "em",
117
- "fit-content",
118
- "auto",
119
- "%",
120
- "inherit",
121
- "-moz-fit-content",
122
- "vh",
123
- "0",
124
- "initial",
125
- "vw"
126
- ],
127
- "replacements": {
128
- "px": "var(--zd_size$$)"
129
- },
130
- "range": {
131
- "start": -1650,
132
- "end": 1650
133
- }
134
- },
135
- "margin-left": {
136
- "allowed": [
137
- "px",
138
- "em",
139
- "fit-content",
140
- "auto",
141
- "%",
142
- "inherit",
143
- "-moz-fit-content",
144
- "vh",
145
- "0",
146
- "initial",
147
- "vw"
148
- ],
149
- "replacements": {
150
- "px": "var(--zd_size$$)"
151
- },
152
- "range": {
153
- "start": -1650,
154
- "end": 1650
155
- }
156
- },
157
- "margin-right": {
158
- "allowed": [
159
- "px",
160
- "em",
161
- "fit-content",
162
- "auto",
163
- "%",
164
- "inherit",
165
- "-moz-fit-content",
166
- "vh",
167
- "0",
168
- "initial",
169
- "vw"
170
- ],
171
- "replacements": {
172
- "px": "var(--zd_size$$)"
173
- },
174
- "range": {
175
- "start": -1650,
176
- "end": 1650
177
- }
178
- },
179
- "margin-top": {
180
- "allowed": [
181
- "px",
182
- "em",
183
- "fit-content",
184
- "auto",
185
- "%",
186
- "inherit",
187
- "-moz-fit-content",
188
- "vh",
189
- "0",
190
- "initial",
191
- "vw"
192
- ],
193
- "replacements": {
194
- "px": "var(--zd_size$$)"
195
- },
196
- "range": {
197
- "start": -1650,
198
- "end": 1650
199
- }
200
- },
201
- "margin-bottom": {
202
- "allowed": [
203
- "px",
204
- "em",
205
- "fit-content",
206
- "auto",
207
- "%",
208
- "inherit",
209
- "-moz-fit-content",
210
- "vh",
211
- "0",
212
- "initial",
213
- "vw"
214
- ],
215
- "replacements": {
216
- "px": "var(--zd_size$$)"
217
- },
218
- "range": {
219
- "start": -1650,
220
- "end": 1650
221
- }
222
- },
223
- "padding": {
224
- "allowed": [
225
- "px",
226
- "em",
227
- "fit-content",
228
- "auto",
229
- "%",
230
- "inherit",
231
- "-moz-fit-content",
232
- "vh",
233
- "0",
234
- "initial",
235
- "vw"
236
- ],
237
- "replacements": {
238
- "px": "var(--zd_size$$)"
239
- },
240
- "range": {
241
- "start": -1650,
242
- "end": 1650
243
- }
244
- },
245
- "padding-left": {
246
- "allowed": [
247
- "px",
248
- "em",
249
- "fit-content",
250
- "auto",
251
- "%",
252
- "inherit",
253
- "-moz-fit-content",
254
- "vh",
255
- "0",
256
- "initial",
257
- "vw"
258
- ],
259
- "replacements": {
260
- "px": "var(--zd_size$$)"
261
- },
262
- "range": {
263
- "start": -1650,
264
- "end": 1650
265
- }
266
- },
267
- "padding-right": {
268
- "allowed": [
269
- "px",
270
- "em",
271
- "fit-content",
272
- "auto",
273
- "%",
274
- "inherit",
275
- "-moz-fit-content",
276
- "vh",
277
- "0",
278
- "initial",
279
- "vw"
280
- ],
281
- "replacements": {
282
- "px": "var(--zd_size$$)"
283
- },
284
- "range": {
285
- "start": -1650,
286
- "end": 1650
287
- }
288
- },
289
- "padding-top": {
290
- "allowed": [
291
- "px",
292
- "em",
293
- "fit-content",
294
- "auto",
295
- "%",
296
- "inherit",
297
- "-moz-fit-content",
298
- "vh",
299
- "0",
300
- "initial",
301
- "vw"
302
- ],
303
- "replacements": {
304
- "px": "var(--zd_size$$)"
305
- },
306
- "range": {
307
- "start": -1650,
308
- "end": 1650
309
- }
310
- },
311
- "padding-bottom": {
312
- "allowed": [
313
- "px",
314
- "em",
315
- "fit-content",
316
- "auto",
317
- "%",
318
- "inherit",
319
- "-moz-fit-content",
320
- "vh",
321
- "0",
322
- "initial",
323
- "vw"
324
- ],
325
- "replacements": {
326
- "px": "var(--zd_size$$)"
327
- },
328
- "range": {
329
- "start": -1650,
330
- "end": 1650
331
- }
332
- },
333
- "height": {
334
- "allowed": [
335
- "px",
336
- "em",
337
- "fit-content",
338
- "auto",
339
- "%",
340
- "inherit",
341
- "-moz-fit-content",
342
- "vh",
343
- "0",
344
- "initial",
345
- "vw"
346
- ],
347
- "replacements": {
348
- "px": "var(--zd_size$$)"
349
- },
350
- "range": {
351
- "start": -1650,
352
- "end": 1650
353
- }
354
- },
355
- "width": {
356
- "allowed": [
357
- "px",
358
- "em",
359
- "fit-content",
360
- "auto",
361
- "%",
362
- "inherit",
363
- "-moz-fit-content",
364
- "vh",
365
- "0",
366
- "initial",
367
- "vw"
368
- ],
369
- "replacements": {
370
- "px": "var(--zd_size$$)"
371
- },
372
- "range": {
373
- "start": -1650,
374
- "end": 1650
375
- }
376
- },
377
- "min-width": {
378
- "allowed": [
379
- "px",
380
- "em",
381
- "fit-content",
382
- "auto",
383
- "%",
384
- "inherit",
385
- "-moz-fit-content",
386
- "vh",
387
- "0",
388
- "initial",
389
- "vw"
390
- ],
391
- "replacements": {
392
- "px": "var(--zd_size$$)"
393
- },
394
- "range": {
395
- "start": -1650,
396
- "end": 1650
397
- }
398
- },
399
- "max-width": {
400
- "allowed": [
401
- "px",
402
- "em",
403
- "fit-content",
404
- "auto",
405
- "%",
406
- "inherit",
407
- "-moz-fit-content",
408
- "vh",
409
- "0",
410
- "initial",
411
- "vw"
412
- ],
413
- "replacements": {
414
- "px": "var(--zd_size$$)"
415
- },
416
- "range": {
417
- "start": -1650,
418
- "end": 1650
419
- }
420
- },
421
- "min-height": {
422
- "allowed": [
423
- "px",
424
- "em",
425
- "fit-content",
426
- "auto",
427
- "%",
428
- "inherit",
429
- "-moz-fit-content",
430
- "vh",
431
- "0",
432
- "initial",
433
- "vw"
434
- ],
435
- "replacements": {
436
- "px": "var(--zd_size$$)"
437
- },
438
- "range": {
439
- "start": -1650,
440
- "end": 1650
441
- }
442
- },
443
- "max-height": {
444
- "allowed": [
445
- "px",
446
- "em",
447
- "fit-content",
448
- "auto",
449
- "%",
450
- "inherit",
451
- "-moz-fit-content",
452
- "vh",
453
- "0",
454
- "initial",
455
- "vw"
456
- ],
457
- "replacements": {
458
- "px": "var(--zd_size$$)"
459
- },
460
- "range": {
461
- "start": -1650,
462
- "end": 1650
463
- }
464
- },
465
- "top": {
466
- "allowed": [
467
- "px",
468
- "em",
469
- "fit-content",
470
- "auto",
471
- "%",
472
- "inherit",
473
- "-moz-fit-content",
474
- "vh",
475
- "0",
476
- "initial",
477
- "vw"
478
- ],
479
- "replacements": {
480
- "px": "var(--zd_size$$)"
481
- },
482
- "range": {
483
- "start": -1650,
484
- "end": 1650
485
- }
486
- },
487
- "bottom": {
488
- "allowed": [
489
- "px",
490
- "em",
491
- "fit-content",
492
- "auto",
493
- "%",
494
- "inherit",
495
- "-moz-fit-content",
496
- "vh",
497
- "0",
498
- "initial",
499
- "vw"
500
- ],
501
- "replacements": {
502
- "px": "var(--zd_size$$)"
503
- },
504
- "range": {
505
- "start": -1650,
506
- "end": 1650
507
- }
508
- },
509
- "left": {
510
- "allowed": [
511
- "px",
512
- "em",
513
- "fit-content",
514
- "auto",
515
- "%",
516
- "inherit",
517
- "-moz-fit-content",
518
- "vh",
519
- "0",
520
- "initial",
521
- "vw"
522
- ],
523
- "replacements": {
524
- "px": "var(--zd_size$$)"
525
- },
526
- "range": {
527
- "start": -1650,
528
- "end": 1650
529
- }
530
- },
531
- "right": {
532
- "allowed": [
533
- "px",
534
- "em",
535
- "fit-content",
536
- "auto",
537
- "%",
538
- "inherit",
539
- "-moz-fit-content",
540
- "vh",
541
- "0",
542
- "initial",
543
- "vw"
544
- ],
545
- "replacements": {
546
- "px": "var(--zd_size$$)"
547
- },
548
- "range": {
549
- "start": -1650,
550
- "end": 1650
551
- }
552
- }
553
- }
554
- }
555
- ```
556
-
557
- Step 1 : Adding variable:ignore
558
-
559
- use command `npm run variable:addignore` on source folder
560
-
561
- before :
562
- ```css
563
- .a{
564
- font-size: var(--zd_size14);
565
- margin: var(--zd_size12);
566
- padding: 12px;
567
- }
568
- ```
569
-
570
- after :
571
-
572
- ```css
573
- /* 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 */
574
- .a{
575
- font-size: var(--zd_size14);
576
- margin: var(--zd_size12);
577
- /*Variable:Ignore*/
578
- padding: 12px;
579
- }
580
- ```
581
-
582
- Step 2 : Converting vars to px
583
-
584
- use command `npm run variable:convert` on source folder
585
-
586
- before :
587
- ```css
588
- .a{
589
- font-size: var(--zd_size14);
590
- margin: var(--zd_size12);
591
- /*Variable:Ignore*/
592
- padding: 12px;
593
- }
594
- ```
595
-
596
- after :
597
- ```css
598
- /* explanation : conversion from vars to px is done making the declarations convertable to custom variables further by the react-cli plugin*/
599
- .a{
600
- font-size: 14px;
601
- margin: 12px;
602
- /*Variable:Ignore*/
603
- padding: 12px;
604
- }
605
- ```
606
-
607
- Step 3 : Conversion from px to custom variables present in settings
608
-
609
- Things that are considered in the conversion :
610
- => `allowed` is the allowed units that can be converted through the plugin
611
- => `replacements` are the conversion strings where `$$` will be converted to respective numbers
612
- => `range` is the starting and ending value within numbers will be allowed.
613
-
614
- `variableModificationPlugin` in react-cli folder is where the conversion takes place.
615
-
616
- and output would be as follows :
617
-
618
- before :
619
-
620
- ```css
621
- /* 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 */
622
-
623
- /*
624
- "font-size": {
625
- "allowed": [
626
- "px",
627
- "em",
628
- "%",
629
- "0",
630
- "vh",
631
- "initial"
632
- ],
633
- "replacements": {
634
- "px": "var(--zd_font_size$$)",
635
- "em": "var(--zd_font_size$$em)"
636
- },
637
- "range": {
638
- "start": 0,
639
- "end": 1650
640
- }
641
- },
642
- */
643
- /*
644
-
645
- "margin": {
646
- "allowed": [
647
- "px",
648
- "em",
649
- "fit-content",
650
- "auto",
651
- "%",
652
- "inherit",
653
- "-moz-fit-content",
654
- "vh",
655
- "0",
656
- "initial",
657
- "vw"
658
- ],
659
- "replacements": {
660
- "px": "var(--zd_size$$)"
661
- },
662
- "range": {
663
- "start": -1650,
664
- "end": 1650
665
- }
666
- },
667
-
668
- */
669
- .a{
670
- font-size: 14px;
671
- margin: 12px;
672
- /*Variable:Ignore*/
673
- padding: 12px;
674
- }
675
- ```
676
-
677
- after :
678
-
679
- ```css
680
-
681
- .a{
682
- font-size: var(--zd_size14);
683
- margin: var(--zd_size12);
684
- /*Variable:Ignore*/
685
- padding: 12px;
686
- }
687
- ```
688
-
689
- Output configuration :
690
-
691
- Consider the below mentioned :
692
- ```json
693
- "errorLog": false,
694
- "errorInConsole": false,
695
- "errorsAllowed":{
696
- "DECLARATION_IGNORED" : true,
697
- "UNIT_ERROR" : true,
698
- "RANGE_ERROR" : true,
699
- "DECIMAL_CHECK":true,
700
- "DECIMAL_REJECT":true,
701
- "VARIABLE_PRESENT" : true
702
- },
703
- ```
704
- . 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.
705
-
706
- . if error is needed to be seen in the console, `errorInConsole` should be enabled, all errors will be printed in the console.
707
-
708
- . 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 :
709
-
710
- => `DECLARATION_IGNORED` : Lines that succeed the /*Variable:Ignore*/ comment.
711
- => `UNIT_ERROR` : the units that are not present in the corresponding property's `allowed` array are used.
712
- => `RANGE_ERROR` : numerical values that are not present within the range of the corresponding property's `range` is used.
713
- => `DECIMAL_CHECK` : Decimal values containing . will be shown ( flex : 1.3 )
714
- => `DECIMAL_REJECT` : Decimal values such as .em which are to be rejected are shown ( font-size : 12.5px )
715
- => `VARIABLE_PRESENT` : conversion to px (Step 2) wasn't done properly and hence there are residues that contain `var` in it are found.
716
- => `MULTIPLE_OCCURANCES` : using --vars in multiple places ( using --zd_avatar_padding_left in left and right ), which results in confusion during conversion
717
-
718
- * First two conversions are to be done manually by the use of the commands, `npm run variable:addignore` and `npm run variable:convert`
719
- * Final conversion is done by react-cli on compilation of the source folder `npm run start --app:port=**** --app:domain=****`
1
+ # Variable Conversion
2
+
3
+ ## Overview
4
+
5
+ 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
6
+
7
+ **Features:**
8
+ below features are added form `0.0.1-beta.173`
9
+ 1. variables are converted from px to custom variables ( options are consumed from `cssVariableReplacementOptions.json` present in source folder )
10
+ 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 )
11
+ 3. To enable the console display of errors that are generated, `errorInConsole` is to be made `true` in `cssVariableReplacementOptions.json`
12
+ 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`
13
+
14
+ below features are added form `0.0.1-beta.176`
15
+
16
+ * variables with -- are now supported due to the webpack plugin `VariableConversionCollector` that is generated for the same.
17
+ * `DECIMAL_CHECK`, `DECIMAL_REJECT` are two new errors supported.
18
+ * support for text-indent, clip, flex, flex-basis, row-gap, column-gap, gap properties are now given.
19
+
20
+
21
+ <!-- file paths :
22
+
23
+ # react - cli :
24
+ src\postcss-plugins\variableModificationPlugin\index.js
25
+
26
+ # source folder :
27
+ jsapps\supportapp\cssVariableReplacementOptions.json ( options json file )
28
+ jsapps\supportapp\plugins\pxParserPostcss.js ( px parsing as a process before plugin conversion to custom css variables in react -cli )
29
+ jsapps\supportapp\plugins\variableIgnore.js ( adding variable:ignore comment to ignore the line for any conversion beforehand to preserve the declaration )
30
+
31
+ -->
32
+
33
+ # Added support for Properties ( Cut 1 ) : (0.0.1-beta.173)
34
+
35
+ * font-size
36
+ * margin
37
+ * margin-top
38
+ * margin-bottom
39
+ * margin-left
40
+ * margin-right
41
+ * padding
42
+ * padding-top
43
+ * padding-bottom
44
+ * padding-left
45
+ * padding-right
46
+ * top
47
+ * right
48
+ * bottom
49
+ * left
50
+ * width
51
+ * min-width
52
+ * max-width
53
+ * height
54
+ * min-height
55
+ * max-height
56
+
57
+ # Added support for Properties ( Cut 2 ) : (0.0.1-beta.176)
58
+
59
+ * text-indent
60
+ * clip
61
+ * flex
62
+ * flex-basis
63
+ * row-gap
64
+ * column-gap
65
+ * gap
66
+
67
+ # Css variable conversion consists of three steps :
68
+
69
+ . 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` )
70
+ . conversion of the variable from current css variables to corresponding px value manually. ( `pxParserPostcss.js` )
71
+ . conversion of the resultant px values to custom variables present in settings ( `cssVariableReplacementOptions.json` )
72
+
73
+ `cssVariableReplacementOptions.json example` :
74
+
75
+ ```json
76
+ {
77
+ "errorLog": false,
78
+ "errorInConsole": false,
79
+ "errorsAllowed":{
80
+ "DECLARATION_IGNORED" : true,
81
+ "UNIT_ERROR" : true,
82
+ "RANGE_ERROR" : true,
83
+ "VARIABLE_PRESENT" : true
84
+ },
85
+ "settings": {
86
+ "font-size": {
87
+ "allowed": [
88
+ "px",
89
+ "em",
90
+ "%",
91
+ "0",
92
+ "vh",
93
+ "initial"
94
+ ],
95
+ "replacements": {
96
+ "px": "var(--zd_font_size$$)",
97
+ "em": "var(--zd_font_size$$em)"
98
+ },
99
+ "range": {
100
+ "start": 0,
101
+ "end": 1650
102
+ }
103
+ },
104
+ "margin": {
105
+ "allowed": [
106
+ "px",
107
+ "em",
108
+ "fit-content",
109
+ "auto",
110
+ "%",
111
+ "inherit",
112
+ "-moz-fit-content",
113
+ "vh",
114
+ "0",
115
+ "initial",
116
+ "vw"
117
+ ],
118
+ "replacements": {
119
+ "px": "var(--zd_size$$)"
120
+ },
121
+ "range": {
122
+ "start": -1650,
123
+ "end": 1650
124
+ }
125
+ },
126
+ "margin-left": {
127
+ "allowed": [
128
+ "px",
129
+ "em",
130
+ "fit-content",
131
+ "auto",
132
+ "%",
133
+ "inherit",
134
+ "-moz-fit-content",
135
+ "vh",
136
+ "0",
137
+ "initial",
138
+ "vw"
139
+ ],
140
+ "replacements": {
141
+ "px": "var(--zd_size$$)"
142
+ },
143
+ "range": {
144
+ "start": -1650,
145
+ "end": 1650
146
+ }
147
+ },
148
+ "margin-right": {
149
+ "allowed": [
150
+ "px",
151
+ "em",
152
+ "fit-content",
153
+ "auto",
154
+ "%",
155
+ "inherit",
156
+ "-moz-fit-content",
157
+ "vh",
158
+ "0",
159
+ "initial",
160
+ "vw"
161
+ ],
162
+ "replacements": {
163
+ "px": "var(--zd_size$$)"
164
+ },
165
+ "range": {
166
+ "start": -1650,
167
+ "end": 1650
168
+ }
169
+ },
170
+ "margin-top": {
171
+ "allowed": [
172
+ "px",
173
+ "em",
174
+ "fit-content",
175
+ "auto",
176
+ "%",
177
+ "inherit",
178
+ "-moz-fit-content",
179
+ "vh",
180
+ "0",
181
+ "initial",
182
+ "vw"
183
+ ],
184
+ "replacements": {
185
+ "px": "var(--zd_size$$)"
186
+ },
187
+ "range": {
188
+ "start": -1650,
189
+ "end": 1650
190
+ }
191
+ },
192
+ "margin-bottom": {
193
+ "allowed": [
194
+ "px",
195
+ "em",
196
+ "fit-content",
197
+ "auto",
198
+ "%",
199
+ "inherit",
200
+ "-moz-fit-content",
201
+ "vh",
202
+ "0",
203
+ "initial",
204
+ "vw"
205
+ ],
206
+ "replacements": {
207
+ "px": "var(--zd_size$$)"
208
+ },
209
+ "range": {
210
+ "start": -1650,
211
+ "end": 1650
212
+ }
213
+ },
214
+ "padding": {
215
+ "allowed": [
216
+ "px",
217
+ "em",
218
+ "fit-content",
219
+ "auto",
220
+ "%",
221
+ "inherit",
222
+ "-moz-fit-content",
223
+ "vh",
224
+ "0",
225
+ "initial",
226
+ "vw"
227
+ ],
228
+ "replacements": {
229
+ "px": "var(--zd_size$$)"
230
+ },
231
+ "range": {
232
+ "start": -1650,
233
+ "end": 1650
234
+ }
235
+ },
236
+ "padding-left": {
237
+ "allowed": [
238
+ "px",
239
+ "em",
240
+ "fit-content",
241
+ "auto",
242
+ "%",
243
+ "inherit",
244
+ "-moz-fit-content",
245
+ "vh",
246
+ "0",
247
+ "initial",
248
+ "vw"
249
+ ],
250
+ "replacements": {
251
+ "px": "var(--zd_size$$)"
252
+ },
253
+ "range": {
254
+ "start": -1650,
255
+ "end": 1650
256
+ }
257
+ },
258
+ "padding-right": {
259
+ "allowed": [
260
+ "px",
261
+ "em",
262
+ "fit-content",
263
+ "auto",
264
+ "%",
265
+ "inherit",
266
+ "-moz-fit-content",
267
+ "vh",
268
+ "0",
269
+ "initial",
270
+ "vw"
271
+ ],
272
+ "replacements": {
273
+ "px": "var(--zd_size$$)"
274
+ },
275
+ "range": {
276
+ "start": -1650,
277
+ "end": 1650
278
+ }
279
+ },
280
+ "padding-top": {
281
+ "allowed": [
282
+ "px",
283
+ "em",
284
+ "fit-content",
285
+ "auto",
286
+ "%",
287
+ "inherit",
288
+ "-moz-fit-content",
289
+ "vh",
290
+ "0",
291
+ "initial",
292
+ "vw"
293
+ ],
294
+ "replacements": {
295
+ "px": "var(--zd_size$$)"
296
+ },
297
+ "range": {
298
+ "start": -1650,
299
+ "end": 1650
300
+ }
301
+ },
302
+ "padding-bottom": {
303
+ "allowed": [
304
+ "px",
305
+ "em",
306
+ "fit-content",
307
+ "auto",
308
+ "%",
309
+ "inherit",
310
+ "-moz-fit-content",
311
+ "vh",
312
+ "0",
313
+ "initial",
314
+ "vw"
315
+ ],
316
+ "replacements": {
317
+ "px": "var(--zd_size$$)"
318
+ },
319
+ "range": {
320
+ "start": -1650,
321
+ "end": 1650
322
+ }
323
+ },
324
+ "height": {
325
+ "allowed": [
326
+ "px",
327
+ "em",
328
+ "fit-content",
329
+ "auto",
330
+ "%",
331
+ "inherit",
332
+ "-moz-fit-content",
333
+ "vh",
334
+ "0",
335
+ "initial",
336
+ "vw"
337
+ ],
338
+ "replacements": {
339
+ "px": "var(--zd_size$$)"
340
+ },
341
+ "range": {
342
+ "start": -1650,
343
+ "end": 1650
344
+ }
345
+ },
346
+ "width": {
347
+ "allowed": [
348
+ "px",
349
+ "em",
350
+ "fit-content",
351
+ "auto",
352
+ "%",
353
+ "inherit",
354
+ "-moz-fit-content",
355
+ "vh",
356
+ "0",
357
+ "initial",
358
+ "vw"
359
+ ],
360
+ "replacements": {
361
+ "px": "var(--zd_size$$)"
362
+ },
363
+ "range": {
364
+ "start": -1650,
365
+ "end": 1650
366
+ }
367
+ },
368
+ "min-width": {
369
+ "allowed": [
370
+ "px",
371
+ "em",
372
+ "fit-content",
373
+ "auto",
374
+ "%",
375
+ "inherit",
376
+ "-moz-fit-content",
377
+ "vh",
378
+ "0",
379
+ "initial",
380
+ "vw"
381
+ ],
382
+ "replacements": {
383
+ "px": "var(--zd_size$$)"
384
+ },
385
+ "range": {
386
+ "start": -1650,
387
+ "end": 1650
388
+ }
389
+ },
390
+ "max-width": {
391
+ "allowed": [
392
+ "px",
393
+ "em",
394
+ "fit-content",
395
+ "auto",
396
+ "%",
397
+ "inherit",
398
+ "-moz-fit-content",
399
+ "vh",
400
+ "0",
401
+ "initial",
402
+ "vw"
403
+ ],
404
+ "replacements": {
405
+ "px": "var(--zd_size$$)"
406
+ },
407
+ "range": {
408
+ "start": -1650,
409
+ "end": 1650
410
+ }
411
+ },
412
+ "min-height": {
413
+ "allowed": [
414
+ "px",
415
+ "em",
416
+ "fit-content",
417
+ "auto",
418
+ "%",
419
+ "inherit",
420
+ "-moz-fit-content",
421
+ "vh",
422
+ "0",
423
+ "initial",
424
+ "vw"
425
+ ],
426
+ "replacements": {
427
+ "px": "var(--zd_size$$)"
428
+ },
429
+ "range": {
430
+ "start": -1650,
431
+ "end": 1650
432
+ }
433
+ },
434
+ "max-height": {
435
+ "allowed": [
436
+ "px",
437
+ "em",
438
+ "fit-content",
439
+ "auto",
440
+ "%",
441
+ "inherit",
442
+ "-moz-fit-content",
443
+ "vh",
444
+ "0",
445
+ "initial",
446
+ "vw"
447
+ ],
448
+ "replacements": {
449
+ "px": "var(--zd_size$$)"
450
+ },
451
+ "range": {
452
+ "start": -1650,
453
+ "end": 1650
454
+ }
455
+ },
456
+ "top": {
457
+ "allowed": [
458
+ "px",
459
+ "em",
460
+ "fit-content",
461
+ "auto",
462
+ "%",
463
+ "inherit",
464
+ "-moz-fit-content",
465
+ "vh",
466
+ "0",
467
+ "initial",
468
+ "vw"
469
+ ],
470
+ "replacements": {
471
+ "px": "var(--zd_size$$)"
472
+ },
473
+ "range": {
474
+ "start": -1650,
475
+ "end": 1650
476
+ }
477
+ },
478
+ "bottom": {
479
+ "allowed": [
480
+ "px",
481
+ "em",
482
+ "fit-content",
483
+ "auto",
484
+ "%",
485
+ "inherit",
486
+ "-moz-fit-content",
487
+ "vh",
488
+ "0",
489
+ "initial",
490
+ "vw"
491
+ ],
492
+ "replacements": {
493
+ "px": "var(--zd_size$$)"
494
+ },
495
+ "range": {
496
+ "start": -1650,
497
+ "end": 1650
498
+ }
499
+ },
500
+ "left": {
501
+ "allowed": [
502
+ "px",
503
+ "em",
504
+ "fit-content",
505
+ "auto",
506
+ "%",
507
+ "inherit",
508
+ "-moz-fit-content",
509
+ "vh",
510
+ "0",
511
+ "initial",
512
+ "vw"
513
+ ],
514
+ "replacements": {
515
+ "px": "var(--zd_size$$)"
516
+ },
517
+ "range": {
518
+ "start": -1650,
519
+ "end": 1650
520
+ }
521
+ },
522
+ "right": {
523
+ "allowed": [
524
+ "px",
525
+ "em",
526
+ "fit-content",
527
+ "auto",
528
+ "%",
529
+ "inherit",
530
+ "-moz-fit-content",
531
+ "vh",
532
+ "0",
533
+ "initial",
534
+ "vw"
535
+ ],
536
+ "replacements": {
537
+ "px": "var(--zd_size$$)"
538
+ },
539
+ "range": {
540
+ "start": -1650,
541
+ "end": 1650
542
+ }
543
+ }
544
+ }
545
+ }
546
+ ```
547
+
548
+ Step 1 : Adding variable:ignore
549
+
550
+ use command `npm run variable:addignore` on source folder
551
+
552
+ before :
553
+ ```css
554
+ .a{
555
+ font-size: var(--zd_size14);
556
+ margin: var(--zd_size12);
557
+ padding: 12px;
558
+ }
559
+ ```
560
+
561
+ after :
562
+
563
+ ```css
564
+ /* 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 */
565
+ .a{
566
+ font-size: var(--zd_size14);
567
+ margin: var(--zd_size12);
568
+ /*Variable:Ignore*/
569
+ padding: 12px;
570
+ }
571
+ ```
572
+
573
+ Step 2 : Converting vars to px
574
+
575
+ use command `npm run variable:convert` on source folder
576
+
577
+ before :
578
+ ```css
579
+ .a{
580
+ font-size: var(--zd_size14);
581
+ margin: var(--zd_size12);
582
+ /*Variable:Ignore*/
583
+ padding: 12px;
584
+ }
585
+ ```
586
+
587
+ after :
588
+ ```css
589
+ /* explanation : conversion from vars to px is done making the declarations convertable to custom variables further by the react-cli plugin*/
590
+ .a{
591
+ font-size: 14px;
592
+ margin: 12px;
593
+ /*Variable:Ignore*/
594
+ padding: 12px;
595
+ }
596
+ ```
597
+
598
+ Step 3 : Conversion from px to custom variables present in settings
599
+
600
+ Things that are considered in the conversion :
601
+ => `allowed` is the allowed units that can be converted through the plugin
602
+ => `replacements` are the conversion strings where `$$` will be converted to respective numbers
603
+ => `range` is the starting and ending value within numbers will be allowed.
604
+
605
+ `variableModificationPlugin` in react-cli folder is where the conversion takes place.
606
+
607
+ and output would be as follows :
608
+
609
+ before :
610
+
611
+ ```css
612
+ /* 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 */
613
+
614
+ /*
615
+ "font-size": {
616
+ "allowed": [
617
+ "px",
618
+ "em",
619
+ "%",
620
+ "0",
621
+ "vh",
622
+ "initial"
623
+ ],
624
+ "replacements": {
625
+ "px": "var(--zd_font_size$$)",
626
+ "em": "var(--zd_font_size$$em)"
627
+ },
628
+ "range": {
629
+ "start": 0,
630
+ "end": 1650
631
+ }
632
+ },
633
+ */
634
+ /*
635
+
636
+ "margin": {
637
+ "allowed": [
638
+ "px",
639
+ "em",
640
+ "fit-content",
641
+ "auto",
642
+ "%",
643
+ "inherit",
644
+ "-moz-fit-content",
645
+ "vh",
646
+ "0",
647
+ "initial",
648
+ "vw"
649
+ ],
650
+ "replacements": {
651
+ "px": "var(--zd_size$$)"
652
+ },
653
+ "range": {
654
+ "start": -1650,
655
+ "end": 1650
656
+ }
657
+ },
658
+
659
+ */
660
+ .a{
661
+ font-size: 14px;
662
+ margin: 12px;
663
+ /*Variable:Ignore*/
664
+ padding: 12px;
665
+ }
666
+ ```
667
+
668
+ after :
669
+
670
+ ```css
671
+
672
+ .a{
673
+ font-size: var(--zd_size14);
674
+ margin: var(--zd_size12);
675
+ /*Variable:Ignore*/
676
+ padding: 12px;
677
+ }
678
+ ```
679
+
680
+ Output configuration :
681
+
682
+ Consider the below mentioned :
683
+ ```json
684
+ "errorLog": false,
685
+ "errorInConsole": false,
686
+ "errorsAllowed":{
687
+ "DECLARATION_IGNORED" : true,
688
+ "UNIT_ERROR" : true,
689
+ "RANGE_ERROR" : true,
690
+ "DECIMAL_CHECK":true,
691
+ "DECIMAL_REJECT":true,
692
+ "VARIABLE_PRESENT" : true
693
+ },
694
+ ```
695
+ . 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.
696
+
697
+ . if error is needed to be seen in the console, `errorInConsole` should be enabled, all errors will be printed in the console.
698
+
699
+ . 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 :
700
+
701
+ => `DECLARATION_IGNORED` : Lines that succeed the /*Variable:Ignore*/ comment.
702
+ => `UNIT_ERROR` : the units that are not present in the corresponding property's `allowed` array are used.
703
+ => `RANGE_ERROR` : numerical values that are not present within the range of the corresponding property's `range` is used.
704
+ => `DECIMAL_CHECK` : Decimal values containing . will be shown
705
+ => `DECIMAL_REJECT` : Decimal values such as .em which are to be rejected are shown
706
+ => `VARIABLE_PRESENT` : conversion to px (Step 2) wasn't done properly and hence there are residues that contain `var` in it are found.
707
+
708
+
709
+ * First two conversions are to be done manually by the use of the commands, `npm run variable:addignore` and `npm run variable:convert`
710
+ * Final conversion is done by react-cli on compilation of the source folder `npm run start --app:port=**** --app:domain=****`