autoprefixer 8.6.1 → 8.6.5

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 8.6.5
+* Do not show Grid warnings if IE was not selected.
+
+## 8.6.4
+* Fix `stretch` prefix in Chrome >= 46.
+
+## 8.6.3
+* Add warnings for unsupported Grid features.
+* Add warnings about wrong Grid properties.
+* Add note about `grid` option for grid properties in `autoprefixer --info`.
+
+## 8.6.2
+* Fix error during adding Grid prefixes in `@media` (by Evgeny Petukhov).
+
 ## 8.6.1
 * Fix `grid-template` with media queries (by Evgeny Petukhov).
 

package/README.md

@@ -50,53 +50,11 @@ Twitter account for news and releases: [@autoprefixer].
 [cult]:             http://cultofmartians.com/tasks/autoprefixer-grid.html
 
 
-## Features
-
-### Write Pure CSS
-
-Working with Autoprefixer is simple: just forget about vendor prefixes
-and write normal CSS according to the latest W3C specs. You don’t need
-a special language (like Sass) or remember where you must use mixins.
-
-Autoprefixer supports selectors (like `:fullscreen` and `::selection`),
-unit function (`calc()`), at‑rules (`@supports` and `@keyframes`)
-and properties.
-
-Because Autoprefixer is a postprocessor for CSS,
-you can also use it with preprocessors such as Sass, Stylus or LESS.
-
-
-### Only Actual Prefixes
-
-Autoprefixer utilizes the most recent data from [Can I Use]
-to add only necessary vendor prefixes.
-
-It also removes old, unnecessary prefixes from your CSS
-(like `border-radius` prefixes, produced by many CSS libraries).
-
-```css
-a {
-    -webkit-border-radius: 5px;
-            border-radius: 5px;
-}
-```
-
-compiles to:
-
-```css
-a {
-    border-radius: 5px;
-}
-```
-
-[Can I Use]: http://caniuse.com/
-
-
 ## Browsers
 
 Autoprefixer uses [Browserslist], so you can specify the browsers
 you want to target in your project by queries like `> 5%`
-(see [Best Practises]).
+(see [Best Practices]).
 
 The best way to provide browsers is `.browserslistrc` config
 or `package.json` with `browserslist` key. Put it in your project root.
@@ -110,39 +68,64 @@ and default value.
 
 [Browserslist docs]: https://github.com/ai/browserslist#queries
 [babel-preset-env]:  https://github.com/babel/babel-preset-env
-[Best Practises]:    https://github.com/browserslist/browserslist#best-practices
+[Best Practices]:    https://github.com/browserslist/browserslist#best-practices
 [Browserslist]:      https://github.com/ai/browserslist
 [Stylelint]:         http://stylelint.io/
 
 
-## Outdated Prefixes
+## FAQ
 
-By default, Autoprefixer also removes outdated prefixes.
+#### Does Autoprefixer polyfill Grid Layout for IE?
 
-You can disable this behavior with the `remove: false` option. If you have
-no legacy code, this option will make Autoprefixer about 10% faster.
+Autoprefixer can be used to use Grid Layout for IE 10 and IE 11.
+But this polyfill will not work in 100 % cases.
+This is why it is disabled by default.
 
-Also, you can set the `add: false` option. Autoprefixer will only clean outdated
-prefixes, but will not add any new prefixes.
+First, you need to enable Grid prefixes by `grid: true` option.
 
-Autoprefixer adds new prefixes between any unprefixed properties and already
-written prefixes in your CSS. If it will break the expected prefixes order,
-you can clean all prefixes from your CSS and then
-add the necessary prefixes again:
+Second, you need to test every fix with Grid in IE. It is not,
+enable and forget featur. But it is still very useful.
+Financial Times and Yandex use it in production.
 
-```js
-var cleaner  = postcss([ autoprefixer({ add: false, browsers: [] }) ]);
-var prefixer = postcss([ autoprefixer ]);
+Third, there is not auto placement and all grid cell position must be set
+explicitly. However, Autoprefixer can covert even `grid-template`
+and `grid-gap` (but only when they are together).
 
-cleaner.process(css).then(function (cleaned) {
-    return prefixer.process(cleaned.css);
-}).then(function (result) {
-    console.log(result.css);
-});
+```css
+.page {
+    display: grid;
+    grid-gap: 33px;
+    grid-template:
+        "head head  head" 1fr
+        "nav  main  main" minmax(100px, 1fr)
+        "nav  foot  foot" 2fr /
+        1fr   100px 1fr;
+}
+.page__head {
+    grid-area: head;
+}
+.page__nav {
+    grid-area: nav;
+}
+.page__main {
+    grid-area: main;
+}
+.page__footer {
+    grid-area: foot;
+}
 ```
 
+See also:
 
-## FAQ
+* [The guide about Grids in IE and Autoprefixer].
+* [`postcss-gap-properties`] to use new `gap` property
+  instead of old `grid-gap`.
+* [`postcss-grid-kiss`] has alternate “everything in one property” syntax,
+  which make using Autoprefixer’s Grid safer.
+
+[The guide about Grids in IE and Autoprefixer]: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/
+[`postcss-gap-properties`]:                     https://github.com/jonathantneal/postcss-gap-properties
+[`postcss-grid-kiss`]:                          https://github.com/sylvainpolletvillard/postcss-grid-kiss
 
 #### No prefixes in production
 
@@ -549,13 +532,6 @@ You can also use comments recursively:
 }
 ```
 
