@zohodesk/react-cli 1.1.27 → 1.1.28-exp.1

package/packages/client_build_tool/lib/shared/postcss/custom_postcss_plugins/HoverActivePlugin/specialCases.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hackForComposes = hackForComposes;
+exports.removeRuleIfNoNormalSelectors = removeRuleIfNoNormalSelectors;
+
+var _insertBefore = require("./insertBefore");
+
+var _replaceUtils = require("./replaceUtils");
+
+function hackForComposes(rule, hoveredSelectors, params) {
+  const {
+    Rule
+  } = params;
+
+  if (hoveredSelectors.length === 0) {
+    return;
+  } // NOTE: we create Empty Rule with hovered selectors that :hover removed from hover selector
+  // Reason: when composes looking for selector it most be at least empty rule other wise composes will throw error.
+
+
+  (0, _insertBefore.insertBefore)(rule, new Rule({
+    selector: hoveredSelectors.map(_replaceUtils.removeHoverFromSelector).join(',')
+  }));
+}
+/**
+ * NOTE: this function will remove rule if the rule has no normal selectors.
+ * @param {Rule} rule
+ * @returns
+ */
+
+
+function removeRuleIfNoNormalSelectors(normalSelectors, rule) {
+  if (normalSelectors.length) {
+    // NOTE: removed hovered selectors
+    // eslint-disable-next-line no-param-reassign
+    rule.selector = normalSelectors.join(',');
+  } else {
+    rule.remove();
+  }
+}

package/packages/client_build_tool/lib/shared/postcss/custom_postcss_plugins/HoverActivePlugin/typeCheckUtils.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isAtRule = isAtRule;
+exports.isAtRuleContainsParam = isAtRuleContainsParam;
+exports.isComment = isComment;
+exports.isMediaQuery = isMediaQuery;
+exports.isParentAtRule = isParentAtRule;
+exports.isParentAtRuleContainsParam = isParentAtRuleContainsParam;
+exports.isRule = isRule;
+exports.isRuleNotInsideAtRule = isRuleNotInsideAtRule;
+exports.isSelectorHasHover = isSelectorHasHover;
+
+var _constants = require("./constants");
+
+function isComment(node) {
+  return node.type === 'comment';
+}
+
+function isRule(node) {
+  return node.type === 'rule';
+}
+
+function isMediaQuery(node) {
+  return node.name === 'media';
+}
+
+function isAtRule(node) {
+  return node.type === 'atrule';
+}
+
+function isAtRuleContainsParam(atRule, content) {
+  return atRule.params.includes(content);
+}
+
+function isParentAtRuleContainsParam(rule, content) {
+  return isAtRuleContainsParam(rule.parent, content);
+}
+
+function isParentAtRule(rule) {
+  return isAtRule(rule.parent);
+}
+
+function isRuleNotInsideAtRule(node) {
+  return isRule(node) && node && !isAtRule(node.parent);
+}
+
+function isSelectorHasHover(selector) {
+  return selector.indexOf(_constants.HOVER_NOTATION) !== -1;
+}

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

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.separateRtlAndLtr = separateRtlAndLtr;
+exports.separateSingleDir = separateSingleDir;
+
+var postcss = _interopRequireWildcard(require("postcss"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable no-param-reassign */
+const oppositeDir = {
+  ltr: 'rtl',
+  rtl: 'ltr'
+};
+
+function compareSelector(selector1, selector2) {
+  // console.log({ selector1, selector2 }, selector1 === selector2);
+  return selector1 === selector2;
+}
+
+const directionRegexs = {
+  ltr: /\[dir=ltr\]/,
+  rtl: /\[dir=rtl\]/
+};
+
+const getRegex = dir => directionRegexs[dir];
+
+const getOppositeRegex = dir => getRegex(oppositeDir[dir]);
+
+function selectorMinifySameDir(selector, direction) {
+  // NOTE: if this rule is same dir as current need
+  //  then we can just remove that [dir=ltr] or [dir=rtl]
+  //  it just for minimaze selector
+  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
+ */
+
+
+function mergeIfSameSelector(rule) {
+  // NOTE: to merge dublicate selector rules
+  const prev = rule.prev();
+
+  if (prev && compareSelector(prev.selector, rule.selector)) {
+    rule.each(decl => {
+      prev.append(decl);
+    });
+    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
+ */
+
+
+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
+
+  const oppositeDirRegex = getOppositeRegex(direction);
+  let remainingSelectors = selectors.filter(selector => !oppositeDirRegex.test(selector));
+
+  if (!rootOptions.disableMinifySelector) {
+    remainingSelectors = remainingSelectors.map(selector => selectorMinifySameDir(selector, direction));
+  }
+
+  if (remainingSelectors.length) {
+    rule.selector = remainingSelectors.join(', ');
+  } else {
+    // NOTE: every selector is opposite dir then we have to remove  the rule
+    rule.remove();
+  }
+}
+
+function removeIfOppsiteDirKeyframe(rule, direction) {
+  const name = rule.params;
+  const keyFrameDirName = name.slice(name.lastIndexOf('-') + 1);
+
+  if (keyFrameDirName === oppositeDir[direction]) {
+    // console.log({ m: 'removed', keyFrameName: rule.params });
+    rule.remove();
+  }
+}
+
+function separateSingleDir(root, direction, rootOptions) {
+  root.walkRules(rule => {
+    removeIfOppsiteDirRule(rule, direction, rootOptions);
+    mergeIfSameSelector(rule);
+  });
+  root.walkAtRules(rule => {
+    removeIfOppsiteDirKeyframe(rule, direction);
+  });
+  return root;
+}
+
+function separateRtlAndLtr(css, rootOptions) {
+  // let processor = postcss([]).process(css);
+  const root = postcss.parse(css); // let { root } = processor;
+  // console.log(processor, root);
+  // 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 ltrRoot = separateSingleDir(root, 'ltr', rootOptions);
+  return {
+    ltrRoot,
+    rtlRoot,
+    ltr: ltrRoot.toString(),
+    rtl: rtlRoot.toString()
+  };
+} // NOTE: to test in https://astexplorer.net/
+// you can test with sample input https://astexplorer.net/#/gist/a892a509eb585099355ef53ef094f836/1ca70d5f7af3b88ca4910296e12f118e9712c874
+// export default postcss.plugin('postcss-rtl-remove', (options = {}) =>
+//   // Work with options here
+//   root => {
+//     const rtlRoot = separateSingleDir(root.clone(), 'rtl');
+//     const ltrRoot = separateSingleDir(root, 'ltr');
+//     // 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/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;