autoprefixer 9.3.1 → 9.4.3

package/lib/hacks/gradient.js

@@ -101,11 +101,11 @@ function (_Value) {
     }
 
     return ast.toString();
-  };
+  }
   /**
    * Replace first token
    */
-
+  ;
 
   _proto.replaceFirst = function replaceFirst(params) {
     for (var _len2 = arguments.length, words = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
@@ -126,21 +126,21 @@ function (_Value) {
       };
     });
     return prefix.concat(params.slice(1));
-  };
+  }
   /**
    * Convert angle unit to deg
    */
-
+  ;
 
   _proto.normalizeUnit = function normalizeUnit(str, full) {
     var num = parseFloat(str);
     var deg = num / full * 360;
     return deg + "deg";
-  };
+  }
   /**
    * Normalize angle
    */
-
+  ;
 
   _proto.normalize = function normalize(nodes) {
     if (!nodes[0]) return nodes;
@@ -168,11 +168,11 @@ function (_Value) {
     }
 
     return nodes;
-  };
+  }
   /**
    * Replace old direction to new
    */
-
+  ;
 
   _proto.newDirection = function newDirection(params) {
     if (params[0].value === 'to') {
@@ -204,11 +204,11 @@ function (_Value) {
     }
 
     return params;
-  };
+  }
   /**
    * Look for at word
    */
-
+  ;
 
   _proto.isRadial = function isRadial(params) {
     var state = 'before';
@@ -241,11 +241,11 @@ function (_Value) {
     }
 
     return false;
-  };
+  }
   /**
    * Change new direction to old
    */
-
+  ;
 
   _proto.convertDirection = function convertDirection(params) {
     if (params.length > 0) {
@@ -259,11 +259,11 @@ function (_Value) {
     }
 
     return params;
-  };
+  }
   /**
    * Replace `to top left` to `bottom right`
    */
-
+  ;
 
   _proto.fixDirection = function fixDirection(params) {
     params.splice(0, 2);
@@ -290,11 +290,11 @@ function (_Value) {
         param.value = this.revertDirection(param.value);
       }
     }
-  };
+  }
   /**
    * Add 90 degrees
    */
-
+  ;
 
   _proto.fixAngle = function fixAngle(params) {
     var first = params[0].value;
@@ -302,11 +302,11 @@ function (_Value) {
     first = Math.abs(450 - first) % 360;
     first = this.roundFloat(first, 3);
     params[0].value = first + "deg";
-  };
+  }
   /**
    * Fix radial direction syntax
    */
-
+  ;
 
   _proto.fixRadial = function fixRadial(params) {
     var first = [];
@@ -342,19 +342,19 @@ function (_Value) {
 
   _proto.revertDirection = function revertDirection(word) {
     return this.directions[word.toLowerCase()] || word;
-  };
+  }
   /**
    * Round float and save digits under dot
    */
-
+  ;
 
   _proto.roundFloat = function roundFloat(float, digits) {
     return parseFloat(float.toFixed(digits));
-  };
+  }
   /**
    * Convert to old webkit syntax
    */
-
+  ;
 
   _proto.oldWebkit = function oldWebkit(node) {
     var nodes = node.nodes;
@@ -409,11 +409,11 @@ function (_Value) {
     }, this.cloneDiv(node.nodes));
     node.value = '-webkit-gradient';
     return true;
-  };
+  }
   /**
    * Change direction syntax to old webkit
    */
-
+  ;
 
   _proto.oldDirection = function oldDirection(params) {
     var div = this.cloneDiv(params[0]);
@@ -453,11 +453,11 @@ function (_Value) {
       }, div];
       return params[0];
     }
-  };
+  }
   /**
    * Get div token from exists parameters
    */
-
+  ;
 
   _proto.cloneDiv = function cloneDiv(params) {
     for (var _iterator6 = params, _isArray6 = Array.isArray(_iterator6), _i7 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
@@ -484,11 +484,11 @@ function (_Value) {
       value: ',',
       after: ' '
     };
-  };
+  }
   /**
    * Change colors syntax to old webkit
    */
-
+  ;
 
   _proto.colorStops = function colorStops(params) {
     var result = [];
@@ -536,11 +536,11 @@ function (_Value) {
     }
 
     return result;
-  };
+  }
   /**
    * Remove old WebKit gradient too
    */
-
+  ;
 
   _proto.old = function old(prefix) {
     if (prefix === '-webkit-') {
@@ -551,11 +551,11 @@ function (_Value) {
     } else {
       return _Value.prototype.old.call(this, prefix);
     }
-  };
+  }
   /**
    * Do not add non-webkit prefixes for list-style and object
    */