-In Sass/SCSS/Less you can use all the disable options above, add an exclamation mark
-in the start of comment:
-
-```scss
-/*! autoprefixer: off */
-```
-
 
 ## Options
 

package/data/prefixes.js

@@ -392,8 +392,18 @@ f(require('caniuse-lite/data/features/css3-tabsize'), function (browsers) {
 });
 
 // Intrinsic & extrinsic sizing
-f(require('caniuse-lite/data/features/intrinsic-width'), function (browsers) {
-    return prefix(['max-content', 'min-content', 'fit-content', 'fill', 'fill-available', 'stretch'], {
+var intrinsic = require('caniuse-lite/data/features/intrinsic-width');
+
+f(intrinsic, function (browsers) {
+    return prefix(['max-content', 'min-content', 'fit-content'], {
+        props: ['width', 'min-width', 'max-width', 'height', 'min-height', 'max-height', 'inline-size', 'min-inline-size', 'max-inline-size', 'block-size', 'min-block-size', 'max-block-size', 'grid', 'grid-template', 'grid-template-rows', 'grid-template-columns', 'grid-auto-columns', 'grid-auto-rows'],
+        feature: 'intrinsic-width',
+        browsers: browsers
+    });
+});
+
+f(intrinsic, { match: /x|\s#4/ }, function (browsers) {
+    return prefix(['fill', 'fill-available', 'stretch'], {
         props: ['width', 'min-width', 'max-width', 'height', 'min-height', 'max-height', 'inline-size', 'min-inline-size', 'max-inline-size', 'block-size', 'min-block-size', 'max-block-size', 'grid', 'grid-template', 'grid-template-rows', 'grid-template-columns', 'grid-auto-columns', 'grid-auto-rows'],
         feature: 'intrinsic-width',
         browsers: browsers

package/lib/hacks/grid-utils.js

@@ -345,7 +345,7 @@ function insertAreas(areas, decl, result) {
             if (areasCount === areasLength) {
                 var next = gridArea.parent.next();
 
-                if (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;
+                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 areaMedia = parentMedia.clone().removeAll().append(rules);
                 gridArea.parent.after(areaMedia);

package/lib/info.js

@@ -17,14 +17,16 @@ var names = {
     and_uc: 'UC for Android'
 };
 
-var prefix = function prefix(name, prefixes) {
-    var out = '  ' + name + ': ';
+function prefix(name, prefixes, note) {
+    var out = '  ' + name;
+    if (note) out += ' *';
+    out += ': ';
     out += prefixes.map(function (i) {
         return i.replace(/^-(.*)-$/g, '$1');
     }).join(', ');
     out += '\n';
     return out;
-};
+}
 
 module.exports = function (prefixes) {
     if (prefixes.browsers.selected.length === 0) {
@@ -107,10 +109,13 @@ module.exports = function (prefixes) {
 
     var values = '';
     var props = '';
+    var hadGrid = false;
     for (var _name in prefixes.add) {
         var _data = prefixes.add[_name];
         if (_name[0] !== '@' && _data.prefixes) {
-            props += prefix(_name, _data.prefixes);
+            var grid = _name.indexOf('grid-') === 0;
+            if (grid) hadGrid = true;
+            props += prefix(_name, _data.prefixes, grid);
         }
 
         if (!_data.values) {
@@ -130,7 +135,9 @@ module.exports = function (prefixes) {
 
             var value = _ref3;
 
-            var string = prefix(value.name, value.prefixes);
+            var _grid = value.name.indexOf('grid') !== -1;
+            if (_grid) hadGrid = true;
+            var string = prefix(value.name, value.prefixes, _grid);
             if (values.indexOf(string) === -1) {
                 values += string;
             }
@@ -143,6 +150,9 @@ module.exports = function (prefixes) {
     if (values !== '') {
         out += '\nValues:\n' + values;
     }
+    if (hadGrid) {
+        out += '\n* - Prefixes will be added only on grid: true option.\n';
+    }
 
     if (atrules === '' && selectors === '' && props === '' && values === '') {
         out += '\nAwesome! Your browsers don\'t require any vendor prefixes.' + '\nNow you can remove Autoprefixer from build steps.';

package/lib/processor.js

@@ -66,33 +66,61 @@ var Processor = function () {
         css.walkDecls(function (decl) {
             if (_this.disabledDecl(decl, result)) return undefined;
 
-            if (decl.prop === 'display' && decl.value === 'box') {
+            var prop = decl.prop;
+            var value = decl.value;
+
+            if (prop === 'grid-row-span') {
+                result.warn('grid-row-span is not part of final Grid Layout. ' + 'Use grid-row.', { node: decl });
+                return undefined;
+            } else if (prop === 'grid-column-span') {
+                result.warn('grid-column-span is not part of final Grid Layout. ' + 'Use grid-column.', { node: decl });
+                return undefined;
+            } else if (prop === 'display' && value === 'box') {
                 result.warn('You should write display: flex by final spec ' + 'instead of display: box', { node: decl });
                 return undefined;
-            }
-            if (decl.value.indexOf('linear-gradient') !== -1) {
-                if (OLD_LINEAR.test(decl.value)) {
-                    result.warn('Gradient has outdated direction syntax. ' + 'New syntax is like `to left` instead of `right`.', { node: decl });
+            } else if (prop === 'text-emphasis-position') {
+                if (value === 'under' || value === 'over') {
+                    result.warn('You should use 2 values for text-emphasis-position ' + 'For example, `under left` instead of just `under`.', { node: decl });
                 }
-            }
-            if (decl.value.indexOf('radial-gradient') !== -1) {
-                if (OLD_RADIAL.test(decl.value)) {
-                    result.warn('Gradient has outdated direction syntax. ' + 'New syntax is like `closest-side at 0 0` ' + 'instead of `0 0, closest-side`.', { node: decl });
-                } else {
-                    var match = decl.value.match(RADIAL_BLOCK);
-
-                    if (match) {
-                        if (/cover/.test(match[1])) {
-                            result.warn('Gradient has outdated direction syntax. ' + 'Replace `cover` to `farthest-corner`.', { node: decl });
-                        } else if (/contain/.test(match[1])) {
-                            result.warn('Gradient has outdated direction syntax. ' + 'Replace `contain` to `closest-side`.', { node: decl });
+            } else {
+                var grid = _this.prefixes.add['grid-area'];
+                if (_this.prefixes.options.grid && grid && grid.prefixes) {
+                    if (prop === 'grid-auto-columns') {
+                        result.warn('grid-auto-columns is not supported by IE', { node: decl });
+                        return undefined;
+                    } else if (prop === 'grid-auto-rows') {
+                        result.warn('grid-auto-rows is not supported by IE', { node: decl });
+                        return undefined;
+                    } else if (prop === 'grid-auto-flow') {
+                        result.warn('grid-auto-flow is not supported by IE', { node: decl });
+                        return undefined;
+                    } else if (value.indexOf('auto-fit') !== -1) {
+                        result.warn('auto-fit value is not supported by IE', { node: decl, word: 'auto-fit' });
+                        return undefined;
+                    } else if (value.indexOf('auto-fill') !== -1) {
+                        result.warn('auto-fill value is not supported by IE', { node: decl, word: 'auto-fill' });
+                        return undefined;
+                    }
+                }
+                if (value.indexOf('radial-gradient') !== -1) {
+                    if (OLD_RADIAL.test(decl.value)) {
+                        result.warn('Gradient has outdated direction syntax. ' + 'New syntax is like `closest-side at 0 0` ' + 'instead of `0 0, closest-side`.', { node: decl });
+                    } else {
+                        var match = value.match(RADIAL_BLOCK);
+
+                        if (match) {
+                            if (/cover/.test(match[1])) {
+                                result.warn('Gradient has outdated direction syntax. ' + 'Replace `cover` to `farthest-corner`.', { node: decl });
+                            } else if (/contain/.test(match[1])) {
+                                result.warn('Gradient has outdated direction syntax. ' + 'Replace `contain` to `closest-side`.', { node: decl });
+                            }
                         }
                     }
                 }
-            }
-            if (decl.prop === 'text-emphasis-position') {
-                if (decl.value === 'under' || decl.value === 'over') {
-                    result.warn('You should use 2 values for text-emphasis-position ' + 'For example, `under left` instead of just `under`.', { node: decl });
+                if (value.indexOf('linear-gradient') !== -1) {
+                    if (OLD_LINEAR.test(value)) {
+                        result.warn('Gradient has outdated direction syntax. ' + 'New syntax is like `to left` instead of `right`.', { node: decl });
+                    }
                 }
             }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autoprefixer",
-  "version": "8.6.1",
+  "version": "8.6.5",
   "description": "Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website",
   "keywords": ["autoprefixer", "css", "prefix", "postcss", "postcss-plugin"],
   "author": "Andrey Sitnik <andrey@sitnik.ru>",
@@ -8,10 +8,10 @@
   "repository": "postcss/autoprefixer",
   "dependencies": {
     "browserslist": "^3.2.8",
-    "caniuse-lite": "^1.0.30000850",
+    "caniuse-lite": "^1.0.30000864",
     "normalize-range": "^0.1.2",
     "num2fraction": "^1.2.2",
-    "postcss": "^6.0.22",
+    "postcss": "^6.0.23",
     "postcss-value-parser": "^3.2.3"
   },
   "bin": {