@zohodesk/client_build_tool/lib/shared/postcss/custom_postcss_plugins/HoverActivePlugin/index.js

A CLI tool to build web applications and client libraries

"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;
    }

  };
}