-
+  ;
 
   _proto.add = function add(decl, prefix) {
     var p = decl.prop;

package/lib/hacks/grid-column-align.js

@@ -24,19 +24,19 @@ function (_Declaration) {
    */
   _proto.check = function check(decl) {
     return decl.value.indexOf('flex-') === -1 && decl.value !== 'baseline';
-  };
+  }
   /**
    * Change property name for IE
    */
-
+  ;
 
   _proto.prefixed = function prefixed(prop, prefix) {
     return prefix + 'grid-column-align';
-  };
+  }
   /**
    * Change IE property back
    */
-
+  ;
 
   _proto.normalize = function normalize() {
     return 'justify-self';

package/lib/hacks/grid-row-align.js

@@ -24,19 +24,19 @@ function (_Declaration) {
    */
   _proto.check = function check(decl) {
     return decl.value.indexOf('flex-') === -1 && decl.value !== 'baseline';
-  };
+  }
   /**
    * Change property name for IE
    */
-
+  ;
 
   _proto.prefixed = function prefixed(prop, prefix) {
     return prefix + 'grid-row-align';
-  };
+  }
   /**
    * Change IE property back
    */
-
+  ;
 
   _proto.normalize = function normalize() {
     return 'align-self';

package/lib/hacks/grid-rows-columns.js

@@ -10,7 +10,12 @@ var Declaration = require('../declaration');
 
 var _require = require('./grid-utils'),
     prefixTrackProp = _require.prefixTrackProp,
-    prefixTrackValue = _require.prefixTrackValue;
+    prefixTrackValue = _require.prefixTrackValue,
+    autoplaceGridItems = _require.autoplaceGridItems,
+    getGridGap = _require.getGridGap,
+    inheritGridGap = _require.inheritGridGap;
+
+var Processor = require('../processor');
 
 var GridRowsColumns =
 /*#__PURE__*/
@@ -35,28 +40,105 @@ function (_Declaration) {
     }
 
     return _Declaration.prototype.prefixed.call(this, prop, prefix);
-  };
+  }
   /**
    * Change IE property back
    */
-
+  ;
 
   _proto.normalize = function normalize(prop) {
     return prop.replace(/^grid-(rows|columns)/, 'grid-template-$1');
   };
-  /**
-   * Change repeating syntax for IE
-   */
 
