@zohodesk/react-cli 0.0.1-beta.176 → 0.0.1-beta.177

package/README.md

@@ -1,63 +1,143 @@
 # React CLI
 
 A CLI tool for build modern web application and libraries
+
+# Installation
+
+Below Steps:-
+
+> `npm i -g @zohodesk/react-cli`
+
+# Usage
+
+## Step 1
+
+> `mkdir <your-project-folder> && cd mkdir <your-project-folder>`
+
+## Step 2
+
+- create `package.json` file
+- add this to your `package.json`
+
+```json
+{
+  "scripts": {
+    "start": "react-cli start",
+    "build": "react-cli build"
+  }
+}
+```
+
+## Step 3
+
+- create below files
+- `src/index.js`
+- `src/index.html`
+
+## Step 4
+
+Now to run app
+
+> `npm run start`
+
+---
+
+# Change Logs
+
+# 0.0.1-beta.177
+
+**Changes:**
+
+- We have added extra new Error option `MULTIPLE_OCCURANCES` support for **convert px to custom variables**.
+- In case css --variables are not assigned an error will be thrown and logged in `.cli/logs/unassignedVariables.log`. The unassigned variables can be manually assigned in `variableMapping.json` through two keys :
+  - `changes` : for the variables that have to be converted, manual values can be added ( eg. "--wms_height": "height" )
+  - `ignore` : for the variables that do not have to be considered, they can be added as keys with some value in `ignore` key (eg. "--gc_widget_video_bg": "undefined"). These values will be ignored.
+- strict mode can be enabled for checking --variables in `cssVariableReplacementOptions.strictMode`
+  For more information and reference, refer to `[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/VariableConversion.md)
+
+- and this version has same as `0.0.1-exp.176.12`, `0.0.1-exp.176.11`
+
+# 0.0.1-exp.176.12
+
+**Changes:**
+
+- Earlier versions of react-cli, we have been putting video files under images folder in build output, now, we have moved the video files under videos folder in build output.
+
+# 0.0.1-exp.176.11
+
+**Issue Fix:**
+
+- When we use `react-cli.app.publicPaths.callback` this option and video files import, in place of publicPath url, **null** was there instead of file type `video` issue fixed.
+
 # 0.0.1-beta.176
+
 **Features:**
- * we have added feature to **increase Selector weight** for all css classes in your project during build time.
-  To enable this feature you have to `react-cli.app.plugins.selectorWeight` set as `true` in **package.json**.
+
+- we have added feature to **increase Selector weight** for all css classes in your project during build time.
+  To enable this feature you have to set `react-cli.app.plugins.selectorWeight` as `true` in **package.json**.
   For more [details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/SelectorWeight.md)
-  * Updates to variable replacement are given :
-    * css variables with -- are now supported due to the webpack plugin `VariableConversionCollector` that is generated for the same.
-    * `DECIMAL_CHECK`, `DECIMAL_REJECT` are two new errors supported.
-    * support for text-indent, clip, flex, flex-basis, row-gap, column-gap, gap properties are now given.
-  For an more information and reference, refer to `[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/ValueReplaVariableConversioncer.md)
+- Updates to variable replacement are given :
+  - css variables with -- are now supported due to the webpack plugin `VariableConversionCollector` that is generated for the same.
+  - `DECIMAL_CHECK`, `DECIMAL_REJECT` are two new errors supported.
+  - support for text-indent, clip, flex, flex-basis, row-gap, column-gap, gap properties are now given.
+    For more information and reference, refer to `[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/VariableConversion.md)
 
 # 0.0.1-beta.175
+
 **Issue Fix:-**
-  * When we use "hoverActive" @import in css not working issue fixed
 
-**Features:**  
- * `minifiy` option supported for minimize index.html file in during build time. You can use this option as "react-cli.app.htmlTemplate.minify" the  options are same as https://github.com/jantimon/html-webpack-plugin#minification
+- When we use "hoverActive" @import in css not working issue fixed
+
+**Features:**
+
+- `minifiy` option supported for minimize index.html file in during build time. You can use this option as "react-cli.app.htmlTemplate.minify" the options are same as https://github.com/jantimon/html-webpack-plugin#minification
 
 # 0.0.1-beta.174
 
 cli has been updated to fix compose issue faced when classname:hover exists and classname does not before compose
 
 **Issue Fix:-**
- * In react-cli version `0.0.1-beta.173`, when we use `start` command throws error issue fixed
- * while using `cssVariableReplacementOptions`, compose issue faced in css files, when classname:hover exists and classname does not exist issue fixed
 
-**Feature:-** 
-* `react-cli.test.classnameFormat` option added to change CssModules (Ex: import style from "./a.module.css" ) className transform template unittest case.  
-    `classnameFormat` default value `[classname]` you can customize it. Example: `[classname]-[hash]`
+- In react-cli version `0.0.1-beta.173`, when we use `start` command throws error issue fixed
+- while using `cssVariableReplacementOptions`, compose issue faced in css files, when classname:hover exists and classname does not exist issue fixed
+
+**Feature:-**
+
+- `react-cli.test.classnameFormat` option added to change CssModules (Ex: import style from "./a.module.css" ) className transform template unittest case.  
+   `classnameFormat` default value `[classname]` you can customize it. Example: `[classname]-[hash]`
 
 **Changes:-**
-* `jsonFile_test_*.json` files deleted after they used.
+
+- `jsonFile_test_*.json` files deleted after they used.
 
 # 0.0.1-beta.173
 
-**Features:** 
- * we have added feature to **convert px to custom variables** for all css files in your project during build time.
+**Features:**
+
+- we have added feature to **convert px to custom variables** for all css files in your project during build time.
   To enable this feature you have to set `react-cli.app.plugins.cssVariableReplacement` as `true` in **package.json**.
 
 Conversion for css Variables from Variables to px in Supportapp completed (`variableIgnore.js` && `pxParserPostcss.js` to be referred to), and px to custom variables through the new `variableModificationPlugin`. Error Log generation can also be converted on enabling
 
-For an more information and reference, refer to `[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/ValueReplaVariableConversioncer.md)
+For an more information and reference, refer to `[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/VariableConversion.md)
 
 # 0.0.1-beta.172
+
 We have renamed some options, For Our future features convenience.  
 We have given fallback support.
-Deprecation Warnings:- 
-* `react-cli.app.hasRTL` ==>  `react-cli.app.plugins.hasRTL`
-* `react-cli.app.rtlExclude` ==> `react-cli.app.exclude.rtl`
+Deprecation Warnings:-
+
+- `react-cli.app.hasRTL` ==> `react-cli.app.plugins.hasRTL`
+- `react-cli.app.rtlExclude` ==> `react-cli.app.exclude.rtl`
 
-* `react-cli.docs.hasRTL` ==>  `react-cli.docs.plugins.hasRTL`
-* `react-cli.docs.rtlExclude` ==> `react-cli.docs.exclude.rtl`
-these options have fallback support.
+- `react-cli.docs.hasRTL` ==> `react-cli.docs.plugins.hasRTL`
+- `react-cli.docs.rtlExclude` ==> `react-cli.docs.exclude.rtl`
+  these options have fallback support.
 
 # 0.0.1-beta.171
 
 Features added :
+
 1. `react-cli.app.mediaQueryHoverActiveString` and `react-cli.docs.mediaQueryHoverActiveString` templates support added for @media(hover: hover) and @media(hover: none) queries. We can modify these to modify respective queries.
 
 # 0.0.1-beta.170
@@ -112,10 +192,12 @@ Changes:-
 1. `enableChunkHash` option enabled for dev mode, use it as `react-cli.app.enableChunkHash` in `package.json`
 2. `--enable_efc=true` option added to enable efc by terminal
 3. unwanted pem files removed
+
 # 0.0.1-exp.167.1
+
 Features:-
- * In docs we have added `Description` for Component Props- check out it in `PropTypes` tab
 
+- In docs we have added `Description` for Component Props- check out it in `PropTypes` tab
 
 # 0.0.1-beta.167
 

package/docs/VariableConversion.md

@@ -5,18 +5,27 @@
 Conversion for Variables from Variables to px in Supportapp completed (`variableIgnore.js` && `pxParserPostcss.js` to be referred to), and px to custom variables through the new `variableModificationPlugin`. Error Log generation can also be converted on enabling
 
 **Features:** 
-  below features are added form `0.0.1-beta.173`
+# Features below are added form `0.0.1-beta.173`
 1. variables are converted from px to custom variables ( options are consumed from `cssVariableReplacementOptions.json` present in source folder )
 2. To enable the error log generation `errorLog` is to be made `true` in `cssVariableReplacementOptions.json` ( it will take a little longer than usual build time )
 3. To enable the console display of errors that are generated, `errorInConsole` is to be made `true` in `cssVariableReplacementOptions.json`
 4. To enable specific errors in the error log generation / error display on console, `DECLARATION_IGNORED`(for ignoring that particular line / declaration),`UNIT_ERROR` (when the Unit doesnt match the available units for the property),`RANGE_ERROR` (when the value does not fall within the range that is given for the property), `VARIABLE_PRESENT`(whether the value supposed to be in px for conversion sake is not converted from var() to px or if it's properly converted to px for conversion from px to var through our plugin) are to be individually made `true` in `cssVariableReplacementOptions.json`
 
-  below features are added form `0.0.1-beta.176`
+# Features below are added form `0.0.1-beta.176`
   
 * variables with -- are now supported due to the webpack plugin `VariableConversionCollector` that is generated for the same.
 *  `DECIMAL_CHECK`, `DECIMAL_REJECT` are two new errors supported.
 * support for text-indent, clip, flex, flex-basis, row-gap, column-gap, gap properties are now given.
 
+# Features below are added form `0.0.1-beta.177`
+
+* new Error `MULTIPLE_OCCURANCES` supported.
+* In case css --variables are not assigned an error will be thrown and logged in `.cli/logs/unassignedVariables.log`. The unassigned variables can be manually assigned in `variableMapping.json` through two keys : 
+  * `changes` : for the variables that have to be converted, manual values can be added ( eg. "--wms_height": "height" )
+  * `ignore` : for the variables that do not have to be considered, they can be added as keys with some value in `ignore` key (eg. "--gc_widget_video_bg": "undefined"). These values will be ignored.
+* strict mode can be enabled for checking --variables in `cssVariableReplacementOptions.strictMode`
+
+For more information and reference, refer to `[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/VariableConversion.md)
 
 <!-- file paths :
 
