@zohodesk/react-cli 1.0.3 → 1.1.0
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/README.md +18 -1
- package/bin/cli.js +10 -4
- package/docs/ComposeMinification.md +13 -0
- package/docs/ReactLive.md +10 -0
- package/docs/patternFiltering.md +57 -0
- package/lib/common/buildEs.js +12 -0
- package/lib/configs/webpack.dev.config.js +3 -0
- package/lib/configs/webpack.docs.config.js +6 -0
- package/lib/configs/webpack.impact.config.js +2 -0
- package/lib/configs/webpack.prod.config.js +3 -0
- package/lib/loaderUtils/getCSSLoaders.js +77 -46
- package/lib/loaderUtils/tests/windowsModification.test.js +10 -0
- package/lib/loaderUtils/windowsModification.js +6 -1
- package/lib/loaders/composeLoader.js +172 -0
- package/lib/loaders/docsLoader.js +15 -7
- package/lib/loaders/reactLiveConvertor.js +107 -0
- package/lib/pluginUtils/getDevPlugins.js +10 -3
- package/lib/pluginUtils/getProdPlugins.js +8 -3
- package/lib/pluginUtils/getUMDCSSPlugins.js +1 -1
- package/lib/pluginUtils/getUMDComponentPlugins.js +1 -1
- package/lib/plugins/{UglifyCSSPlugin.js → MinifyPlugin.js} +3 -3
- package/lib/plugins/SelectorPlugin.js +63 -40
- package/lib/plugins/VariableConversionCollector.js +40 -97
- package/lib/plugins/index.js +7 -7
- package/lib/plugins/utils/classHandling.js +35 -0
- package/lib/plugins/utils/fileHandling.js +107 -0
- package/lib/plugins/utils/tests/fileHandling.test.js +30 -0
- package/lib/plugins/variableConvertorUtils.js +131 -0
- package/lib/postcss-plugins/EmptyPlugin.js +8 -0
- package/lib/postcss-plugins/ExcludePlugin.js +1 -1
- package/lib/postcss-plugins/ValueReplacer.js +5 -14
- package/lib/postcss-plugins/variableModificationPlugin/index.js +2 -19
- package/lib/schemas/index.js +33 -3
- package/lib/servers/server.js +2 -2
- package/lib/utils/cssClassNameGenerate.js +34 -9
- package/lib/utils/getOptions.js +16 -0
- package/lib/utils/variableConverter.js +89 -0
- package/{package-lock.json → npm-shrinkwrap.json} +1 -1
- package/package.json +3 -1
- package/lib/plugins/composeCommonPlugin.js +0 -30
- package/lib/postcss-plugins/variableModifier.js +0 -210
@@ -0,0 +1,107 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.isFileNameMatchingPattern = isFileNameMatchingPattern;
|
7
|
+
exports.isFileNameMatchingPluginPattern = isFileNameMatchingPluginPattern;
|
8
|
+
|
9
|
+
var _windowsModification = require("../../loaderUtils/windowsModification");
|
10
|
+
|
11
|
+
var _ignore = _interopRequireDefault(require("ignore"));
|
12
|
+
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
14
|
+
|
15
|
+
const path = require('path');
|
16
|
+
|
17
|
+
let aliasNames = {
|
18
|
+
valueReplacer: 'postcss-value-replacer',
|
19
|
+
selectorReplace: 'postcss-selector-replace-new',
|
20
|
+
hasRTL: 'postcss-rtl',
|
21
|
+
combinerMediaQuery: 'postcss-combine-media-query',
|
22
|
+
hoverActive: 'postcss-mobile-hover',
|
23
|
+
cssVariableReplacement: 'postcss-variable-report',
|
24
|
+
composeMinification: 'postcss-compose-plugin'
|
25
|
+
};
|
26
|
+
/*
|
27
|
+
|
28
|
+
unique scenario
|
29
|
+
|
30
|
+
*/
|
31
|
+
// export function filterFileCssUniqueness(filename, filterObj) {
|
32
|
+
// let rootDir = 'supportapp';
|
33
|
+
// let include = false;
|
34
|
+
// const regex = `^(.+?)${rootDir}?\\\\`;
|
35
|
+
// const newFilename = windowsModificationFile(filename).replace(
|
36
|
+
// new RegExp(regex, 'gi'),
|
37
|
+
// ''
|
38
|
+
// );
|
39
|
+
// Object.keys(filterObj).forEach(key => {
|
40
|
+
// const ig = ignore().add(filterObj[key]);
|
41
|
+
// if (ig.ignores(newFilename)) {
|
42
|
+
// include = true;
|
43
|
+
// }
|
44
|
+
// });
|
45
|
+
// return include;
|
46
|
+
// }
|
47
|
+
|
48
|
+
function isFileNameMatchingPattern({
|
49
|
+
filename,
|
50
|
+
filterObject,
|
51
|
+
plugins
|
52
|
+
}) {
|
53
|
+
const finalPlugins = []; // console.log(rootDir);
|
54
|
+
// const regex = `^(.+?)${rootDir}?\\\\`;
|
55
|
+
|
56
|
+
const newFilename = path.relative(path.parse(process.cwd()).base, filename); //windowsModificationFile(filename).replace(
|
57
|
+
// new RegExp(regex, 'gi'),
|
58
|
+
// ''
|
59
|
+
// );
|
60
|
+
// path.relative('supportapp', 'd:\')
|
61
|
+
|
62
|
+
Object.keys(filterObject).forEach(key => {
|
63
|
+
plugins.forEach(x => {
|
64
|
+
// console.log(key, x.postcssPlugin);
|
65
|
+
if (aliasNames[key] === x.postcssPlugin) {
|
66
|
+
const ig = (0, _ignore.default)({
|
67
|
+
allowRelativePaths: true
|
68
|
+
}).add(filterObject[key]);
|
69
|
+
|
70
|
+
if (ig.ignores(newFilename)) {
|
71
|
+
// console.log(newFilename);
|
72
|
+
finalPlugins.push(x);
|
73
|
+
}
|
74
|
+
}
|
75
|
+
});
|
76
|
+
}); // console.log(filename);
|
77
|
+
// console.log(finalPlugins);
|
78
|
+
// console.log('----------------------------------------------------------------------')
|
79
|
+
|
80
|
+
return finalPlugins; // console.log(filename, filterObject);
|
81
|
+
}
|
82
|
+
|
83
|
+
function isFileNameMatchingPluginPattern({
|
84
|
+
filename,
|
85
|
+
filterArr // =process.cwd()
|
86
|
+
|
87
|
+
}) {
|
88
|
+
// console.log(rootDir);
|
89
|
+
let include = true; // console.log(rootDir);
|
90
|
+
// const regex = `^(.+?)${rootDir}?\\\\`;
|
91
|
+
// console.log(plugin);
|
92
|
+
|
93
|
+
const newFilename = path.relative(path.parse(process.cwd()).base, filename); // const newFilename = windowsModificationFile(filename).replace(
|
94
|
+
// new RegExp(regex, 'gi'),
|
95
|
+
// ''
|
96
|
+
// );
|
97
|
+
|
98
|
+
const ig = (0, _ignore.default)({
|
99
|
+
allowRelativePaths: true
|
100
|
+
}).add(filterArr);
|
101
|
+
|
102
|
+
if (!ig.ignores(newFilename)) {
|
103
|
+
include = false;
|
104
|
+
}
|
105
|
+
|
106
|
+
return include;
|
107
|
+
}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
const ignore = require('ignore');
|
4
|
+
|
5
|
+
const ignoreArr1 = ['src', '!src\\components', 'src\\Accessibility'];
|
6
|
+
const ignoreArr2 = ['src\\', '!node_modules\\'];
|
7
|
+
const ignoreArr3 = ['*'];
|
8
|
+
|
9
|
+
const {
|
10
|
+
windowsModificationFile
|
11
|
+
} = require('../../../../lib/loaderUtils/windowsModification');
|
12
|
+
|
13
|
+
const files = ['D:\\MyWork\\React Build\\desk_client_app\\jsapps\\supportapp\\src\\components\\Accessibility\\Accessibility.module.css', 'D:\\MyWork\\React Build\\desk_client_app\\jsapps\\supportapp\\src\\components\\Avatar\\Avatar.module.css', 'D:/MyWork/React Build/desk_client_app/jsapps/supportapp/src/components/Accessibility/Accessibility.module.css', 'D:/MyWork/React Build/desk_client_app/jsapps/supportapp/src/components/Accessibility/AccessibilityNavigation.module.css', 'desk_client_app\\jsapps\\supportapp\\src\\components\\Test.module.css', 'desk_client_app\\jsapps\\supportapp\\src\\components\\Accessibility\\Accessibility.module.css', 'desk_client_app/jsapps/supportapp/src/components/Accessibility/Accessibility.module.css', 'src\\components\\Accessibility\\Accessibility.module.css', 'src/components/Accessibility/Accessibility.module.css', 'Accessibility.module.css', ''];
|
14
|
+
const ignore1 = ignore().add(ignoreArr1);
|
15
|
+
const ignore2 = ignore().add(ignoreArr2);
|
16
|
+
const ignore3 = ignore().add(ignoreArr3);
|
17
|
+
files.forEach(file => {
|
18
|
+
// console.log(file);
|
19
|
+
const rootDir = 'supportapp';
|
20
|
+
const regex = `^(.+?)${rootDir}?\\\\`;
|
21
|
+
const newFilename = windowsModificationFile(file).replace(new RegExp(regex, 'gi'), '');
|
22
|
+
console.log(newFilename);
|
23
|
+
|
24
|
+
if (newFilename.trim() !== '') {
|
25
|
+
console.log(ignore1.ignores(newFilename));
|
26
|
+
console.log(ignore2.ignores(newFilename));
|
27
|
+
console.log(ignore3.ignores(newFilename));
|
28
|
+
console.log('--------------------------------------------------------------------');
|
29
|
+
}
|
30
|
+
});
|
@@ -0,0 +1,131 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.extractVariableName = extractVariableName;
|
7
|
+
exports.ignoreVals = void 0;
|
8
|
+
exports.variableConverter = variableConverter;
|
9
|
+
|
10
|
+
var _classHandling = require("./utils/classHandling");
|
11
|
+
|
12
|
+
const ignoreVals = ['--zd_size', '--zd_font_size', '--size', '--size_']; // const avoidProps = [];
|
13
|
+
// -- is issue IO --
|
14
|
+
|
15
|
+
/*
|
16
|
+
issues eg :
|
17
|
+
issues = ['--zd_size', '--zd_font_size', '--size', '--size_'];
|
18
|
+
input :
|
19
|
+
--zd_size
|
20
|
+
output :
|
21
|
+
true
|
22
|
+
comment :
|
23
|
+
do not execute when --zd_size comes as prop
|
24
|
+
*/
|
25
|
+
|
26
|
+
exports.ignoreVals = ignoreVals;
|
27
|
+
|
28
|
+
function extractVariableName(val) {
|
29
|
+
return val.replace(/calc\((.+)\)/gi, '$1').replace(/var\((.+)\)/gi, '$1').replace('-1', '').replace('*', '').replace('\n', '').trim();
|
30
|
+
}
|
31
|
+
|
32
|
+
function isIgnoreValuePresent(ignoreVals, prop) {
|
33
|
+
return ignoreVals.some(ignoreVal => prop && prop.includes(ignoreVal)); // let present = false;
|
34
|
+
// return ignoreVals.forEach(issue => {
|
35
|
+
// if (prop && prop.includes(issue)) {
|
36
|
+
// present = true;
|
37
|
+
// }
|
38
|
+
// });
|
39
|
+
// return present;
|
40
|
+
}
|
41
|
+
|
42
|
+
function parseCalcValue(calcValue) {
|
43
|
+
// Remove "calc(" and ")" from the string
|
44
|
+
const value = calcValue.replace(/calc\(/gi, '').replace(/\)/gi, '').trim(); // Split the string by "*" or "/"
|
45
|
+
|
46
|
+
const parts = value.split(/[\\/*]/); // Parse the first part as a number
|
47
|
+
|
48
|
+
const num1 = parts[0].trim(); // Parse the second part as a number
|
49
|
+
|
50
|
+
const num2 = parts[1].trim();
|
51
|
+
return {
|
52
|
+
valOne: num1,
|
53
|
+
valTwo: num2
|
54
|
+
};
|
55
|
+
}
|
56
|
+
|
57
|
+
function convertToCalc(pxReplacement, value) {
|
58
|
+
const parsedValue = parseFloat(value, 10);
|
59
|
+
const sign = parsedValue < 0 ? '-' : '';
|
60
|
+
const varName = `${parsedValue < 0 ? parsedValue * -1 : parsedValue}`;
|
61
|
+
return `calc( ${pxReplacement.replace('$$', varName)} * ${sign}1 )`;
|
62
|
+
}
|
63
|
+
|
64
|
+
function convertCalcValue(pxReplacement, parsedValue) {
|
65
|
+
Object.keys(parsedValue).forEach(key => {
|
66
|
+
if (parsedValue[key].includes('px')) {
|
67
|
+
parsedValue[key] = pxReplacement.replace('$$', parsedValue[key].replace('px', ''));
|
68
|
+
}
|
69
|
+
});
|
70
|
+
return parsedValue;
|
71
|
+
}
|
72
|
+
|
73
|
+
function variableConverter(rootOriginal, variables, settingsObject) {
|
74
|
+
rootOriginal.walkRules(rule => {
|
75
|
+
rule.nodes.forEach((decl, index) => {
|
76
|
+
const prevNode = rule.nodes[index - 1];
|
77
|
+
const currentNode = rule.nodes[index];
|
78
|
+
|
79
|
+
if (decl.prop && decl.prop.includes('--')) {
|
80
|
+
if ((0, _classHandling.isThisComment)(prevNode, 'variable:ignore') // prevNode &&
|
81
|
+
// prevNode.type === 'comment' &&
|
82
|
+
// prevNode.text.toLowerCase() === 'variable:ignore'
|
83
|
+
) {
|
84
|
+
return;
|
85
|
+
}
|
86
|
+
|
87
|
+
if (isIgnoreValuePresent(ignoreVals, decl.prop)) {
|
88
|
+
return;
|
89
|
+
}
|
90
|
+
|
91
|
+
if (settingsObject[variables[decl.prop]]) {
|
92
|
+
/* if there is no value for property, set it to default so that undefined doesn't get called as key */
|
93
|
+
if (!variables[decl.prop]) {
|
94
|
+
variables[decl.prop] = 'default';
|
95
|
+
}
|
96
|
+
|
97
|
+
const pxReplacement = settingsObject[variables[decl.prop]].replacements.px;
|
98
|
+
const valArr = decl.value.split(' '); // single values are considered in the above array and converted below
|
99
|
+
|
100
|
+
valArr.forEach((value, index) => {
|
101
|
+
if (value.includes('px')) {
|
102
|
+
if (value.includes('calc')) {
|
103
|
+
const res = convertCalcValue(pxReplacement, parseCalcValue(value));
|
104
|
+
valArr[index] = `calc( ${res.valOne.trim()} * ${res.valTwo.trim()} )`;
|
105
|
+
return;
|
106
|
+
}
|
107
|
+
|
108
|
+
if (/-(\d+)/gi.test(value)) {
|
109
|
+
valArr[index] = convertToCalc(pxReplacement, value);
|
110
|
+
return;
|
111
|
+
}
|
112
|
+
|
113
|
+
const num = value.replace('px', '');
|
114
|
+
|
115
|
+
if (value) {
|
116
|
+
valArr[index] = pxReplacement.replace('$$', num);
|
117
|
+
}
|
118
|
+
}
|
119
|
+
|
120
|
+
if (value.includes('px')) {
|
121
|
+
const num = value.replace('px', '');
|
122
|
+
valArr[index] = pxReplacement.replace('$$', num);
|
123
|
+
}
|
124
|
+
});
|
125
|
+
currentNode.value = valArr.join(' ');
|
126
|
+
}
|
127
|
+
}
|
128
|
+
});
|
129
|
+
});
|
130
|
+
return rootOriginal;
|
131
|
+
}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _postcss = _interopRequireDefault(require("postcss"));
|
4
|
+
|
5
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
6
|
+
|
7
|
+
module.exports = _postcss.default.plugin('postcss-empty', () => (root, result) => {// console.log(root.source.input.from, result);
|
8
|
+
});
|
@@ -10,7 +10,7 @@ module.exports = _postcss.default.plugin('postcss-exclude-files', opts => {
|
|
10
10
|
} = opts;
|
11
11
|
return (root, result) => {
|
12
12
|
const inputFile = root.source.input.file;
|
13
|
-
|
13
|
+
const isIgnoredFile = opts.ignore.some(file => inputFile.indexOf(file) !== -1);
|
14
14
|
|
15
15
|
if (!isIgnoredFile) {
|
16
16
|
const handler = response => response.messages.forEach(msg => result.messages.push(msg));
|
@@ -18,27 +18,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
18
18
|
// }
|
19
19
|
// };
|
20
20
|
// });
|
21
|
-
// export default
|
21
|
+
// export default
|
22
22
|
module.exports = _postcss.default.plugin('postcss-value-replacer', (valueReplacer = {}) => // Work with options here
|
23
23
|
root => {
|
24
24
|
root.walkDecls(decl => {
|
25
25
|
valueReplacer.forEach(obj => {
|
26
26
|
if (obj.props.indexOf(decl.prop) !== -1) {
|
27
|
-
|
27
|
+
let ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
|
28
28
|
ks.forEach(k => {
|
29
29
|
decl.value = decl.value.replace(k, obj.values[k]);
|
30
30
|
}); //decl.value = obj.values[decl.value];
|
31
31
|
}
|
32
|
-
}); //
|
33
|
-
|
34
|
-
|
35
|
-
// if (
|
36
|
-
// obj.props.indexOf(decl.prop) !== -1 &&
|
37
|
-
// obj.values[decl.value] !== undefined
|
38
|
-
// ) {
|
39
|
-
// decl.value = obj.values[decl.value];
|
40
|
-
// }
|
41
|
-
// });
|
42
|
-
// // Transform CSS AST here
|
43
|
-
// });
|
32
|
+
}); //console.log({root, roots:root+""}, root+"")
|
33
|
+
// Transform CSS AST here
|
34
|
+
});
|
44
35
|
});
|
@@ -89,6 +89,7 @@ function pxToCalc(value) {
|
|
89
89
|
}
|
90
90
|
});
|
91
91
|
});
|
92
|
+
console.log(arr.join(' '));
|
92
93
|
return arr.join(' ');
|
93
94
|
}
|
94
95
|
|
@@ -127,25 +128,7 @@ const singleConvertor = (value, changeVal, details, range) => {
|
|
127
128
|
path: path
|
128
129
|
};
|
129
130
|
errHandler.errorTable.push(errObj);
|
130
|
-
errHandler.errorFunction(errObj);
|
131
|
-
// {
|
132
|
-
// decl,
|
133
|
-
// type: 'RANGE_ERROR',
|
134
|
-
// filename,
|
135
|
-
// message: `value (${value}) (${typeof value}) not within range (${
|
136
|
-
// range.start
|
137
|
-
// },${range.end})\r`,
|
138
|
-
// path: path
|
139
|
-
// },
|
140
|
-
// 'RANGE_ERROR'
|
141
|
-
// );
|
142
|
-
// }
|
143
|
-
// 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`)
|
144
|
-
// return value;
|
145
|
-
// } else {
|
146
|
-
// console.log('++++++++++++++++++++++rect val!', value);
|
147
|
-
// }
|
148
|
-
|
131
|
+
errHandler.errorFunction(errObj);
|
149
132
|
return;
|
150
133
|
};
|
151
134
|
|
package/lib/schemas/index.js
CHANGED
@@ -229,11 +229,26 @@ var _default = {
|
|
229
229
|
cli: 'enable_smaphook'
|
230
230
|
},
|
231
231
|
plugins: {
|
232
|
+
valueReplacer: false,
|
233
|
+
selectorReplace: false,
|
232
234
|
hasRTL: false,
|
233
235
|
hoverActive: false,
|
234
236
|
combinerMediaQuery: false,
|
235
237
|
cssVariableReplacement: false,
|
236
|
-
selectorWeight: false
|
238
|
+
selectorWeight: false,
|
239
|
+
minifier: false,
|
240
|
+
composeMinification: false
|
241
|
+
},
|
242
|
+
patterns: {
|
243
|
+
valueReplacer: [],
|
244
|
+
selectorReplace: [],
|
245
|
+
hoverActive: [],
|
246
|
+
combinerMediaQuery: [],
|
247
|
+
hasRTL: [],
|
248
|
+
cssVariableReplacement: [],
|
249
|
+
selectorWeight: [],
|
250
|
+
cssUniqueness: [],
|
251
|
+
composeMinification: []
|
237
252
|
},
|
238
253
|
exclude: {
|
239
254
|
rtl: [],
|
@@ -324,13 +339,28 @@ var _default = {
|
|
324
339
|
disableES5Transpile: false,
|
325
340
|
// TODO: Deprecated
|
326
341
|
hasRTL: false,
|
342
|
+
enableReactLive: {
|
343
|
+
value: true,
|
344
|
+
cli: 'react_live'
|
345
|
+
},
|
327
346
|
rtlExclude: [],
|
328
347
|
plugins: {
|
329
|
-
|
348
|
+
rtl: false,
|
330
349
|
hoverActive: false,
|
331
350
|
combinerMediaQuery: false,
|
332
351
|
cssVariableReplacement: false,
|
333
|
-
selectorWeight: false
|
352
|
+
selectorWeight: false,
|
353
|
+
minifier: false,
|
354
|
+
composeMinification: false
|
355
|
+
},
|
356
|
+
patterns: {
|
357
|
+
valueReplacer: [],
|
358
|
+
selectorReplace: [],
|
359
|
+
hoverActive: [],
|
360
|
+
combinerMediaQuery: [],
|
361
|
+
hasRTL: [],
|
362
|
+
cssVariableReplacement: [],
|
363
|
+
selectorWeight: []
|
334
364
|
},
|
335
365
|
exclude: {
|
336
366
|
rtl: [],
|
package/lib/servers/server.js
CHANGED
@@ -202,8 +202,8 @@ if (httpsOptions) {
|
|
202
202
|
port: http2Port
|
203
203
|
}, 'htt' + 'ps')}${contextURL}/`, 'http2 server');
|
204
204
|
});
|
205
|
-
} else {
|
206
|
-
(0, _utils.log)(
|
205
|
+
} else if (httpsOptions) {
|
206
|
+
(0, _utils.log)('Your node version didn\'t adopted http2 support. Kindly update that to 8 LTS or above you can engage the http2');
|
207
207
|
}
|
208
208
|
}
|
209
209
|
|
@@ -9,6 +9,8 @@ var _os = _interopRequireDefault(require("os"));
|
|
9
9
|
|
10
10
|
var _path = _interopRequireDefault(require("path"));
|
11
11
|
|
12
|
+
var _fileHandling = require("../plugins/utils/fileHandling");
|
13
|
+
|
12
14
|
var _getHash = _interopRequireDefault(require("./getHash"));
|
13
15
|
|
14
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
@@ -39,32 +41,55 @@ const isSelectorPackage = (resourcePath, packages) => {
|
|
39
41
|
var _default = (unique = true, {
|
40
42
|
filenames,
|
41
43
|
packages
|
42
|
-
}, classNamePrefix) => (context, localIdentName, localName) => {
|
44
|
+
}, classNamePrefix, patterns) => (context, localIdentName, localName) => {
|
45
|
+
// console.log(patterns, context.resourcePath);
|
43
46
|
// NOTE: in build macine we use date as folder path.
|
44
47
|
// So every time we create new build there is path will alway different
|
45
48
|
// in order to minmaze that problem we try in relative path;
|
49
|
+
// console.log('context.resourcePath', context.resourcePath, context);
|
46
50
|
// let contextResourcePath = context.resourcePath;
|
51
|
+
const filePaths = context.resourcePath.split(_path.default.sep);
|
52
|
+
const fileName = filePaths[filePaths.length - 1];
|
53
|
+
const [fileNameWithoutExt] = fileName.split('.');
|
54
|
+
const cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase();
|
55
|
+
|
47
56
|
const relativePath = _path.default.relative(context.rootContext, context.resourcePath);
|
57
|
+
/*
|
58
|
+
input :
|
59
|
+
context.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
|
60
|
+
|
61
|
+
patterns.cssVariableReplacement:
|
62
|
+
// include src folder, include deskapp folder, exclude node modules
|
63
|
+
"cssUniqueness": [
|
64
|
+
"src",
|
65
|
+
"deskapp",
|
66
|
+
"!node_modules"
|
67
|
+
]
|
68
|
+
output :
|
69
|
+
true or false
|
70
|
+
*/
|
71
|
+
|
48
72
|
|
49
73
|
if (context.resourcePath.endsWith('.plain.css')) {
|
50
74
|
return localName;
|
51
75
|
}
|
76
|
+
|
77
|
+
if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
|
78
|
+
filename: context.resourcePath,
|
79
|
+
filterArr: patterns.cssUniqueness
|
80
|
+
})) {
|
81
|
+
return `${classNamePrefix}-${cleanFileName}-${localName}`;
|
82
|
+
}
|
52
83
|
/* old production mode start without breaking so added. may be removed in future*/
|
53
84
|
|
54
85
|
|
55
86
|
if (unique) {
|
56
87
|
const h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
|
57
88
|
return `${classNamePrefix}${h}`;
|
58
|
-
}
|
59
|
-
/* old production mode end*/
|
60
|
-
|
61
|
-
|
62
|
-
const filePaths = context.resourcePath.split(_path.default.sep);
|
63
|
-
const fileName = filePaths[filePaths.length - 1];
|
64
|
-
const [fileNameWithoutExt] = fileName.split('.');
|
65
|
-
const cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase(); //css file has casesensitive selector issue so can't toLowerCase
|
89
|
+
} //css file has casesensitive selector issue so can't toLowerCase
|
66
90
|
//let local = localName.toLowerCase()
|
67
91
|
|
92
|
+
|
68
93
|
if (isSelectorPackage(context.resourcePath, packages) || filenames.indexOf(cleanFileName) !== -1) {
|
69
94
|
const h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
|
70
95
|
return `${classNamePrefix}${h}`;
|
package/lib/utils/getOptions.js
CHANGED
@@ -149,6 +149,22 @@ function deprecationSupport(options) {
|
|
149
149
|
if (options.docs.rtlExclude.length > 0) {
|
150
150
|
options.docs.exclude.rtl = options.docs.rtlExclude;
|
151
151
|
}
|
152
|
+
|
153
|
+
options.app.exclude.hasRTL = options.app.exclude.rtl;
|
154
|
+
Object.keys(options.app.patterns).forEach(key => {
|
155
|
+
if (options.app.exclude[key] && options.app.patterns[key].length === 0) {
|
156
|
+
let tempArr = options.app.exclude[key];
|
157
|
+
tempArr = tempArr.map(x => `!${x}`);
|
158
|
+
options.app.patterns[key] = tempArr;
|
159
|
+
}
|
160
|
+
});
|
161
|
+
Object.keys(options.docs.patterns).forEach(key => {
|
162
|
+
if (options.docs.exclude[key] && options.docs.patterns[key].length === 0) {
|
163
|
+
let tempArr = options.docs.exclude[key];
|
164
|
+
tempArr = tempArr.map(x => `!${x}`);
|
165
|
+
options.docs.patterns[key] = tempArr;
|
166
|
+
}
|
167
|
+
});
|
152
168
|
}
|
153
169
|
|
154
170
|
const getOptions = () => {
|
@@ -0,0 +1,89 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _fileHandling = require("../plugins/utils/fileHandling");
|
4
|
+
|
5
|
+
var _getOptions = _interopRequireDefault(require("./getOptions"));
|
6
|
+
|
7
|
+
var _folderIterator = _interopRequireDefault(require("./folderIterator"));
|
8
|
+
|
9
|
+
var _variableConvertorUtils = require("../plugins/variableConvertorUtils");
|
10
|
+
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
12
|
+
|
13
|
+
const postcss = require('postcss');
|
14
|
+
|
15
|
+
const path = require('path');
|
16
|
+
|
17
|
+
const fs = require('fs');
|
18
|
+
|
19
|
+
const postcssVariableConvertor = require('../postcss-plugins/variableModificationPlugin/index').plugin;
|
20
|
+
|
21
|
+
const cwd = process.cwd();
|
22
|
+
const src = path.join(cwd, process.argv[2]);
|
23
|
+
const dist = path.join(cwd, process.argv[3]);
|
24
|
+
const options = (0, _getOptions.default)();
|
25
|
+
|
26
|
+
function watchHandler(fromPath, toPath) {
|
27
|
+
const css = fs.readFileSync(fromPath, 'utf-8'); // console.log(css);
|
28
|
+
|
29
|
+
const {
|
30
|
+
css: cssOptions
|
31
|
+
} = options; // console.log(cssOptions, appOptions);
|
32
|
+
|
33
|
+
const {
|
34
|
+
cssVariableReplacementConfig: cssVariableConfigFilePath,
|
35
|
+
patterns: filterArr
|
36
|
+
} = cssOptions;
|
37
|
+
const rootOriginal = postcss.parse(css);
|
38
|
+
const variables = {}; // const unassigned = {};
|
39
|
+
|
40
|
+
const rawdata = fs.readFileSync(cssVariableConfigFilePath).toString();
|
41
|
+
const cssVariableOptions = JSON.parse(rawdata);
|
42
|
+
const {
|
43
|
+
settings: settingsObject // errorLog: errorLogStatus,
|
44
|
+
// errorInConsole: errorConsoleStatus,
|
45
|
+
// errorsAllowed,
|
46
|
+
// strictMode
|
47
|
+
|
48
|
+
} = cssVariableOptions;
|
49
|
+
rootOriginal.walkRules(rule => {
|
50
|
+
rule.walkDecls(decl => {
|
51
|
+
decl.value.split(' ').forEach(val => {
|
52
|
+
if (val && val.includes('--') && !new RegExp(_variableConvertorUtils.ignoreVals.join('|'), 'gi').test(val) && decl.prop) {
|
53
|
+
const extractedValue = (0, _variableConvertorUtils.extractVariableName)(val);
|
54
|
+
|
55
|
+
if (!variables[extractedValue]) {
|
56
|
+
variables[extractedValue] = decl.prop;
|
57
|
+
}
|
58
|
+
}
|
59
|
+
});
|
60
|
+
});
|
61
|
+
});
|
62
|
+
|
63
|
+
if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
|
64
|
+
filename: fromPath,
|
65
|
+
filterArr
|
66
|
+
})) {
|
67
|
+
return;
|
68
|
+
}
|
69
|
+
|
70
|
+
const convertedCode = (0, _variableConvertorUtils.variableConverter)(rootOriginal, variables, settingsObject).toString(); // if (convertedCode.trim() !== '') {
|
71
|
+
// fs.writeFileSync(fromPath, convertedCode);
|
72
|
+
// }
|
73
|
+
// console.log(convertedCode);
|
74
|
+
|
75
|
+
postcss([postcssVariableConvertor(cssVariableConfigFilePath)]).process(convertedCode, {
|
76
|
+
from: undefined
|
77
|
+
}).then(result => {
|
78
|
+
fs.writeFileSync(toPath, result.css);
|
79
|
+
}); // console.log(variableOptions);
|
80
|
+
}
|
81
|
+
|
82
|
+
(0, _folderIterator.default)(src, dist, ['.css'], false, (fromPath, toPath) => {
|
83
|
+
// console.log(fromPath, toPath);
|
84
|
+
watchHandler(fromPath, toPath);
|
85
|
+
}); // if (canWacth) {
|
86
|
+
// useExitCleanup(() => {
|
87
|
+
// fs.unwatchFile(src, watchHandler);
|
88
|
+
// });
|
89
|
+
// }
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@zohodesk/react-cli",
|
3
|
-
"version": "1.0
|
3
|
+
"version": "1.1.0",
|
4
4
|
"description": "A CLI tool for build modern web application and libraries",
|
5
5
|
"scripts": {
|
6
6
|
"init": "node ./lib/utils/init.js",
|
@@ -58,6 +58,7 @@
|
|
58
58
|
"compression": "1.7.4",
|
59
59
|
"copy-webpack-plugin": "5.1.2",
|
60
60
|
"css-loader": "4.2.1",
|
61
|
+
"debug": "4.3.3",
|
61
62
|
"escodegen": "2.0.0",
|
62
63
|
"eslint": "7.6.0",
|
63
64
|
"eslint-html-reporter": "0.7.4",
|
@@ -74,6 +75,7 @@
|
|
74
75
|
"html-webpack-inject-attributes-plugin": "1.0.6",
|
75
76
|
"html-webpack-plugin": "4.3.0",
|
76
77
|
"http-proxy-middleware": "1.0.5",
|
78
|
+
"ignore": "5.2.4",
|
77
79
|
"jest": "26.4.0",
|
78
80
|
"jsdom": "16.4.0",
|
79
81
|
"loader-utils": "2.0.0",
|
@@ -1,30 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.default = void 0;
|
7
|
-
|
8
|
-
var _postcss = _interopRequireDefault(require("postcss"));
|
9
|
-
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
11
|
-
|
12
|
-
class ComposeCommonPlugin {
|
13
|
-
constructor(options = {}) {
|
14
|
-
this.optimize = options.optimize;
|
15
|
-
}
|
16
|
-
|
17
|
-
apply(compiler) {
|
18
|
-
compiler.hooks.compilation.tap('OptimizeJSPlugin', compilation => {
|
19
|
-
compilation.hooks.optimizeModules.tap('OptimizeMods', modules => {
|
20
|
-
modules.forEach(module => {
|
21
|
-
console.log(module);
|
22
|
-
});
|
23
|
-
});
|
24
|
-
});
|
25
|
-
}
|
26
|
-
|
27
|
-
}
|
28
|
-
|
29
|
-
var _default = ComposeCommonPlugin;
|
30
|
-
exports.default = _default;
|