@zohodesk/react-cli 1.0.3 → 1.1.1

package/lib/plugins/utils/classHandling.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasPrevNodeIgnore = hasPrevNodeIgnore;
+exports.isAtRule = isAtRule;
+exports.isComment = isComment;
+exports.isCommentContentSame = isCommentContentSame;
+exports.isInsideMediaQuery = isInsideMediaQuery;
+exports.isThisComment = isThisComment;
+
+function isComment(node) {
+  return node && node.type && node.type === 'comment';
+}
+
+function isCommentContentSame(node, content) {
+  return node.text.toLowerCase() === content;
+}
+
+function isThisComment(node, ignoreComment) {
+  return isComment(node) && isCommentContentSame(node, ignoreComment);
+}
+
+function hasPrevNodeIgnore(index, prevNode, ignoreComment) {
+  return index !== 0 && isThisComment(prevNode, ignoreComment);
+}
+
+function isAtRule(rule) {
+  return rule.parent && rule.parent.type === 'atrule';
+}
+
+function isInsideMediaQuery(rule) {
+  return isAtRule(rule) && rule.parent && rule.parent.name === 'media' ? true : false;
+}

package/lib/plugins/utils/fileHandling.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFileNameMatchingPattern = isFileNameMatchingPattern;
+exports.isFileNameMatchingPluginPattern = isFileNameMatchingPluginPattern;
+
+var _windowsModification = require("../../loaderUtils/windowsModification");
+
+var _ignore = _interopRequireDefault(require("ignore"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const path = require('path');
+
+let aliasNames = {
+  valueReplacer: 'postcss-value-replacer',
+  selectorReplace: 'postcss-selector-replace-new',
+  hasRTL: 'postcss-rtl',
+  combinerMediaQuery: 'postcss-combine-media-query',
+  hoverActive: 'postcss-mobile-hover',
+  cssVariableReplacement: 'postcss-variable-report',
+  composeMinification: 'postcss-compose-plugin'
+};
+/*
+
+unique scenario
+
+*/
+// export function filterFileCssUniqueness(filename, filterObj) {
+//   let rootDir = 'supportapp';
+//   let include = false;
+//   const regex = `^(.+?)${rootDir}?\\\\`;
+//   const newFilename = windowsModificationFile(filename).replace(
+//     new RegExp(regex, 'gi'),
+//     ''
+//   );
+//   Object.keys(filterObj).forEach(key => {
+//     const ig = ignore().add(filterObj[key]);
+//     if (ig.ignores(newFilename)) {
+//       include = true;
+//     }
+//   });
+//   return include;
+// }
+
+function isFileNameMatchingPattern({
+  filename,
+  filterObject,
+  plugins
+}) {
+  const finalPlugins = []; // console.log(rootDir);
+  // const regex = `^(.+?)${rootDir}?\\\\`;
+
+  const newFilename = path.relative(path.parse(process.cwd()).base, filename); //windowsModificationFile(filename).replace(
+  //   new RegExp(regex, 'gi'),
+  //   ''
+  // );
+  // path.relative('supportapp', 'd:\')
+
+  Object.keys(filterObject).forEach(key => {
+    plugins.forEach(x => {
+      // console.log(key, x.postcssPlugin);
+      if (aliasNames[key] === x.postcssPlugin) {
+        const ig = (0, _ignore.default)({
+          allowRelativePaths: true
+        }).add(filterObject[key]);
+
+        if (ig.ignores(newFilename)) {
+          // console.log(newFilename);
+          finalPlugins.push(x);
+        }
+      }
+    });
+  }); // console.log(filename);
+  // console.log(finalPlugins);
+  // console.log('----------------------------------------------------------------------')
+
+  return finalPlugins; // console.log(filename, filterObject);
+}
+
+function isFileNameMatchingPluginPattern({
+  filename,
+  filterArr // =process.cwd()
+
+}) {
+  // console.log(rootDir);
+  let include = true; // console.log(rootDir);
+  // const regex = `^(.+?)${rootDir}?\\\\`;
+  // console.log(plugin);
+
+  const newFilename = path.relative(path.parse(process.cwd()).base, filename); // const newFilename = windowsModificationFile(filename).replace(
+  //   new RegExp(regex, 'gi'),
+  //   ''
+  // );
+
+  const ig = (0, _ignore.default)({
+    allowRelativePaths: true
+  }).add(filterArr);
+
+  if (!ig.ignores(newFilename)) {
+    include = false;
+  }
+
+  return include;
+}

package/lib/plugins/utils/tests/fileHandling.test.js

@@ -0,0 +1,30 @@
+"use strict";
+
+const ignore = require('ignore');
+
+const ignoreArr1 = ['src', '!src\\components', 'src\\Accessibility'];
+const ignoreArr2 = ['src\\', '!node_modules\\'];
+const ignoreArr3 = ['*'];
+
+const {
+  windowsModificationFile
+} = require('../../../../lib/loaderUtils/windowsModification');
+
+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', ''];
+const ignore1 = ignore().add(ignoreArr1);
+const ignore2 = ignore().add(ignoreArr2);
+const ignore3 = ignore().add(ignoreArr3);
+files.forEach(file => {
+  // console.log(file);
+  const rootDir = 'supportapp';
+  const regex = `^(.+?)${rootDir}?\\\\`;
+  const newFilename = windowsModificationFile(file).replace(new RegExp(regex, 'gi'), '');
+  console.log(newFilename);
+
+  if (newFilename.trim() !== '') {
+    console.log(ignore1.ignores(newFilename));
+    console.log(ignore2.ignores(newFilename));
+    console.log(ignore3.ignores(newFilename));
+    console.log('--------------------------------------------------------------------');
+  }
+});

package/lib/plugins/variableConvertorUtils.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractVariableName = extractVariableName;
+exports.ignoreVals = void 0;
+exports.variableConverter = variableConverter;
+
+var _classHandling = require("./utils/classHandling");
+
+const ignoreVals = ['--zd_size', '--zd_font_size', '--size', '--size_']; // const avoidProps = [];
+// -- is issue IO --
+
+/*
+issues eg : 
+issues = ['--zd_size', '--zd_font_size', '--size', '--size_'];
+input : 
+--zd_size
+output : 
+true
+comment : 
+do not execute when --zd_size comes as prop 
+*/
+
+exports.ignoreVals = ignoreVals;
+
+function extractVariableName(val) {
+  return val.replace(/calc\((.+)\)/gi, '$1').replace(/var\((.+)\)/gi, '$1').replace('-1', '').replace('*', '').replace('\n', '').trim();
+}
+
+function isIgnoreValuePresent(ignoreVals, prop) {
+  return ignoreVals.some(ignoreVal => prop && prop.includes(ignoreVal)); // let present = false;
+  // return ignoreVals.forEach(issue => {
+  //   if (prop && prop.includes(issue)) {
+  //     present = true;
+  //   }
+  // });
+  // return present;
+}
+
+function parseCalcValue(calcValue) {
+  // Remove "calc(" and ")" from the string
+  const value = calcValue.replace(/calc\(/gi, '').replace(/\)/gi, '').trim(); // Split the string by "*" or "/"
+
+  const parts = value.split(/[\\/*]/); // Parse the first part as a number
+
+  const num1 = parts[0].trim(); // Parse the second part as a number
+
+  const num2 = parts[1].trim();
+  return {
+    valOne: num1,
+    valTwo: num2
+  };
+}
+
+function convertToCalc(pxReplacement, value) {
+  const parsedValue = parseFloat(value, 10);
+  const sign = parsedValue < 0 ? '-' : '';
+  const varName = `${parsedValue < 0 ? parsedValue * -1 : parsedValue}`;
+  return `calc( ${pxReplacement.replace('$$', varName)} * ${sign}1 )`;
+}
+
+function convertCalcValue(pxReplacement, parsedValue) {
+  Object.keys(parsedValue).forEach(key => {
+    if (parsedValue[key].includes('px')) {
+      parsedValue[key] = pxReplacement.replace('$$', parsedValue[key].replace('px', ''));
+    }
+  });
+  return parsedValue;
+}
+
+function variableConverter(rootOriginal, variables, settingsObject) {
+  rootOriginal.walkRules(rule => {
+    rule.nodes.forEach((decl, index) => {
+      const prevNode = rule.nodes[index - 1];
+      const currentNode = rule.nodes[index];
+
+      if (decl.prop && decl.prop.includes('--')) {
+        if ((0, _classHandling.isThisComment)(prevNode, 'variable:ignore') // prevNode &&
+        // prevNode.type === 'comment' &&
+        // prevNode.text.toLowerCase() === 'variable:ignore'
+        ) {
+          return;
+        }
+
+        if (isIgnoreValuePresent(ignoreVals, decl.prop)) {
+          return;
+        }
+
+        if (settingsObject[variables[decl.prop]]) {
+          /* if there is no value for property, set it to default so that undefined doesn't get called as key */
+          if (!variables[decl.prop]) {
+            variables[decl.prop] = 'default';
+          }
+
+          const pxReplacement = settingsObject[variables[decl.prop]].replacements.px;
+          const valArr = decl.value.split(' '); // single values are considered in the above array and converted below
+
+          valArr.forEach((value, index) => {
+            if (value.includes('px')) {
+              if (value.includes('calc')) {
+                const res = convertCalcValue(pxReplacement, parseCalcValue(value));
+                valArr[index] = `calc( ${res.valOne.trim()} * ${res.valTwo.trim()} )`;
+                return;
+              }
+
+              if (/-(\d+)/gi.test(value)) {
+                valArr[index] = convertToCalc(pxReplacement, value);
+                return;
+              }
+
+              const num = value.replace('px', '');
+
+              if (value) {
+                valArr[index] = pxReplacement.replace('$$', num);
+              }
+            }
+
+            if (value.includes('px')) {
+              const num = value.replace('px', '');
+              valArr[index] = pxReplacement.replace('$$', num);
+            }
+          });
+          currentNode.value = valArr.join(' ');
+        }
+      }
+    });
+  });
+  return rootOriginal;
+}

