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

package/lib/plugins/variableConvertorUtils.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractVariableName = extractVariableName;
+exports.ignoreVals = void 0;
+exports.variableConverter = variableConverter;
+
+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 
+*/
+
+exports.ignoreVals = ignoreVals;
+
+function extractVariableName(val) {
+  return val.replace(/calc\((.+)\)/gi, '$1').replace(/var\((.+)\)/gi, '$1').replace('-1', '').replace('*', '').replace('\n', '').trim();
+}
+
+function isIgnoreValuePresent(ignoreVals, prop) {
+  return ignoreVals.some(ignoreVal => prop && prop.includes(ignoreVal)); // let present = false;
+  // return ignoreVals.forEach(issue => {
+  //   if (prop && prop.includes(issue)) {
+  //     present = true;
+  //   }
+  // });
+  // return present;
+}
+
+function parseCalcValue(calcValue) {
+  // Remove "calc(" and ")" from the string
+  const value = calcValue.replace(/calc\(/gi, '').replace(/\)/gi, '').trim(); // Split the string by "*" or "/"
+
+  const parts = value.split(/[\\/*]/); // Parse the first part as a number
+
+  const num1 = parts[0].trim(); // Parse the second part as a number
+
+  const num2 = parts[1].trim();
+  return {
+    valOne: num1,
+    valTwo: num2
+  };
+}
+
+function convertToCalc(pxReplacement, value) {
+  const parsedValue = parseFloat(value, 10);
+  const sign = parsedValue < 0 ? '-' : '';
+  const varName = `${parsedValue < 0 ? parsedValue * -1 : parsedValue}`;
+  return `calc( ${pxReplacement.replace('$$', varName)} * ${sign}1 )`;
+}
+
+function convertCalcValue(pxReplacement, parsedValue) {
+  Object.keys(parsedValue).forEach(key => {
+    if (pxReplacement && parsedValue[key].includes('px')) {
+      parsedValue[key] = pxReplacement.replace('$$', parsedValue[key].replace('px', ''));
+    }
+  });
+  return parsedValue;
+}
+
+function variableConverter(rootOriginal, variables, settingsObject) {
+  rootOriginal.walkRules(rule => {
+    rule.nodes.forEach((decl, index) => {
+      const prevNode = rule.nodes[index - 1];
+      const currentNode = rule.nodes[index];
+
+      if (decl.prop && decl.prop.includes('--')) {
+        if ((0, _classHandling.isThisComment)(prevNode, 'variable:ignore') // prevNode &&
+        // prevNode.type === 'comment' &&
+        // prevNode.text.toLowerCase() === 'variable:ignore'
+        ) {
+          return;
+        }
+
+        if (isIgnoreValuePresent(ignoreVals, decl.prop)) {
+          return;
+        }
+
+        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]) {
+            variables[decl.prop] = 'default';
+          }
+
+          const pxReplacement = settingsObject[variables[decl.prop]].replacements.px;
+          let valArr = decl.value.split(' ');
+          valArr = valArr.filter(x => x.trim() !== '');
+          valArr = valArr.map(x => x.replace(/\r|\t|\n/gi, '')); // single values are considered in the above array and converted below
+
+          valArr.forEach((value, index) => {
+            if (value.includes('px')) {
+              if (value.includes('calc')) {
+                const res = convertCalcValue(pxReplacement, parseCalcValue(value));
+                valArr[index] = `calc( ${res.valOne.trim()} * ${res.valTwo.trim()} )`;
+                return;
+              }
+
+              if (/-(\d+)/gi.test(value)) {
+                valArr[index] = convertToCalc(pxReplacement, value);
+                return;
+              }
+
+              const num = value.replace('px', '');
+
+              if (value) {
+                valArr[index] = pxReplacement.replace('$$', num);
+              }
+            }
+
+            if (value.includes('px')) {
+              const num = value.replace('px', '');
+              valArr[index] = pxReplacement.replace('$$', num);
+            }
+          });
+          currentNode.value = valArr.join(' ');
+        }
+      }
+    });
+  });
+  return rootOriginal;
+}

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

@@ -0,0 +1,8 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = _postcss.default.plugin('postcss-empty', () => (root, result) => {// console.log(root.source.input.from, result);
+});

package/lib/postcss-plugins/ExcludePlugin.js

@@ -10,7 +10,7 @@ module.exports = _postcss.default.plugin('postcss-exclude-files', opts => {
   } = opts;
   return (root, result) => {
     const inputFile = root.source.input.file;
-    let isIgnoredFile = opts.ignore.some(file => inputFile.indexOf(file) !== -1);
+    const isIgnoredFile = opts.ignore.some(file => inputFile.indexOf(file) !== -1);
 
     if (!isIgnoredFile) {
       const handler = response => response.messages.forEach(msg => result.messages.push(msg));

package/lib/postcss-plugins/IncludePlugin.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = _postcss.default.plugin('postcss-include-files', opts => {
+  const {
+    plugins
+  } = opts;
+  return (root, result) => {
+    const inputFile = root.source.input.file;
+    const includeFile = opts.include.some(file => inputFile.indexOf(file) !== -1);
+
+    if (includeFile) {
+      const handler = response => response.messages.forEach(msg => result.messages.push(msg));
+
+      return (0, _postcss.default)(plugins).process(root, {
+        from: undefined
+      }).then(handler);
+    }
+  };
+});

package/lib/postcss-plugins/RTLSplitPlugin.js

@@ -18,7 +18,6 @@ const oppositeDir = {
 };
 
 function compareSelector(selector1, selector2) {
-  // console.log({ selector1, selector2 }, selector1 === selector2);
   return selector1 === selector2;
 }
 
@@ -38,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
  */
 
 
@@ -57,16 +56,15 @@ 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
  */
 
 
 function removeIfOppsiteDirRule(rule, direction, rootOptions) {
-  // console.log({ rule, type: rule.type });
   const selectors = rule.selector.split(/\s*,\s*/); // NOTE: if we use opposite dir selector as custom override reason,
   //  and compain normal selector with it, In this  case
   //  we just a have to remove that selector only not full rule
@@ -87,11 +85,10 @@ function removeIfOppsiteDirRule(rule, direction, rootOptions) {
 }
 
 function removeIfOppsiteDirKeyframe(rule, direction) {
-  let name = rule.params;
-  let keyFrameDirName = name.slice(name.lastIndexOf('-') + 1);
+  const name = rule.params;
+  const keyFrameDirName = name.slice(name.lastIndexOf('-') + 1);
 
   if (keyFrameDirName === oppositeDir[direction]) {
-    // console.log({ m: 'removed', keyFrameName: rule.params });
     rule.remove();
   }
 }
@@ -109,12 +106,10 @@ function separateSingleDir(root, direction, rootOptions) {
 
 function separateRtlAndLtr(css, rootOptions) {
   // let processor = postcss([]).process(css);
-  let root = postcss.parse(css); // let { root } = processor;
-  // console.log(processor, root);
+  const root = postcss.parse(css); // let { root } = processor;
   // NOTE: I did first rtl then ltr , Because  for ltr I use original root ref
 
-  const rtlRoot = separateSingleDir(root.clone(), 'rtl', rootOptions); // console.log('############################');
-
+  const rtlRoot = separateSingleDir(root.clone(), 'rtl', rootOptions);
   const ltrRoot = separateSingleDir(root, 'ltr', rootOptions);
   return {
     ltrRoot,
@@ -132,7 +127,6 @@ function separateRtlAndLtr(css, rootOptions) {
 //     // root.append(postcss.comment({ text: 'comment' }));
 //     root.append(postcss.comment({ text: 'this  is  spliting part ' }));
 //     root.append(rtlRoot);
-//     //console.log({root, roots:root+""}, root+"")
 //     // Transform CSS AST here
 //   }
 // );

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

@@ -4,43 +4,22 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// module.exports = postcss.plugin('postcss-value-replacer', opts => {
-//   const { plugins } = opts;
-//   return (root, result) => {
-//     const inputFile = root.source.input.file;
-//     let isIgnoredFile= opts.ignore.some(file => inputFile.indexOf(file)!==-1);
-//     if (!isIgnoredFile) {
-//       const handler = response =>
-//         response.messages.forEach(msg => result.messages.push(msg));
-//       return postcss(plugins)
-//         .process(root, { from: undefined })
-//         .then(handler);
-//     }
-//   };
-// });
-// export default 
 module.exports = _postcss.default.plugin('postcss-value-replacer', (valueReplacer = {}) => // Work with options here
 root => {
   root.walkDecls(decl => {
     valueReplacer.forEach(obj => {
       if (obj.props.indexOf(decl.prop) !== -1) {
-        let ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
+        const ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
         ks.forEach(k => {
-          decl.value = decl.value.replace(k, obj.values[k]);
+          // if (/^\^.*\$$/gi.test(k)) {
+          if (k.startsWith('^') && k.endsWith('$')) {
+            decl.value = decl.value.replace(new RegExp(k), obj.values[k]);
+          } else {
+            decl.value = decl.value.replace(k, obj.values[k]);
+          }
         }); //decl.value = obj.values[decl.value];
       }
     }); //console.log({root, roots:root+""}, root+"")
     // Transform CSS AST here
-  }); // root.walkDecls(decl => {
-  //   valueReplacer.forEach(obj => {
-  //     if (
-  //       obj.props.indexOf(decl.prop) !== -1 &&
-  //       obj.values[decl.value] !== undefined
-  //     ) {
-  //       decl.value = obj.values[decl.value];
-  //     }
-  //   });
-  //   //console.log({root, roots:root+""}, root+"")
-  //   // Transform CSS AST here
-  // });
+  });
 });

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
+  }
+  
 }