@zohodesk/client_build_tool 0.0.1

package/lib/shared/postcss/custom_postcss_plugins/HoverActivePlugin/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HOVER_NOTATION = void 0;
+
+/* eslint-disable no-use-before-define */
+const HOVER_NOTATION = ':hover';
+exports.HOVER_NOTATION = HOVER_NOTATION;

package/lib/shared/postcss/custom_postcss_plugins/HoverActivePlugin/handleIgnores.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleIgnores = handleIgnores;
+
+var _typeCheckUtils = require("./typeCheckUtils");
+
+const hoverIgnoreQuery = 'Hover:ignore';
+const activeIgnoreQuery = 'Active:ignore';
+const hoverActiveIgnoreQuery = 'HoverActive:ignore';
+
+function handleIgnore() {
+  let isIgnored = false;
+  return {
+    isIgnored: () => isIgnored,
+    update: isGoingTobeIgnored => {
+      isIgnored = isGoingTobeIgnored;
+    },
+    reset: () => {
+      isIgnored = false;
+    }
+  };
+} // eslint-disable-next-line no-unused-vars
+
+
+function handleIgnores(options) {
+  const hoverHandler = handleIgnore();
+  const activeHandler = handleIgnore();
+
+  function generateReturnValue() {
+    return {
+      hoverIgnored: hoverHandler.isIgnored(),
+      activeIgnored: activeHandler.isIgnored()
+    };
+  }
+
+  const ignoreCommentMap = {
+    [hoverIgnoreQuery]: () => {
+      hoverHandler.update(true);
+    },
+    [activeIgnoreQuery]: () => {
+      activeHandler.update(true);
+    },
+    [hoverActiveIgnoreQuery]: () => {
+      hoverHandler.update(true);
+      activeHandler.update(true);
+    }
+  };
+  return node => {
+    if ((0, _typeCheckUtils.isComment)(node)) {
+      const commentText = node.text.trim();
+      ignoreCommentMap[commentText] && ignoreCommentMap[commentText](); //   NOTE: we return here because this is just comment we can skip it.
+
+      return generateReturnValue();
+    } //   NOTE: we get the here. But return after resetting for next. Because these comment Only works for once.
+    //  Even If we support multiple line Skip we must do it in reset or separate method.
+
+
+    const returnValue = generateReturnValue();
+    hoverHandler.reset();
+    activeHandler.reset();
+    return returnValue;
+  };
+}

package/lib/shared/postcss/custom_postcss_plugins/HoverActivePlugin/index.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _handleIgnores = require("./handleIgnores");
+
+var _typeCheckUtils = require("./typeCheckUtils");
+
+var _isPreviouslyProcessed = require("./isPreviouslyProcessed");
+
+var _insertBefore = require("./insertBefore");
+
+var _separateHoveredSelectorAndNormalSelector = require("./separateHoveredSelectorAndNormalSelector");
+
+var _replaceUtils = require("./replaceUtils");
+
+var _specialCases = require("./specialCases");
+
+var _default = config => {
+  const hoverMedQuerySuffix = config.hover;
+  const activeMedQuerySuffix = config.active;
+  return {
+    postcssPlugin: 'postcss-mobile-hover',
+    Once: function Once(root, params) {
+      const getIgnoreStatus = (0, _handleIgnores.handleIgnores)(); // eslint-disable-next-line no-use-before-define
+
+      const mediaRuleCreatorMap = getMediaRuleMap(params, hoverMedQuerySuffix, activeMedQuerySuffix);
+      root.walk(node => {
+        const ignoreStatus = getIgnoreStatus(node);
+
+        if ((0, _typeCheckUtils.isRule)(node) === false) {
+          return;
+        }
+
+        if ((0, _typeCheckUtils.isAtRule)(node.parent) && !(0, _typeCheckUtils.isMediaQuery)(node.parent)) {
+          return;
+        } // NOTE: after previous return we expect rule that are only normal rule or rules that inside media query
+
+
+        const rule = node;
+
+        if ((0, _isPreviouslyProcessed.isPreviouslyProcessed)(rule, {
+          hoverMedQuerySuffix,
+          activeMedQuerySuffix
+        })) {
+          return;
+        }
+
+        const {
+          hoveredSelectors,
+          normalSelectors
+        } = (0, _separateHoveredSelectorAndNormalSelector.separateHoveredSelectorAndNormalSelector)(rule.selector); // NOTE: this if will remove rule if the rule has no normal selectors. and return So be aware.
+
+        if (hoveredSelectors.length === 0) {
+          //  || isRuleHasHover(rule) === false
+          return;
+        }
+
+        let newHoverMediaQuery = null;
+        let newActiveMediaQuery = null;
+        let prefix = '';
+
+        if ((0, _typeCheckUtils.isAtRule)(rule.parent)) {
+          prefix = rule.parent.params;
+        } else {
+          // NOTE: for usual rules we don't need prefix, So use prefix as empty string
+          prefix = '';
+        }
+
+        if (!ignoreStatus.hoverIgnored) {
+          newHoverMediaQuery = mediaRuleCreatorMap.hoverRule({
+            rule,
+            hoveredSelectors,
+            prefix
+          }, params);
+        }
+
+        if (!ignoreStatus.activeIgnored) {
+          newActiveMediaQuery = mediaRuleCreatorMap.activeRule({
+            rule,
+            hoveredSelectors,
+            prefix
+          }, params);
+        }
+
+        (0, _insertBefore.insertNearBy)(rule, newHoverMediaQuery);
+        (0, _insertBefore.insertNearBy)(rule, newActiveMediaQuery);
+        (0, _specialCases.hackForComposes)(rule, hoveredSelectors, params);
+        (0, _specialCases.removeRuleIfNoNormalSelectors)(normalSelectors, rule);
+      });
+    }
+  };
+};
+
+exports.default = _default;
+
+function getMediaRuleMap(params, hoverMedQuerySuffix, activeMedQuerySuffix) {
+  const {
+    AtRule
+  } = params;
+  return {
+    hoverRule({
+      rule,
+      hoveredSelectors,
+      prefix
+    }) {
+      const newMediaQuery = new AtRule({
+        name: 'media',
+        params: (0, _isPreviouslyProcessed.concatMediaParams)(prefix, hoverMedQuerySuffix)
+      });
+      const clonedRule = rule.clone();
+      clonedRule.selector = hoveredSelectors.join(',');
+      newMediaQuery.append(clonedRule);
+      return newMediaQuery;
+    },
+
+    activeRule({
+      rule,
+      hoveredSelectors,
+      prefix
+    }) {
+      const newMediaQuery = new AtRule({
+        name: 'media',
+        params: (0, _isPreviouslyProcessed.concatMediaParams)(prefix, activeMedQuerySuffix)
+      });
+      const clonedRule = rule.clone();
+      clonedRule.selector = hoveredSelectors.map(_replaceUtils.replaceHoverToActiveInSelector).join(',');
+      newMediaQuery.append(clonedRule);
+      return newMediaQuery;
+    }
+
+  };
+}