package/lib/postcss-plugins/EmptyPlugin.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = _postcss.default.plugin('postcss-empty', () => (root, result) => {// console.log(root.source.input.from, result);
+});

package/lib/postcss-plugins/ExcludePlugin.js

@@ -10,7 +10,7 @@ module.exports = _postcss.default.plugin('postcss-exclude-files', opts => {
   } = opts;
   return (root, result) => {
     const inputFile = root.source.input.file;
-    let isIgnoredFile = opts.ignore.some(file => inputFile.indexOf(file) !== -1);
+    const isIgnoredFile = opts.ignore.some(file => inputFile.indexOf(file) !== -1);
 
     if (!isIgnoredFile) {
       const handler = response => response.messages.forEach(msg => result.messages.push(msg));

package/lib/postcss-plugins/ValueReplacer.js

@@ -18,27 +18,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 //     }
 //   };
 // });
-// export default 
+// export default
 module.exports = _postcss.default.plugin('postcss-value-replacer', (valueReplacer = {}) => // Work with options here
 root => {
   root.walkDecls(decl => {
     valueReplacer.forEach(obj => {
       if (obj.props.indexOf(decl.prop) !== -1) {
-        const ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
+        let ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
         ks.forEach(k => {
           decl.value = decl.value.replace(k, obj.values[k]);
         }); //decl.value = obj.values[decl.value];
       }
-    }); // Transform CSS AST here
-  }); // root.walkDecls(decl => {
-  //   valueReplacer.forEach(obj => {
-  //     if (
-  //       obj.props.indexOf(decl.prop) !== -1 &&
-  //       obj.values[decl.value] !== undefined
-  //     ) {
-  //       decl.value = obj.values[decl.value];
-  //     }
-  //   });
-  //   // Transform CSS AST here
-  // });
+    }); //console.log({root, roots:root+""}, root+"")
+    // Transform CSS AST here
+  });
 });

