autoprefixer 6.2.1 → 6.3.1

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 6.3.1
+* Fix compatibility with Flexibility polyfill.
+
+## 6.3 “Pro rege et lege”
+* Add Grid Layout support.
+* Add `text-spacing` support.
+* Add `> 10% in my stats` browsers query with custom usage statistics.
+* Add options to disable `@supports`, Flexbox or Grid support.
+* Fix compatibility with other PostCSS plugins.
+
+## 6.2.3
+* Fix error on broken transition with double comma.
+
+## 6.2.2
+* Fix issues in broken transitions.
+
 ## 6.2.1
 * Fix AST error in transition warning (by @jvdanilo).
 

package/README.md

@@ -446,7 +446,16 @@ a {
 If some prefixes were generated in a wrong way,
 please create an issue on GitHub.
 
-But if you do not need Autoprefixer in some part of your CSS,
+Autoprefixer has 4 features, which can be disabled by options:
+
+* `supports: false` will disable `@supports` parameters prefixing.
+* `flexbox: false` will disabled flexbox properties prefixing.
+  Or `flexbox: "no-2009"` will add prefixes only for final and IE
+  versions of specification.
+* `grid: false` will disable Grid Layout prefixes for IE.
+* `remove: false` will disabled cleaning outdated prefixes.
+
+If you do not need Autoprefixer in some part of your CSS,
 you can use control comments to disable Autoprefixer.
 
 ```css
@@ -496,13 +505,23 @@ There are 4 options:
 * `add` (boolean): should Autoprefixer add prefixes. Default is `true`.
 * `remove` (boolean): should Autoprefixer [remove outdated] prefixes.
   Default is `true`.
+* `supports` (boolean): should Autoprefixer add prefixes for `@supports`
+  parameters. Default is `true`.
+* `flexbox` (boolean|string): should Autoprefixer add prefixes for flexbox
+  properties. With `"no-2009"` value Autoprefixer will add prefixes only
+  for final and IE versions of specification. Default is `true`.
+* `grid` (boolean): should Autoprefixer add IE prefixes for Grid Layout
+  properties. Default is `true`.
+* `stats` (object): custom [usage statistics] for `> 10% in my stats`
+  browsers query.
 
 Plugin object has `info()` method for debugging purpose.
 
 You can use PostCSS processor to process several CSS files
 to increase performance.
 
-[PostCSS API]: https://github.com/postcss/postcss/blob/master/docs/api.md
+[usage statistics]: https://github.com/ai/browserslist#custom-usage-data
+[PostCSS API]:      https://github.com/postcss/postcss/blob/master/docs/api.md
 
 ## Debug
 

package/data/prefixes.js

@@ -512,4 +512,20 @@
     });
   });
 
+  feature(require('caniuse-db/features-json/css-grid.json'), function(browsers) {
+    prefix('grid', 'inline-grid', {
+      props: ['display'],
+      browsers: browsers
+    });
+    return prefix('grid-template-columns', 'grid-template-rows', 'grid-template-columns', 'grid-column', 'grid-row', 'grid-column-end', 'grid-row-end', 'grid-column-start', 'grid-row-start', 'justify-items', 'grid-row-align', {
+      browsers: browsers
+    });
+  });
+
+  feature(require('caniuse-db/features-json/css-text-spacing.json'), function(browsers) {
+    return prefix('text-spacing', {
+      browsers: browsers
+    });
+  });
+
 }).call(this);

package/lib/autoprefixer.js

@@ -48,9 +48,10 @@
       reqs = options.browsers;
     }
     loadPrefixes = function(opts) {
-      var browsers, key;
-      browsers = new Browsers(module.exports.data.browsers, reqs, opts);
-      key = browsers.selected.join(', ') + options.cascade;
+      var browsers, key, stats;
+      stats = options.stats;
+      browsers = new Browsers(module.exports.data.browsers, reqs, opts, stats);
+      key = browsers.selected.join(', ') + JSON.stringify(options);
       return cache[key] || (cache[key] = new Prefixes(module.exports.data.prefixes, browsers, options));
     };
     plugin = function(css, result) {

package/lib/browsers.js

@@ -32,16 +32,18 @@
       return this.prefixesRegexp.test(value);
     };
 
-    function Browsers(data1, requirements, options) {
+    function Browsers(data1, requirements, options, stats) {
       this.data = data1;
       this.options = options;
+      this.stats = stats;
       this.selected = this.parse(requirements);
     }
 
     Browsers.prototype.parse = function(requirements) {
       var ref;
       return browserslist(requirements, {
-        path: (ref = this.options) != null ? ref.from : void 0
+        path: (ref = this.options) != null ? ref.from : void 0,
+        stats: this.stats
       });
     };
 

package/lib/declaration.js

@@ -112,16 +112,21 @@
       return decl.parent.insertBefore(decl, cloned);
     };
 
-    Declaration.prototype.add = function(decl, prefix, prefixes) {
-      var already, prefixed;
-      prefixed = this.prefixed(decl.prop, prefix);
+    Declaration.prototype.isAlready = function(decl, prefixed) {
+      var already;
       already = this.all.group(decl).up(function(i) {
         return i.prop === prefixed;
       });
       already || (already = this.all.group(decl).down(function(i) {
         return i.prop === prefixed;
       }));
-      if (already || this.otherPrefixes(decl.value, prefix)) {
+      return already;
+    };
+
+    Declaration.prototype.add = function(decl, prefix, prefixes) {
+      var prefixed;
+      prefixed = this.prefixed(decl.prop, prefix);
+      if (this.isAlready(decl, prefixed) || this.otherPrefixes(decl.value, prefix)) {
         return;
       }
       return this.insert(decl, prefix, prefixes);

package/lib/hacks/display-flex.js

@@ -38,7 +38,7 @@
     }
 
     DisplayFlex.prototype.check = function(decl) {
-      return decl.value === this.name;
+      return decl.prop === 'display' && decl.value === this.name;
     };
 
     DisplayFlex.prototype.prefixed = function(prefix) {

package/lib/hacks/grid-end.js

@@ -0,0 +1,46 @@
+(function() {
+  var Declaration, GridEnd,
+    extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
+    hasProp = {}.hasOwnProperty;
+
+  Declaration = require('../declaration');
+
+  GridEnd = (function(superClass) {
+    extend(GridEnd, superClass);
+
+    function GridEnd() {
+      return GridEnd.__super__.constructor.apply(this, arguments);
+    }
+
+    GridEnd.names = ['grid-row-end', 'grid-column-end', 'grid-row-span', 'grid-column-span'];
+
+    GridEnd.prototype.check = function(decl) {
+      return decl.value.indexOf('span') !== -1;
+    };
+
+    GridEnd.prototype.normalize = function(prop) {
+      return prop.replace(/(-span|-end)/, '');
+    };
+
+    GridEnd.prototype.prefixed = function(prop, prefix) {
+      if (prefix === '-ms-') {
+        return prefix + prop.replace('-end', '-span');
+      } else {
+        return GridEnd.__super__.prefixed.call(this, prop, prefix);
+      }
+    };
+
+    GridEnd.prototype.set = function(decl, prefix) {
+      if (prefix === '-ms-') {
+        decl.value = decl.value.replace(/span\s/i, '');
+      }
+      return GridEnd.__super__.set.call(this, decl, prefix);
+    };
+
+    return GridEnd;
+
+  })(Declaration);
+
+  module.exports = GridEnd;
+
+}).call(this);

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

@@ -0,0 +1,31 @@
+(function() {
+  var Declaration, GridRowAlign,
+    extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
+    hasProp = {}.hasOwnProperty;
+
+  Declaration = require('../declaration');
+
+  GridRowAlign = (function(superClass) {
+    extend(GridRowAlign, superClass);
+
+    function GridRowAlign() {
+      return GridRowAlign.__super__.constructor.apply(this, arguments);
+    }
+
+    GridRowAlign.names = ['grid-row-align'];
+
+    GridRowAlign.prototype.prefixed = function(prop, prefix) {
+      return prefix + 'grid-row-align';
+    };
+
+    GridRowAlign.prototype.normalize = function(prop) {
+      return 'align-items';
+    };
+
+    return GridRowAlign;
+
+  })(Declaration);
+
+  module.exports = GridRowAlign;
+
+}).call(this);

package/lib/hacks/grid-start.js

@@ -0,0 +1,71 @@
+(function() {
+  var Declaration, GridStart,
+    extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
+    hasProp = {}.hasOwnProperty;
+
+  Declaration = require('../declaration');
+
+  GridStart = (function(superClass) {
+    extend(GridStart, superClass);
+
+    function GridStart() {
+      return GridStart.__super__.constructor.apply(this, arguments);
+    }
+
+    GridStart.names = ['grid-row-start', 'grid-column-start', 'grid-row', 'grid-column'];
+
+    GridStart.prototype.check = function(decl) {
+      return decl.value.indexOf('/') === -1 || decl.value.indexOf('span') !== -1;
+    };
+
+    GridStart.prototype.normalize = function(prop) {
+      return prop.replace('-start', '');
+    };
+
+    GridStart.prototype.prefixed = function(prop, prefix) {
+      if (prefix === '-ms-') {
+        return prefix + prop.replace('-start', '');
+      } else {
+        return GridStart.__super__.prefixed.call(this, prop, prefix);
+      }
+    };
+
+    GridStart.prototype.insert = function(decl, prefix, prefixes) {
+      var parts;
+      parts = this.splitValue(decl, prefix);
+      if (parts.length === 2) {
+        decl.cloneBefore({
+          prop: '-ms-' + decl.prop + '-span',
+          value: parts[1]
+        });
+      }
+      return GridStart.__super__.insert.call(this, decl, prefix, prefixes);
+    };
+
+    GridStart.prototype.set = function(decl, prefix) {
+      var parts;
+      parts = this.splitValue(decl, prefix);
+      if (parts.length === 2) {
+        decl.value = parts[0];
+      }
+      return GridStart.__super__.set.call(this, decl, prefix);
+    };
+
+    GridStart.prototype.splitValue = function(decl, prefix) {
+      var parts;
+      if (prefix === '-ms-' && decl.prop.indexOf('-start') === -1) {
+        parts = decl.value.split(/\s*\/\s*span\s+/);
+        if (parts.length === 2) {
+          return parts;
+        }
+      }
+      return false;
+    };
+
+    return GridStart;
+
+  })(Declaration);
+
+  module.exports = GridStart;
+
+}).call(this);

package/lib/hacks/grid-template.js

@@ -0,0 +1,77 @@
+(function() {
+  var Declaration, GridTemplate, parser,
+    extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
+    hasProp = {}.hasOwnProperty;
+
+  parser = require('postcss-value-parser');
+
+  Declaration = require('../declaration');
+
+  GridTemplate = (function(superClass) {
+    extend(GridTemplate, superClass);
+
+    function GridTemplate() {
+      return GridTemplate.__super__.constructor.apply(this, arguments);
+    }
+
+    GridTemplate.names = ['grid-template-rows', 'grid-template-columns', 'grid-rows', 'grid-columns'];
+
+    GridTemplate.prototype.prefixed = function(prop, prefix) {
+      if (prefix === '-ms-') {
+        return prefix + prop.replace('template-', '');
+      } else {
+        return GridTemplate.__super__.prefixed.call(this, prop, prefix);
+      }
+    };
+
+    GridTemplate.prototype.normalize = function(prop) {
+      return prop.replace(/^grid-(rows|columns)/, 'grid-template-$1');
+    };
+
+    GridTemplate.prototype.walkRepeat = function(node) {
+      var count, first, fixed, i, j, len, ref;
+      fixed = [];
+      ref = node.nodes;
+      for (j = 0, len = ref.length; j < len; j++) {
+        i = ref[j];
+        if (i.nodes) {
+          this.walkRepeat(i);
+        }
+        fixed.push(i);
+        if (i.type === 'function' && i.value === 'repeat') {
+          first = i.nodes.shift();
+          if (first) {
+            count = first.value;
+            i.nodes.shift();
+            i.value = '';
+            fixed.push({
+              type: 'word',
+              value: "[" + count + "]"
+            });
+          }
+        }
+      }
+      return node.nodes = fixed;
+    };
+
+    GridTemplate.prototype.changeRepeat = function(value) {
+      var ast;
+      ast = parser(value);
+      this.walkRepeat(ast);
+      return ast.toString();
+    };
+
+    GridTemplate.prototype.set = function(decl, prefix) {
+      if (prefix === '-ms-' && decl.value.indexOf('repeat(') !== -1) {
+        decl.value = this.changeRepeat(decl.value);
+      }
+      return GridTemplate.__super__.set.call(this, decl, prefix);
+    };
+
+    return GridTemplate;
+
+  })(Declaration);
+
+  module.exports = GridTemplate;
+
+}).call(this);

package/lib/hacks/justify-items.js

@@ -0,0 +1,31 @@
+(function() {
+  var Declaration, JustifyItems,
+    extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
+    hasProp = {}.hasOwnProperty;
+
+  Declaration = require('../declaration');
+
+  JustifyItems = (function(superClass) {
+    extend(JustifyItems, superClass);
+
+    function JustifyItems() {
+      return JustifyItems.__super__.constructor.apply(this, arguments);
+    }
+
+    JustifyItems.names = ['justify-items', 'grid-column-align'];
+
+    JustifyItems.prototype.prefixed = function(prop, prefix) {
+      return prefix + (prefix === '-ms-' ? 'grid-column-align' : prop);
+    };
+
+    JustifyItems.prototype.normalize = function(prop) {
+      return 'justify-items';
+    };
+
+    return JustifyItems;
+
+  })(Declaration);
+
+  module.exports = JustifyItems;
+
+}).call(this);

package/lib/prefixes.js

@@ -33,12 +33,16 @@
 
   Declaration.hack(require('./hacks/filter'));
 
+  Declaration.hack(require('./hacks/grid-end'));
+
   Declaration.hack(require('./hacks/flex-flow'));
 
   Declaration.hack(require('./hacks/flex-grow'));
 
   Declaration.hack(require('./hacks/flex-wrap'));
 
+  Declaration.hack(require('./hacks/grid-start'));
+
   Declaration.hack(require('./hacks/align-self'));
 
   Declaration.hack(require('./hacks/flex-basis'));
@@ -55,14 +59,20 @@
 
   Declaration.hack(require('./hacks/border-image'));
 
+  Declaration.hack(require('./hacks/justify-items'));
+
   Declaration.hack(require('./hacks/align-content'));
 
   Declaration.hack(require('./hacks/border-radius'));
 
   Declaration.hack(require('./hacks/block-logical'));
 
+  Declaration.hack(require('./hacks/grid-template'));
+
   Declaration.hack(require('./hacks/inline-logical'));
 
+  Declaration.hack(require('./hacks/grid-row-align'));
+
   Declaration.hack(require('./hacks/transform-decl'));
 
   Declaration.hack(require('./hacks/flex-direction'));
@@ -157,6 +167,11 @@
           };
         })(this));
         add = this.sort(utils.uniq(add));
+        if (this.options.flexbox === 'no-2009') {
+          add = add.filter(function(i) {
+            return i.indexOf('2009') === -1;
+          });
+        }
         all = data.browsers.map((function(_this) {
           return function(i) {
             return _this.browsers.prefix(i);
@@ -301,7 +316,10 @@
     };
 
     Prefixes.prototype.unprefixed = function(prop) {
-      prop = vendor.unprefixed(prop);
+      return this.normalize(vendor.unprefixed(prop));
+    };
+
+    Prefixes.prototype.normalize = function(prop) {
       return this.decl(prop).normalize(prop);
     };
 

package/lib/processor.js

@@ -31,7 +31,7 @@
               return viewport != null ? viewport.process(rule) : void 0;
             }
           } else if (rule.name === 'supports') {
-            if (!_this.disabled(rule)) {
+            if (_this.prefixes.options.supports !== false && !_this.disabled(rule)) {
               return supports.process(rule);
             }
           } else if (rule.name === 'media' && rule.params.indexOf('-resolution') !== -1) {
@@ -58,7 +58,7 @@
       })(this));
       css.walkDecls((function(_this) {
         return function(decl) {
-          var prefixer;
+          var display, prefixer;
           if (_this.disabled(decl)) {
             return;
           }
@@ -87,8 +87,36 @@
               node: decl
             });
           }
+          if (_this.prefixes.options.flexbox !== false) {
+            if (decl.prop === 'grid-row-end' && decl.value.indexOf('span') === -1) {
+              result.warn('IE supports only grid-row-end with span. ' + 'You should add grid: false option to Autoprefixer ' + 'and use some JS grid polyfill for full spec support', {
+                node: decl
+              });
+            }
+            if (decl.prop === 'grid-row') {
+              if (decl.value.indexOf('/') !== -1 && decl.value.indexOf('span') === -1) {
+                result.warn('IE supports only grid-row with / and span. ' + 'You should add grid: false option to Autoprefixer ' + 'and use some JS grid polyfill for full spec support', {
+                  node: decl
+                });
+              }
+            }
+          }
           if (decl.prop === 'transition' || decl.prop === 'transition-property') {
             return _this.prefixes.transition.add(decl, result);
+          } else if (decl.prop === 'align-items') {
+            display = _this.displayType(decl);
+            if (display !== 'grid' && _this.prefixes.options.flexbox !== false) {
+              prefixer = _this.prefixes.add['align-items'];
+              if (prefixer && prefixer.prefixes) {
+                prefixer.process(decl);
+              }
+            }
+            if (display !== 'flex' && _this.prefixes.options.grid !== false) {
+              prefixer = _this.prefixes.add['grid-row-align'];
+              if (prefixer && prefixer.prefixes) {
+                return prefixer.process(decl);
+              }
+            }
           } else {
             prefixer = _this.prefixes.add[decl.prop];
             if (prefixer && prefixer.prefixes) {
@@ -154,7 +182,7 @@
           }
           if ((ref1 = _this.prefixes.remove[decl.prop]) != null ? ref1.remove : void 0) {
             notHack = _this.prefixes.group(decl).down(function(other) {
-              return other.prop === unprefixed;
+              return _this.prefixes.normalize(other.prop) === unprefixed;
             });
             if (notHack && !_this.withHackValue(decl)) {
               if (decl.raw('before').indexOf("\n") > -1) {
@@ -190,7 +218,24 @@
     };
 
     Processor.prototype.disabled = function(node) {
-      var status;
+      var other, status;
+      if (this.prefixes.options.grid === false && node.type === 'decl') {
+        if (node.prop === 'display' && node.value.indexOf('grid') !== -1) {
+          return true;
+        }
+        if (node.prop.indexOf('grid') !== -1 || node.prop === 'justify-items') {
+          return true;
+        }
+      }
+      if (this.prefixes.options.flexbox === false && node.type === 'decl') {
+        if (node.prop === 'display' && node.value.indexOf('flex') !== -1) {
+          return true;
+        }
+        other = ['order', 'justify-content', 'align-self', 'align-content'];
+        if (node.prop.indexOf('flex') !== -1 || other.indexOf(node.prop) !== -1) {
+          return true;
+        }
+      }
       if (node._autoprefixerDisabled != null) {
         return node._autoprefixerDisabled;
       } else if (node.nodes) {
@@ -241,6 +286,22 @@
       });
     };
 
+    Processor.prototype.displayType = function(decl) {
+      var i, j, len, ref;
+      ref = decl.parent.nodes;
+      for (j = 0, len = ref.length; j < len; j++) {
+        i = ref[j];
+        if (i.prop === 'display') {
+          if (i.value.indexOf('flex') !== -1) {
+            return 'flex';
+          } else if (i.value.indexOf('grid') !== -1) {
+            return 'grid';
+          }
+        }
+      }
+      return false;
+    };
+
     return Processor;
 
   })();

package/lib/transition.js

@@ -40,7 +40,9 @@
           prefix = ref1[k];
           prefixed = this.prefixes.prefixed(prop, prefix);
           if (prefixed !== '-ms-transform' && names.indexOf(prefixed) === -1) {
-            added.push(this.clone(prefixed, param));
+            if (!this.disabled(prop, prefix)) {
+              added.push(this.clone(prefixed, param));
+            }
           }
         }
       }
@@ -145,7 +147,9 @@
         }
       }
       result.push(param);
-      return result;
+      return result.filter(function(i) {
+        return i.length > 0;
+      });
     };
 
     Transition.prototype.stringify = function(params) {
@@ -235,6 +239,18 @@
       return result;
     };
 
+    Transition.prototype.disabled = function(prop, prefix) {
+      var other;
+      other = ['order', 'justify-content', 'align-self', 'align-content'];
+      if (prop.indexOf('flex') !== -1 || other.indexOf(prop) !== -1) {
+        if (this.prefixes.options.flexbox === false) {
+          return true;
+        } else if (this.prefixes.options.flexbox === 'no-2009') {
+          return prefix.indexOf('2009') !== -1;
+        }
+      }
+    };
+
     return Transition;
 
   })();

package/lib/value.js

@@ -77,10 +77,18 @@
       return string.replace(this.regexp(), '$1' + prefix + '$2');
     };
 
+    Value.prototype.value = function(decl) {
+      if (decl.raws.value && decl.raws.value.value === decl.value) {
+        return decl.raws.value.raw;
+      } else {
+        return decl.value;
+      }
+    };
+
     Value.prototype.add = function(decl, prefix) {
-      var ref, value;
+      var value;
       decl._autoprefixerValues || (decl._autoprefixerValues = {});
-      value = decl._autoprefixerValues[prefix] || ((ref = decl.raws.value) != null ? ref.raw : void 0) || decl.value;
+      value = decl._autoprefixerValues[prefix] || this.value(decl);
       value = this.replace(value, prefix);
       if (value) {
         return decl._autoprefixerValues[prefix] = value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autoprefixer",
-  "version": "6.2.1",
+  "version": "6.3.1",
   "description": "Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website",
   "keywords": [
     "autoprefixer",
@@ -16,9 +16,9 @@
     "postcss-value-parser": "^3.2.3",
     "normalize-range": "^0.1.2",
     "num2fraction": "^1.2.2",
-    "browserslist": "~1.0.1",
-    "caniuse-db": "^1.0.30000379",
-    "postcss": "^5.0.13"
+    "browserslist": "~1.1.1",
+    "caniuse-db": "^1.0.30000387",
+    "postcss": "^5.0.14"
   },
   "devDependencies": {
     "vinyl-source-stream": "1.1.0",
@@ -27,9 +27,9 @@
     "gulp-eslint": "1.1.1",
     "gulp-coffee": "2.3.1",
     "gulp-mocha": "2.2.0",
-    "browserify": "12.0.1",
-    "fs-extra": "0.26.3",
-    "should": "8.0.2",
+    "browserify": "13.0.0",
+    "fs-extra": "0.26.4",
+    "should": "8.1.1",
     "mocha": "2.3.4",
     "gulp": "3.9.0",
     "coffee-script": "1.10.0"