package/lib/shared/postcss/custom_postcss_plugins/HoverActivePlugin/insertBefore.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.insertBefore = insertBefore;
+exports.insertNearBy = insertNearBy;
+
+var _typeCheckUtils = require("./typeCheckUtils");
+
+function insertBefore(node, newNode) {
+  newNode && node.parent.insertBefore(node, newNode);
+  return newNode;
+} // function insertAfter(node, newNode) {
+//   newNode && node.parent.insertAfter(node, newNode);
+//   return newNode;
+// }
+
+
+function insertNearBy(node, newNode) {
+  if (!newNode) {
+    return newNode;
+  } // we use insertBefore Because we wouldn't end up recursive (repeated) check and creation
+
+
+  if ((0, _typeCheckUtils.isParentAtRule)(node) && (0, _typeCheckUtils.isAtRule)(newNode)) {
+    return insertNearBy(node.parent, newNode);
+  }
+
+  return insertBefore(node, newNode); // return insertAfter(node, newNode);
+  // return newNode;
+}

package/lib/shared/postcss/custom_postcss_plugins/HoverActivePlugin/isPreviouslyProcessed.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.concatMediaParams = concatMediaParams;
+exports.isPreviouslyProcessed = isPreviouslyProcessed;
+
+var _typeCheckUtils = require("./typeCheckUtils");
+
+function concatMediaParams(prefix, suffix) {
+  return prefix ? `${prefix} and ${suffix}` : `${suffix}`;
+}
+
+function isPreviouslyProcessed(rule, {
+  hoverMedQuerySuffix,
+  activeMedQuerySuffix
+}) {
+  return (0, _typeCheckUtils.isParentAtRule)(rule) && ((0, _typeCheckUtils.isParentAtRuleContainsParam)(rule, hoverMedQuerySuffix) || (0, _typeCheckUtils.isParentAtRuleContainsParam)(rule, activeMedQuerySuffix));
+}

package/lib/shared/postcss/custom_postcss_plugins/HoverActivePlugin/replaceUtils.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.replaceHoverToActiveInSelector = exports.removeHoverFromSelector = void 0;
+
+var _constants = require("./constants");
+
+// function isRuleHasHover(rule) {
+//   return isSelectorHasHover(rule.selector);
+// }
+function generateReplacer(baseStr, replaceStr) {
+  return (inputStr = '') => inputStr.replaceAll(baseStr, replaceStr);
+}
+
+const removeHoverFromSelector = generateReplacer(_constants.HOVER_NOTATION, '');
+exports.removeHoverFromSelector = removeHoverFromSelector;
+const replaceHoverToActiveInSelector = generateReplacer(_constants.HOVER_NOTATION, ':active');
+exports.replaceHoverToActiveInSelector = replaceHoverToActiveInSelector;

package/lib/shared/postcss/custom_postcss_plugins/HoverActivePlugin/separateHoveredSelectorAndNormalSelector.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.separateHoveredSelectorAndNormalSelector = separateHoveredSelectorAndNormalSelector;
+
+var _typeCheckUtils = require("./typeCheckUtils");
+
+function separateHoveredSelectorAndNormalSelector(fullselector = '') {
+  const hoveredSelectors = [];
+  const normalSelectors = [];
+  fullselector.split(/\s*,\s*/).forEach(selector => {
+    if ((0, _typeCheckUtils.isSelectorHasHover)(selector)) {
+      hoveredSelectors.push(selector);
+    } else {
+      normalSelectors.push(selector);
+    }
+  });
+  return {
+    hoveredSelectors,
+    normalSelectors
+  };
+}

package/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/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/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/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/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;