@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.
Files changed (41) hide show
  1. package/README.md +18 -1
  2. package/bin/cli.js +10 -4
  3. package/docs/ComposeMinification.md +13 -0
  4. package/docs/ReactLive.md +10 -0
  5. package/docs/patternFiltering.md +57 -0
  6. package/lib/common/buildEs.js +12 -0
  7. package/lib/configs/webpack.dev.config.js +3 -0
  8. package/lib/configs/webpack.docs.config.js +6 -0
  9. package/lib/configs/webpack.impact.config.js +2 -0
  10. package/lib/configs/webpack.prod.config.js +3 -0
  11. package/lib/loaderUtils/getCSSLoaders.js +77 -46
  12. package/lib/loaderUtils/tests/windowsModification.test.js +10 -0
  13. package/lib/loaderUtils/windowsModification.js +6 -1
  14. package/lib/loaders/composeLoader.js +172 -0
  15. package/lib/loaders/docsLoader.js +15 -7
  16. package/lib/loaders/reactLiveConvertor.js +107 -0
  17. package/lib/pluginUtils/getDevPlugins.js +10 -3
  18. package/lib/pluginUtils/getProdPlugins.js +8 -3
  19. package/lib/pluginUtils/getUMDCSSPlugins.js +1 -1
  20. package/lib/pluginUtils/getUMDComponentPlugins.js +1 -1
  21. package/lib/plugins/{UglifyCSSPlugin.js → MinifyPlugin.js} +3 -3
  22. package/lib/plugins/SelectorPlugin.js +63 -40
  23. package/lib/plugins/VariableConversionCollector.js +40 -97
  24. package/lib/plugins/index.js +7 -7
  25. package/lib/plugins/utils/classHandling.js +35 -0
  26. package/lib/plugins/utils/fileHandling.js +107 -0
  27. package/lib/plugins/utils/tests/fileHandling.test.js +30 -0
  28. package/lib/plugins/variableConvertorUtils.js +131 -0
  29. package/lib/postcss-plugins/EmptyPlugin.js +8 -0
  30. package/lib/postcss-plugins/ExcludePlugin.js +1 -1
  31. package/lib/postcss-plugins/ValueReplacer.js +5 -14
  32. package/lib/postcss-plugins/variableModificationPlugin/index.js +2 -19
  33. package/lib/schemas/index.js +33 -3
  34. package/lib/servers/server.js +2 -2
  35. package/lib/utils/cssClassNameGenerate.js +34 -9
  36. package/lib/utils/getOptions.js +16 -0
  37. package/lib/utils/variableConverter.js +89 -0
  38. package/{package-lock.json → npm-shrinkwrap.json} +1 -1
  39. package/package.json +3 -1
  40. package/lib/plugins/composeCommonPlugin.js +0 -30
  41. 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
- let isIgnoredFile = opts.ignore.some(file => inputFile.indexOf(file) !== -1);
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
- const ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
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
- }); // Transform CSS AST here
33
- }); // root.walkDecls(decl => {
34
- // valueReplacer.forEach(obj => {
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); // errorFunction(
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
 
@@ -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
- hasRTL: false,
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: [],
@@ -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)("Your node version didn't adopted http2 support. Kindly update that to 8 LTS or above you can engage the http2");
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}`;
@@ -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
+ // }
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/react-cli",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "lockfileVersion": 1,
5
5
  "requires": true,
6
6
  "dependencies": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/react-cli",
3
- "version": "1.0.3",
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;