@zohodesk/react-cli 0.0.1-exp.175.0 → 0.0.1-exp.176.1

package/lib/plugins/SelectorPlugin.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _webpackSources = require("webpack-sources");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const path = require('path');
+
+const isCss = filename => path.extname(filename) === '.css';
+
+function rootConvertor(rootOriginal, defaultSelector, data, chunkFilename, excludeStrings) {
+  rootOriginal.walkRules((rule, index) => {
+    const prevNode = rootOriginal.nodes[index - 1];
+
+    if (index !== 0 && prevNode.type && prevNode.type === 'comment' && prevNode.text.toLowerCase() === 'updateselector:ignore') {
+      return;
+    }
+
+    if (rule.parent && rule.parent.type === 'atrule') {
+      if (rule.parent.name !== 'media') {
+        return;
+      }
+    }
+
+    if (excludeStrings.includes(rule.selector)) {
+      return;
+    }
+
+    let ruleArr = rule.selector.split(',');
+    ruleArr.forEach((rule, index) => {
+      if (rule.includes(']')) {
+        if (rule.slice(rule.lastIndexOf(']') + 2).trim() === '') {
+          return;
+        } // console.log(
+        //   rule.slice(rule.lastIndexOf(']') + 2).trim(),
+        //   rule.slice(rule.lastIndexOf(']') + 2).trim() !== ''
+        // );
+
+
+        ruleArr[index] = `${rule.slice(0, rule.lastIndexOf(']') + 1).trim()} ${defaultSelector}${rule.slice(rule.lastIndexOf(']') + 2).trim()}`; // console.log(ruleArr[index]);
+
+        return;
+      }
+
+      ruleArr[index] = data[chunkFilename] ? `${data[chunkFilename].defaultSelector}${rule}` : `${defaultSelector}${rule}`;
+    });
+    rule.selector = ruleArr.join(',\n'); // console.log(`${rule.selector} converted`);
+  });
+  return rootOriginal;
+}
+
+class SelectorPlugin {
+  constructor(options = {}) {
+    this.optimize = options.optimize;
+    this.selectorWeightConfig = options.selectorWeightConfig;
+  }
+
+  apply(compiler) {
+    const {
+      defaultSelector,
+      customFileDetails,
+      excludeStrings
+    } = this.selectorWeightConfig;
+
+    const rawdata = _fs.default.readFileSync(customFileDetails);
+
+    const data = JSON.parse(rawdata);
+    compiler.hooks.compilation.tap('selector-weight-rewrite', compilation => {
+      compilation.hooks.optimizeChunkAssets.tapAsync('selector-weight-rewrite', (chunks, callback) => {
+        chunks.forEach(chunk => {
+          chunk.files.filter(isCss).forEach(chunkFilename => {
+            const asset = compilation.assets[chunkFilename];
+            const sourceStr = asset.source();
+
+            const rootOriginal = _postcss.default.parse(sourceStr);
+
+            compilation.assets[chunkFilename] = new _webpackSources.RawSource(rootConvertor(rootOriginal, defaultSelector, data, chunkFilename, excludeStrings).toString());
+          });
+        });
+        callback();
+      });
+    });
+  }
+
+}
+
+var _default = SelectorPlugin;
+exports.default = _default;

package/lib/plugins/ServiceWorkerPlugin.js

