Add Autoprefixer config to Gruntfile.js

[mercime]

Automatically add vendor prefixes to CSS. As advertised in ​https://github.com/postcss/autoprefixer: "Working with Autoprefixer is simple: just forget about vendor prefixes and write normal/pure CSS according to the latest W3C specs."

It translates CSS properties and values for older browser versions that a project supports. It also makes the stylesheets cleaner and lighter by not including unnecessary prefixes. For example:

Using mixins:
.buddypress.widget .avatar-block {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	-o-flex-flow: row wrap;
	flex-flow: row wrap;
}

With Autoprefixer (last 2 browser versions):
.buddypress.widget .avatar-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
}

Firefox shows CSS errors in console for -moz prefixes. Here's an example of what we can avoid:

@hnla has done a great job adding flexbox mixins for BP Nouveau as needed so far but there are many more flexbox properties & values which have no mixins. Add CSS Grid properties & values to the mix, it's obvious we need Autoprefixer for our project.

[netweb]

The 7791.patch​ patch is what should be committed, it adds a postcss Grunt taskgrunt postcss that parses ​Autoprefixer across BP's CSS including compiled SCSS.

The 7791-css-changes.patch​ is the result of having applied the 7791.patch​ and running grunt build, *.css and *.rtl-css files in the /src folder will have their vendor prefixes updated, in acual fact there are only vendor prefixes removed, no additions are required.

Ref: WordPress' supported browsers ​https://make.wordpress.org/core/handbook/best-practices/browser-support/

---

To test this patch, apply 7791.patch​ and run npm install followed by grunt postcss and svn diff should result in the same results as is contained in 7791-css-changes.patch​.

[DJPaul]

This is welcome to go into trunk now, please. Thanks.

[DJPaul]

Milestone renamed

[netweb]

In 12135:

Build/Test Tools: Add Autoprefixer

• Autoprefixer is a PostCSS plugin to parse CSS and automatically add CSS vendor prefixes based on an a supported list of browsers.
• The supported browsers list is inherited from WordPress, see ​https://make.wordpress.org/core/handbook/best-practices/browser-support/

Fixes #7791.

[netweb]

In 12136:

Build/Test Tools: Update CSS vendor prefixes via Autoprefixer following [12135]

See #7791.