@zohodesk/react-cli 1.1.11-exp.3 → 1.1.11-exp.4

package/packages/client_build_tool/lib/shared/postcss/custom_postcss_plugins/SelectorReplace.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/* eslint-disable no-param-reassign */
+var _default = (opts = {}) => {
+  // eslint-disable-next-line no-use-before-define
+  validator(opts);
+  const {
+    before,
+    after
+  } = opts;
+  return {
+    postcssPlugin: 'postcss-selector-replace',
+
+    Once(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);
+          }
+        });
+      });
+    }
+
+  };
+};
+
+exports.default = _default;
+
+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`);
+    }
+  });
+}

package/packages/client_build_tool/lib/shared/postcss/custom_postcss_plugins/ValueReplacer.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const diffBasedOnStrLength = (a, b) => b.length - a.length;
+/**
+ * @param {Array} valueReplacer 
+ * [
+      {
+        "props": ["color", "background-color"],
+        "values" : {
+          "zd-": "im-"
+        }
+      }
+    ]
+ */
+
+
+const PostcssValueReplacer = (valueReplacer = []) => {
+  const options = {};
+  valueReplacer.forEach(obj => {
+    obj.props.forEach(prop => {
+      const valueKeys = Object.keys(obj.values);
+      const propOptions = options[prop];
+
+      if (options[prop]) {
+        valueKeys.forEach(k => {
+          propOptions.values[k] = obj.values[k];
+        });
+        propOptions.sortedKeys = propOptions.values.sort(diffBasedOnStrLength);
+      } else {
+        options[prop] = {
+          sortedKeys: valueKeys.sort(diffBasedOnStrLength),
+          values: obj.values
+        };
+      }
+    });
+  }); // Work with options here
+
+  return {
+    postcssPlugin: 'postcss-value-replacer',
+    Declaration: decl => {
+      const propOptions = options[decl.prop];
+      propOptions?.sortedKeys.forEach(k => {
+        // eslint-disable-next-line no-param-reassign
+        decl.value = decl.value.replaceAll(k, propOptions.values[k]);
+      });
+    }
+  };
+};
+
+PostcssValueReplacer.postcss = true;
+var _default = PostcssValueReplacer;
+exports.default = _default;

package/packages/client_build_tool/lib/shared/postcss/custom_postcss_plugins/VariableModificationPlugin/index.js

@@ -0,0 +1,343 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _path = _interopRequireDefault(require("path"));
+
+var _ErrorHandler = require("../../../bundler/webpack/custom_plugins/VariableConversionCollector/ErrorHandler");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const convertableProps = {
+  'font-size': true,
+  margin: true,
+  'margin-left': true,
+  'margin-right': true,
+  'margin-top': true,
+  'margin-bottom': true,
+  padding: true,
+  'padding-top': true,
+  'padding-bottom': true,
+  'padding-left': true,
+  'padding-right': true,
+  width: true,
+  'min-width': true,
+  'max-width': true,
+  height: true,
+  'min-height': true,
+  'max-height': true,
+  top: true,
+  bottom: true,
+  left: true,
+  right: true,
+  'text-indent': true,
+  clip: true,
+  'flex-basis': true,
+  'row-gap': true,
+  gap: true,
+  'column-gap': true,
+  flex: true
+};
+const constantValues = {
+  inherit: true,
+  initial: true,
+  auto: true,
+  'fit-content': true,
+  unset: true,
+  cover: true,
+  contain: true,
+  top: true,
+  bottom: true,
+  left: true,
+  center: true,
+  right: true
+};
+
+function getNumericValue(value) {
+  if (value.includes('var')) {
+    return parseInt(value.replace(/var\(--zd_size(\d+)\)/gi, '$1').replace(/var\(--zd_font_size(\d+)\)/gi, '$1'));
+  }
+
+  if (value.includes('rect')) {
+    return parseInt(value.replace('rect(', '').replace(')', '').replace(',', ''));
+  } // Not need for this dum loop
+  // allowed.forEach(alwdUnit => {
+  //   if (value.includes(alwdUnit)) {
+  //     return parseInt(value);
+  //   }
+  // });
+
+
+  if (constantValues[value.toLowerCase()]) {
+    return 1;
+  }
+
+  return parseInt(value);
+}
+
+function pxToCalc(value) {
+  const arr = value.split(' ');
+  arr.forEach((val, index) => {
+    ['px'].forEach(unit => {
+      const valWithUnit = new RegExp(`(\\d+)${unit}`, 'gi');
+
+      if (valWithUnit.test(val)) {
+        arr[index] = val.replace(valWithUnit, '(var(--zd_size$1))');
+      }
+    });
+  });
+  return arr.join(' ');
+}
+
+const singleConvertor = (value, changeVal, details, range) => {
+  const {
+    path,
+    filename,
+    decl
+  } = details;
+
+  if (decl.prop === 'background-position') {
+    if (isNaN(parseInt(value))) {
+      // console.log(`${value} skipped`);
+      return;
+    }
+  }
+
+  if (getNumericValue(value) >= range.start && getNumericValue(value) <= range.end || getNumericValue(value) === 0) {
+    let retVal = value.replace(/(\d+)px/gi, changeVal.replace('$$', '$1'));
+
+    if (/^-var/.test(retVal)) {
+      retVal = `calc( ${retVal.substring(1)} * -1 )`;
+    }
+
+    return retVal;
+  } // if (!value.includes('rect')) {
+  // if(unitErrorVal && unitErrorVal != '0' ){
+  // console.log(value, 'not within range')
+
+
+  const errObj = {
+    decl,
+    type: 'RANGE_ERROR',
+    filename,
+    message: `value (${value}) (${typeof value}) not within range (${range.start},${range.end})\r`,
+    path
+  };
+
+  _ErrorHandler.errHandler.errorTable.push(errObj);
+
+  _ErrorHandler.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);
+  // }
+
+};
+
+var _default = ({
+  configFile
+}) => {
+  const rawdata = _fs.default.readFileSync(configFile);
+
+  const data = JSON.parse(rawdata);
+  const {
+    errorsAllowed,
+    settings: settingsObject // errorLog: errorLogStatus,
+    // errorInConsole: errorConsoleStatus
+
+  } = data; // const keys = Object.keys(settingsObject);
+
+  _ErrorHandler.errHandler.setAllowedErrs(errorsAllowed);
+
+  const replacementArray = [];
+  Object.keys(settingsObject).forEach(key => {
+    Object.values(settingsObject[key].replacements).forEach(val => {
+      if (!replacementArray.includes(val)) {
+        replacementArray.push(val);
+      }
+    });
+  });
+  let regValStr = '';
+  replacementArray.forEach((val, index) => {
+    if (index !== replacementArray.length - 1) {
+      regValStr += `${val.replace('$$', '\\d+').replace('(', '\\(').replace(')', '\\)')}|`;
+    } else {
+      regValStr += `${val.replace('$$', '\\d+').replace('(', '\\(').replace(')', '\\)')}`;
+    }
+  });
+  const valRegex = new RegExp(regValStr, 'gi');
+  return {
+    postcssPlugin: 'postcss-variable-report',
+    Once: rootOriginal => {
+      rootOriginal.walkRules(rule => {
+        // rule.nodes[-1] = {}
+        // need map, forEach fine less memory
+        rule.nodes.forEach((decl, position) => {
+          // case font-size
+          const commentStr = 'variable:ignore';
+          const prevNode = rule.nodes[position - 1];
+          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.default.sep).pop(); // if(filename.includes('AddFormResponsive.module.css'){
+          // }
+
+          if (prevNode && prevNode.type === 'comment' && prevNode.text.toLowerCase().includes(commentStr)) {
+            const errObj = {
+              decl,
+              type: 'DECLARATION_IGNORED',
+              filename,
+              message: 'Declaration Ignored',
+              path: fromPath
+            };
+
+            _ErrorHandler.errHandler.errorTable.push(errObj);
+
+            _ErrorHandler.errHandler.DECLARATION_IGNORED(errObj);
+
+            return;
+          }
+
+          if (settingsObject[decl.prop] && !decl.value.includes('var(--')) {
+            const settings = settingsObject[decl.prop]; // console.log(settings)
+
+            const {
+              allowed,
+              range
+            } = settings; // suggestion filter  !decl.value.includes('calc')
+            // Reason below some of logic happen based on this
+
+            const unit = decl.value.toString() // no need round braket since you do not need group for less memory
+            .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);
+
+            unit.forEach((val, index) => {
+              allowed.forEach(alwdVal => {
+                if (val.includes(alwdVal)) {
+                  // ## for what purpose
+                  unit[index] = val // .replace(new RegExp('(\\d+).(\\d+)(\\w+)', 'gi'), '$3')
+                  .replace(`-${alwdVal}`, `${alwdVal}`).replace(`-.${alwdVal}`, `${alwdVal}`).replace(`${alwdVal},`, `${alwdVal}`);
+                }
+              });
+            });
+            let unitError = false;
+            let unitErrorVal = '';
+            unit.forEach(val => {
+              if (!val.includes('calc') && decl.prop !== 'clip') {
+                if (!allowed.includes(val.toString())) {
+                  unitError = true;
+                  unitErrorVal = val;
+                }
+              }
+            }); // console.log(allowed, replacements, range)
+
+            if (!unitError) {
+              // use variable decl.value.split(' ')
+              if (range) {
+                // console.log('multiple :', decl.value)
+                let newVal = '';
+                decl.value.split(' ').forEach(singleVal => {
+                  newVal += `${singleConvertor(singleVal, settings.replacements.px, {
+                    decl,
+                    filename,
+                    path: fromPath
+                  }, range)} `;
+                });
+                decl.value = newVal;
+              }
+            } 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`);
+              const errObj = {
+                decl,
+                filename,
+                unitErrorVal,
+                path: fromPath
+              };
+
+              if (unitErrorVal.trim() === '.') {
+                errObj.type = 'DECIMAL_CHECK';
+                errObj.message = `${unitErrorVal} (Decimal Value) Please check`;
+
+                _ErrorHandler.errHandler.errorTable.push(errObj);
+
+                _ErrorHandler.errHandler.DECIMAL_CHECK(errObj);
+              } else if (unitErrorVal.includes('.') && !unitErrorVal.includes('%')) {
+                errObj.type = 'DECIMAL_REJECT';
+                errObj.message = `${unitErrorVal} (Decimal Value) Not Allowed \r`;
+
+                _ErrorHandler.errHandler.errorTable.push(errObj);
+
+                _ErrorHandler.errHandler.DECIMAL_REJECT(errObj);
+              } else if (!unitErrorVal.includes('%')) {
+                errObj.type = 'UNIT_ERROR';
+                errObj.message = `${unitErrorVal} (Unit) Not Allowed`;
+
+                _ErrorHandler.errHandler.errorTable.push(errObj);
+
+                _ErrorHandler.errHandler.UNIT_ERROR(errObj);
+              }
+            } else {
+              decl.value = pxToCalc(decl.value);
+            }
+          } 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
+              } = settings;
+              const convertedVals = valArr.map(val => {
+                if (val.includes('px')) {
+                  const convertedVal = singleConvertor(val, settings.replacements.px, {
+                    decl,
+                    filename,
+                    path: fromPath
+                  }, range);
+                  return 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')) {
+              const errObj = {
+                decl,
+                type: 'VARIABLE_PRESENT',
+                filename,
+                message: `value (${decl.value}) has var in it, kindly check`,
+                path: fromPath
+              };
+
+              _ErrorHandler.errHandler.errorTable.push(errObj);
+
+              _ErrorHandler.errHandler.VARIABLE_PRESENT(errObj);
+            }
+          }
+        });
+      });
+    }
+  };
+};
+
+exports.default = _default;