@@ -51,11 +51,11 @@ class ServiceWorkerPlugin {
         if (err) {
           throw new Error(err);
         } else {
-          /* const extractedChunks = compilation.chunks.filter(chunk => {
-            if ('canBeInitial' in chunk) {
-              return chunk.canBeInitial();
-            }
-            return chunk.isInitial();
+          /* const extractedChunks = compilation.chunks.filter(chunk => {
+            if ('canBeInitial' in chunk) {
+              return chunk.canBeInitial();
+            }
+            return chunk.isInitial();
           }); */
           // let [js, css, , , i18nPublicPath] = this.publicPaths;
           // let initialChunkUrls = [];
@@ -64,10 +64,10 @@ class ServiceWorkerPlugin {
           let entrypoint = compilation.entrypoints.get('main');
           let initialChunkUrls = entrypoint.getFiles();
           const cssDirTemplate = '@dir@';
-          /**
-           * NOTE:
-           *  if chunkSplitEnable is false means,
-           *    serviceWorker will get i18n files path for html
+          /**
+           * NOTE:
+           *  if chunkSplitEnable is false means,
+           *    serviceWorker will get i18n files path for html
            */
 
           let initalI18nAssets = chunkSplitEnable ? entrypoint.chunks.filter(chunk => _I18nKeysIdentifer.default.isChunkHasI18n(chunk)).map(chunk => (0, _getI18nFileUrlPathTemplate.getI18nFileUrlPathTemplate)(compilation, chunk, this.i18nFileNameTemplate, '@locale@')) : [];

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/VariableConversionCollector.js

@@ -0,0 +1,322 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _ErrorHandler = require("../postcss-plugins/variableModificationPlugin/ErrorHandler");
+
+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_'];
+
+const {
+  errors,
+  errTable,
+  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 
+*/
+
+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 
+*/
+
+
+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) => {
+      let prevNode = rule.nodes[index - 1];
+      let 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;
+          let valArr = decl.value.split(' '); // single values are considered in the above array and converted below
+
+          valArr.forEach((value, index) => {
+            if (value.includes('px')) {
+              let num = value.replace('px', '');
+              valArr[index] = pxReplacement.replace('$$', num);
+            }
+          });
+          currentNode.value = valArr.join(' ');
+        }
+      }
+    });
+  });
+  return rootOriginal;
+}
+
+class VariableConversionCollector {
+  constructor(options = {}) {
+    this.optimize = options.optimize;
+    this.filename = options.cssVariableReplacementConfig;
+  }
+
+  apply(compiler) {
+    const variables = {};
+    const unassigned = {};
+    const rawdata = fs.readFileSync(this.filename);
+    const data = JSON.parse(rawdata);
+    const {
+      settings: settingsObject,
+      errorLog: errorLogStatus,
+      errorInConsole: errorConsoleStatus,
+      errorsAllowed
+    } = data; // If theres is no setting for default prop in settingsObject, set one.
+
+    if (!settingsObject.default) {
+      settingsObject.default = {
+        allowed: ['px', 'em', 'fit-content', 'auto', '%', 'inherit', '-moz-fit-content', 'vh', '0', 'initial', 'vw'],
+        replacements: {
+          px: 'var(--zd_size$$)'
+        },
+        range: {
+          start: -99999,
+          end: 99999
+        }
+      };
+    }
+    /* 
+    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
+    */
+
+
+    if (fs.existsSync('./variableMapping.json')) {
+      const data = JSON.parse(fs.readFileSync('./variableMapping.json', 'utf-8'));
+      Object.keys(data).forEach(key => {
+        variables[key] = data[key];
+      });
+    }
+
+    compiler.hooks.compilation.tap('VariableConversionCollector', compilation => {
+      compilation.hooks.optimizeModules.tap('VariableConversionCollector', modules => {
+        const mods = modules.filter(x => x.type.includes('css'));
+        mods.forEach(module => {
+          const rootOriginal = _postcss.default.parse(module.content);
+
+          const filename = module.issuer.resource;
+
+          if (!filename.includes('node_modules')) {
+            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 (!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) {
+                          let errObj = {
+                            decl,
+                            type: 'MULTIPLE_OCCURANCES',
+                            filename,
+                            message: `${extractedValue} : ${variables[extractedValue]} already exists please check!`
+                          };
+                          errHandler.errorTable.push(errObj);
+                          errHandler.errorFunction(errObj);
+                        }
+                      }
+                    }
+                  } else {
+                    // console.log(decl.prop);
+                    if (/^--/gi.test(decl.prop) && new RegExp(supportedProps.join('|'), 'gi').test(decl.prop) && val.trim() !== '' && !variables[decl.prop]) {
+                      // console.log(
+                      //   `${decl.prop} : ${variables[decl.prop]},`
+                      // );
+                      unassigned[decl.prop] = variables[decl.prop];
+                    }
+                  }
+                });
+              });
+            });
+            /*
+             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 => {
+              while (variables[variables[key]]) {
+                variables[key] = variables[variables[key]];
+              }
+            });
+          }
+        });
+      }); // -- conversion for the root using rootConvertor --
+
+      /* 
+      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 rootOriginal = _postcss.default.parse(module.content);
+
+          module.content = rootConvertor(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
+    */
+
+    compiler.hooks.afterEmit.tap('error-display', () => {
+      if (Object.keys(unassigned).length > 0) {
+        console.log();
+        console.log(unassigned);
+        console.log();
+        throw new Error('^^^ Variables above have not been assigned! ^^^');
+      }
+
+      let avlTypes = new Set([]);
+      let srtArr = errTable.sort((a, b) => {
+        avlTypes.add(a.type);
+        avlTypes.add(b.type);
+
+        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();
+        avlTypes.forEach(type => {
+          console.log('---------------------------------------------------------------------------------------------------------------------------');
+          console.log(`Error Type : ${type}`);
+          console.log('---------------------------------------------------------------------------------------------------------------------------');
+          srtArr.forEach(err => {
+            if (err.decl.prop && err.decl.value && err.type === type) {
+              errorHandler.printError(err);
+            }
+          });
+          console.log('---------------------------------------------------------------------------------------------------------------------------');
+        });
+      }
+
+      if (errorLogStatus) {
+        fs.writeFileSync('./css_error.log', '');
+        console.log('writing to logFile...');
+
+        if (errors.length > 0) {
+          errors.forEach((err, index) => {
+            if (errTable[index].decl.prop && errTable[index].decl.value) {
+              fs.appendFileSync('./css_error.log', err);
+            }
+          });
+        }
+      }
+    });
+  }
+
+}
+
+var _default = VariableConversionCollector;
+exports.default = _default;

