autoprefixer 9.1.5 → 9.3.1

package/lib/hacks/grid-utils.js

@@ -4,6 +4,12 @@ var parser = require('postcss-value-parser');
 
 var list = require('postcss').list;
 
+var uniq = require('../utils').uniq;
+
+var escapeRegexp = require('../utils').escapeRegexp;
+
+var splitSelector = require('../utils').splitSelector;
+
 function convert(value) {
   if (value && value.length === 2 && value[0] === 'span' && parseInt(value[1], 10) > 0) {
     return [false, parseInt(value[1], 10)];
@@ -118,20 +124,36 @@ function transformRepeat(_ref3, _ref4) {
     count: []
   }),
       count = _nodes$reduce.count,
-      size = _nodes$reduce.size;
+      size = _nodes$reduce.size; // insert gap values
+
 
   if (gap) {
-    var val = [];
+    var _ret = function () {
+      size = size.filter(function (i) {
+        return i.trim();
+      });
+      var val = [];
+
+      var _loop = function _loop(i) {
+        size.forEach(function (item, index) {
+          if (index > 0 || i > 1) {
+            val.push(gap);
+          }
+
+          val.push(item);
+        });
+      };
 
-    for (var i = 1; i <= count; i++) {
-      if (gap && i > 1) {
-        val.push(gap);
+      for (var i = 1; i <= count; i++) {
+        _loop(i);
       }
 
-      val.push(size.join());
-    }
+      return {
+        v: val.join(' ')
+      };
+    }();
 
-    return val.join(' ');
+    if (typeof _ret === "object") return _ret.v;
   }
 
   return "(" + size.join('') + ")[" + count.join('') + "]";
@@ -163,98 +185,6 @@ function prefixTrackValue(_ref5) {
     return nodes.concat(node);
   }, []);
   return parser.stringify(result);
-}
-/**
- * Parse grid areas from declaration
- * @param Declaration [decl]
- * @return Array<String>
- */
-
-
-function parseGridTemplateStrings(decl) {
-  var template = parseTemplate({
-    decl: decl,
-    gap: getGridGap(decl)
-  });
-  return Object.keys(template.areas);
-}
-/**
- * Walk through every grid-template(-areas)
- * declaration and try to find non-unique area names (duplicates)
- * @param  {Declaration} decl
- * @param  {Result} result
- * @return {void}
- */
-
-
-function warnDuplicateNames(_ref6) {
-  var decl = _ref6.decl,
-      result = _ref6.result;
-  var rule = decl.parent;
-  var inMediaRule = !!getParentMedia(rule);
-  var areas = parseGridTemplateStrings(decl);
-  var root = decl.root(); // stop if no areas found
-
-  if (areas.length === 0) {
-    return false;
-  }
-
-  root.walkDecls(/grid-template(-areas)?$/g, function (d) {
-    var nodeRule = d.parent;
-    var nodeRuleMedia = getParentMedia(nodeRule);
-    var isEqual = rule.toString() === nodeRule.toString();
-    var foundAreas = parseGridTemplateStrings(d);
-    var maxIndex = Math.max(root.index(nodeRule), root.index(nodeRuleMedia));
-    var isLookingDown = root.index(rule) < maxIndex; // skip node if no grid areas is found
-
-    if (foundAreas.length === 0) {
-      return true;
-    } // abort if we outside media rule and walking below our rule
-    // (we need to check ONLY the rules that are above)
-
-
-    if (!inMediaRule && isLookingDown) {
-      return false;
-    } // abort if we're in the same rule
-
-
-    if (isEqual) {
-      return false;
-    } // if we're inside media rule, we need to compare selectors
-
-
-    if (inMediaRule) {
-      var selectors = list.comma(nodeRule.selector);
-      var selectorIsFound = selectors.some(function (sel) {
-        if (sel === rule.selector) {
-          // compare selectors as a comma list
-          return true;
-        } else if (nodeRule.selector === rule.selector) {
-          // compare selectors as a whole (e.g. ".i, .j" === ".i, .j")
-          return true;
-        }
-
-        return false;
-      }); // stop walking if we found the selector
-
-      if (selectorIsFound) {
-        return false;
-      }
-    }
-
-    var duplicates = areas.filter(function (area) {
-      return foundAreas.includes(area);
-    });
-
-    if (duplicates.length > 0) {
-      var word = duplicates.length > 1 ? 'names' : 'name';
-      decl.warn(result, ['', "  duplicate area " + word + " detected in rule: " + rule.selector, "  duplicate area " + word + ": " + duplicates.join(', '), "  duplicate area names cause unexpected behavior in IE"].join('\n'));
-      return false;
-    }
-
-    return undefined;
-  });
-  return undefined;
 } // Parse grid-template-areas
 
 