@@ -77,10 +86,13 @@ jsapps\supportapp\plugins\variableIgnore.js ( adding variable:ignore comment to
     "errorLog": false,
     "errorInConsole": false,
     "errorsAllowed":{
-      "DECLARATION_IGNORED" : true,
-      "UNIT_ERROR" : true,
-      "RANGE_ERROR" : true,
-      "VARIABLE_PRESENT" : true
+      "DECLARATION_IGNORED": true,
+      "UNIT_ERROR": true,
+      "DECIMAL_CHECK": true,
+      "DECIMAL_REJECT": true,
+      "RANGE_ERROR": true,
+      "VARIABLE_PRESENT": true,
+      "MULTIPLE_OCCURANCES": false
     },
     "settings": {
       "font-size": {
@@ -701,10 +713,12 @@ Consider the below mentioned :
 => `DECLARATION_IGNORED` : Lines that succeed the /*Variable:Ignore*/ comment.
 => `UNIT_ERROR` : the units that are not present in the corresponding property's `allowed` array are used.
 => `RANGE_ERROR` : numerical values that are not present within the range of the corresponding property's `range` is used.
-=> `DECIMAL_CHECK` : Decimal values containing . will be shown
-=> `DECIMAL_REJECT` : Decimal values such as .em which are to be rejected are shown
+=> `DECIMAL_CHECK` : Decimal values containing . will be shown ( flex : 1.3 )
+=> `DECIMAL_REJECT` : Decimal values such as .em which are to be rejected are shown ( font-size : 12.5px )
 => `VARIABLE_PRESENT` : conversion to px (Step 2) wasn't done properly and hence there are residues that contain `var` in it are found.
+=> `MULTIPLE_OCCURANCES` : using --vars in multiple places ( using --zd_avatar_padding_left in left and right ), which results in confusion during conversion 
 
+. --variables can be checked and debugged when the `strictMode` flag is enabled in `cssVariableReplacementOptions.json` file. The variables unassigned will be logged in the `unassignedVariable.log`. The manual assigning of all keys present will be split into `ignore` and `changes` for ignoring the variable and changing the variable respectively. 
 
 * First two conversions are to be done manually by the use of the commands, `npm run variable:addignore` and `npm run variable:convert`
 * Final conversion is done by react-cli on compilation of the source folder `npm run start --app:port=**** --app:domain=****`

package/lib/configs/webpack.prod.config.js

@@ -183,7 +183,7 @@ module.exports = {
           fallback: _path.default.join(__dirname, '..', 'loaders', 'fileLoader.js')
         }
       }]
-    }, (0, _configsAssetsLoaders.configVideoLoaderObj)(enableChunkHash ? './images/[name].[hash:20].[ext]' : './images/[name].[ext]'), {
+    }, (0, _configsAssetsLoaders.configVideoLoaderObj)(enableChunkHash ? './videos/[name].[hash:20].[ext]' : './videos/[name].[ext]'), {
       test: /\.woff2|\.woff$|\.ttf$|\.eot$/,
       use: [{
         loader: 'url-loader',

package/lib/loaderUtils/configsAssetsLoaders.js

@@ -57,7 +57,7 @@ function configAudioLoader(nameTemplate) {
 function configVideoLoader(nameTemplate) {
   return {
     test: VidioExtRegex,
-    use: createLoaderOptionQueryString('url-loader', `./images/${nameTemplate}`, 1)
+    use: createLoaderOptionQueryString('url-loader', `./videos/${nameTemplate}`, 1)
   };
 }
 

package/lib/plugins/VariableConversionCollector.js

@@ -7,14 +7,24 @@ exports.default = void 0;
 
 var _postcss = _interopRequireDefault(require("postcss"));
 
-var _fs = _interopRequireDefault(require("fs"));
-
 var _ErrorHandler = require("../postcss-plugins/variableModificationPlugin/ErrorHandler");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { RawSource } from 'webpack-sources';
-const ignoreVals = ['--zd_size', '--zd_font_size', '--size', '--size_']; // -- is issue IO -- 
+const fs = require('fs');
+
+const ignoreVals = ['--zd_size', '--zd_font_size', '--size', '--size_'];
+let variablesRead = {};
+
+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 : 
@@ -35,7 +45,7 @@ function isIgnoreValuePresent(ignoreVals, prop) {
     }
   });
   return present;
-} // -- to convert the hyphen values to values -- 
+} // -- to convert the hyphen values to values --
 
 /*
 input : 
@@ -55,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') {
@@ -69,16 +79,16 @@ function rootConvertor(rootOriginal, variables, settingsObject) {
 
         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] || !settingsObject[variables[decl.prop]]) {
+          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
+          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);
             }
           });
@@ -90,22 +100,46 @@ 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();
   }
 
-  apply(compiler) {
-    let variables = {};
-
-    const rawdata = _fs.default.readFileSync(this.filename);
+  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) {
+    const variables = {};
+    const unassigned = {};
+    const rawdata = fs.readFileSync(this.filename);
     const data = JSON.parse(rawdata);
     const {
       settings: settingsObject,
       errorLog: errorLogStatus,
-      errorInConsole: errorConsoleStatus
+      errorInConsole: errorConsoleStatus,
+      errorsAllowed,
+      strictMode
     } = data; // If theres is no setting for default prop in settingsObject, set one.
 
     if (!settingsObject.default) {
@@ -130,6 +164,13 @@ class VariableConversionCollector {
     */
 
 