package/lib/plugins/composeCommonPlugin.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class ComposeCommonPlugin {
+  constructor(options = {}) {
+    this.optimize = options.optimize;
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap('OptimizeJSPlugin', compilation => {
+      compilation.hooks.optimizeModules.tap('OptimizeMods', modules => {
+        modules.forEach(module => {
+          console.log(module);
+        });
+      });
+    });
+  }
+
+}
+
+var _default = ComposeCommonPlugin;
+exports.default = _default;

package/lib/postcss-plugins/RTLSplitPlugin.js

@@ -38,11 +38,11 @@ function selectorMinifySameDir(selector, direction) {
   const regex = getRegex(direction);
   return selector.replace(regex, '').trim();
 }
-/**
- * this funtion will remove given rule,
- *  if given selector and it's previous sibiling rule selector  are same
- * current rule properties will move to previous sibiling rule.
- * @param {Rule} rule current rule
+/**
+ * this funtion will remove given rule,
+ *  if given selector and it's previous sibiling rule selector  are same
+ * current rule properties will move to previous sibiling rule.
+ * @param {Rule} rule current rule
  */
 
 
@@ -57,11 +57,11 @@ function mergeIfSameSelector(rule) {
     rule.remove();
   }
 }
-/**
- * this funtion will remove given rule,
- *  if given selector and it's previous sibiling rule selector  are same
- * current rule properties will move to previous sibiling rule.
- * @param {Rule} rule current rule
+/**
+ * this funtion will remove given rule,
+ *  if given selector and it's previous sibiling rule selector  are same
+ * current rule properties will move to previous sibiling rule.
+ * @param {Rule} rule current rule
  */
 
 

package/lib/postcss-plugins/__test__/test1Input.css

@@ -1,39 +1,39 @@
-/*Hover_active:ignore*/
-g,a:hover{
-	color : red
-}
-/*Hover:ignore*/
-h:hover{
-background : yellow
-}
-
-/* Hover_active:ignore */
-g,d+e:hover{
-	color : black
-}
-
-g,d e:hover{
-	color : black
-}
-
-@media screen and (max-width:61.25em){
-  /* Hover_active:ignore */
-  a,b,a:hover, b:hover{
-  background-color : blue
-  }
-  a + b,a:hover + b:hover{
-  background-color : blue
-  }
-  a b:hover{
-  background-color : blue
-  }
-  
-  .cc:hover {
-    color: red;
-  }
-
-  c:hover{
-  color : red
-  }
-  
+/*Hover_active:ignore*/
+g,a:hover{
+	color : red
+}
+/*Hover:ignore*/
+h:hover{
+background : yellow
+}
+
+/* Hover_active:ignore */
+g,d+e:hover{
+	color : black
+}
+
+g,d e:hover{
+	color : black
+}
+
+@media screen and (max-width:61.25em){
+  /* Hover_active:ignore */
+  a,b,a:hover, b:hover{
+  background-color : blue
+  }
+  a + b,a:hover + b:hover{
+  background-color : blue
+  }
+  a b:hover{
+  background-color : blue
+  }
+  
+  .cc:hover {
+    color: red;
+  }
+
+  c:hover{
+  color : red
+  }
+  
 }

package/lib/postcss-plugins/__test__/test1Output.css

@@ -1,39 +1,39 @@
-/*Hover_active:ignore*/
-g,a:hover{
-	color : red
-}
-/*Hover:ignore*/
-h:hover{
-background : yellow
-}
-
-/* Hover_active:ignore */
-g,d+e:hover{
-	color : black
-}
-
-g,d e:hover{
-	color : black
-}
-
-@media screen and (max-width:61.25em){
-  /* Hover_active:ignore */
-  a,b,a:hover, b:hover{
-  background-color : blue
-  }
-  a + b,a:hover + b:hover{
-  background-color : blue
-  }
-  a b:hover{
-  background-color : blue
-  }
-  
-  .cc:hover {
-    color: red;
-  }
-
-  c:hover{
-  color : red
-  }
-  
+/*Hover_active:ignore*/
+g,a:hover{
+	color : red
+}
+/*Hover:ignore*/
+h:hover{
+background : yellow
+}
+
+/* Hover_active:ignore */
+g,d+e:hover{
+	color : black
+}
+
+g,d e:hover{
+	color : black
+}
+
+@media screen and (max-width:61.25em){
+  /* Hover_active:ignore */
+  a,b,a:hover, b:hover{
+  background-color : blue
+  }
+  a + b,a:hover + b:hover{
+  background-color : blue
+  }
+  a b:hover{
+  background-color : blue
+  }
+  
+  .cc:hover {
+    color: red;
+  }
+
+  c:hover{
+  color : red
+  }
+  
 }