@zohodesk/react-cli 0.0.1-exp.168.2 → 0.0.1-exp.168.3

package/lib/postcss-plugins/hoverActivePlugin.js

@@ -4,261 +4,354 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-module.exports = _postcss.default.plugin("postcss-mobile-hover", () => {
-  return root => {
-    function checkHoverIgnore(rule, index) {
-      return rule.nodes !== undefined && rule.nodes[index - 1] !== undefined && rule.nodes[index - 1].type == "comment" && rule.nodes[index - 1].text.includes("hover:ignore");
+function previousNodeCheck(nodes, index) {
+  return nodes !== undefined && nodes[index - 1] !== undefined && nodes[index - 1] && nodes[index - 1].text !== undefined;
+}
+
+function isComment(node) {
+  return node !== undefined && node.type === 'comment';
+}
+
+function isHoverPresent(atrule) {
+  let hoverPresent = false;
+  atrule.walkRules(rule => {
+    if (rule.selector.includes('hover')) {
+      hoverPresent = true;
     }
+  });
+  return hoverPresent;
+}
 
-    function checkPositionNodeHov(parent) {
-      let clone = parent.clone();
-      clone.params = clone.params + " and (hover: hover)";
-      var posn = -1;
-      root.nodes.map((node, index) => {
-        if (node.params == clone.params) {
-          posn = index;
-        }
-      });
-      return posn;
+module.exports = _postcss.default.plugin('postcss-mobile-hover', () => rootOriginal => {
+  const hoverRules = [];
+  let positionsObj = {};
+  const hoverIgnoreQuery = 'Hover:ignore',
+        activeIgnoreQuery = 'Active:ignore',
+        hoverActiveIgnoreQuery = 'HoverActive:ignore';
+  const medHoverIgnoreQuery = 'MedHover:ignore',
+        medActiveIgnoreQuery = 'MedActive:ignore',
+        medHoverActiveIgnoreQuery = 'MedHoverActive:ignore';
+
+  function QueryIgnoreCheck(index, type) {
+    if (previousNodeCheck(rootOriginal.nodes, index)) {
+      return rootOriginal.nodes[index - 1].text === type;
     }
 
-    function checkPositionNodeAct(parent) {
-      let clone = parent.clone();
-      clone.params = clone.params + " and (hover: none)";
-      var posn = -1;
-      root.nodes.map((node, index) => {
-        if (clone.params == node.params) {
-          posn = index;
-        }
-      });
-      return posn;
+    return false;
+  }
+
+  function mediaQueryIgnoreCheck(node, type) {
+    if (isComment(node)) {
+      return node.text === type;
     }
 
-    function checkPositionNodeFireFox(parent) {
-      var posn = -1;
-      root.nodes.map((nodes, index) => {
-        if (nodes.params == "all and (min--moz-device-pixel-ratio:0)") {
-          posn = index;
+    return false;
+  }
+
+  function handleIgnore({
+    index,
+    atrule,
+    type
+  }) {
+    if (type.match(/(Hover:ignore|Active:ignore|HoverActive:ignore)/g)) {
+      return QueryIgnoreCheck(index, type);
+    }
+
+    if (type.match(/(MedHover:ignore|MedActive:ignore|MedHoverActive:ignore)/g)) {
+      return mediaQueryIgnoreCheck(atrule.nodes[index - 1], type.slice(3));
+    }
+  }
+
+  function returnPositions(parent) {
+    let positions = {
+      hovMed: rootOriginal.nodes[positionsObj[`${parent.params} and all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)`] - 1],
+      actMed: rootOriginal.nodes[positionsObj[`${parent.params} and (hover: none)`] - 1]
+    };
+    return positions;
+  }
+
+  function handleMedHoverAndHoverActiveIgnore(atrule, index) {
+    return !handleIgnore({
+      atrule,
+      index,
+      type: medHoverIgnoreQuery
+    }) && !handleIgnore({
+      atrule,
+      index,
+      type: medHoverActiveIgnoreQuery
+    });
+  }
+
+  function handleMedActiveAndHoverActiveIgnore(atrule, index) {
+    return !handleIgnore({
+      atrule,
+      index,
+      type: medActiveIgnoreQuery
+    }) && !handleIgnore({
+      atrule,
+      index,
+      type: medHoverActiveIgnoreQuery
+    });
+  }
+
+  function handleHoverAndHoverActiveIgnore(index) {
+    return !handleIgnore({
+      index,
+      type: hoverIgnoreQuery
+    }) && !handleIgnore({
+      index,
+      type: hoverActiveIgnoreQuery
+    });
+  }
+
+  function handleActiveAndHoverActiveIgnore(index) {
+    return !handleIgnore({
+      index,
+      type: activeIgnoreQuery
+    }) && !handleIgnore({
+      index,
+      type: hoverActiveIgnoreQuery
+    });
+  }
+
+  function handleAllIgnoreCases(index) {
+    return !handleIgnore({
+      index,
+      type: activeIgnoreQuery
+    }) && !handleIgnore({
+      index,
+      type: hoverIgnoreQuery
+    }) && !handleIgnore({
+      index,
+      type: hoverActiveIgnoreQuery
+    });
+  }
+
+  function mediaCommaQuery(rule, index) {
+    if (rule.parent.params !== undefined && !rule.parent.params.includes('hover')) {
+      //console.log(hovMed, actMed);
+      let newSelector = '';
+      let {
+        hovMed,
+        actMed
+      } = returnPositions(rule.parent);
+      let hovQueries = [];
+      let actQueries = [];
+      rule.selector.split(/\s*,\s*/).forEach(_subrule => {
+        let subrule = _subrule.trim();
+
+        let clone = rule.clone();
+
+        if (subrule.includes('hover')) {
+          clone.selector = subrule;
+
+          if (handleMedHoverAndHoverActiveIgnore(rule.parent, index)) {
+            hovQueries.push(subrule);
+          }
+
+          if (handleMedActiveAndHoverActiveIgnore(rule.parent, index)) {
+            actQueries.push(subrule);
+          }
+        } else {
+          newSelector += `${subrule}, `;
         }
       });
-      return posn;
+
+      if (hovQueries.length > 0) {
+        let clone = rule.clone();
+        clone.selector = hovQueries.join(',');
+        hovMed.append(clone);
+      }
+
+      if (actQueries.length > 0) {
+        let clone = rule.clone();
+        clone.selector = actQueries.join(',');
+        actMed.append(clone.clone({
+          selector: clone.selector.replace(/:hover/gi, ':active')
+        }));
+      }
+
+      if (handleMedHoverAndHoverActiveIgnore(rule.parent, index)) {
+        rule.selector = newSelector.substring(0, newSelector.length - 2);
+      }
+
+      if (rule.selector === '') {
+        rule.remove();
+      }
     }
+  }
 
-    const hoverRules = []; // Start by identifying all :hover rules
+  function mediaQuery(rule, index) {
+    // console.log(rule.parent.params + " and all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)");
+    if (rule.parent.params !== undefined && !rule.parent.params.includes('hover')) {
+      let {
+        hovMed,
+        actMed
+      } = returnPositions(rule.parent);
 
-    root.walkAtRules((atrule, index) => {
-      let hoverPresent = false;
-      atrule.walkRules((rule, index) => {
-        if (rule.selector.includes("hover")) {
-          hoverPresent = true;
+      if (rule.selector.includes('hover') && hovMed !== undefined && rule.parent.type === 'atrule') {
+        if (handleMedHoverAndHoverActiveIgnore(rule.parent, index)) {
+          hovMed.append(rule);
         }
+
+        if (handleMedActiveAndHoverActiveIgnore(rule.parent, index)) {
+          actMed.append(rule.clone({
+            selector: rule.selector.replace(/:hover/gi, ':active')
+          }));
+        }
+      }
+    }
+  }
+
+  function commaQuery(rule, index) {
+    //console.log("comma" , rule.selector.split('\n'));
+    let newSelector = '';
+    let hovQueries = [];
+    rule.selector.split(/\s*,\s*/).forEach(_subrule => {
+      let subrule = _subrule.trim();
+
+      if (subrule.includes('hover')) {
+        // hoverRules.push({ rule: clone, index });
+        hovQueries.push(subrule);
+      } else {
+        newSelector += `${subrule}, `;
+      }
+    });
+
+    if (hovQueries.length > 0) {
+      let clone = rule.clone();
+      clone.selector = hovQueries.join(',');
+      hoverRules.push({
+        rule: clone,
+        index
       });
+    }
 
-      if (hoverPresent) {
-        root.append({
-          name: "media",
-          params: atrule.params + " and (hover: hover)"
-        });
-        root.append({
-          name: "media",
-          params: atrule.params + " and (hover: none)"
+    if (handleHoverAndHoverActiveIgnore(index)) {
+      rule.selector = newSelector.substring(0, newSelector.length - 2).trim();
+    }
+
+    if (rule.selector === '') {
+      rule.remove();
+    }
+  } // Start by identifying all :hover rules
+
+
+  rootOriginal.walkAtRules(atrule => {
+    //console.log(positions[`${atrule.params} and all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)`])
+    const hoverQuery = `${atrule.params} and all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)`;
+    const activeQuery = `${atrule.params} and (hover: none)`;
+
+    if (isHoverPresent(atrule)) {
+      if (!positionsObj[hoverQuery] && !positionsObj[activeQuery]) {
+        rootOriginal.append({
+          name: 'media',
+          params: hoverQuery
         });
-        root.append({
-          name: "media",
-          params: "all and (min--moz-device-pixel-ratio:0)"
+        positionsObj[hoverQuery] = rootOriginal.nodes.length - 1;
+        rootOriginal.append({
+          name: 'media',
+          params: activeQuery
         });
+        positionsObj[activeQuery] = rootOriginal.nodes.length - 1;
       }
-    });
-    root.walkRules(/:hover/i, (rule, index) => {
-      if (!checkHoverIgnore(rule, index)) {
-        // media hover query with ',' ' ' '+'
-        if (rule.parent.name != undefined && rule.parent.params !== undefined) {
-          //console.log(rule.parent.params)
-          // console.log("media query" , rule.selector)
-          if (rule.selector.includes(" ") && rule.selector.includes(",") || !rule.selector.includes(" ") && rule.selector.includes(",")) {
-            //console.log("media comma", rule.selector)
-            if (rule.parent.params != undefined && !rule.parent.params.includes("hover")) {
-              //console.log("not hovered")
-              var posHov = checkPositionNodeHov(rule.parent);
-              var actHov = checkPositionNodeAct(rule.parent);
-              var firHov = checkPositionNodeFireFox(rule.parent);
-              var hovMed = root.nodes[posHov];
-              var actMed = root.nodes[actHov];
-              var firMed = root.nodes[firHov]; //console.log(hovMed, actMed);
-
-              var str = ",";
-
-              if (rule.selector.includes(",\n")) {
-                str = ",\n";
-              }
-
-              rule.selector.split(str).map(subrule => {
-                subrule = subrule.trim();
-                let clone = rule.clone();
-
-                if (subrule.includes("hover")) {
-                  clone.selector = subrule;
-                  hovMed.append(clone);
-                  firMed.append(clone);
-                  actMed.append(clone.clone({
-                    selector: clone.selector.replace(/:hover/gi, ":active")
-                  }));
-                } else {
-                  clone.selector = subrule;
-                  root.append(clone);
-                }
-              });
-              rule.remove();
-            }
-          } else if (rule.selector.includes(" ") && rule.selector.includes("+") || !rule.selector.includes(" ") && rule.selector.includes("+")) {
-            //console.log("media plus", rule.selector)
-            if (rule.parent.params != undefined && !rule.parent.params.includes("hover")) {
-              //console.log("not hovered")
-              var posHov = checkPositionNodeHov(rule.parent);
-              var actHov = checkPositionNodeAct(rule.parent);
-              var firHov = checkPositionNodeFireFox(rule.parent);
-              var hovMed = root.nodes[posHov];
-              var actMed = root.nodes[actHov];
-              var firMed = root.nodes[firHov]; // console.log(hovMed, actMed);
-
-              if (rule.selector.includes("hover")) {
-                console.log(rule.selector);
-                firMed.append(rule);
-                hovMed.append(rule);
-                actMed.append(rule.clone({
-                  selector: rule.selector.replace(/:hover/gi, ":active")
-                }));
-              } else {
-                root.append(rule);
-              }
-            } else {// console.log(rule.selector)
-            }
-          } else if (rule.selector.includes(" ")) {
-            //console.log("media space", rule.selector)
-            if (rule.parent.params != undefined && !rule.parent.params.includes("hover")) {
-              //console.log("not hovered")
-              var posHov = checkPositionNodeHov(rule.parent);
-              var actHov = checkPositionNodeAct(rule.parent);
-              var firHov = checkPositionNodeFireFox(rule.parent);
-              var hovMed = root.nodes[posHov];
-              var actMed = root.nodes[actHov];
-              var firMed = root.nodes[firMed]; //console.log(hovMed, actMed);
-
-              if (rule.selector.includes("hover")) {
-                hovMed.append(rule);
-                actMed.append(rule.clone({
-                  selector: rule.selector.replace(/:hover/gi, ":active")
-                }));
-              } else {
-                root.append(rule);
-              }
-            }
-          }
-        } //usual hover query with ',' ' ' '+'
-        else if ((rule.selector.includes(",") || rule.selector.includes(" ") || rule.selector.includes("+")) && rule.parent.name == undefined) {
-          if (rule.selector.includes(" ") && rule.selector.includes(",") || !rule.selector.includes(" ") && rule.selector.includes(",")) {
-            //console.log("comma" , rule.selector.split('\n'));
-            rule.selector.split(",\n").map(subrule => {
-              subrule = subrule.trim();
-              let clone = rule.clone();
-
-              if (subrule.includes("hover")) {
-                clone.selector = subrule;
-                hoverRules.push(clone);
-              } else {
-                clone.selector = subrule;
-                root.append(clone);
-              }
-            });
-            rule.remove();
-          } else if (rule.selector.includes(" ") && rule.selector.includes("+") || !rule.selector.includes(" ") && rule.selector.includes("+")) {
-            //console.log("plus" , rule.selector);
-            if (rule.selector.includes("hover")) {
-              //console.log("plus:", rule.selector);
-              hoverRules.push(rule);
-              rule.remove();
-            }
-          } else if (rule.selector.includes(" ")) {
-            //console.log("space", rule.selector);
-            hoverRules.push(rule);
-            rule.remove();
-          }
-        } // usual hover query
-        else {
-          //console.log(rule);
-          if (rule.selector.includes("hover")) {
-            hoverRules.push(rule);
-          }
+    }
+  });
+  rootOriginal.walkRules(/:hover/i, (rule, index) => {
+    // console.log({ 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
+
+
+    if (!rule.selector.match(/,+| +|\++/g) && rule.parent !== undefined && rule.parent.name === undefined) {
+      hoverRules.push({
+        rule,
+        index
+      });
+    } //usual hover query with ',' ' ' '+'
+
+
+    if (rule.selector.match(/,+| +|\++/g) && rule.parent.name === undefined) {
+      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,
+            index
+          }); //rule.remove();
         }
       }
-    }); // If there are any :hover rules in the input, then create media queries
-    // to automatically translate it into :active on touch-based devices
-
-    if (hoverRules.length > 0) {
-      //console.log(hoverRules)
-      // Create a media query targetting ie10 + 11, as these browsers
-      // wont support @media (hover: hover) - but we know that this
-      // browser never runs on mobile devices, so we'll just push the
-      // hover rules there
-      // const ieQuery = root.append({
-      //     name: 'media',
-      //     params:
-      //         'all and ' +
-      //         '(-ms-high-contrast: none), ' +
-      //         '(-ms-high-contrast: active)'
-      // }).last;
-      // Create a media query targetting firefox, as this browser doesn't
-      // support @media (hover: hover)... Technically this browser could
-      // run on both desktop and mobile devices, but we're going to be
-      // applying :hover and hope for the best
-      const firefoxQuery = root.append({
-        name: "media",
-        params: "all and (min--moz-device-pixel-ratio:0)"
-      }).last; // Create a media query targetting devices that actually support
-      // hover
-
-      const hoverQuery = root.append({
-        name: "media",
-        params: "(hover: hover)"
-      }).last; // Create a media query targetting devices that don't support hover
-      // (ie. devices where we should fall back to :active instead)
-
-      const activeQuery = root.append({
-        name: "media",
-        params: "(hover: none)"
-      }).last; // Loop through the hover rules and apply them to each of the media
-      // queries
-      // eslint-disable-next-line no-labels
-
-      outerLoop: for (const hoverRule of hoverRules) {
-        // determine if the rule has been nested inside another media
-        // query; in that case bail out as we have no way of reliably
-        // nesting these queries
-        let parentRule = hoverRule.parent;
-
-        while (parentRule) {
-          if (parentRule.type === "atrule" && parentRule.name === "media") {
-            // eslint-disable-next-line no-labels
-            continue outerLoop;
-          }
+    }
+  }); // If there are any :hover rules in the input, then create media queries
+  // to automatically translate it into :active on touch-based devices
 
-          parentRule = parentRule.parent;
-        } // Push a clone of the :hover rule 'as is' to queries where we
-        // expect the user's device to support hover
-        // ieQuery.append(hoverRule.clone());
+  if (hoverRules.length > 0) {
+    // Create a media query targetting devices that actually support
+    // hover
+    const hoverQuery = rootOriginal.append({
+      name: 'media',
+      params: 'all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)'
+    }).last; // Create a media query targetting devices that don't support hover
+    // (ie. devices where we should fall back to :active instead)
 
+    const activeQuery = rootOriginal.append({
+      name: 'media',
+      params: '(hover: none)'
+    }).last; // Loop through the hover rules and apply them to each of the media
+    // queries
+    // eslint-disable-next-line no-labels
 
-        firefoxQuery.append(hoverRule.clone());
-        hoverQuery.append(hoverRule.clone()); // Push a clone of the :hover rule, where we transform the
-        // selector to :active to the query targetting devices that
-        // don't support hover
+    outerLoop: for (const hoverRule of hoverRules) {
+      // determine if the rule has been nested inside another media
+      // query; in that case bail out as we have no way of reliably
+      // nesting these queries
+      let parentRule = hoverRule.rule.parent;
+
+      while (parentRule) {
+        if (parentRule.type === 'atrule' && parentRule.name === 'media') {
+          // eslint-disable-next-line no-labels
+          continue outerLoop;
+        }
+
+        parentRule = parentRule.parent;
+      } // Push a clone of the :hover rule 'as is' to queries where we
+      // expect the user's device to support hover
+      // ieQuery.append(hoverRule.clone());
+
+
+      if (handleHoverAndHoverActiveIgnore(hoverRule.index)) {
+        hoverQuery.append(hoverRule.rule.clone());
+      } // Push a clone of the :hover rule, where we transform the
+      // selector to :active to the query targetting devices that
+      // don't support hover
 
-        activeQuery.append(hoverRule.clone({
-          selector: hoverRule.selector.replace(/:hover/gi, ":active")
-        })); // remove legacy rule from output
 
-        hoverRule.remove();
+      if (handleActiveAndHoverActiveIgnore(hoverRule.index)) {
+        activeQuery.append(hoverRule.rule.clone({
+          selector: hoverRule.rule.selector.replace(/:hover/gi, ':active')
+        }));
+      } // remove legacy rule from output
+
+
+      if (handleAllIgnoreCases(hoverRule.index)) {
+        hoverRule.rule.remove();
       }
     }
-  };
+  }
+
+  rootOriginal.walkAtRules(atrule => {
+    if (atrule !== undefined && atrule.nodes !== undefined && atrule.nodes.length === 0 || atrule.nodes === undefined) {
+      atrule.remove();
+    }
+  });
 });