@zohodesk/react-cli 1.1.14 → 1.1.15-exp.1

package/lib/plugins/VariableConversionCollector.js

@@ -28,14 +28,14 @@ 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']; // -- 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 
 */
 
 function createFolderIfNonExistant(path) {
@@ -95,13 +95,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
     */
 
 
@@ -153,19 +153,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 => {
@@ -177,37 +177,37 @@ class VariableConversionCollector {
         });
       }); // -- conversion for the root using variableConvertor --
 
-      /* 
-      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 => {
         const mods = modules.filter(x => x.type.includes('css'));
         mods.forEach(module => {
           const filename = module.issuer.resource;
-          /*
-            input : 
-            filename : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
-          
-             patterns.cssVariableReplacement: 
-            // include src folder, include deskapp folder, exclude node modules
-            "cssVariableReplacement": [
-              "src",
-              "deskapp",
-              "!node_modules"
-            ]
-             
-            output : 
-            true or false
+          /*
+            input : 
+            filename : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
+          
+              patterns.cssVariableReplacement: 
+            // include src folder, include deskapp folder, exclude node modules
+            "cssVariableReplacement": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ]
+              
+            output : 
+            true or false
           */
 
           if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
@@ -223,12 +223,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/plugins/utils/fileHandling.js

@@ -19,12 +19,13 @@ const aliasNames = {
   combinerMediaQuery: 'postcss-combine-media-query',
   hoverActive: 'postcss-mobile-hover',
   cssVariableReplacement: 'postcss-variable-report',
-  composeMinification: 'postcss-compose-plugin'
+  composeMinification: 'postcss-compose-plugin',
+  autoPrefixer: 'autoprefixer'
 };
-/*
-
-unique scenario
-
+/*
+
+unique scenario
+
 */
 // export function filterFileCssUniqueness(filename, filterObj) {
 //   let rootDir = 'supportapp';

package/lib/plugins/variableConvertorUtils.js

@@ -12,15 +12,15 @@ var _classHandling = require("./utils/classHandling");
 const ignoreVals = ['--zd_size', '--zd_font_size', '--size', '--size_']; // 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 
 */
 
 exports.ignoreVals = ignoreVals;

