@zohodesk/react-cli 0.0.1-exp.176.3 → 0.0.1-exp.178.1

package/lib/plugins/RtlSplitPlugin/RtlCssPlugin.js

@@ -24,12 +24,12 @@ const isCss = filename => _path.default.extname(filename) === '.css'; // this  p
 
 class RtlCssPlugin {
   constructor(options = {}) {
-    /**
-     * @typedef {Object} Options
-     * @property  {String} filename [not used]
-     * @property  {String} dirVarName
-     * @property  {Boolean} sourcemap
-     * @property  {Object} config
+    /**
+     * @typedef {Object} Options
+     * @property  {String} filename [not used]
+     * @property  {String} dirVarName
+     * @property  {Boolean} sourcemap
+     * @property  {Object} config
      */
     this.options = {
       filename: options.filename || '[name].rtl.css',

package/lib/plugins/RtlSplitPlugin/RtrSplit.md

@@ -1,30 +1,30 @@
-# RTL Split 
-
-we are doing in build time generating  rtl related css code  by using @zohodesk/postcss-rt npm.
-It was automated, That postcss plugin create rtl reacted css and put them into same file, with css selector [dir=rtl] and ltr realted css with [dir=ltr].
-Here is problem mostly no one need rtl and ltr related css at the same time in browser, 
-we are try to split them  by [dir] and load which type of css is needed.
-For this purpose  we created RTL Split Plugin 
-
-
-# To Try it  out  rtl-ltr split
-### how to use this feature?
-
-  to use this feature use have give the below oprtions
-  `package.json`
-  ```json
-  {
-    /// ...some things
-    "react-cli": {
-      //  ...some things
-      "css": {
-        "enableRTLSplit": true,
-        "templateLabel": "{{--dir}}",// this is for html template css file path dir template
-        "disableMiniFiySelector": false,
-        "dirVarName": "document.dir" // this will be used for download css based on dir  
-      },
-      //  ...some things
-    }
-  }
-  ```
-
+# RTL Split 
+
+we are doing in build time generating  rtl related css code  by using @zohodesk/postcss-rt npm.
+It was automated, That postcss plugin create rtl reacted css and put them into same file, with css selector [dir=rtl] and ltr realted css with [dir=ltr].
+Here is problem mostly no one need rtl and ltr related css at the same time in browser, 
+we are try to split them  by [dir] and load which type of css is needed.
+For this purpose  we created RTL Split Plugin 
+
+
+# To Try it  out  rtl-ltr split
+### how to use this feature?
+
+  to use this feature use have give the below oprtions
+  `package.json`
+  ```json
+  {
+    /// ...some things
+    "react-cli": {
+      //  ...some things
+      "css": {
+        "enableRTLSplit": true,
+        "templateLabel": "{{--dir}}",// this is for html template css file path dir template
+        "disableMiniFiySelector": false,
+        "dirVarName": "document.dir" // this will be used for download css based on dir  
+      },
+      //  ...some things
+    }
+  }
+  ```
+

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

@@ -15,6 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const fs = require('fs');
 
 const ignoreVals = ['--zd_size', '--zd_font_size', '--size', '--size_'];
+let variablesRead = {};
 
 const {
   errors,
@@ -25,15 +26,15 @@ const {
 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 
+/*
+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) {
@@ -46,14 +47,14 @@ function isIgnoreValuePresent(ignoreVals, prop) {
   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 
 */
 
 
@@ -64,8 +65,8 @@ function extractVariableName(val) {
 function rootConvertor(rootOriginal, variables, settingsObject) {
   rootOriginal.walkRules(rule => {
     rule.nodes.forEach((decl, index) => {
-      let prevNode = rule.nodes[index - 1];
-      let currentNode = rule.nodes[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') {
@@ -83,11 +84,11 @@ function rootConvertor(rootOriginal, variables, settingsObject) {
           }
 
           const pxReplacement = settingsObject[variables[decl.prop]].replacements.px;
-          let valArr = decl.value.split(' '); // single values are considered in the above array and converted below
+          const 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', '');
+              const num = value.replace('px', '');
               valArr[index] = pxReplacement.replace('$$', num);
             }
           });
@@ -99,10 +100,33 @@ function rootConvertor(rootOriginal, variables, settingsObject) {
   return rootOriginal;
 }
 
+function createFolderIfNonExistant(path) {
+  if (!fs.existsSync(path)) {
+    fs.mkdirSync(path, {
+      recursive: true
+    });
+  }
+}
+
+function createFileIfNonExistant(path, content) {
+  if (fs.existsSync(path)) {
+    fs.writeFileSync(path, content, 'utf-8');
+  }
+}
+
 class VariableConversionCollector {
   constructor(options = {}) {
     this.optimize = options.optimize;
     this.filename = options.cssVariableReplacementConfig;
+    this.fileHandler();
+  }
+
+  fileHandler() {
+    createFolderIfNonExistant('./.cli/logs/');
+    createFolderIfNonExistant('./.cli/config/variables/');
+    createFolderIfNonExistant('./.cli/config/selectorWeight/');
+    createFileIfNonExistant('./.cli/logs/unassignedVariables.log', '{}');
+    createFileIfNonExistant('./.cli/logs/css_error.log', '{}');
   }
 
   apply(compiler) {
@@ -114,7 +138,8 @@ class VariableConversionCollector {
       settings: settingsObject,
       errorLog: errorLogStatus,
       errorInConsole: errorConsoleStatus,
-      errorsAllowed
+      errorsAllowed,
+      strictMode
     } = data; // If theres is no setting for default prop in settingsObject, set one.
 
     if (!settingsObject.default) {
@@ -129,20 +154,20 @@ 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
     */
 
 
-    if (fs.existsSync('./variableMapping.json')) {
-      const data = JSON.parse(fs.readFileSync('./variableMapping.json', 'utf-8'));
-      Object.keys(data).forEach(key => {
-        variables[key] = data[key];
+    if (fs.existsSync('./.cli/config/variables/variableMapping.json')) {
+      variablesRead = JSON.parse(fs.readFileSync('./.cli/config/variables/variableMapping.json', 'utf-8'));
+      Object.keys(variablesRead.changes).forEach(key => {
+        variables[key] = variablesRead.changes[key];
       });
     }
 
@@ -169,7 +194,7 @@ class VariableConversionCollector {
                         //   `${extractedValue} : ${variables[extractedValue]} already exists please check!`
                         // );
                         if (errorsAllowed.MULTIPLE_OCCURANCES) {
-                          let errObj = {
+                          const errObj = {
                             decl,
                             type: 'MULTIPLE_OCCURANCES',
                             filename,
@@ -182,29 +207,28 @@ class VariableConversionCollector {
                     }
                   } 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];
+                    if (/^--/gi.test(decl.prop) && val.trim() !== '' && !variables[decl.prop]) {
+                      if (!Object.keys(variablesRead.ignore).includes(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
+            /*
+             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 => {
@@ -216,17 +240,17 @@ 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;
-      }
+      /* 
+      input : 
+      .a{
+        padding : 20px 
+      }
+      output :
+      // on settingObject file : 
+      { padding : { replacements : { px : 'zd_size$$' }}} 
+      .a{
+        padding : zd_size20;
+      }
       */
 
       compilation.hooks.optimizeModules.tap('VariableConversionCollector', modules => {
@@ -238,24 +262,30 @@ class VariableConversionCollector {
         });
       });
     });
-    /*
-      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', () => {
-      if (Object.keys(unassigned).length > 0) {
+      if (Object.keys(unassigned).length > 0 && strictMode) {
         console.log();
         console.log(unassigned);
         console.log();
+        let str = '{\n';
+        Object.keys(unassigned).forEach(key => {
+          str += `"${key}" : "${unassigned[key]}",\n`;
+        });
+        str += '}';
+        fs.writeFileSync('./.cli/logs/unassignedVariables.log', str, 'utf-8');
         throw new Error('^^^ Variables above have not been assigned! ^^^');
       }
 
-      let avlTypes = new Set([]);
-      let srtArr = errTable.sort((a, b) => {
+      const avlTypes = new Set([]);
+      const srtArr = errTable.sort((a, b) => {
         avlTypes.add(a.type);
         avlTypes.add(b.type);
 
@@ -302,13 +332,13 @@ class VariableConversionCollector {
       }
 
       if (errorLogStatus) {
-        fs.writeFileSync('./css_error.log', '');
+        fs.writeFileSync('./.cli/logs/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);
+              fs.appendFileSync('./.cli/logs/css_error.log', err);
             }
           });
         }

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
+  }
+  
 }

package/lib/postcss-plugins/hoverActivePlugin.js

@@ -4,9 +4,9 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * we have give support for ignore(exclude) comments
- * These are the comments' keyword
+/**
+ * we have give support for ignore(exclude) comments
+ * These are the comments' keyword
  */
 const hoverIgnoreQuery = 'Hover:ignore',
       activeIgnoreQuery = 'Active:ignore',

package/lib/schemas/index.js

@@ -91,6 +91,10 @@ var _default = {
     cssDirStatement: null
   },
   app: {
+    moduleResolvePath: {
+      value: '',
+      cli: 'module_resolve_path'
+    },
     // this option only for impact testing
     devCssFileBountry: {
       value: '',
@@ -137,6 +141,10 @@ var _default = {
         value: 'dev',
         cli: 'app_mode'
       },
+      httpsCerts: {
+        value: null,
+        cli: 'https_certs'
+      },
       branch: {
         value: 'master',
         cli: 'app_branch'