+    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];
+      });
+    }
+
     compiler.hooks.compilation.tap('VariableConversionCollector', compilation => {
       compilation.hooks.optimizeModules.tap('VariableConversionCollector', modules => {
         const mods = modules.filter(x => x.type.includes('css'));
@@ -137,37 +178,67 @@ class VariableConversionCollector {
           const rootOriginal = _postcss.default.parse(module.content);
 
           const filename = module.issuer.resource;
-          rootOriginal.walkRules(rule => {
-            rule.walkDecls(decl => {
-              decl.value.split(' ').forEach(val => {
-                if (val && val.includes('--') && !new RegExp(ignoreVals.join('|'), 'gi').test(val)) {
-                  variables[extractVariableName(val)] = decl.prop;
-                }
+
+          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) {
+                          const 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) && 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
-          */
-
-          Object.keys(variables).forEach(key => {
-            while (variables[variables[key]]) {
-              variables[key] = variables[variables[key]];
-            }
-          });
+            /*
+             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 -- 
+      }); // -- conversion for the root using rootConvertor --
 
       /* 
       input : 
@@ -200,30 +271,60 @@ class VariableConversionCollector {
     */
 
     compiler.hooks.afterEmit.tap('error-display', () => {
-      const {
-        errors,
-        errTable
-      } = require('../postcss-plugins/variableModificationPlugin/index');
+      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);
 
         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 errHandler = new _ErrorHandler.ErrorHandler();
+        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) {
-              errHandler.printError(err);
+              errorHandler.printError(err);
             }
           });
           console.log('---------------------------------------------------------------------------------------------------------------------------');
@@ -231,14 +332,13 @@ class VariableConversionCollector {
       }
 
       if (errorLogStatus) {
-        _fs.default.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.default.appendFileSync('./css_error.log', err);
+              fs.appendFileSync('./.cli/logs/css_error.log', err);
             }
           });
         }

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

@@ -16,13 +16,14 @@ class ErrorHandler {
       DECIMAL_REJECT: errObj => this.addError(` prop: ${errObj.decl.prop} ,\n value : ${errObj.decl.value} ,\n filename : ${errObj.filename} ,\n filepath : ${errObj.path} ,\n line : ${errObj.decl.source.start.line} ,\n unit : ${errObj.unitErrorVal} ,\n message : ${errObj.message}`),
       UNIT_ERROR: errObj => this.addError(` prop: ${errObj.decl.prop} ,\n value : ${errObj.decl.value} ,\n filename : ${errObj.filename} ,\n filepath : ${errObj.path} ,\n line : ${errObj.decl.source.start.line} ,\n unit : ${errObj.unitErrorVal} ,\n message : ${errObj.message}`),
       RANGE_ERROR: errObj => this.addError(` prop: ${errObj.decl.prop} ,\n value : ${errObj.decl.value} ,\n filename : ${errObj.filename} ,\n filepath : ${errObj.path} ,\n line : ${errObj.decl.source.start.line} ,\n message : ${errObj.message}\r`),
-      VARIABLE_PRESENT: errObj => this.addError(` prop: ${errObj.decl.prop} ,\n value : ${errObj.decl.value} ,\n filename : ${errObj.filename} ,\n filepath : ${errObj.path} ,\n line : ${errObj.decl.source.start.line} ,\n message : ${errObj.message}`)
+      VARIABLE_PRESENT: errObj => this.addError(` prop: ${errObj.decl.prop} ,\n value : ${errObj.decl.value} ,\n filename : ${errObj.filename} ,\n filepath : ${errObj.path} ,\n line : ${errObj.decl.source.start.line} ,\n message : ${errObj.message}`),
+      MULTIPLE_OCCURANCES: errObj => this.addError(` prop: ${errObj.decl.prop} ,\n value : ${errObj.decl.value} ,\n filename : ${errObj.filename} ,\n filepath : ${errObj.path} ,\n line : ${errObj.decl.source.start.line} ,\n message : ${errObj.message}`)
     });
   }
 
   setAllowedErrs(allErrs) {
     this.allowedErrs = allErrs;
-    ['DECLARATION_IGNORED', 'DECIMAL_CHECK', 'DECIMAL_REJECT', 'UNIT_ERROR', 'RANGE_ERROR', 'VARIABLE_PRESENT'].forEach(err => {
+    ['DECLARATION_IGNORED', 'DECIMAL_CHECK', 'DECIMAL_REJECT', 'UNIT_ERROR', 'RANGE_ERROR', 'VARIABLE_PRESENT', 'MULTIPLE_OCCURANCES'].forEach(err => {
       if (!this.allowedErrs[err]) {
         this[err] = () => null;
       }
@@ -35,6 +36,7 @@ class ErrorHandler {
 
   errorFunction(errObj) {
     if (errObj.type && this.allowedErrs[errObj.type] && errObj.decl.prop && errObj.decl.value) {
+      console.log(this.allowedErrs[errObj.type]);
       this[errObj.type](errObj);
     }
   }

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

@@ -302,5 +302,6 @@ module.exports = {
     };
   }),
   errors: errHandler.errors,
-  errTable: errHandler.errorTable
+  errTable: errHandler.errorTable,
+  errHandler
 };

package/lib/utils/cssURLReplacer.js

@@ -3,19 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getUrls = exports.getFileType = exports.cssUrlReplacer = void 0;
+exports.cssUrlReplacer = void 0;
+Object.defineProperty(exports, "getFileType", {
+  enumerable: true,
+  get: function () {
+    return _getFileType.getFileType;
+  }
+});
+exports.getUrls = void 0;
 
 var _fs = _interopRequireDefault(require("fs"));
 
-var _path = _interopRequireDefault(require("path"));
-
 var _crypto = _interopRequireDefault(require("crypto"));
 
+var _getFileType = require("./getFileType");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let urlRegex = /url\(.*?\)/g;
+const urlRegex = /url\(.*?\)/g;
 
-let getHash = (file, isPath = false, needSubStr = true) => {
+const getHash = (file, isPath = false, needSubStr = true) => {
   let hash = _crypto.default.createHash('md5');
 
   if (isPath) {
@@ -28,45 +35,25 @@ let getHash = (file, isPath = false, needSubStr = true) => {
   return hash ? needSubStr ? hash.substring(0, 20) : hash : null;
 };
 
-let getFileType = file => {
-  let {
-    ext
-  } = _path.default.parse(file);
-
-  if (ext === '.gif' || ext === '.png' || ext === '.jpg' || ext === '.jpeg' || ext === '.ico') {
-    return 'image';
-  } else if (ext === '.svg' || ext === '.woff' || ext === '.eot' || ext === '.ttf' || ext === '.woff2') {
-    return 'font';
-  } else if (ext === '.js') {
-    return 'js';
-  } else if (ext === '.css') {
-    return 'css';
-  }
-
-  return null;
-};
-
-exports.getFileType = getFileType;
-
-let formatUrl = str => {
+const formatUrl = str => {
   let char = str.includes('"') ? '"' : str.includes('\'') ? '\'' : '(';
-  let statingIdx = str.indexOf(char) + 1;
-  let substr = str.substring(statingIdx, str.length);
+  const statingIdx = str.indexOf(char) + 1;
+  const substr = str.substring(statingIdx, str.length);
   char = char === '(' ? ')' : char;
   return substr.substring(0, substr.indexOf(char));
 };
 
-let getUrls = css => {
-  let urlMatches = css.match(urlRegex);
+const getUrls = css => {
+  const urlMatches = css.match(urlRegex);
   let src = css;
 
   if (urlMatches) {
-    let patterns = {};
+    const patterns = {};
     urlMatches.forEach(pattern => {
-      let url = formatUrl(pattern);
-      let hash = getHash(url);
+      const url = formatUrl(pattern);
+      const hash = getHash(url);
       patterns[url] = hash;
-      let regex = new RegExp(pattern.replace(/([<>*()?${}|])/g, '\\$1'), 'g');
+      const regex = new RegExp(pattern.replace(/([<>*()?${}|])/g, '\\$1'), 'g');
       src = src.replace(regex, hash);
     });
     return {
@@ -78,12 +65,12 @@ let getUrls = css => {
 
 exports.getUrls = getUrls;
 
-let cssUrlReplacer = (css, domains, chunkHash = {}) => {
-  let obj = getUrls(css);
+const cssUrlReplacer = (css, domains, chunkHash = {}) => {
+  const obj = getUrls(css);
   let src = css;
 
   if (obj) {
-    let patterns = obj.urls;
+    const patterns = obj.urls;
     src = obj.css;
     Object.keys(patterns).forEach(pattern => {
       let urlParts = pattern.split('/');
@@ -97,20 +84,20 @@ let cssUrlReplacer = (css, domains, chunkHash = {}) => {
         fileName = fileName.replace(/\?.*$/g, '');
       }
 
-      let hash = patterns[pattern];
-      let filename = fileName.replace(/(\?|#).*?$/g, '');
-      let regex = new RegExp(hash, 'g');
+      const hash = patterns[pattern];
+      const filename = fileName.replace(/(\?|#).*?$/g, '');
+      const regex = new RegExp(hash, 'g');
       let {
         hashedName
       } = chunkHash[filename] || fileName;
 
       if (domains && typeof urlParts[0] === 'string' && !urlParts[0].includes('http')) {
-        let {
+        const {
           font,
           image
         } = domains;
-        let type = getFileType(filename);
-        let customPath = type === 'image' ? `${image}/images` : type === 'font' ? `${font}/fonts` : urlParts.join('/');
+        const type = (0, _getFileType.getFileType)(filename);
+        const customPath = type === 'image' ? `${image}/images` : type === 'font' ? `${font}/fonts` : urlParts.join('/');
         urlParts = customPath.split('/');
       }
 

package/lib/utils/getFileType.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFileType = getFileType;
+
+var _path = _interopRequireDefault(require("path"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-use-before-define */
+function getFileType(file) {
+  const {
+    ext
+  } = _path.default.parse(file);
+
+  if (isImageFileExt(ext)) {
+    return 'image';
+  } else if (isFontFileExt(ext)) {
+    return 'font';
+  } else if (isVideoFileExt(ext)) {
+    return 'video';
+  } else if (isAudioFileExt(ext)) {
+    return 'audio';
+  } else if (ext === '.js') {
+    return 'js';
+  } else if (ext === '.css') {
+    return 'css';
+  }
+
+  return null;
+}
+
+function isImageFileExt(ext) {
+  return ext === '.gif' || ext === '.png' || ext === '.jpg' || ext === '.jpeg' || ext === '.ico';
+}
+
+function isFontFileExt(ext) {
+  return ext === '.svg' || ext === '.woff' || ext === '.eot' || ext === '.ttf' || ext === '.woff2';
+}
+
+function isVideoFileExt(ext) {
+  return ext === '.mp4';
+}
+
+function isAudioFileExt(ext) {
+  return ext === '.ogg';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "0.0.1-beta.176",
+  "version": "0.0.1-beta.177",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",
@@ -9,6 +9,7 @@
     "start": "babel src -d lib -w --copy-files",
     "build": "babel src -d lib --copy-files",
     "prepare": "npm run clean && npm run build",
+    "prepublish": "npm prune now",
     "lint": "eslint src ./bin/cli.js",
     "postpublish": "node postpublish.js",
     "expublish": "npm publish --tag experimental-version"