package/packages/client_build_tool/lib/shared/postcss/filterPluginsAllowedForSpecficFile.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filterCustomPluginsAllowedForSpecificFile = filterCustomPluginsAllowedForSpecificFile;
+exports.filterPluginsAllowedForSpecificFile = filterPluginsAllowedForSpecificFile;
+exports.getEnabledPlugins = getEnabledPlugins;
+exports.mapDefaultSupportedPlugins = mapDefaultSupportedPlugins;
+
+var _checkIsPatternsMatchFilename = require("../bundler/webpack/loaderConfigs/checkIsPatternsMatchFilename");
+
+var _getSpecificPostCssPlugin = require("./getSpecificPostCssPlugin");
+
+/* eslint-disable no-use-before-define */
+function mapDefaultSupportedPlugins(pluginsOptions) {
+  return _getSpecificPostCssPlugin.supportedPluginsOptionNames.map(pluginName => ({ ...pluginsOptions[pluginName],
+    pluginName
+  }));
+}
+
+function getEnabledPlugins(pluginsOptions) {
+  function isEnabled(pluginName) {
+    return pluginsOptions[pluginName].enable;
+  }
+
+  return _getSpecificPostCssPlugin.supportedPluginsOptionNames.filter(isEnabled).map(pluginName => ({ ...pluginsOptions[pluginName],
+    pluginName
+  }));
+}
+
+function filterPluginsAllowedForSpecificFile(plugins, filename) {
+  return plugins.filter(pluginOption => checkIsPluginAllowed(pluginOption, filename)).map(pluginOption => (0, _getSpecificPostCssPlugin.getSpecificPostCssPlugin)(pluginOption)).filter(Boolean);
+}
+
+function checkIsPluginAllowed(pluginOption, filename) {
+  return (0, _checkIsPatternsMatchFilename.checkIsPatternsMatchFilename)(pluginOption.patterns, filename);
+}
+
+function getCustomPlugins(pluginOption) {
+  if (typeof pluginOption.plugin === 'string') {
+    // eslint-disable-next-line import/no-dynamic-require, global-require
+    return require(pluginOption.plugin).plugin(pluginOption);
+  }
+
+  if (typeof pluginOption.plugin === 'function') {
+    return pluginOption.plugin(pluginOption);
+  }
+
+  return null;
+}
+
+function filterCustomPluginsAllowedForSpecificFile(customPlugins, filename) {
+  return customPlugins.filter(pluginOption => checkIsPluginAllowed(pluginOption, filename)).map(getCustomPlugins).filter(Boolean);
+}

