@zohodesk/react-cli 1.1.14-kubernetes → 1.1.15

package/lib/plugins/utils/fileHandling.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFileNameMatchingPattern = isFileNameMatchingPattern;
+exports.isFileNameMatchingPluginPattern = isFileNameMatchingPluginPattern;
+
+var _ignore = _interopRequireDefault(require("ignore"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const path = require('path');
+
+const aliasNames = {
+  valueReplacer: 'postcss-value-replacer',
+  selectorReplace: 'postcss-selector-replace-new',
+  hasRTL: 'postcss-rtl',
+  combinerMediaQuery: 'postcss-combine-media-query',
+  hoverActive: 'postcss-mobile-hover',
+  cssVariableReplacement: 'postcss-variable-report',
+  composeMinification: 'postcss-compose-plugin'
+};
+/*
+
+unique scenario
+
+*/
+// export function filterFileCssUniqueness(filename, filterObj) {
+//   let rootDir = 'supportapp';
+//   let include = false;
+//   const regex = `^(.+?)${rootDir}?\\\\`;
+//   const newFilename = windowsModificationFile(filename).replace(
+//     new RegExp(regex, 'gi'),
+//     ''
+//   );
+//   Object.keys(filterObj).forEach(key => {
+//     const ig = ignore().add(filterObj[key]);
+//     if (ig.ignores(newFilename)) {
+//       include = true;
+//     }
+//   });
+//   return include;
+// }
+
+function isFileNameMatchingPattern({
+  filename,
+  filterObject,
+  plugins,
+  order
+}) {
+  const pluginObj = {};
+  plugins.forEach(p => {
+    pluginObj[p.postcssPlugin] = p;
+  });
+  const finalPlugins = order.filter(key => {
+    const pluginSpecificFilter = filterObject[key];
+
+    if (!pluginSpecificFilter || pluginSpecificFilter.length === 0) {
+      return true;
+    } // eslint-disable-next-line no-use-before-define
+
+
+    const isMatching = isFilePathMatchingPattern(filename, pluginSpecificFilter);
+    return isMatching;
+  }).map(key => {
+    const p = pluginObj[aliasNames[key]];
+    return p;
+  }); // if unknown key given in plugins and pattern loop will run but post-css plugin won't be available and will be undefined in array
+  // So we do filter as safety measure.
+
+  return finalPlugins.filter(Boolean);
+}
+
+function isFilePathMatchingPattern(filePath, patterns) {
+  if (patterns.length === 0) {
+    return true;
+  }
+
+  const ig = (0, _ignore.default)({
+    allowRelativePaths: true
+  }).add(patterns);
+  return ig.ignores(filePath);
+}
+
+function isFileNameMatchingPluginPattern({
+  filename,
+  filterArr
+}) {
+  const newFilename = path.relative(path.parse(process.cwd()).base, filename);
+  return isFilePathMatchingPattern(newFilename, filterArr);
+}

package/lib/plugins/utils/tests/fileHandling.test.js

@@ -0,0 +1,30 @@
+"use strict";
+
+const ignore = require('ignore');
+
+const ignoreArr1 = ['src', '!src\\components', 'src\\Accessibility'];
+const ignoreArr2 = ['src\\', '!node_modules\\'];
+const ignoreArr3 = ['*'];
+
+const {
+  windowsModificationFile
+} = require('../../../../lib/loaderUtils/windowsModification');
+
+const files = ['D:\\MyWork\\React Build\\desk_client_app\\jsapps\\supportapp\\src\\components\\Accessibility\\Accessibility.module.css', 'D:\\MyWork\\React Build\\desk_client_app\\jsapps\\supportapp\\src\\components\\Avatar\\Avatar.module.css', 'D:/MyWork/React Build/desk_client_app/jsapps/supportapp/src/components/Accessibility/Accessibility.module.css', 'D:/MyWork/React Build/desk_client_app/jsapps/supportapp/src/components/Accessibility/AccessibilityNavigation.module.css', 'desk_client_app\\jsapps\\supportapp\\src\\components\\Test.module.css', 'desk_client_app\\jsapps\\supportapp\\src\\components\\Accessibility\\Accessibility.module.css', 'desk_client_app/jsapps/supportapp/src/components/Accessibility/Accessibility.module.css', 'src\\components\\Accessibility\\Accessibility.module.css', 'src/components/Accessibility/Accessibility.module.css', 'Accessibility.module.css', ''];
+const ignore1 = ignore().add(ignoreArr1);
+const ignore2 = ignore().add(ignoreArr2);
+const ignore3 = ignore().add(ignoreArr3);
+files.forEach(file => {
+  // console.log(file);
+  const rootDir = 'supportapp';
+  const regex = `^(.+?)${rootDir}?\\\\`;
+  const newFilename = windowsModificationFile(file).replace(new RegExp(regex, 'gi'), '');
+  console.log(newFilename);
+
+  if (newFilename.trim() !== '') {
+    console.log(ignore1.ignores(newFilename));
+    console.log(ignore2.ignores(newFilename));
+    console.log(ignore3.ignores(newFilename));
+    console.log('--------------------------------------------------------------------');
+  }
+});

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/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;
 }
 
@@ -66,7 +65,6 @@ function mergeIfSameSelector(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__/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

@@ -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);
     }
   }