@zohodesk/react-cli 1.1.14-kubernetes → 1.1.15-exp.1

package/lib/plugins/StatsPlugin.js

@@ -0,0 +1,82 @@
+"use strict";
+
+const fs = require('fs');
+
+const path = require('path');
+
+const {
+  Readable
+} = require('stream');
+
+const {
+  removeKeysFromObject,
+  convertObjectToStringGen
+} = require('../utils/object-manipulation');
+
+const pluginName = 'stats-plugin';
+const statsSchema = {
+  all: true
+};
+
+class StatsPlugin {
+  constructor({
+    statsOptions,
+    statsOutputExcludeKeys,
+    statsFileName
+  }) {
+    this.excludeKeysInStat = statsOutputExcludeKeys || [];
+    this.statsFileName = statsFileName || 'bundle-report-integrity.json';
+    this.statsOptions = Object.assign({}, statsSchema, statsOptions || {});
+  }
+
+  apply(compiler) {
+    compiler.hooks.done.tapAsync(pluginName, (stats, callback) => {
+      const statsJson = removeKeysFromObject(stats.toJson(this.statsOptions), this.excludeKeysInStat);
+      this.emitStats(statsJson).on('end', () => {
+        callback();
+      }).on('error', e => {
+        callback(e);
+      });
+    });
+  }
+
+  writeStatsFileInAStream(statsObj) {
+    const {
+      outputPath
+    } = statsObj;
+    const ouputFileName = path.join(outputPath, this.statsFileName);
+    return this.createReadStream(statsObj).pipe(fs.createWriteStream(ouputFileName));
+  }
+
+  createReadStream(statsObj) {
+    const excludeKeys = this.excludeKeysInStat;
+    return new Readable({
+      read() {
+        let isDone = false;
+        const objToStringGen = convertObjectToStringGen(statsObj, excludeKeys);
+
+        while (!isDone) {
+          const {
+            done,
+            value
+          } = objToStringGen.next();
+
+          if (done) {
+            isDone = true;
+            this.push(null);
+          } else {
+            this.push(value);
+          }
+        }
+      }
+
+    });
+  }
+
+  emitStats(statsJson) {
+    return this.writeStatsFileInAStream(statsJson);
+  }
+
+}
+
+module.exports = StatsPlugin;

package/lib/plugins/TPHashMappingPlugin.js