@@ -272,9 +202,9 @@ function getColumns(line) {
   return line.trim().split(/\s+/g);
 }
 
-function parseGridAreas(_ref7) {
-  var rows = _ref7.rows,
-      gap = _ref7.gap;
+function parseGridAreas(_ref6) {
+  var rows = _ref6.rows,
+      gap = _ref6.gap;
   return rows.reduce(function (areas, line, rowIndex) {
     if (gap.row) rowIndex *= 2;
     if (line.trim() === '') return areas;
@@ -316,9 +246,9 @@ function verifyRowSize(result) {
   return result;
 }
 
-function parseTemplate(_ref8) {
-  var decl = _ref8.decl,
-      gap = _ref8.gap;
+function parseTemplate(_ref7) {
+  var decl = _ref7.decl,
+      gap = _ref7.gap;
   var gridTemplate = parser(decl.value).nodes.reduce(function (result, node) {
     var type = node.type,
         value = node.value;
@@ -332,7 +262,7 @@ function parseTemplate(_ref8) {
 
     if (type === 'word' || type === 'function') {
       result[result.key].push(parser.stringify(node));
-    } // devider(/)
+    } // divider(/)
 
 
     if (type === 'div' && value === '/') {
@@ -365,7 +295,7 @@ function parseTemplate(_ref8) {
 
 /**
  * Get an array of -ms- prefixed props and values
- * @param  {Object} [area] area object with columm and row data
+ * @param  {Object} [area] area object with column and row data
  * @param  {Boolean} [addRowSpan] should we add grid-column-row value?
  * @param  {Boolean} [addColumnSpan] should we add grid-column-span value?
  * @return {Array<Object>}
@@ -399,167 +329,482 @@ function getMSDecls(area, addRowSpan, addColumnSpan) {
 function getParentMedia(parent) {
   if (parent.type === 'atrule' && parent.name === 'media') {
     return parent;
-  } else if (!parent.parent) {
+  }
+
+  if (!parent.parent) {
     return false;
   }
 
   return getParentMedia(parent.parent);
 }
 /**
- * Check grid-template(-areas) rules with the same selector for
- * -ms-grid-(row|column)-span values. If initial and compared values are
- * different - return an array of boolean values which need to be updated
- * @param  {Declaration} decl
- * @param  {Object} area area object with column and row data
- * @param  {String} areaName area name (e.g. "head")
- * @return {Array<Boolean, Boolean>}
+ * change selectors for rules with duplicate grid-areas.
+ * @param  {Array<Rule>} rules
+ * @param  {Array<String>} templateSelectors
+ * @return {Array<Rule>} rules with changed selectors
  */
 
 
-function shouldAddSpan(decl, area, areaName) {
-  var root = decl.root();
-  var rule = decl.parent;
-  var overrideValues = [false, false];
-  root.walkRules(rule.selector, function (node) {
-    // abort if we are on the same rule
-    if (rule.toString() === node.toString()) {
-      return false;
+function changeDuplicateAreaSelectors(ruleSelectors, templateSelectors) {
+  ruleSelectors = ruleSelectors.map(function (selector) {
+    var selectorBySpace = list.space(selector);
+    var selectorByComma = list.comma(selector);
+
+    if (selectorBySpace.length > selectorByComma.length) {
+      selector = selectorBySpace.slice(-1).join('');
     }
 
-    node.walkDecls('grid-template', function (d) {
-      var template = parseTemplate({
-        decl: d,
-        gap: getGridGap(d)
+    return selector;
+  });
+  return ruleSelectors.map(function (ruleSelector) {
+    var newSelector = templateSelectors.map(function (tplSelector, index) {
+      var space = index === 0 ? '' : ' ';
+      return "" + space + tplSelector + " > " + ruleSelector;
+    });
+    return newSelector;
+  });
+}
+/**
+ * check if selector of rules are equal
+ * @param  {Rule} ruleA
+ * @param  {Rule} ruleB
+ * @return {Boolean}
+ */
+
+
+function selectorsEqual(ruleA, ruleB) {
+  return ruleA.selectors.some(function (sel) {
+    return ruleB.selectors.some(function (s) {
+      return s === sel;
+    });
+  });
+}
+/**
+ * Parse data from all grid-template(-areas) declarations
+ * @param  {Root} css css root
+ * @return {Object} parsed data
+ */
+
+
+function parseGridTemplatesData(css) {
+  var parsed = []; // we walk through every grid-template(-areas) declaration and store
+  // data with the same area names inside the item
+
+  css.walkDecls(/grid-template(-areas)?$/, function (d) {
+    var rule = d.parent;
+    var media = getParentMedia(rule);
+    var gap = getGridGap(d);
+    var inheritedGap = inheritGridGap(d, gap);
+
+    var _parseTemplate = parseTemplate({
+      decl: d,
+      gap: inheritedGap || gap
+    }),
+        areas = _parseTemplate.areas;
+
+    var areaNames = Object.keys(areas); // skip node if it doesn't have areas
+
+    if (areaNames.length === 0) {
+      return true;
+    } // check parsed array for item that include the same area names
+    // return index of that item
+
+
+    var index = parsed.reduce(function (acc, _ref8, idx) {
+      var allAreas = _ref8.allAreas;
+      var hasAreas = allAreas && areaNames.some(function (area) {
+        return allAreas.includes(area);
       });
-      var comparedArea = template.areas[areaName];
+      return hasAreas ? idx : acc;
+    }, null);
 
-      if (!comparedArea) {
-        return true;
-      }
+    if (index !== null) {
+      // index is found, add the grid-template data to that item
+      var _parsed$index = parsed[index],
+          allAreas = _parsed$index.allAreas,
+          rules = _parsed$index.rules; // check if rule has no duplicate area names
 
-      if (area.row.span !== comparedArea.row.span) {
-        overrideValues[0] = true;
-      }
+      var hasNoDuplicates = rules.some(function (r) {
+        return r.hasDuplicates === false && selectorsEqual(r, rule);
+      });
+      var duplicatesFound = false; // check need to gather all duplicate area names
 
-      if (area.column.span !== comparedArea.column.span) {
-        overrideValues[1] = true;
-      }
+      var duplicateAreaNames = rules.reduce(function (acc, r) {
+        if (!r.params && selectorsEqual(r, rule)) {
+          duplicatesFound = true;
+          return r.duplicateAreaNames;
+        }
+
+        if (!duplicatesFound) {
+          areaNames.forEach(function (name) {
+            if (r.areas[name]) {
+              acc.push(name);
+            }
+          });
+        }
+
+        return uniq(acc);
+      }, []); // update grid-row/column-span values for areas with duplicate
+      // area names. @see #1084 and #1146
+
+      rules.forEach(function (r) {
+        areaNames.forEach(function (name) {
+          var area = r.areas[name];
+
+          if (area && area.row.span !== areas[name].row.span) {
+            areas[name].row.updateSpan = true;
+          }
+
+          if (area && area.column.span !== areas[name].column.span) {
+            areas[name].column.updateSpan = true;
+          }
+        });
+      });
+      parsed[index].allAreas = uniq(allAreas.concat(areaNames));
+      parsed[index].rules.push({
+        hasDuplicates: !hasNoDuplicates,
+        params: media.params,
+        selectors: rule.selectors,
+        node: rule,
+        duplicateAreaNames: duplicateAreaNames,
+        areas: areas
+      });
+    } else {
+      // index is NOT found, push the new item to the parsed array
+      parsed.push({
+        allAreas: areaNames,
+        areasCount: 0,
+        rules: [{
+          hasDuplicates: false,
+          duplicateRules: [],
+          params: media.params,
+          selectors: rule.selectors,
+          node: rule,
+          duplicateAreaNames: [],
+          areas: areas
+        }]
+      });
+    }
 
-      return undefined;
-    });
     return undefined;
   });
-  return overrideValues;
+  return parsed;
 }
 /**
- * search the next siblings and find the latest media with
- * the same selectors inside
- * @param  {Rule | AtRule} rule
- * @param  {Array<String>} selectors
- * @return {AtRule}
+ * insert prefixed grid-area declarations
+ * @param  {Root}  css css root
+ * @param  {Function} isDisabled check if the rule is disabled
+ * @return {void}
  */
 
 
-function getLastNextSimilarMedia(rule, selectors) {
-  if (!rule) {
-    return false;
-  } else if (rule.type !== 'atrule' && rule.name !== 'media') {
-    return rule.prev();
-  }
+function insertAreas(css, isDisabled) {
+  // parse grid-template declarations
+  var gridTemplatesData = parseGridTemplatesData(css); // return undefined if no declarations found
 
-  var selectorsToCompare = [];
-  rule.walkRules(function (r) {
-    return selectorsToCompare.push(r.selector);
-  }); // check if every selector match
+  if (gridTemplatesData.length === 0) {
+    return undefined;
+  } // we need to store the rules that we will insert later
 
-  var selectorsEqual = selectors.every(function (sel, index) {
-    return sel === selectorsToCompare[index];
-  });
 
-  if (selectorsEqual) {
-    // to check the next rule
-    return getLastNextSimilarMedia(rule.next(), selectors);
-  } else {
-    // or return the last similar media
-    return rule.prev();
-  }
+  var rulesToInsert = {};
+  css.walkDecls('grid-area', function (gridArea) {
+    var gridAreaRule = gridArea.parent;
+    var hasPrefixedRow = gridAreaRule.first.prop === '-ms-grid-row';
+    var gridAreaMedia = getParentMedia(gridAreaRule);
+
+    if (isDisabled(gridArea)) {
+      return undefined;
+    }
+
+    var gridAreaRuleIndex = gridAreaMedia ? css.index(gridAreaMedia) : css.index(gridAreaRule);
+    var value = gridArea.value; // found the data that matches grid-area identifier
+
+    var data = gridTemplatesData.filter(function (d) {
+      return d.allAreas.includes(value);
+    })[0];
+
+    if (!data) {
+      return true;
+    }
+
+    var lastArea = data.allAreas[data.allAreas.length - 1];
+    var selectorBySpace = list.space(gridAreaRule.selector);
+    var selectorByComma = list.comma(gridAreaRule.selector);
+    var selectorIsComplex = selectorBySpace.length > 1 && selectorBySpace.length > selectorByComma.length; // prevent doubling of prefixes
+
+    if (hasPrefixedRow) {
+      return false;
+    } // create the empty object with the key as the last area name
+    // e.g if we have templates with "a b c" values, "c" will be the last area
+
+
+    if (!rulesToInsert[lastArea]) {
+      rulesToInsert[lastArea] = {};
+    } // walk through every grid-template rule data
+
+
+    for (var _iterator2 = data.rules, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
+      var _ref9;
+
+      if (_isArray2) {
+        if (_i2 >= _iterator2.length) break;
+        _ref9 = _iterator2[_i2++];
+      } else {
+        _i2 = _iterator2.next();
+        if (_i2.done) break;
+        _ref9 = _i2.value;
+      }
+
+      var rule = _ref9;
+      var area = rule.areas[value];
+      var hasDuplicateName = rule.duplicateAreaNames.includes(value); // if we can't find the area name, update lastRule and continue
+
+      if (!area) {
+        var lastRuleIndex = css.index(rulesToInsert[lastArea].lastRule);
+
+        if (gridAreaRuleIndex > lastRuleIndex) {
+          rulesToInsert[lastArea].lastRule = gridAreaMedia || gridAreaRule;
+        }
+
+        continue;
+      } // for grid-templates inside media rule we need to create empty
+      // array to push prefixed grid-area rules later
+
+
+      if (rule.params && !rulesToInsert[lastArea][rule.params]) {
+        rulesToInsert[lastArea][rule.params] = [];
+      }
+
+      if ((!rule.hasDuplicates || !hasDuplicateName) && !rule.params) {
+        // grid-template has no duplicates and not inside media rule
+        getMSDecls(area, false, false).reverse().forEach(function (i) {
+          return gridAreaRule.prepend(Object.assign(i, {
+            raws: {
+              between: gridArea.raws.between
+            }
+          }));
+        });
+        rulesToInsert[lastArea].lastRule = gridAreaRule;
+      } else if (rule.hasDuplicates && !rule.params && !selectorIsComplex) {
+        (function () {
+          // grid-template has duplicates and not inside media rule
+          var cloned = gridAreaRule.clone();
+          cloned.removeAll();
+          getMSDecls(area, area.row.updateSpan, area.column.updateSpan).reverse().forEach(function (i) {
+            return cloned.prepend(Object.assign(i, {
+              raws: {
+                between: gridArea.raws.between
+              }
+            }));
+          });
+          cloned.selectors = changeDuplicateAreaSelectors(cloned.selectors, rule.selectors);
+
+          if (rulesToInsert[lastArea].lastRule) {
+            rulesToInsert[lastArea].lastRule.after(cloned);
+          }
+
+          rulesToInsert[lastArea].lastRule = cloned;
+        })();
+      } else if (rule.hasDuplicates && !rule.params && selectorIsComplex && gridAreaRule.selector.includes(rule.selectors[0])) {
+        // grid-template has duplicates and not inside media rule
+        // see the bottom of grid-template-areas test case for example
+        gridAreaRule.walkDecls(/-ms-grid-(row|column)/, function (d) {
+          return d.remove();
+        });
+        getMSDecls(area, area.row.updateSpan, area.column.updateSpan).reverse().forEach(function (i) {
+          return gridAreaRule.prepend(Object.assign(i, {
+            raws: {
+              between: gridArea.raws.between
+            }
+          }));
+        });
+      } else if (rule.params) {
+        (function () {
+          // grid-template is inside media rule
+          // if we're inside media rule, we need to store prefixed rules
+          // inside rulesToInsert object to be able to preserve the order of media
+          // rules and merge them easily
+          var cloned = gridAreaRule.clone();
+          cloned.removeAll();
+          getMSDecls(area, area.row.updateSpan, area.column.updateSpan).reverse().forEach(function (i) {
+            return cloned.prepend(Object.assign(i, {
+              raws: {
+                between: gridArea.raws.between
+              }
+            }));
+          });
+
+          if (rule.hasDuplicates && hasDuplicateName) {
+            cloned.selectors = changeDuplicateAreaSelectors(cloned.selectors, rule.selectors);
+          }
+
+          cloned.raws = rule.node.raws;
+
+          if (css.index(rule.node.parent) > gridAreaRuleIndex) {
+            // append the prefixed rules right inside media rule
+            // with grid-template
+            rule.node.parent.append(cloned);
+          } else {
+            // store the rule to insert later
+            rulesToInsert[lastArea][rule.params].push(cloned);
+          }
+
+          if (gridAreaMedia) {
+            rulesToInsert[lastArea].lastRule = gridAreaMedia || gridAreaRule;
+          }
+        })();
+      }
+    }
+
+    return undefined;
+  }); // append stored rules inside the media rules
+
+  Object.keys(rulesToInsert).forEach(function (area) {
+    var data = rulesToInsert[area];
+    var lastRule = data.lastRule;
+    Object.keys(data).reverse().filter(function (p) {
+      return p !== 'lastRule';
+    }).forEach(function (params) {
+      if (data[params].length > 0 && lastRule) {
+        lastRule.after({
+          name: 'media',
+          params: params
+        });
+        lastRule.next().append(data[params]);
+      }
+    });
+  });
+  return undefined;
 }
+/**
+ * Warn user if grid area identifiers are not found
+ * @param  {Object} areas
+ * @param  {Declaration} decl
+ * @param  {Result} result
+ * @return {void}
+ */
 
-function insertAreas(areas, decl, result) {
+
+function warnMissedAreas(areas, decl, result) {
   var missed = Object.keys(areas);
-  var parentMedia = getParentMedia(decl.parent);
-  var rules = [];
-  var areasLength = Object.keys(areas).length;
-  var areasCount = 0;
   decl.root().walkDecls('grid-area', function (gridArea) {
-    var value = gridArea.value;
-    var area = areas[value];
     missed = missed.filter(function (e) {
-      return e !== value;
+      return e !== gridArea.value;
     });
+  });
 
-    if (area && parentMedia) {
-      // create new rule
-      var rule = decl.parent.clone({
-        selector: gridArea.parent.selector
-      });
-      rule.removeAll(); // insert prefixed decls in new rule
+  if (missed.length > 0) {
+    decl.warn(result, 'Can not find grid areas: ' + missed.join(', '));
+  }
+
+  return undefined;
+}
+/**
+ * compare selectors with grid-area rule and grid-template rule
+ * show warning if grid-template selector is not found
+ * (this function used for grid-area rule)
+ * @param  {Declaration} decl
+ * @param  {Result} result
+ * @return {void}
+ */
 
-      var _shouldAddSpan = shouldAddSpan(decl, area, value),
-          addRowSpan = _shouldAddSpan[0],
-          addColumnSpan = _shouldAddSpan[1];
 
-      getMSDecls(area, addRowSpan, addColumnSpan).forEach(function (i) {
-        return rule.append(Object.assign(i, {
-          raws: {
-            between: gridArea.raws.between
-          }
-        }));
-      });
-      rules.push(rule);
-      areasCount++;
-
-      if (areasCount === areasLength) {
-        var next = gridArea.parent.next();
-        if (next && next.type === 'atrule' && next.name === 'media' && next.params === parentMedia.params && next.first.type === 'rule' && next.first.selector && parentMedia.first.selector && /^-ms-/.test(next.first.first.prop)) return undefined;
-        var selectors = rules.map(function (r) {
-          return r.selector;
-        });
-        var lastSimilarMedia = getLastNextSimilarMedia(next, selectors);
-        var areaParentMedia = getParentMedia(gridArea.parent);
-        var areaMedia = parentMedia.clone().removeAll().append(rules);
-
-        if (areaParentMedia) {
-          // insert after @media
-          areaParentMedia.after(areaMedia);
-        } else if (lastSimilarMedia) {
-          // insert after the closest @media with the same selectors
-          lastSimilarMedia.after(areaMedia);
+function warnTemplateSelectorNotFound(decl, result) {
+  var rule = decl.parent;
+  var root = decl.root();
+  var duplicatesFound = false; // slice selector array. Remove the last part (for comparison)
+
+  var slicedSelectorArr = list.space(rule.selector).filter(function (str) {
+    return str !== '>';
+  }).slice(0, -1); // we need to compare only if selector is complex.
+  // e.g '.grid-cell' is simple, but '.parent > .grid-cell' is complex
+
+  if (slicedSelectorArr.length > 0) {
+    var gridTemplateFound = false;
+    var foundAreaSelector = null;
+    root.walkDecls(/grid-template(-areas)?$/, function (d) {
+      var parent = d.parent;
+      var templateSelectors = parent.selectors;
+
+      var _parseTemplate2 = parseTemplate({
+        decl: d,
+        gap: getGridGap(d)
+      }),
+          areas = _parseTemplate2.areas;
+
+      var hasArea = areas[decl.value]; // find the the matching selectors
+
+      for (var _iterator3 = templateSelectors, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
+        var _ref10;
+
+        if (_isArray3) {
+          if (_i3 >= _iterator3.length) break;
+          _ref10 = _iterator3[_i3++];
         } else {
-          // insert after every other Rule
-          gridArea.parent.after(areaMedia);
+          _i3 = _iterator3.next();
+          if (_i3.done) break;
+          _ref10 = _i3.value;
+        }
+
+        var tplSelector = _ref10;
+
+        if (gridTemplateFound) {
+          break;
         }
+
+        var tplSelectorArr = list.space(tplSelector).filter(function (str) {
+          return str !== '>';
+        });
+        gridTemplateFound = tplSelectorArr.every(function (item, idx) {
+          return item === slicedSelectorArr[idx];
+        });
       }
 
-      return undefined;
-    }
+      if (gridTemplateFound || !hasArea) {
+        return true;
+      }
 
-    if (area) {
-      gridArea.parent.walkDecls(/-ms-grid-(row|column)/, function (d) {
-        d.remove();
-      }); // insert prefixed decls before grid-area
+      if (!foundAreaSelector) {
+        foundAreaSelector = parent.selector;
+      } // if we found the duplicate area with different selector
 
-      getMSDecls(area).forEach(function (i) {
-        return gridArea.cloneBefore(i);
-      });
+
+      if (foundAreaSelector && foundAreaSelector !== parent.selector) {
+        duplicatesFound = true;
+      }
+
+      return undefined;
+    }); // warn user if we didn't find template
+
+    if (!gridTemplateFound && duplicatesFound) {
+      decl.warn(result, "Autoprefixer cannot find a grid-template " + ("containing the duplicate grid-area \"" + decl.value + "\" ") + ("with full selector matching: " + slicedSelectorArr.join(' ')));
     }
+  }
+}
+/**
+ * warn user if both grid-area and grid-(row|column)
+ * declarations are present in the same rule
+ * @param  {Declaration} decl
+ * @param  {Result} result
+ * @return {void}
+ */
 
-    return undefined;
+
+function warnIfGridRowColumnExists(decl, result) {
+  var rule = decl.parent;
+  var decls = [];
+  rule.walkDecls(/^grid-(row|column)/, function (d) {
+    decls.push(d);
   });
 
-  if (missed.length > 0) {
-    decl.warn(result, 'Can not find grid areas: ' + missed.join(', '));
+  if (decls.length > 0) {
+    decls.forEach(function (d) {
+      d.warn(result, "You already have a grid-area declaration present in the rule. " + ("You should use either grid-area or " + d.prop + ", not both"));
+    });
   }
+
+  return undefined;
 } // Gap utils
 
 
@@ -567,9 +812,9 @@ function getGridGap(decl) {
   var gap = {}; // try to find gap
 
   var testGap = /^(grid-)?((row|column)-)?gap$/;
-  decl.parent.walkDecls(testGap, function (_ref9) {
-    var prop = _ref9.prop,
-        value = _ref9.value;
+  decl.parent.walkDecls(testGap, function (_ref11) {
+    var prop = _ref11.prop,
+        value = _ref11.value;
 
     if (/^(grid-)?gap$/.test(prop)) {
       var _parser$nodes = parser(value).nodes,
@@ -594,6 +839,10 @@ function getGridGap(decl) {
 
 
 function parseMediaParams(params) {
+  if (!params) {
+    return false;
+  }
+
   var parsed = parser(params);
   var prop;
   var value;
@@ -606,6 +855,63 @@ function parseMediaParams(params) {
   });
   return [prop, value];
 }
+/**
+ * Compare the selectors and decide if we
+ * need to inherit gap from compared selector or not.
+ * @type {String} selA
+ * @type {String} selB
+ * @return {Boolean}
+ */
+
+
+function shouldInheritGap(selA, selB) {
+  var result; // get arrays of selector split in 3-deep array
+
+  var splitSelectorArrA = splitSelector(selA);
+  var splitSelectorArrB = splitSelector(selB);
+
+  if (splitSelectorArrA[0].length < splitSelectorArrB[0].length) {
+    // abort if selectorA has lower descendant specificity then selectorB
+    // (e.g '.grid' and '.hello .world .grid')
+    return false;
+  } else if (splitSelectorArrA[0].length > splitSelectorArrB[0].length) {
+    // if selectorA has higher descendant specificity then selectorB
+    // (e.g '.foo .bar .grid' and '.grid')
+    var idx = splitSelectorArrA[0].reduce(function (res, _ref12, index) {
+      var item = _ref12[0];
+      var firstSelectorPart = splitSelectorArrB[0][0][0];
+
+      if (item === firstSelectorPart) {
+        return index;
+      }
+
+      return false;
+    }, false);
+
+    if (idx) {
+      result = splitSelectorArrB[0].every(function (arr, index) {
+        return arr.every(function (part, innerIndex) {
+          return (// because selectorA has more space elements, we need to slice
+            // selectorA array by 'idx' number to compare them
+            splitSelectorArrA[0].slice(idx)[index][innerIndex] === part
+          );
+        });
+      });
+    }
+  } else {
+    // if selectorA has the same descendant specificity as selectorB
+    // this condition covers cases such as: '.grid.foo.bar' and '.grid'
+    result = splitSelectorArrB.some(function (byCommaArr) {
+      return byCommaArr.every(function (bySpaceArr, index) {
+        return bySpaceArr.every(function (part, innerIndex) {
+          return splitSelectorArrA[0][index][innerIndex] === part;
+        });
+      });
+    });
+  }
+
+  return result;
+}
 /**
  * inherit grid gap values from the closest rule above
  * with the same selector
@@ -618,20 +924,27 @@ function parseMediaParams(params) {
 function inheritGridGap(decl, gap) {
   var rule = decl.parent;
   var mediaRule = getParentMedia(rule);
-  var root = rule.root();
+  var root = rule.root(); // get an array of selector split in 3-deep array
 
-  if (Object.keys(gap).length > 0 || !mediaRule) {
+  var splitSelectorArr = splitSelector(rule.selector); // abort if the rule already has gaps
+
+  if (Object.keys(gap).length > 0) {
     return false;
   } // e.g ['min-width']
 
 
   var _parseMediaParams = parseMediaParams(mediaRule.params),
-      prop = _parseMediaParams[0]; // find the closest rule with the same selector
+      prop = _parseMediaParams[0];
+
+  var lastBySpace = splitSelectorArr[0]; // get escaped value from the selector
+  // if we have '.grid-2.foo.bar' selector, will be '\.grid\-2'
 
+  var escaped = escapeRegexp(lastBySpace[lastBySpace.length - 1][0]);
+  var regexp = new RegExp("(" + escaped + "$)|(" + escaped + "[,.])"); // find the closest rule with the same selector
 
   var closestRuleGap;
-  root.walkRules(rule.selector, function (r) {
-    var gridGap; // abort if checking the same rule
+  root.walkRules(regexp, function (r) {
+    var gridGap; // abort if are checking the same rule
 
     if (rule.toString() === r.toString()) {
       return false;
@@ -644,6 +957,11 @@ function inheritGridGap(decl, gap) {
 
     if (!gridGap || Object.keys(gridGap).length === 0) {
       return true;
+    } // skip rules that should not be inherited from
+
+
+    if (!shouldInheritGap(rule.selector, r.selector)) {
+      return true;
     }
 
     var media = getParentMedia(r);
@@ -667,16 +985,16 @@ function inheritGridGap(decl, gap) {
 
   if (closestRuleGap && Object.keys(closestRuleGap).length > 0) {
     return closestRuleGap;
-  } else {
-    return false;
   }
+
+  return false;
 }
 
-function warnGridGap(_ref10) {
-  var gap = _ref10.gap,
-      hasColumns = _ref10.hasColumns,
-      decl = _ref10.decl,
-      result = _ref10.result;
+function warnGridGap(_ref13) {
+  var gap = _ref13.gap,
+      hasColumns = _ref13.hasColumns,
+      decl = _ref13.decl,
+      result = _ref13.result;
   var hasBothGaps = gap.row && gap.column;
 
   if (!hasColumns && (hasBothGaps || gap.column && !gap.row)) {
@@ -690,12 +1008,14 @@ module.exports = {
   translate: translate,
   parseTemplate: parseTemplate,
   parseGridAreas: parseGridAreas,
+  warnMissedAreas: warnMissedAreas,
   insertAreas: insertAreas,
   insertDecl: insertDecl,
   prefixTrackProp: prefixTrackProp,
   prefixTrackValue: prefixTrackValue,
   getGridGap: getGridGap,
   warnGridGap: warnGridGap,
-  warnDuplicateNames: warnDuplicateNames,
+  warnTemplateSelectorNotFound: warnTemplateSelectorNotFound,
+  warnIfGridRowColumnExists: warnIfGridRowColumnExists,
   inheritGridGap: inheritGridGap
 };