@zohodesk/react-cli 0.0.1-beta.172 → 0.0.1-beta.174
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 +34 -2
- package/docs/VariableConversion.md +678 -0
- package/lib/configs/jest.config.js +8 -12
- package/lib/configs/libAlias.js +10 -3
- 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/jest/preProcessors/cssPreprocessor.js +16 -7
- package/lib/loaderUtils/getCSSLoaders.js +22 -10
- package/lib/postcss-plugins/hoverActivePlugin.js +30 -13
- 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 +11 -4
- package/package.json +1 -3
- package/templates/docs/css/style.css +1 -1
- package/templates/docs/index.html +9 -1
@@ -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+').replace('(', '\\(').replace(')', '\\)')}|`;
|
138
|
+
} else {
|
139
|
+
regValStr += `${val.replace('$$', '\\d+').replace('(', '\\(').replace(')', '\\)')}`;
|
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: []
|
@@ -319,6 +325,7 @@ var _default = {
|
|
319
325
|
}
|
320
326
|
},
|
321
327
|
test: {
|
328
|
+
classnameFormat: '[classname]',
|
322
329
|
srcBranch: {
|
323
330
|
value: 'master',
|
324
331
|
cli: 'src_branch'
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@zohodesk/react-cli",
|
3
|
-
"version": "0.0.1-beta.
|
3
|
+
"version": "0.0.1-beta.174",
|
4
4
|
"description": "A CLI tool for build modern web application and libraries",
|
5
5
|
"scripts": {
|
6
6
|
"init": "node ./lib/utils/init.js",
|
@@ -78,7 +78,6 @@
|
|
78
78
|
"html-webpack-inject-attributes-plugin": "1.0.6",
|
79
79
|
"html-webpack-plugin": "4.3.0",
|
80
80
|
"http-proxy-middleware": "1.0.5",
|
81
|
-
"identity-obj-proxy": "3.0.0",
|
82
81
|
"jest": "26.4.0",
|
83
82
|
"jsdom": "16.4.0",
|
84
83
|
"loader-utils": "2.0.0",
|
@@ -93,7 +92,6 @@
|
|
93
92
|
"postcss": "7.0.32",
|
94
93
|
"postcss-combine-media-query": "1.0.1",
|
95
94
|
"postcss-hash-classname": "0.4.0",
|
96
|
-
"postcss-import": "14.1.0",
|
97
95
|
"postcss-loader": "3.0.0",
|
98
96
|
"postcss-mobile-hover": "1.0.2",
|
99
97
|
"postcss-selector-replace": "1.0.2",
|
@@ -438,6 +438,7 @@
|
|
438
438
|
Components[propComName].propTypes) ||
|
439
439
|
{};
|
440
440
|
let currentCompProps = Object.keys(propsObj) || [];
|
441
|
+
let currentCompPropsDescription = window.componentList && window.componentList[propComName] && window.componentList[propComName].propsDescription || (Components[propComName] && Components[propComName].propsDescription) || {};
|
441
442
|
let currentCompDefault = Window.componentList && window.componentList[propComName] && window.componentList[propComName].defaultProps || (Components[propComName] && Components[propComName].defaultProps) || {};
|
442
443
|
let componentsObj=componentObj && this.filter(Object.keys(componentObj),'').map((item,i)=>{
|
443
444
|
return ({key:item,value:componentObj[item],length:Object.keys(componentObj[item]).length})
|
@@ -767,6 +768,7 @@
|
|
767
768
|
<span className="brR">Type</span>
|
768
769
|
<span className="brR">isRequired</span>
|
769
770
|
<span className="brR ">Default Props</span>
|
771
|
+
<span className="brR ">Description</span>
|
770
772
|
</div>
|
771
773
|
{
|
772
774
|
currentCompProps.map((value, i) => {
|
@@ -796,9 +798,15 @@
|
|
796
798
|
</span>
|
797
799
|
<span className="defaultProps">
|
798
800
|
<div className="bn">
|
799
|
-
{JSON.stringify(currentCompDefault[value])}
|
801
|
+
{JSON.stringify(currentCompDefault[value] || '')}
|
800
802
|
</div>
|
801
803
|
</span>
|
804
|
+
<span className="defaultProps">
|
805
|
+
<div className="bn">
|
806
|
+
{JSON.stringify(currentCompPropsDescription[value] || '')}
|
807
|
+
</div>
|
808
|
+
</span>
|
809
|
+
|
802
810
|
</div>
|
803
811
|
);
|
804
812
|
})
|