package/packages/client_build_tool/lib/shared/postcss/getAllowedPostCssPlugins.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAllowedPostCssPlugins = getAllowedPostCssPlugins;
+exports.postcssPluginGetter = postcssPluginGetter;
+
+var _filterPluginsAllowedForSpecficFile = require("./filterPluginsAllowedForSpecficFile");
+
+function getAllowedPostCssPlugins(filename, enabledPlugins, enabledCustomPlugins) {
+  const neededPostCssPlugins = (0, _filterPluginsAllowedForSpecficFile.filterPluginsAllowedForSpecificFile)(enabledPlugins, filename);
+  const neededCustomPlugins = (0, _filterPluginsAllowedForSpecficFile.filterCustomPluginsAllowedForSpecificFile)(enabledCustomPlugins, filename);
+  return {
+    plugins: [...neededPostCssPlugins, ...neededCustomPlugins]
+  };
+}
+
+function postcssPluginGetter(options) {
+  const pluginsOptions = options.css.plugins;
+  const {
+    customPlugins = []
+  } = options.css;
+  const enabledPlugins = (0, _filterPluginsAllowedForSpecficFile.getEnabledPlugins)(pluginsOptions);
+  const enabledCustomPlugins = customPlugins.filter(conf => conf.enable);
+  return filename => {
+    const allowedPostCssPlugins = getAllowedPostCssPlugins(filename, enabledPlugins, enabledCustomPlugins);
+    return allowedPostCssPlugins;
+  };
+}