package/lib/postcss-plugins/AutoPrefixer.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _fs = _interopRequireDefault(require("fs"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = _postcss.default.plugin('autoprefixer', prefixConfig => {
+  const prefixes = JSON.parse(_fs.default.readFileSync('./defaultPrefixes.json', 'utf-8'));
+  const prefixVals = Object.keys(prefixes).filter(key => prefixes[key].key);
+  const prefixValObj = {};
+  prefixVals.forEach(val => {
+    prefixValObj[prefixes[val].value] = prefixes[val];
+  });
+  return root => {
+    root.walkAtRules(rule => {
+      const previous = rule.parent.nodes[rule.parent.nodes.indexOf(rule) - 1];
+
+      if (previous && previous.type === 'comment' && previous.text === 'prefix:ignore') {
+        return;
+      }
+
+      if (rule.name === 'keyframes' && !prefixConfig.exclude.includes('@keyframes') && prefixConfig.include && (Object.keys(prefixConfig.include).length === 0 || Object.keys(prefixConfig.include).includes('@keyframes'))) {
+        const newPrefixes = [];
+        const replacements = prefixConfig.replacements && prefixConfig.replacements['@keyframes'] ? prefixConfig.replacements['@keyframes'] : {}; // if (!prefixes['@keyframes'] && !replacements) {
+        //   return;
+        // }
+
+        const mozRule = rule.clone(); // custom value need to change
+
+        mozRule.name = replacements && replacements.mozilla ? replacements.mozilla : prefixes['@keyframes'].mozilla;
+
+        if (mozRule.name && prefixConfig.browsers && prefixConfig.browsers.mozilla) {
+          if (!prefixConfig.include['@keyframes'].mozilla) {
+            return;
+          }
+
+          newPrefixes.push(mozRule);
+        }
+
+        const chromeRule = rule.clone(); // custom value need to change
+
+        chromeRule.name = replacements && replacements.chrome ? replacements.chrome : prefixes['@keyframes'].chrome;
+
+        if (chromeRule.name && prefixConfig.browsers && prefixConfig.browsers.chrome) {
+          if (!prefixConfig.include['@keyframes'].chrome) {
+            return;
+          }
+
+          newPrefixes.push(chromeRule);
+        }
+
+        const operaRule = rule.clone(); // custom value need to change
+
+        operaRule.name = replacements && replacements.opera ? replacements.opera : prefixes['@keyframes'].opera;
+
+        if (operaRule.name && prefixConfig.browsers && prefixConfig.browsers.opera) {
+          if (!prefixConfig.include['@keyframes'].opera) {
+            return;
+          }
+
+          newPrefixes.push(operaRule);
+        }
+
+        const ieRule = rule.clone(); // custom value need to change
+
+        ieRule.name = replacements && replacements.ie ? replacements.ie : prefixes['@keyframes'].ie;
+
+        if (ieRule.name && prefixConfig.browsers && prefixConfig.browsers.ie) {
+          if (!prefixConfig.include['@keyframes'].ie) {
+            return;
+          }
+
+          newPrefixes.push(ieRule);
+        }
+
+        rule.parent.insertAfter(rule, newPrefixes); // console.log(`${rule.name} : ${rule.params}`);
+
+        return;
+      }
+    });
+    root.walkRules(rule => {
+      rule.walkDecls(decl => {
+        const previous = decl.parent.nodes[decl.parent.nodes.indexOf(decl) - 1];
+
+        if (previous && previous.type === 'comment' && previous.text === 'prefix:ignore') {
+          return;
+        }
+
+        if (Object.keys(prefixes).includes(decl.prop) && !prefixConfig.exclude.includes(decl.prop) && prefixConfig.include && (Object.keys(prefixConfig.include).length === 0 || Object.keys(prefixConfig.include).includes(decl.prop))) {
+          const newPrefixes = [];
+          const replacements = prefixConfig.replacements && prefixConfig.replacements[decl.prop] ? prefixConfig.replacements[decl.prop] : {}; // if (!prefixes[decl.prop] && !replacements) {
+          //   return;
+          // }
+
+          const mozDecl = decl.clone(); // custom value need to change
+
+          mozDecl.prop = replacements && replacements.mozilla ? replacements.mozilla : prefixes[decl.prop].mozilla;
+
+          if (mozDecl.prop && prefixConfig.browsers && prefixConfig.browsers.mozilla) {
+            if (!prefixConfig.include[decl.prop].mozilla) {
+              return;
+            }
+
+            newPrefixes.push(mozDecl);
+          }
+
+          const chromeDecl = decl.clone(); // custom value need to change
+
+          chromeDecl.prop = replacements && replacements.chrome ? replacements.chrome : prefixes[decl.prop].chrome;
+
+          if (chromeDecl.prop && prefixConfig.browsers && prefixConfig.browsers.chrome) {
+            if (!prefixConfig.include[decl.prop].chrome) {
+              return;
+            }
+
+            newPrefixes.push(chromeDecl);
+          }
+
+          const operaDecl = decl.clone(); // custom value need to change
+
+          operaDecl.prop = replacements && replacements.opera ? replacements.opera : prefixes[decl.prop].opera;
+
+          if (operaDecl.prop && prefixConfig.browsers && prefixConfig.browsers.opera) {
+            if (!prefixConfig.include[decl.prop].opera) {
+              return;
+            }
+
+            newPrefixes.push(operaDecl);
+          }
+
+          const ieDecl = decl.clone(); // custom value need to change
+
+          ieDecl.prop = replacements && replacements.ie ? replacements.ie : prefixes[decl.prop].ie;
+
+          if (ieDecl.prop && prefixConfig.browsers && prefixConfig.browsers.ie) {
+            if (!prefixConfig.include[decl.prop].ie) {
+              return;
+            }
+
+            newPrefixes.push(ieDecl);
+          }
+
+          decl.parent.insertAfter(decl, newPrefixes); // console.log(`${decl.prop} : ${decl.value}`);
+        }
+      });
+    });
+  };
+});

package/lib/postcss-plugins/RTLSplitPlugin.js

@@ -37,11 +37,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
  */
 
 
@@ -56,11 +56,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

@@ -274,7 +274,8 @@ var _default = {
       cssVariableReplacement: [],
       selectorWeight: [],
       cssUniqueness: [],
-      composeMinification: []
+      composeMinification: [],
+      autoPrefixer: []
     },
     exclude: {
       rtl: [],
@@ -290,6 +291,12 @@ var _default = {
       customFileDetails: '',
       excludeStrings: []
     },
+    prefixConfig: {
+      include: [],
+      exclude: [],
+      replacements: null,
+      browsers: null
+    },
     seperateCssModules: {
       value: false,
       cli: 'sep_cssmodules'
@@ -337,9 +344,11 @@ var _default = {
     sourcemap: {
       cli: 'source_map',
       value: 'cheap-eval-source-map'
-    }
+    },
+    externals: null
   },
   docs: {
+    externals: null,
     server: {
       iphost: (0, _getIp.default)(),
       host: (0, _os.hostname)(),
@@ -388,7 +397,8 @@ var _default = {
       hasRTL: [],
       cssVariableReplacement: [],
       selectorWeight: [],
-      cssUniqueness: []
+      cssUniqueness: [],
+      autoPrefixer: []
     },
     exclude: {
       rtl: [],
@@ -404,6 +414,12 @@ var _default = {
       customFileDetails: '',
       excludeStrings: []
     },
+    prefixConfig: {
+      include: [],
+      exclude: [],
+      replacements: null,
+      browsers: null
+    },
     cssHashSelectors: {
       filenames: [],
       packages: []

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