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

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/__test__/valueReplacer.spec.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _ValueReplacer = _interopRequireDefault(require("../ValueReplacer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-use-before-define */
+describe('postcss value replacer tests', () => {
+  it('is creating value replaced code', () => {
+    const cssInputStr = `.abc{ cursor : text }`;
+    const cssOutputStr = `.abc{ cursor : --textCursor }`;
+    const cssOptions = [{
+      props: ['font', 'font-family', 'cursor'],
+      values: {
+        'zdf-': 'zd-react-app-',
+        '^text$': '--textCursor'
+      }
+    }];
+    const result = runValueReplacerForCssString(cssInputStr, cssOptions);
+    expect(result.css).toEqual(cssOutputStr);
+  });
+});
+describe('postcss value replacer tests', () => {
+  it('is creating value replaced code', () => {
+    const cssInputStr = `.def{ cursor : var(--textBoxCursor) }`;
+    const cssOutputStr = `.def{ cursor : var(--textBoxCursor) }`;
+    const cssOptions = [{
+      props: ['font', 'font-family', 'cursor'],
+      values: {
+        'zdf-': 'zd-react-app-',
+        '^text$': '--textCursor'
+      }
+    }];
+    const result = runValueReplacerForCssString(cssInputStr, cssOptions);
+    expect(result.css).toEqual(cssOutputStr);
+  });
+});
+
+function runValueReplacerForCssString(cssInputStr, cssOptions) {
+  return (0, _postcss.default)([(0, _ValueReplacer.default)(cssOptions)]).process(cssInputStr);
+}

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',
@@ -158,7 +158,6 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
 
   function mediaCommaQuery(rule, index) {
     if (rule.parent.params !== undefined && !rule.parent.params.includes('hover')) {
-      //console.log(hovMed, actMed);
       let newSelector = '';
       const {
         hovMed,
@@ -232,7 +231,6 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
   }
 
   function commaQuery(rule, index) {
-    //console.log("comma" , rule.selector.split('\n'));
     let newSelector = '';
     const hovQueries = [];
     rule.selector.split(/\s*,\s*/).forEach(_subrule => {
@@ -288,13 +286,10 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
   });
   rootOriginal.walkRules(/:hover/i, (rule, index) => {
     // media hover query with ',' ' ' '+'
-    // console.log("media query" , rule.selector)
     if (rule.parent.type === 'atrule' && rule.selector.includes(',')) {
-      //console.log("media comma", rule.selector)
       mediaCommaQuery(rule, index);
     } else {
       // plus, space and other media queries
-      //console.log("media", rule.selector)
       mediaQuery(rule, index);
     } // usual hover query
 
@@ -311,7 +306,6 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
       if (rule.selector.includes(',')) {
         commaQuery(rule, index);
       } else if (rule.selector.match(/ +|\++/g)) {
-        //console.log("plus or space" , rule.selector);
         if (rule.selector.includes('hover')) {
           hoverRules.push({
             rule,

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,
@@ -94,7 +92,13 @@ function pxToCalc(value) {
   return arr.join(' ');
 }
 
-const singleConvertor = (value, changeVal, details, range) => {
+const singleConvertor = ({
+  value,
+  changeVal,
+  details,
+  range,
+  allowed
+}) => {
   const {
     path,
     filename,
@@ -108,7 +112,15 @@ const singleConvertor = (value, changeVal, details, range) => {
     }
   }
 
+  if (allowed && allowed.includes(decl.value) && decl.value.toString() !== '0') {
+    return decl.value;
+  }
+
   if (getNumericValue(value) >= range.start && getNumericValue(value) <= range.end || getNumericValue(value) === 0) {
+    if (value.trim() === '0px') {
+      return '0';
+    }
+
     let retVal = value.replace(/(\d+)px/gi, changeVal.replace('$$', '$1'));
 
     if (/^-var/.test(retVal)) {
@@ -121,7 +133,7 @@ const singleConvertor = (value, changeVal, details, range) => {
   // console.log(value, 'not within range')
 
 
-  let errObj = {
+  const errObj = {
     decl,
     type: 'RANGE_ERROR',
     filename,
@@ -129,24 +141,8 @@ const singleConvertor = (value, changeVal, details, range) => {
     path: path
   };
   errHandler.errorTable.push(errObj);
-  errHandler.errorFunction(errObj); // errorFunction(
-  //   {
-  //     decl,
-  //     type: 'RANGE_ERROR',
-  //     filename,
-  //     message: `value (${value}) (${typeof value}) not within range (${
-  //       range.start
-  //     },${range.end})\r`,
-  //     path: path
-  //   },
-  //   'RANGE_ERROR'
-  // );
-  // }
-  // addError(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n message : value (${value}) not within range (${range.start},${range.end})\r`)
-  //   return value;
-  // } else {
-  //   console.log('++++++++++++++++++++++rect val!', value);
-  // }
+  errHandler.errorFunction(errObj);
+  return;
 };
 
 module.exports = {
@@ -179,6 +175,7 @@ module.exports = {
     });
     const valRegex = new RegExp(regValStr, 'gi');
     return rootOriginal => {
+      // console.log(rootOriginal.source.input.from, 'passed through variable Plugin');
       rootOriginal.walkRules(rule => {
         // rule.nodes[-1] = {}
         // need map, forEach fine less memory
@@ -189,10 +186,11 @@ module.exports = {
           const fromPath = rootOriginal.source.input.from; // this will be problem for linux and mac use require('path').sep
           // split not need use slice and lastIndexOf less memory
 
-          const filename = fromPath.split(path.sep).pop();
+          const filename = fromPath.split(path.sep).pop(); // if(filename.includes('AddFormResponsive.module.css'){
+          // }
 
           if (prevNode && prevNode.type === 'comment' && prevNode.text.toLowerCase().includes(commentStr)) {
-            let errObj = {
+            const errObj = {
               decl,
               type: 'DECLARATION_IGNORED',
               filename,
@@ -205,8 +203,7 @@ module.exports = {
           }
 
           if (settingsObject[decl.prop] && !decl.value.includes('var(--')) {
-            const settings = settingsObject[decl.prop]; // console.log(settings)
-
+            const settings = settingsObject[decl.prop];
             const {
               allowed,
               range
@@ -217,6 +214,9 @@ module.exports = {
             .replace(/\d+/gi, '').replace('var(--zd_size)', 'px').replace('var(--zd_font_size)', 'px').replace('rect(', '').replace(')', '').replace('px,', 'px').replace(',', '').split(' ').filter(x => x !== ''); // unit = unit.replace(unit, unit.replace('-',''))
             // console.log('unit : ');
             // console.log(unit);
+            // if (decl.prop === 'height') {
+            //   console.log(decl.prop, unit, 'case 1');
+            // }
 
             unit.forEach((val, index) => {
               allowed.forEach(alwdVal => {
@@ -236,26 +236,54 @@ module.exports = {
                   unitErrorVal = val;
                 }
               }
-            }); // console.log(allowed, replacements, range)
+            }); // if (decl.prop === 'height') {
+            //   console.log(decl.prop, unitErrorVal, unitError, unit, 'case 2');
+            // }
+            // console.log(allowed, replacements, range)
 
             if (!unitError) {
-              // use variable decl.value.split(' ')
-              if (range) {
+              let calcValue = false;
+
+              if (decl.value.includes('calc')) {
+                decl.value = pxToCalc(decl.value);
+                calcValue = true;
+              } // use variable decl.value.split(' ')
+
+
+              if (range && !calcValue) {
                 // console.log('multiple :', decl.value)
+                const tempVal = decl.value; // if (decl.prop === 'height') {
+                //   console.log(decl.prop, tempVal, decl.value, allowed, 'case 3');
+                // }
+                // if (decl.prop === 'height') {
+                //   console.log('allowed!', decl.prop, decl.value, allowed);
+                // }
+
                 let newVal = '';
-                decl.value.split(' ').forEach(singleVal => {
-                  newVal += `${singleConvertor(singleVal, settings.replacements.px, {
-                    decl,
-                    filename,
-                    path: fromPath
-                  }, range)} `;
+                let splitValues = decl.value.split(' ');
+                splitValues = splitValues.filter(val => val.trim() !== '');
+                splitValues = splitValues.map(val => val.replace(/\r|\t|\n/gi, ''));
+                splitValues.forEach(singleVal => {
+                  newVal += `${singleConvertor({
+                    value: singleVal,
+                    changeVal: settings.replacements.px,
+                    details: {
+                      decl,
+                      filename,
+                      path: fromPath
+                    },
+                    range,
+                    allowed
+                  })} `;
                 });
-                decl.value = newVal;
+                decl.value = newVal; // if (decl.prop === 'height') {
+                //   console.log(decl.prop, tempVal, newVal, 'case 4');
+                // }
               }
             } 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,
@@ -285,8 +313,36 @@ module.exports = {
               }
             }
           } else {
+            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,
+                allowed
+              } = settings;
+              const convertedVals = valArr.map(val => {
+                if (val.includes('px')) {
+                  const convertedVal = singleConvertor({
+                    value: val,
+                    changeVal: settings.replacements.px,
+                    details: {
+                      decl,
+                      filename,
+                      path: fromPath
+                    },
+                    range,
+                    allowed
+                  });
+                  return convertedVal ? convertedVal : val;
+                }
+
+                return val;
+              });
+              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/schemas/index.js

@@ -15,7 +15,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // TODO move deprecated options to separate file and manage seperately
 var _default = {
-  cliRootPath: null,
   unstableDepsInverse: {
     value: false,
     cli: 'unstable_deps_inverse'
@@ -36,6 +35,9 @@ var _default = {
       cli: 'stop_nodemon'
     }
   },
+  resourceHints: {
+    allowPrefetchingMultipleChunks: false
+  },
   i18n: {
     chunkSplitEnable: {
       value: false,
@@ -63,7 +65,39 @@ var _default = {
     // ],
     templateLabel: '{{--dir}}',
     disableMiniFiySelector: false,
-    dirVarName: 'document.dir'
+    dirVarName: 'document.dir',
+    selectorReplace: {
+      before: [],
+      after: []
+    },
+    plugins: null,
+    // @type  {Boolean | Array}
+    postCssPluginOrder: null,
+    patterns: {
+      valueReplacer: [],
+      selectorReplace: [],
+      hoverActive: [],
+      combinerMediaQuery: [],
+      hasRTL: [],
+      cssVariableReplacement: [],
+      selectorWeight: [],
+      cssUniqueness: [],
+      composeMinification: []
+    },
+    exclude: {
+      rtl: [],
+      hoverActive: [],
+      combinerMediaQuery: [],
+      cssVariableReplacement: [],
+      selectorWeight: [],
+      hasRTL: []
+    },
+    cssVariableReplacementConfig: '',
+    selectorWeightConfig: {
+      defaultSelector: '',
+      customFileDetails: '',
+      excludeStrings: []
+    }
   },
   efc: {
     hasEFC: {
@@ -92,9 +126,10 @@ var _default = {
   },
   app: {
     moduleResolvePath: {
-      value: '',
+      value: '@zohodesk/client_packages_group',
       cli: 'module_resolve_path'
     },
+    customClassNamePrefix: [],
     // this option only for impact testing
     devCssFileBountry: {
       value: '',
@@ -124,6 +159,13 @@ var _default = {
       filenames: [],
       packages: []
     },
+    customAttributes: {
+      enable: false,
+      attributes: null,
+      jsAttributes: null,
+      cssAttributes: null,
+      i18nAttributes: null
+    },
     server: {
       host: {
         value: (0, _os.hostname)(),
@@ -221,19 +263,27 @@ var _default = {
       value: true,
       cli: 'enable_smaphook'
     },
-    plugins: {
-      hasRTL: false,
-      hoverActive: false,
-      combinerMediaQuery: false,
-      cssVariableReplacement: false,
-      selectorWeight: false
+    plugins: null,
+    postCssPluginOrder: null,
+    patterns: {
+      valueReplacer: [],
+      selectorReplace: [],
+      hoverActive: [],
+      combinerMediaQuery: [],
+      hasRTL: [],
+      cssVariableReplacement: [],
+      selectorWeight: [],
+      cssUniqueness: [],
+      composeMinification: [],
+      autoPrefixer: []
     },
     exclude: {
       rtl: [],
       hoverActive: [],
       combinerMediaQuery: [],
       cssVariableReplacement: [],
-      selectorWeight: []
+      selectorWeight: [],
+      hasRTL: []
     },
     cssVariableReplacementConfig: '',
     selectorWeightConfig: {
@@ -241,6 +291,12 @@ var _default = {
       customFileDetails: '',
       excludeStrings: []
     },
+    prefixConfig: {
+      include: [],
+      exclude: [],
+      replacements: null,
+      browsers: null
+    },
     seperateCssModules: {
       value: false,
       cli: 'sep_cssmodules'
@@ -272,6 +328,7 @@ var _default = {
       inject: true
     },
     removePropTypes: false,
+    customChunksBaseConfig: null,
     customChunks: [{
       name: 'styles',
       pattern: '\\.css$'
@@ -287,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)(),
@@ -307,6 +366,7 @@ var _default = {
       hover: 'all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)',
       none: '(hover: none)'
     },
+    customClassNamePrefix: [],
     componentFolder: 'src',
     cssUniqueness: {
       value: true,
@@ -317,20 +377,36 @@ var _default = {
     disableES5Transpile: false,
     // TODO: Deprecated
     hasRTL: false,
+    enableReactLive: {
+      value: true,
+      cli: 'react_live'
+    },
+    enableMDParser: {
+      value: true,
+      cli: 'markdown_parser'
+    },
     rtlExclude: [],
-    plugins: {
-      hasRTL: false,
-      hoverActive: false,
-      combinerMediaQuery: false,
-      cssVariableReplacement: false,
-      selectorWeight: false
+    selectorReplace: null,
+    plugins: null,
+    postCssPluginOrder: null,
+    patterns: {
+      valueReplacer: [],
+      selectorReplace: [],
+      hoverActive: [],
+      combinerMediaQuery: [],
+      hasRTL: [],
+      cssVariableReplacement: [],
+      selectorWeight: [],
+      cssUniqueness: [],
+      autoPrefixer: []
     },
     exclude: {
       rtl: [],
       hoverActive: [],
       combinerMediaQuery: [],
       cssVariableReplacement: [],
-      selectorWeight: []
+      selectorWeight: [],
+      hasRTL: []
     },
     cssVariableReplacementConfig: '',
     selectorWeightConfig: {
@@ -338,6 +414,12 @@ var _default = {
       customFileDetails: '',
       excludeStrings: []
     },
+    prefixConfig: {
+      include: [],
+      exclude: [],
+      replacements: null,
+      browsers: null
+    },
     cssHashSelectors: {
       filenames: [],
       packages: []
@@ -657,6 +739,15 @@ var _default = {
       cli: 'module_mode'
     },
     disableES5Transpile: true
+  },
+  stats: {
+    enable: {
+      value: false,
+      cli: 'enable_stats'
+    },
+    fileName: null,
+    options: null,
+    excludeKeys: null
   }
 };
 exports.default = _default;