@zohodesk/react-cli 0.0.1-exp.176.2 → 0.0.1-exp.176.4

package/lib/plugins/VariableConversionCollector.js

@@ -7,33 +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 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 
+const ignoreVals = ['--zd_size', '--zd_font_size', '--size', '--size_']; // -- 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) {
@@ -44,16 +35,16 @@ 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 
+} // -- 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 
 */
 
 
@@ -78,7 +69,7 @@ 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]) {
+          if (!variables[decl.prop] || !settingsObject[variables[decl.prop]]) {
             variables[decl.prop] = 'default';
           }
 
@@ -106,15 +97,15 @@ class VariableConversionCollector {
   }
 
   apply(compiler) {
-    const variables = {};
-    const unassigned = {};
-    const rawdata = fs.readFileSync(this.filename);
+    let variables = {};
+
+    const rawdata = _fs.default.readFileSync(this.filename);
+
     const data = JSON.parse(rawdata);
     const {
       settings: settingsObject,
       errorLog: errorLogStatus,
-      errorInConsole: errorConsoleStatus,
-      errorsAllowed
+      errorInConsole: errorConsoleStatus
     } = data; // If theres is no setting for default prop in settingsObject, set one.
 
     if (!settingsObject.default) {
@@ -129,23 +120,16 @@ 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];
-      });
-    }
-
     compiler.hooks.compilation.tap('VariableConversionCollector', compilation => {
       compilation.hooks.optimizeModules.tap('VariableConversionCollector', modules => {
         const mods = modules.filter(x => x.type.includes('css'));
@@ -153,80 +137,49 @@ class VariableConversionCollector {
           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];
-                    }
-                  }
-                });
+          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;
+                }
               });
             });
-            /*
-             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 --
-
-      /* 
-      input : 
-      .a{
-        padding : 20px 
-      }
-      output :
-      // on settingObject file : 
-      { padding : { replacements : { px : 'zd_size$$' }}} 
-      .a{
-        padding : zd_size20;
-      }
+      }); // -- 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 => {
@@ -238,21 +191,19 @@ 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) {
-        console.log();
-        console.log(unassigned);
-        console.log();
-        throw new Error('^^^ Variables above have not been assigned! ^^^');
-      }
+      const {
+        errors,
+        errTable
+      } = require('../postcss-plugins/variableModificationPlugin/index');
 
       let avlTypes = new Set([]);
       let srtArr = errTable.sort((a, b) => {
@@ -262,39 +213,17 @@ 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();
+        const errHandler = 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);
+              errHandler.printError(err);
             }
           });
           console.log('---------------------------------------------------------------------------------------------------------------------------');
@@ -302,13 +231,14 @@ class VariableConversionCollector {
       }
 
       if (errorLogStatus) {
-        fs.writeFileSync('./css_error.log', '');
+        _fs.default.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);
+              _fs.default.appendFileSync('./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/postcss-plugins/variableModificationPlugin/ErrorHandler.js

@@ -16,14 +16,13 @@ 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}`),
-      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}`)
+      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}`)
     });
   }
 
   setAllowedErrs(allErrs) {
     this.allowedErrs = allErrs;
-    ['DECLARATION_IGNORED', 'DECIMAL_CHECK', 'DECIMAL_REJECT', 'UNIT_ERROR', 'RANGE_ERROR', 'VARIABLE_PRESENT', 'MULTIPLE_OCCURANCES'].forEach(err => {
+    ['DECLARATION_IGNORED', 'DECIMAL_CHECK', 'DECIMAL_REJECT', 'UNIT_ERROR', 'RANGE_ERROR', 'VARIABLE_PRESENT'].forEach(err => {
       if (!this.allowedErrs[err]) {
         this[err] = () => null;
       }
@@ -36,7 +35,6 @@ 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,6 +302,5 @@ module.exports = {
     };
   }),
   errors: errHandler.errors,
-  errTable: errHandler.errorTable,
-  errHandler
+  errTable: errHandler.errorTable
 };

package/lib/sh/pre-commit.sh

@@ -1,34 +1,34 @@
-#!/bin/sh
-
-STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E "\.(js)$") # Get staged files
-
-CURRENT_BRANCH=$(git branch | sed -n -e 's/^\* \(.*\)/\1/p') # Get branch name
-
-echo "Branch Name - $CURRENT_BRANCH"
-
-if [[ "$STAGED_FILES" = "" ]]; then
-  exit 0
-fi
-
-IS_FAILED=false
-FILES=""
-
-for FILE in $STAGED_FILES # Add files with space separation
-do
-	FILES+="$FILE "
-done
-
-npm run lint --prefix ${PREFIX_PATH} $FILES # Run ESLint
-
-if [[ "$?" != 0 ]]; then
-	IS_FAILED=true
-fi
-
-if $IS_FAILED; then
-  echo "\033[41mCOMMIT FAILED:\033[0m Your commit contains files that should pass ESLint but do not. Please fix the ESLint errors and try again.\n"
-  exit 1
-else
-  echo "\033[42mCOMMIT SUCCEEDED\033[0m\n"
-fi
-
-exit $?
+#!/bin/sh
+
+STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E "\.(js)$") # Get staged files
+
+CURRENT_BRANCH=$(git branch | sed -n -e 's/^\* \(.*\)/\1/p') # Get branch name
+
+echo "Branch Name - $CURRENT_BRANCH"
+
+if [[ "$STAGED_FILES" = "" ]]; then
+  exit 0
+fi
+
+IS_FAILED=false
+FILES=""
+
+for FILE in $STAGED_FILES # Add files with space separation
+do
+	FILES+="$FILE "
+done
+
+npm run lint --prefix ${PREFIX_PATH} $FILES # Run ESLint
+
+if [[ "$?" != 0 ]]; then
+	IS_FAILED=true
+fi
+
+if $IS_FAILED; then
+  echo "\033[41mCOMMIT FAILED:\033[0m Your commit contains files that should pass ESLint but do not. Please fix the ESLint errors and try again.\n"
+  exit 1
+else
+  echo "\033[42mCOMMIT SUCCEEDED\033[0m\n"
+fi
+
+exit $?