@zohodesk/react-cli 1.0.1-exp.1 → 1.0.2

package/lib/plugins/VariableConversionCollector.js

@@ -26,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) {
@@ -47,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 
 */
 
 
@@ -154,13 +154,13 @@ class VariableConversionCollector {
         }
       };
     }
-    /* 
-    purpose of tap : to create a variable object such as:
-    {
-      --zdt_uploadlist_default_width : width,
-      --zdt_uploadlist_default_height : height,
-    }
-    which will help in the conversion further
+    /* 
+    purpose of tap : to create a variable object such as:
+    {
+      --zdt_uploadlist_default_width : width,
+      --zdt_uploadlist_default_height : height,
+    }
+    which will help in the conversion further
     */
 
 
@@ -216,19 +216,19 @@ class VariableConversionCollector {
                 });
               });
             });
-            /*
-             current value example: 
-             {
-                --zdt_uploadlist_default_width : --zd_upload_width,
-                --zd_upload_width : width
-             }
-             expected value : 
-             {
-               --zdt_uploadlist_default_width : width,
-               --zd_upload_width : width
-             }
-            
-             conversion is done in the while loop below
+            /*
+             current value example: 
+             {
+                --zdt_uploadlist_default_width : --zd_upload_width,
+                --zd_upload_width : width
+             }
+             expected value : 
+             {
+               --zdt_uploadlist_default_width : width,
+               --zd_upload_width : width
+             }
+            
+             conversion is done in the while loop below
             */
 
             Object.keys(variables).forEach(key => {
@@ -240,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 => {
@@ -262,12 +262,12 @@ 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', () => {

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function validator(opts) {
+  if (!opts || typeof opts !== 'object') {
+    throw new Error('Always requires argment');
+  }
+
+  const {
+    before,
+    after
+  } = opts;
+
+  if (!before || !after) {
+    throw new Error('Be sure to have "before" and "after" object names');
+  }
+
+  if (!Array.isArray(before) || !Array.isArray(after)) {
+    throw new Error('Objects "before" and "after" must be of type Array');
+  }
+
+  if (before.length !== after.length) {
+    throw new Error('Length of before and after options must be the same');
+  }
+
+  if (before.length === 0) {
+    throw new Error('Array length is 1 or more');
+  }
+
+  before.forEach((beforeOpt, idx) => {
+    const afterOpt = after[idx];
+
+    switch (true) {
+      case typeof beforeOpt === 'string':
+        {
+          if (!typeof afterOpt === 'string') {
+            throw new Error(`The after option ${afterOpt} must be a string. If you want to apply the replace callback function, then use a RegExp for the before option`);
+          }
+
+          break;
+        }
+
+      case beforeOpt instanceof RegExp:
+        {
+          if (!typeof afterOpt === 'string' && !typeof afterOpt === 'function') {
+            throw new Error(`The after option ${afterOpt} must be either a string, or a function`);
+          }
+
+          break;
+        }
+
+      default:
+        throw new Error(`The before option ${beforeOpt} must be either a string, or a RegExp`);
+    }
+  });
+}
+
+module.exports = _postcss.default.plugin('postcss-selector-replace-new', opts => {
+  validator(opts);
+  const {
+    before,
+    after
+  } = opts;
+  return root => {
+    root.walkRules(rule => {
+      before.forEach((beforeOpt, idx) => {
+        const afterOpt = after[idx];
+
+        if (typeof beforeOpt === 'string') {
+          rule.selector = rule.selector.split(beforeOpt).join(afterOpt);
+        } else {
+          rule.selector = rule.selector.replace(beforeOpt, afterOpt);
+        }
+      });
+    });
+  };
+});

package/lib/postcss-plugins/__test__/selectorReplace.test.js

@@ -0,0 +1,28 @@
+"use strict";
+
+let settings1 = {
+  selectorReplace: {
+    before: [':root', 'data-mode', 'data-theme'],
+    after: [':global .zohodesk_controlpanel,:global .wms-mainui,:global .wms-hysearch, :global .mcf1ee8b17_overlay,:global .wms-hvalign,  :global .KB_Editor_UploadImage,:global .zdeskEditor_popup, :global .ze_dd, :global .__baseZC_Container__', 'data-desk-mode', 'data-desk-theme']
+  }
+};
+let settings2 = {
+  selectorReplace: {
+    before: [':root', 'data-'],
+    after: [':global .zohodesk_controlpanel,:global .wms-mainui,:global .wms-hysearch, :global .mcf1ee8b17_overlay,:global .wms-hvalign,  :global .KB_Editor_UploadImage,:global .zdeskEditor_popup, :global .ze_dd, :global .__baseZC_Container__', 'test-']
+  }
+}; //error case
+
+let settings3 = {
+  selectorReplace: {
+    before: [':root', 'data-'],
+    after: [':global .zohodesk_controlpanel,:global .wms-mainui,:global .wms-hysearch, :global .mcf1ee8b17_overlay,:global .wms-hvalign,  :global .KB_Editor_UploadImage,:global .zdeskEditor_popup, :global .ze_dd, :global .__baseZC_Container__']
+  }
+}; //error case
+
+let settings4 = {
+  selectorReplace: {
+    before: [':root'],
+    after: [':global .zohodesk_controlpanel,:global .wms-mainui,:global .wms-hysearch, :global .mcf1ee8b17_overlay,:global .wms-hvalign,  :global .KB_Editor_UploadImage,:global .zdeskEditor_popup, :global .ze_dd, :global .__baseZC_Container__', 'test-']
+  }
+}; // here conversion happens for data from one index to another

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

@@ -36,7 +36,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

@@ -10,8 +10,6 @@ const {
   ErrorHandler
 } = require('./ErrorHandler');
 
-const errors = [];
-const errorTable = [];
 const errHandler = new ErrorHandler();
 const convertableProps = {
   'font-size': true,
@@ -121,7 +119,7 @@ const singleConvertor = (value, changeVal, details, range) => {
   // console.log(value, 'not within range')
 
 
-  let errObj = {
+  const errObj = {
     decl,
     type: 'RANGE_ERROR',
     filename,
@@ -195,7 +193,7 @@ module.exports = {
           // }
 
           if (prevNode && prevNode.type === 'comment' && prevNode.text.toLowerCase().includes(commentStr)) {
-            let errObj = {
+            const errObj = {
               decl,
               type: 'DECLARATION_IGNORED',
               filename,
@@ -258,7 +256,7 @@ module.exports = {
             } else {
               if (!decl.value.includes('calc')) {
                 // addError(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n unit : ${unitErrorVal} ,\n message : ${unitErrorVal} (Unit) Not Allowed \r`);
-                let errObj = {
+                const errObj = {
                   decl,
                   filename,
                   unitErrorVal: unitErrorVal,
@@ -288,27 +286,29 @@ module.exports = {
               }
             }
           } else {
-            if (decl.value && decl.value.includes('px') && decl.value.includes('var(--') && settingsObject[decl.prop]) {
-              let valArr = decl.value.split(' ');
-              let settings = settingsObject[decl.prop];
+            if (settingsObject[decl.prop] && decl.value && decl.value.includes('px') && decl.value.includes('var(--')) {
+              const valArr = decl.value.split(' ');
+              const settings = settingsObject[decl.prop];
               const {
                 range
               } = settings;
-              valArr.forEach((val, index) => {
+              const convertedVals = valArr.map(val => {
                 if (val.includes('px')) {
-                  let convertedVal = singleConvertor(val, settings.replacements.px, {
+                  const convertedVal = singleConvertor(val, settings.replacements.px, {
                     decl,
                     filename,
                     path: fromPath
                   }, range);
-                  valArr[index] = convertedVal ? convertedVal : val;
+                  return convertedVal ? convertedVal : val;
                 }
+
+                return val;
               });
-              decl.value = valArr.join(' ');
+              decl.value = convertedVals.join(' ');
             }
 
             if (decl.prop && decl.value && !decl.prop.includes('--') && valRegex.test(decl.value) && (settingsObject[decl.prop] || convertableProps[decl.prop]) && decl.value.includes('var') && !decl.value.includes('calc')) {
-              let errObj = {
+              const errObj = {
                 decl,
                 type: 'VARIABLE_PRESENT',
                 filename,

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 $?