@zohodesk/react-cli 1.0.3 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- 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;
|