[buddypress-trac] [BuddyPress Trac] #7791: Add Autoprefixer config to Gruntfile.js

[buddypress-trac]

#7791: Add Autoprefixer config to Gruntfile.js
------------------------------+-----------------------------
 Reporter:  mercime           |      Owner:  netweb
     Type:  enhancement       |     Status:  new
 Priority:  normal            |  Milestone:  Awaiting Review
Component:  Build/Test Tools  |    Version:
 Severity:  normal            |   Keywords:
------------------------------+-----------------------------
 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:

 [[Image(https://cldup.com/OP-i8Q2P8v.png)]]

 @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.

-- 
Ticket URL: <https://buddypress.trac.wordpress.org/ticket/7791>
BuddyPress Trac <http://buddypress.org/>
BuddyPress Trac