package/packages/client_build_tool/lib/shared/postcss/getSpecificPostCssPlugin.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configPostCssRtl = configPostCssRtl;
+exports.getSpecificPostCssPlugin = getSpecificPostCssPlugin;
+exports.supportedPluginsOptionNames = void 0;
+
+var _fs = require("fs");
+
+var _postcssRtl = _interopRequireDefault(require("postcss-rtl"));
+
+var _SelectorReplace = _interopRequireDefault(require("./custom_postcss_plugins/SelectorReplace"));
+
+var _ValueReplacer = _interopRequireDefault(require("./custom_postcss_plugins/ValueReplacer"));
+
+var _HoverActivePlugin = _interopRequireDefault(require("./custom_postcss_plugins/HoverActivePlugin"));
+
+var _VariableModificationPlugin = _interopRequireDefault(require("./custom_postcss_plugins/VariableModificationPlugin"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-use-before-define */
+function getSpecificPostCssPlugin(pluginOption) {
+  return postcssPluginMapper[pluginOption.pluginName]?.(pluginOption);
+} // eslint-disable-next-line no-unused-vars
+
+
+function configPostCssRtl(pluginOption) {
+  return (0, _postcssRtl.default)({
+    addPrefixToSelector: function addPrefixToSelector(selector, prefix) {
+      if (prefix === '[dir]') {
+        return selector;
+      }
+
+      return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
+    }
+  });
+} // NOTE: we have keeping array because we need to maintain order (Just In Cases For Future)
+
+
+const supportedPluginsOptionNames = ['rtl', 'valueReplacer', 'selectorReplace', 'hoverActive', 'cssVariableReplacement'];
+exports.supportedPluginsOptionNames = supportedPluginsOptionNames;
+const postcssPluginMapper = {
+  rtl: configPostCssRtl,
+  selectorReplace: pluginOption => (0, _SelectorReplace.default)(pluginOption),
+  valueReplacer: pluginOption => (0, _ValueReplacer.default)(pluginOption.config),
+  hoverActive: pluginOption => (0, _HoverActivePlugin.default)(pluginOption),
+  cssVariableReplacement: configCssVariableReplacement
+};
+
+function configCssVariableReplacement(pluginOption) {
+  const {
+    configFile
+  } = pluginOption;
+  return configFile && (0, _fs.existsSync)(configFile) && (0, _VariableModificationPlugin.default)(pluginOption);
+}

package/packages/client_build_tool/lib/shared/postcss/runPostCssForCssFile.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.runPostCssForCssFile = runPostCssForCssFile;
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _fs = require("fs");
+
+var _getAllowedPostCssPlugins = require("./getAllowedPostCssPlugins");
+
+var _copyFile = require("../fileUtils/copyFile");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function runPostCssForCssFile({
+  filename,
+  outputFile,
+  options
+}) {
+  const getAllowedPostCssPlugins = (0, _getAllowedPostCssPlugins.postcssPluginGetter)(options);
+  const allowedPostCssPlugins = getAllowedPostCssPlugins(filename);
+
+  if (allowedPostCssPlugins.length === 0) {
+    return;
+  }
+
+  const css = (0, _fs.readFileSync)(filename).toString();
+  (0, _postcss.default)(allowedPostCssPlugins).process(css, {
+    from: filename,
+    to: outputFile
+  }).then(result => {
+    (0, _copyFile.writeFile)(outputFile, result.css);
+  });
+}