package/lib/postcss-plugins/variableModificationPlugin/index.js

@@ -89,6 +89,7 @@ function pxToCalc(value) {
       }
     });
   });
+  console.log(arr.join(' '));
   return arr.join(' ');
 }
 
@@ -127,25 +128,7 @@ const singleConvertor = (value, changeVal, details, range) => {
     path: path
   };
   errHandler.errorTable.push(errObj);
-  errHandler.errorFunction(errObj); // errorFunction(
-  //   {
-  //     decl,
-  //     type: 'RANGE_ERROR',
-  //     filename,
-  //     message: `value (${value}) (${typeof value}) not within range (${
-  //       range.start
-  //     },${range.end})\r`,
-  //     path: path
-  //   },
-  //   'RANGE_ERROR'
-  // );
-  // }
-  // 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`)
-  //   return value;
-  // } else {
-  //   console.log('++++++++++++++++++++++rect val!', value);
-  // }
-
+  errHandler.errorFunction(errObj);
   return;
 };
 

package/lib/schemas/index.js

@@ -63,7 +63,46 @@ var _default = {
     // ],
     templateLabel: '{{--dir}}',
     disableMiniFiySelector: false,
-    dirVarName: 'document.dir'
+    dirVarName: 'document.dir',
+    selectorReplace: {
+      before: [],
+      after: []
+    },
+    plugins: {
+      valueReplacer: false,
+      selectorReplace: false,
+      hasRTL: false,
+      hoverActive: false,
+      combinerMediaQuery: false,
+      cssVariableReplacement: false,
+      selectorWeight: false,
+      minifier: false,
+      composeMinification: false
+    },
+    patterns: {
+      valueReplacer: [],
+      selectorReplace: [],
+      hoverActive: [],
+      combinerMediaQuery: [],
+      hasRTL: [],
+      cssVariableReplacement: [],
+      selectorWeight: [],
+      cssUniqueness: [],
+      composeMinification: []
+    },
+    exclude: {
+      rtl: [],
+      hoverActive: [],
+      combinerMediaQuery: [],
+      cssVariableReplacement: [],
+      selectorWeight: []
+    },
+    cssVariableReplacementConfig: '',
+    selectorWeightConfig: {
+      defaultSelector: '',
+      customFileDetails: '',
+      excludeStrings: []
+    }
   },
   efc: {
     hasEFC: {
@@ -229,11 +268,26 @@ var _default = {
       cli: 'enable_smaphook'
     },
     plugins: {
+      valueReplacer: false,
+      selectorReplace: false,
       hasRTL: false,
       hoverActive: false,
       combinerMediaQuery: false,
       cssVariableReplacement: false,
-      selectorWeight: false
+      selectorWeight: false,
+      minifier: false,
+      composeMinification: false
+    },
+    patterns: {
+      valueReplacer: [],
+      selectorReplace: [],
+      hoverActive: [],
+      combinerMediaQuery: [],
+      hasRTL: [],
+      cssVariableReplacement: [],
+      selectorWeight: [],
+      cssUniqueness: [],
+      composeMinification: []
     },
     exclude: {
       rtl: [],
@@ -324,13 +378,30 @@ var _default = {
     disableES5Transpile: false,
     // TODO: Deprecated
     hasRTL: false,
+    enableReactLive: {
+      value: true,
+      cli: 'react_live'
+    },
     rtlExclude: [],
+    selectorReplace: null,
     plugins: {
-      hasRTL: false,
+      rtl: false,
       hoverActive: false,
       combinerMediaQuery: false,
       cssVariableReplacement: false,
-      selectorWeight: false
+      selectorWeight: false,
+      minifier: false,
+      composeMinification: false,
+      selectorReplace: false
+    },
+    patterns: {
+      valueReplacer: [],
+      selectorReplace: [],
+      hoverActive: [],
+      combinerMediaQuery: [],
+      hasRTL: [],
+      cssVariableReplacement: [],
+      selectorWeight: []
     },
     exclude: {
       rtl: [],

package/lib/servers/server.js

@@ -202,8 +202,8 @@ if (httpsOptions) {
         port: http2Port
       }, 'htt' + 'ps')}${contextURL}/`, 'http2 server');
     });
-  } else {
-    (0, _utils.log)("Your node version didn't adopted http2 support. Kindly update that to 8 LTS or above you can engage the http2");
+  } else if (httpsOptions) {
+    (0, _utils.log)('Your node version didn\'t adopted http2 support. Kindly update that to 8 LTS or above you can engage the http2');
   }
 }
 

package/lib/utils/cssClassNameGenerate.js

@@ -9,6 +9,8 @@ var _os = _interopRequireDefault(require("os"));
 
 var _path = _interopRequireDefault(require("path"));
 
+var _fileHandling = require("../plugins/utils/fileHandling");
+
 var _getHash = _interopRequireDefault(require("./getHash"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -39,32 +41,55 @@ const isSelectorPackage = (resourcePath, packages) => {
 var _default = (unique = true, {
   filenames,
   packages
-}, classNamePrefix) => (context, localIdentName, localName) => {
+}, classNamePrefix, patterns) => (context, localIdentName, localName) => {
+  // console.log(patterns, context.resourcePath);
   // NOTE:  in build macine we use date as folder path.
   // So every time we create new build there is path will alway different
   // in order to minmaze that problem we try in relative path;
+  // console.log('context.resourcePath', context.resourcePath, context);
   // let contextResourcePath = context.resourcePath;
+  const filePaths = context.resourcePath.split(_path.default.sep);
+  const fileName = filePaths[filePaths.length - 1];
+  const [fileNameWithoutExt] = fileName.split('.');
+  const cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase();
+
   const relativePath = _path.default.relative(context.rootContext, context.resourcePath);
+  /*
+    input : 
+    context.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
+  
+     patterns.cssVariableReplacement: 
+    // include src folder, include deskapp folder, exclude node modules
+    "cssUniqueness": [
+      "src",
+      "deskapp",
+      "!node_modules"
+    ]
+     output : 
+    true or false
+  */
+
 
   if (context.resourcePath.endsWith('.plain.css')) {
     return localName;
   }
+
+  if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
+    filename: context.resourcePath,
+    filterArr: patterns.cssUniqueness
+  })) {
+    return `${classNamePrefix}-${cleanFileName}-${localName}`;
+  }
   /* old production mode start without breaking so added. may be removed in future*/
 
 
   if (unique) {
     const h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
     return `${classNamePrefix}${h}`;
-  }
-  /* old production mode end*/
-
-
-  const filePaths = context.resourcePath.split(_path.default.sep);
-  const fileName = filePaths[filePaths.length - 1];
-  const [fileNameWithoutExt] = fileName.split('.');
-  const cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase(); //css file has casesensitive selector issue so can't toLowerCase
+  } //css file has casesensitive selector issue so can't toLowerCase
   //let local = localName.toLowerCase()
 
+
   if (isSelectorPackage(context.resourcePath, packages) || filenames.indexOf(cleanFileName) !== -1) {
     const h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
     return `${classNamePrefix}${h}`;

package/lib/utils/getOptions.js

@@ -149,6 +149,51 @@ function deprecationSupport(options) {
   if (options.docs.rtlExclude.length > 0) {
     options.docs.exclude.rtl = options.docs.rtlExclude;
   }
+
+  if (options.app.selectorReplace !== null) {
+    options.app.plugins.selectorReplace = true;
+  }
+
+  if (options.docs.selectorReplace !== null) {
+    options.docs.plugins.selectorReplace = true;
+  }
+
+  if (options.css.valueReplacer !== null) {
+    options.app.plugins.valueReplacer = true;
+  }
+
+  options.app.exclude.hasRTL = options.app.exclude.rtl;
+
+  if (!options.app.patterns) {
+    options.app.patterns = {};
+  }
+
+  if (options.app.patterns.valueReplacer.length === 0) {
+    options.app.patterns.valueReplacer = ['*'];
+  }
+
+  if (options.app.patterns.selectorReplace.length === 0) {
+    options.app.patterns.selectorReplace = ['*'];
+  }
+
+  if (options.docs.patterns.selectorReplace.length === 0) {
+    options.docs.patterns.selectorReplace = ['*'];
+  }
+
+  Object.keys(options.app.patterns).forEach(key => {
+    if (options.app.exclude[key] && options.app.patterns[key].length === 0) {
+      let tempArr = options.app.exclude[key];
+      tempArr = tempArr.map(x => `!${x}`);
+      options.app.patterns[key] = tempArr;
+    }
+  });
+  Object.keys(options.docs.patterns).forEach(key => {
+    if (options.docs.exclude[key] && options.docs.patterns[key].length === 0) {
+      let tempArr = options.docs.exclude[key];
+      tempArr = tempArr.map(x => `!${x}`);
+      options.docs.patterns[key] = tempArr;
+    }
+  });
 }
 
 const getOptions = () => {

package/lib/utils/selectorReplacer.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _getOptions = _interopRequireDefault(require("./getOptions"));
+
+var _folderIterator = _interopRequireDefault(require("./folderIterator"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const postcss = require('postcss');
+
+const path = require('path');
+
+const fs = require('fs');
+
+const SelectorReplacePlugin = require('../postcss-plugins/SelectorReplace');
+
+const cwd = process.cwd();
+const src = path.join(cwd, process.argv[2]);
+const dist = path.join(cwd, process.argv[3]);
+const options = (0, _getOptions.default)();
+
+function watchHandler(fromPath, toPath) {
+  const css = fs.readFileSync(fromPath, 'utf-8'); // console.log(css);
+
+  const {
+    css: cssOptions
+  } = options; // console.log(cssOptions, appOptions);
+
+  const {
+    selectorReplace
+  } = cssOptions;
+  postcss([SelectorReplacePlugin(selectorReplace)]).process(css, {
+    from: fromPath,
+    to: toPath
+  }).then(result => {
+    fs.writeFileSync(toPath, result.css);
+  }); // console.log(variableOptions);
+}
+
+(0, _folderIterator.default)(src, dist, ['.css'], false, (fromPath, toPath) => {
+  // console.log(fromPath, toPath);
+  watchHandler(fromPath, toPath);
+}); // if (canWacth) {
+//   useExitCleanup(() => {
+//     fs.unwatchFile(src, watchHandler);
+//   });
+// }