+  _proto.insert = function insert(decl, prefix, prefixes, result) {
+    if (prefix !== '-ms-') return _Declaration.prototype.insert.call(this, decl, prefix, prefixes);
+    var parent = decl.parent,
+        prop = decl.prop,
+        value = decl.value;
+    var isRowProp = prop.includes('rows');
+    var isColumnProp = prop.includes('columns');
+    var hasGridTemplate = parent.some(function (i) {
+      return i.prop === 'grid-template' || i.prop === 'grid-template-areas';
+    });
+    /**
+     * Not to prefix rows declaration if grid-template(-areas) is present
+     */
+
+    if (hasGridTemplate && isRowProp) {
+      return false;
+    }
+
+    var processor = new Processor({});
+    var status = processor.gridStatus(parent, result);
+    var gap = getGridGap(decl);
+    gap = inheritGridGap(decl, gap) || gap;
+    var gapValue = isRowProp ? gap.row : gap.column;
+
+    if ((status === 'no-autoplace' || status === true) && !hasGridTemplate) {
+      gapValue = null;
+    }
+
+    var prefixValue = prefixTrackValue({
+      value: value,
+      gap: gapValue
+    });
+    /**
+     * Insert prefixes
+     */
 
-  _proto.set = function set(decl, prefix) {
-    if (prefix === '-ms-' && decl.value.indexOf('repeat(') !== -1) {
-      decl.value = prefixTrackValue({
-        value: decl.value
+    decl.cloneBefore({
+      prop: prefixTrackProp({
+        prop: prop,
+        prefix: prefix
+      }),
+      value: prefixValue
+    });
+    var autoflow = parent.nodes.find(function (i) {
+      return i.prop === 'grid-auto-flow';
+    });
+    var autoflowValue = 'row';
+
+    if (autoflow && !processor.disabled(autoflow, result)) {
+      autoflowValue = autoflow.value.trim();
+    }
+
+    if (status === 'autoplace') {
+      /**
+       * Show warning if grid-template-rows decl is not found
+       */
+      var rowDecl = parent.nodes.find(function (i) {
+        return i.prop === 'grid-template-rows';
       });
+
+      if (!rowDecl && hasGridTemplate) {
+        return undefined;
+      } else if (!rowDecl && !hasGridTemplate) {
+        decl.warn(result, "Autoplacement does not work without grid-template-rows property");
+        return undefined;
+      }
+      /**
+       * Show warning if grid-template-columns decl is not found
+       */
+
+
+      var columnDecl = parent.nodes.find(function (i) {
+        return i.prop === 'grid-template-columns';
+      });
+
+      if (!columnDecl && !hasGridTemplate) {
+        decl.warn(result, "Autoplacement does not work without grid-template-columns property");
+      }
+      /**
+       * Autoplace grid items
+       */
+
+
+      if (isColumnProp && !hasGridTemplate) {
+        autoplaceGridItems(decl, result, gap, autoflowValue);
+      }
     }
 
-    return _Declaration.prototype.set.call(this, decl, prefix);
+    return undefined;
   };
 
   return GridRowsColumns;

package/lib/hacks/grid-start.js

@@ -25,19 +25,19 @@ function (_Declaration) {
   _proto.check = function check(decl) {
     var value = decl.value;
     return value.indexOf('/') === -1 || value.indexOf('span') !== -1;
-  };
+  }
   /**
    * Return a final spec property
    */
-
+  ;
 
   _proto.normalize = function normalize(prop) {
     return prop.replace('-start', '');
-  };
+  }
   /**
    * Change property name for IE
    */
-
+  ;
 
   _proto.prefixed = function prefixed(prop, prefix) {
     var result = _Declaration.prototype.prefixed.call(this, prop, prefix);

package/lib/hacks/grid-template-areas.js

@@ -41,78 +41,30 @@ function (_Declaration) {
     var hasRows = false;
     var parent = decl.parent;
     var gap = getGridGap(decl);
-    var inheritedGap = inheritGridGap(decl, gap); // remove already prefixed rows and columns
-    // without gutter to prevent doubling prefixes
+    gap = inheritGridGap(decl, gap) || gap; // remove already prefixed rows
+    // to prevent doubling prefixes
 
-    parent.walkDecls(/-ms-grid-(rows|columns)/, function (i) {
+    parent.walkDecls(/-ms-grid-rows/, function (i) {
       return i.remove();
-    }); // add empty tracks to rows and columns
+    }); // add empty tracks to rows
 
     parent.walkDecls(/grid-template-(rows|columns)/, function (trackDecl) {
       if (trackDecl.prop === 'grid-template-rows') {
         hasRows = true;
         var prop = trackDecl.prop,
             value = trackDecl.value;
-        /**
-         * we must insert inherited gap values in some cases:
-         * if we are inside media query && if we have no grid-gap value
-        */
-
-        if (inheritedGap) {
-          trackDecl.cloneBefore({
-            prop: prefixTrackProp({
-              prop: prop,
-              prefix: prefix
-            }),
-            value: prefixTrackValue({
-              value: value,
-              gap: inheritedGap.row
-            })
-          });
-        } else {
-          trackDecl.cloneBefore({
-            prop: prefixTrackProp({
-              prop: prop,
-              prefix: prefix
-            }),
-            value: prefixTrackValue({
-              value: value,
-              gap: gap.row
-            })
-          });
-        }
+        trackDecl.cloneBefore({
+          prop: prefixTrackProp({
+            prop: prop,
+            prefix: prefix
+          }),
+          value: prefixTrackValue({
+            value: value,
+            gap: gap.row
+          })
+        });
       } else {
         hasColumns = true;
-        var _prop = trackDecl.prop,
-            _value = trackDecl.value;
-        /**
-         * we must insert inherited gap values in some cases:
-         * if we are inside media query && if we have no grid-gap value
-        */
-
-        if (inheritedGap) {
-          trackDecl.cloneBefore({
-            prop: prefixTrackProp({
-              prop: _prop,
-              prefix: prefix
-            }),
-            value: prefixTrackValue({
-              value: _value,
-              gap: inheritedGap.column
-            })
-          });
-        } else {
-          trackDecl.cloneBefore({
-            prop: prefixTrackProp({
-              prop: _prop,
-              prefix: prefix
-            }),
-            value: prefixTrackValue({
-              value: _value,
-              gap: gap.column
-            })
-          });
-        }
       }
     });
     var gridRows = getGridRows(decl.value);

package/lib/hacks/grid-utils.js

@@ -460,7 +460,7 @@ function parseGridTemplatesData(css) {
           }
         });
       });
-      parsed[index].allAreas = uniq(allAreas.concat(areaNames));
+      parsed[index].allAreas = uniq([].concat(allAreas, areaNames));
       parsed[index].rules.push({
         hasDuplicates: !hasNoDuplicates,
         params: media.params,
@@ -795,7 +795,9 @@ function warnIfGridRowColumnExists(decl, result) {
   var rule = decl.parent;
   var decls = [];
   rule.walkDecls(/^grid-(row|column)/, function (d) {
-    decls.push(d);
+    if (!/-end$/.test(d.prop) && !/^span/.test(d.value)) {
+      decls.push(d);
+    }
   });
 
   if (decls.length > 0) {
@@ -1002,6 +1004,129 @@ function warnGridGap(_ref13) {
     decl.warn(result, 'Can not impliment grid-gap without grid-tamplate-columns');
   }
 }
+/**
+ * normalize the grid-template-rows/columns values
+ * @param  {String} str grid-template-rows/columns value
+ * @return {Array} normalized array with values
+ * @example
+ * let normalized = normalizeRowColumn('1fr repeat(2, 20px 50px) 1fr')
+ * normalized // <= ['1fr', '20px', '50px', '20px', '50px', '1fr']
+ */
+
+
+function normalizeRowColumn(str) {
+  var normalized = parser(str).nodes.reduce(function (result, node) {
+    if (node.type === 'function' && node.value === 'repeat') {
+      var key = 'count';
+
+      var _node$nodes$reduce = node.nodes.reduce(function (acc, n) {
+        if (n.type === 'word' && key === 'count') {
+          acc[0] = Math.abs(parseInt(n.value));
+          return acc;
+        }
+
+        if (n.type === 'div' && n.value === ',') {
+          key = 'value';
+          return acc;
+        }
+
+        if (key === 'value') {
+          acc[1] += parser.stringify(n);
+        }
+
+        return acc;
+      }, [0, '']),
+          count = _node$nodes$reduce[0],
+          value = _node$nodes$reduce[1];
+
+      if (count) {
+        for (var i = 0; i < count; i++) {
+          result.push(value);
+        }
+      }
+
+      return result;
+    }
+
+    if (node.type === 'space') {
+      return result;
+    }
+
+    return result.concat(parser.stringify(node));
+  }, []);
+  return normalized;
+}
+/**
+ * Autoplace grid items
+ * @param {Declaration} decl
+ * @param {Result} result
+ * @param {Object} gap gap values
+ * @param {String} autoflowValue grid-auto-flow value
+ * @return {void}
+ * @see https://github.com/postcss/autoprefixer/issues/1148
+ */
+
+
+function autoplaceGridItems(decl, result, gap, autoflowValue) {
+  if (autoflowValue === void 0) {
+    autoflowValue = 'row';
+  }
+
+  var parent = decl.parent;
+  var rowDecl = parent.nodes.find(function (i) {
+    return i.prop === 'grid-template-rows';
+  });
+  var rows = normalizeRowColumn(rowDecl.value);
+  var columns = normalizeRowColumn(decl.value); // Build array of area names with dummy values. If we have 3 columns and
+  // 2 rows, filledRows will be equal to ['1 2 3', '4 5 6']
+
+  var filledRows = rows.map(function (_, rowIndex) {
+    return Array.from({
+      length: columns.length
+    }, function (v, k) {
+      return k + rowIndex * columns.length + 1;
+    }).join(' ');
+  });
+  var areas = parseGridAreas({
+    rows: filledRows,
+    gap: gap
+  });
+  var keys = Object.keys(areas);
+  var items = keys.map(function (i) {
+    return areas[i];
+  }); // Change the order of cells if grid-auto-flow value is 'column'
+
+  if (autoflowValue.includes('column')) {
+    items = items.sort(function (a, b) {
+      return a.column.start - b.column.start;
+    });
+  } // Insert new rules
+
+
+  items.reverse().forEach(function (item, index) {
+    var column = item.column,
+        row = item.row;
+    var nodeSelector = parent.selectors.map(function (sel) {
+      return sel + (" > *:nth-child(" + (keys.length - index) + ")");
+    }).join(', '); // create new rule
+
+    var node = parent.clone().removeAll(); // change rule selector
+
+    node.selector = nodeSelector; // insert prefixed row/column values
+
+    node.append({
+      prop: '-ms-grid-row',
+      value: row.start
+    });
+    node.append({
+      prop: '-ms-grid-column',
+      value: column.start
+    }); // insert rule
+
+    parent.after(node);
+  });
+  return undefined;
+}
 
 module.exports = {
   parse: parse,
@@ -1017,5 +1142,6 @@ module.exports = {
   warnGridGap: warnGridGap,
   warnTemplateSelectorNotFound: warnTemplateSelectorNotFound,
   warnIfGridRowColumnExists: warnIfGridRowColumnExists,
-  inheritGridGap: inheritGridGap
+  inheritGridGap: inheritGridGap,
+  autoplaceGridItems: autoplaceGridItems
 };