@@ -15,10 +15,10 @@ var _crypto = _interopRequireDefault(require("crypto"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * Plugin that generates hash for the provided list of third party files
- * Map the provided key with the file hash and add it to the list of exisiting global constants.
- * Plugin in turn uses the defineplugin to generate global constants. 
+/**
+ * Plugin that generates hash for the provided list of third party files
+ * Map the provided key with the file hash and add it to the list of exisiting global constants.
+ * Plugin in turn uses the defineplugin to generate global constants. 
  */
 class TPHashMappingPlugin {
   constructor(options) {

package/lib/plugins/UnusedFilesFindPlugin.js

@@ -11,6 +11,8 @@ var _fs = _interopRequireDefault(require("fs"));
 
 var _utils = require("../utils");
 
+var _log = require("../utils/log");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 let excludeDocsJSON = '{}';
@@ -97,10 +99,10 @@ class UnusedFilesFindPlugin {
       Object.keys(unDocsCompObj).forEach(key => {
         if (unDocsCompObj[key].length > 0) {
           if (key === 'withoutDocs') {
-            (0, _utils.log)('\x1b[36m%s\x1b[0m', '\nPlease write docs file for below componenst :- \n');
+            (0, _log.log)('\x1b[36m%s\x1b[0m', '\nPlease write docs file for below componenst :- \n');
             unDocsCompObj[key].forEach(value => {
               if (!excludeDocsArray.docs.exclude.includes(value)) {
-                (0, _utils.log)('\x1b[33m%s\x1b[0m', `${value}`);
+                (0, _log.log)('\x1b[33m%s\x1b[0m', `${value}`);
               }
             });
           }
@@ -162,10 +164,10 @@ class UnusedFilesFindPlugin {
       });
 
       if (!unusedFiles.length) {
-        (0, _utils.log)('There is no unused files');
+        (0, _log.log)('There is no unused files');
       } else {
         if (this.outputFileName) {
-          (0, _utils.log)(`You can see unused files info from ${_path.default.join(outputPath, this.outputFileName)} path`);
+          (0, _log.log)(`You can see unused files info from ${_path.default.join(outputPath, this.outputFileName)} path`);
           (0, _utils.makeDir)(outputPath);
           (0, _utils.writeFile)(_path.default.join(outputPath, this.outputFileName), JSON.stringify(unusedFiles)).then(() => {
             if (this.sstest) {
@@ -179,7 +181,7 @@ class UnusedFilesFindPlugin {
         unusedFiles.forEach(file => {
           _fs.default.unlinkSync(file);
 
-          (0, _utils.log)(`Deleted - ${file}`);
+          (0, _log.log)(`Deleted - ${file}`);
         });
       }
     });

package/lib/plugins/VariableConversionCollector.js

@@ -9,12 +9,15 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _ErrorHandler = require("../postcss-plugins/variableModificationPlugin/ErrorHandler");
 
+var _fileHandling = require("./utils/fileHandling");
+
+var _variableConvertorUtils = require("./variableConvertorUtils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { RawSource } from 'webpack-sources';
 const fs = require('fs');
 
-const ignoreVals = ['--zd_size', '--zd_font_size', '--size', '--size_'];
 let variablesRead = {};
 
 const {
@@ -23,83 +26,18 @@ const {
   errHandler
 } = require('../postcss-plugins/variableModificationPlugin/index');
 
-const supportedProps = ['font-size', 'margin', 'margin-top', 'margin-bottom', 'margin-left', 'margin-right', 'padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', '^top', '^right', '^bottom', '^left', '^width', 'min-width', 'max-width', '^height', 'min-height', 'max-height', 'text-indent', 'clip', 'flex-basis', 'row-gap', 'gap', 'column-gap', 'flex']; // 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 
-*/
+const supportedProps = ['font-size', 'margin', 'margin-top', 'margin-bottom', 'margin-left', 'margin-right', 'padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', '^top', '^right', '^bottom', '^left', '^width', 'min-width', 'max-width', '^height', 'min-height', 'max-height', 'text-indent', 'clip', 'flex-basis', 'row-gap', 'gap', 'column-gap', 'flex']; // -- to convert the hyphen values to values --
 
-function isIgnoreValuePresent(ignoreVals, prop) {
-  let present = false;
-  ignoreVals.forEach(issue => {
-    if (prop && prop.includes(issue)) {
-      present = true;
-    }
-  });
-  return present;
-} // -- to convert the hyphen values to values --
-
-/*
-input : 
-var(--zdt_uploadlist_default_width)
-output : 
---zdt_uploadlist_default_width
-
-comment : 
-to make the variable object using the output as key and decl.prop such as font-size as value 
+/*
+input : 
+var(--zdt_uploadlist_default_width)
+output : 
+--zdt_uploadlist_default_width
+
+comment : 
+to make the variable object using the output as key and decl.prop such as font-size as value 
 */
 
-
-function extractVariableName(val) {
-  return val.replace(/calc\((.+)\)/gi, '$1').replace(/var\((.+)\)/gi, '$1').replace('-1', '').replace('*', '').replace('\n', '').trim();
-}
-
-function rootConvertor(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 (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')) {
-              const num = value.replace('px', '');
-              valArr[index] = pxReplacement.replace('$$', num);
-            }
-          });
-          currentNode.value = valArr.join(' ');
-        }
-      }
-    });
-  });
-  return rootOriginal;
-}
-
 function createFolderIfNonExistant(path) {
   if (!fs.existsSync(path)) {
     fs.mkdirSync(path, {
@@ -118,10 +56,12 @@ class VariableConversionCollector {
   constructor(options = {}) {
     this.optimize = options.optimize;
     this.filename = options.cssVariableReplacementConfig;
-    this.fileHandler();
+    this.patterns = options.patterns; // console.log(options.patterns, this.patterns);
+
+    this.initializeFiles();
   }
 
-  fileHandler() {
+  initializeFiles() {
     createFolderIfNonExistant('./.cli/logs/');
     createFolderIfNonExistant('./.cli/config/variables/');
     createFolderIfNonExistant('./.cli/config/selectorWeight/');
@@ -131,7 +71,8 @@ class VariableConversionCollector {
 
   apply(compiler) {
     const variables = {};
-    const unassigned = {};
+    const unassigned = {}; // console.log(windowsModification([this.filename])[0]);
+
     const rawdata = fs.readFileSync(this.filename);
     const data = JSON.parse(rawdata);
     const {
@@ -154,13 +95,13 @@ class VariableConversionCollector {
         }
       };
     }
-    /* 
-    purpose of tap : to create a variable object such as:
-    {
-      --zdt_uploadlist_default_width : width,
-      --zdt_uploadlist_default_height : height,
-    }
-    which will help in the conversion further
+    /* 
+    purpose of tap : to create a variable object such as:
+    {
+      --zdt_uploadlist_default_width : width,
+      --zdt_uploadlist_default_height : height,
+    }
+    which will help in the conversion further
     */
 
 
@@ -183,16 +124,13 @@ class VariableConversionCollector {
             rootOriginal.walkRules(rule => {
               rule.walkDecls(decl => {
                 decl.value.split(' ').forEach(val => {
-                  if (val && val.includes('--') && !new RegExp(ignoreVals.join('|'), 'gi').test(val) && decl.prop) {
-                    const extractedValue = extractVariableName(val);
+                  if (val && val.includes('--') && !new RegExp(_variableConvertorUtils.ignoreVals.join('|'), 'gi').test(val) && decl.prop) {
+                    const extractedValue = (0, _variableConvertorUtils.extractVariableName)(val);
 
                     if (!variables[extractedValue]) {
                       variables[extractedValue] = decl.prop;
                     } else {
                       if (new RegExp(supportedProps.join('|'), 'gi').test(decl.prop)) {
-                        // console.log(
-                        //   `${extractedValue} : ${variables[extractedValue]} already exists please check!`
-                        // );
                         if (errorsAllowed.MULTIPLE_OCCURANCES) {
                           const errObj = {
                             decl,
@@ -206,7 +144,6 @@ class VariableConversionCollector {
                       }
                     }
                   } else {
-                    // console.log(decl.prop);
                     if (/^--/gi.test(decl.prop) && val.trim() !== '' && !variables[decl.prop]) {
                       if (!Object.keys(variablesRead.ignore).includes(decl.prop)) {
                         unassigned[decl.prop] = variables[decl.prop];
@@ -216,19 +153,19 @@ class VariableConversionCollector {
                 });
               });
             });
-            /*
-             current value example: 
-             {
-                --zdt_uploadlist_default_width : --zd_upload_width,
-                --zd_upload_width : width
-             }
-             expected value : 
-             {
-               --zdt_uploadlist_default_width : width,
-               --zd_upload_width : width
-             }
-            
-             conversion is done in the while loop below
+            /*
+             current value example: 
+             {
+                --zdt_uploadlist_default_width : --zd_upload_width,
+                --zd_upload_width : width
+             }
+             expected value : 
+             {
+               --zdt_uploadlist_default_width : width,
+               --zd_upload_width : width
+             }
+            
+             conversion is done in the while loop below
             */
 
             Object.keys(variables).forEach(key => {
@@ -238,36 +175,60 @@ class VariableConversionCollector {
             });
           }
         });
-      }); // -- conversion for the root using rootConvertor --
-
-      /* 
-      input : 
-      .a{
-        padding : 20px 
-      }
-      output :
-      // on settingObject file : 
-      { padding : { replacements : { px : 'zd_size$$' }}} 
-      .a{
-        padding : zd_size20;
-      }
+      }); // -- conversion for the root using variableConvertor --
+
+      /* 
+      input : 
+      .a{
+        padding : 20px 
+      }
+      output :
+      // on settingObject file : 
+      { padding : { replacements : { px : 'zd_size$$' }}} 
+      .a{
+        padding : zd_size20;
+      }
       */
 
       compilation.hooks.optimizeModules.tap('VariableConversionCollector', modules => {
         const mods = modules.filter(x => x.type.includes('css'));
         mods.forEach(module => {
+          const filename = module.issuer.resource;
+          /*
+            input : 
+            filename : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
+          
+              patterns.cssVariableReplacement: 
+            // include src folder, include deskapp folder, exclude node modules
+            "cssVariableReplacement": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ]
+              
+            output : 
+            true or false
+          */
+
+          if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
+            filename,
+            filterArr: this.patterns.cssVariableReplacement
+          })) {
+            return;
+          }
+
           const rootOriginal = _postcss.default.parse(module.content);
 
-          module.content = rootConvertor(rootOriginal, variables, settingsObject).toString();
+          module.content = (0, _variableConvertorUtils.variableConverter)(rootOriginal, variables, settingsObject).toString();
         });
       });
     });
-    /*
-      purpose of tap : to display the errors encountered so far 
-      input : 
-      all css files 
-      output : 
-      all errors that are present in the errTable arr
+    /*
+      purpose of tap : to display the errors encountered so far 
+      input : 
+      all css files 
+      output : 
+      all errors that are present in the errTable arr
     */
 
     compiler.hooks.afterEmit.tap('error-display', () => {
@@ -292,29 +253,7 @@ class VariableConversionCollector {
         if (a.type < b.type) {
           return -1;
         }
-      }); // variable constructed now to be written in a json file
-      // const newVars = Object.keys(variables)
-      //   //Filter Object with key contanis "NAME"
-      //   .filter(key => variables[key].includes('--'))
-      //   .reduce(
-      //     (obj, key) =>
-      //       Object.assign(obj, {
-      //         [key]: variables[key]
-      //       }),
-      //     {}
-      //   );
-      // console.log('new variables: ', newVars);
-      // try {
-      //   fs.writeFileSync('./variableMapping.json', JSON.stringify(variables));
-      // } catch (err) {
-      //   console.log(err);
-      // }
-      // fs.writeFile('./variableMapping.json', JSON.stringify(variables), err => {
-      //   if (err) {
-      //     throw err;
-      //   }
-      //   console.log('variable mapping file generated.');
-      // });
+      });
 
       if (errorConsoleStatus) {
         const errorHandler = new _ErrorHandler.ErrorHandler();

package/lib/plugins/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "ManifestPlugin", {
     return _ManifestPlugin.default;
   }
 });
+Object.defineProperty(exports, "MinifyPlugin", {
+  enumerable: true,
+  get: function () {
+    return _MinifyPlugin.default;
+  }
+});
 Object.defineProperty(exports, "ModuleStatsPlugin", {
   enumerable: true,
   get: function () {
@@ -99,12 +105,6 @@ Object.defineProperty(exports, "TPHashMappingPlugin", {
     return _TPHashMappingPlugin.default;
   }
 });
-Object.defineProperty(exports, "UglifyCSSPlugin", {
-  enumerable: true,
-  get: function () {
-    return _UglifyCSSPlugin.default;
-  }
-});
 Object.defineProperty(exports, "UnusedFilesFindPlugin", {
   enumerable: true,
   get: function () {
@@ -126,7 +126,7 @@ var _OptimizeJSPlugin = _interopRequireDefault(require("./OptimizeJSPlugin"));
 
 var _ResourceHintsPlugin = _interopRequireDefault(require("./ResourceHintsPlugin"));
 
-var _UglifyCSSPlugin = _interopRequireDefault(require("./UglifyCSSPlugin"));
+var _MinifyPlugin = _interopRequireDefault(require("./MinifyPlugin"));
 
 var _ManifestPlugin = _interopRequireDefault(require("./ManifestPlugin"));
 

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,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFileNameMatchingPattern = isFileNameMatchingPattern;
+exports.isFileNameMatchingPluginPattern = isFileNameMatchingPluginPattern;
+
+var _ignore = _interopRequireDefault(require("ignore"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const path = require('path');
+
+const 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',
+  autoPrefixer: 'autoprefixer'
+};
+/*
+
+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,
+  order
+}) {
+  const pluginObj = {};
+  plugins.forEach(p => {
+    pluginObj[p.postcssPlugin] = p;
+  });
+  const finalPlugins = order.filter(key => {
+    const pluginSpecificFilter = filterObject[key];
+
+    if (!pluginSpecificFilter || pluginSpecificFilter.length === 0) {
+      return true;
+    } // eslint-disable-next-line no-use-before-define
+
+
+    const isMatching = isFilePathMatchingPattern(filename, pluginSpecificFilter);
+    return isMatching;
+  }).map(key => {
+    const p = pluginObj[aliasNames[key]];
+    return p;
+  }); // if unknown key given in plugins and pattern loop will run but post-css plugin won't be available and will be undefined in array
+  // So we do filter as safety measure.
+
+  return finalPlugins.filter(Boolean);
+}
+
+function isFilePathMatchingPattern(filePath, patterns) {
+  if (patterns.length === 0) {
+    return true;
+  }
+
+  const ig = (0, _ignore.default)({
+    allowRelativePaths: true
+  }).add(patterns);
+  return ig.ignores(filePath);
+}
+
+function isFileNameMatchingPluginPattern({
+  filename,
+  filterArr
+}) {
+  const newFilename = path.relative(path.parse(process.cwd()).base, filename);
+  return isFilePathMatchingPattern(newFilename, filterArr);
+}

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('--------------------------------------------------------------------');
+  }
+});