Skip to:
Content

Opened 13 months ago

Closed 12 months ago

Last modified 12 months ago

#7791 closed enhancement (fixed)

Add Autoprefixer config to Gruntfile.js

Reported by: mercime Owned by: netweb
Milestone: 4.0 Priority: normal
Severity: normal Version:
Component: Build/Test Tools Keywords: has-patch commit
Cc:

Description

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:

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.

Attachments (2)

7791-css-changes.patch (64.4 KB) - added by netweb 13 months ago.
7791.patch (10.7 KB) - added by netweb 13 months ago.

Download all attachments as: .zip

Change History (9)

#1 @DJPaul
13 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Awaiting Contributions

@netweb
13 months ago

#2 @netweb
13 months ago

  • Keywords has-patch added; needs-patch removed

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.

#3 @DJPaul
13 months ago

  • Milestone changed from Awaiting Contributions to 3.1

#4 @DJPaul
12 months ago

  • Keywords commit added

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

#5 @DJPaul
12 months ago

  • Milestone changed from 3.1 to 4.0

Milestone renamed

#6 @netweb
12 months ago

  • Resolution set to fixed
  • Status changed from new to closed

In 12135:

Build/Test Tools: Add Autoprefixer

Fixes #7791.

#7 @netweb
12 months ago

In 12136:

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

See #7791.

Note: See TracTickets for help on using tickets.