Feature/autoprefixer

[toddmilliken]

Adds a new feature, autoprefixer, which was brought up in #204. See this Issue for background on how autoprefixer can help our front-end workflow and establish concrete browser support for projects.

Changes

• Adds autoprefixer with grunt-postcss package
• Adds compiled CSS files so that file-size and Post CSS transforms can be monitored at each commit (Note: This can be removed if compiled files in the repo become too noisy, or we can ignore them in the .gitignore file.
• Updates Gruntfile.js to apply Post CSS transforms on the compiled docs/css/docs.css file as well as the new css/burf-theme.css and css/burf-base.css files.
• Adds a second sourcemap function in the Post CSS transform to the sass maps point back to the un-autoprefixed versions that then point back to the original sass files.

Notes

Configuration and Browser Support

Looks like the browserslist config in package.json:

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
]

supports these browsers:

Chrome for Android: 71
Firefox for Android: 64
And_qq: 1.2
UC for Android: 11.8
Android: 67, 4.4.3-4.4.4
Baidu: 7.12
Chrome: 72, 71
Edge: 18, 17
Firefox: 65, 64
IE: 11
IE Mobile: 11
iOS: 12.0-12.1, 11.3-11.4
Opera Mini: all
Opera Mobile: 46
Opera: 57, 56
Safari: 12, 11.1
Samsung: 8.2, 7.2-7.4

^ Info obtained by doing a console.log( autoprefixer.info() ); in the Gruntfile.

IE 10 is left out because it is false for the not dead query

dead: browsers from last 2 version query, but with less than 0.5% in global usage statistics and without official support or updates for 24 months. Right now it is IE 10, IE_Mob 10, BlackBerry 10, BlackBerry 7, and OperaMobile 12.1.

^ https://github.com/browserslist/browserslist#full-list

The cool thing about this config is that the list of browsers will change dynamically for us. As the older browsers die off, this configuration will update the browser versions supported without us needing to touch anything.

The other cool thing is that babel-preset-env is reading from the same browserslist config that autoprefixer is using, so it centralizes the intended browser support to one location and multiple tools can consume the same browser configurations.

Properties that were added:

• -webkit-text-decoration
• -o-object-fit
• New transition syntax:
  • transition: -webkit-transform
  • transition: transform
  • transition: transform, -webkit-transform

Properties that were removed:

• -moz-box-sizing
• -webkit-box-sizing
• background-image: -webkit-gradient
• background-image: -webkit-linear-gradient
• background-image: -moz-linear-gradient
• background-image: -ms-linear-gradient
• background-image: -o-linear-gradient
• -webkit-border-radius
• -moz-border-radius
• -ms-border-radius
• -webkit-transition
• -moz-transition
• -ms-transition
• -o-transition
• -moz-transform
• -ms-transform
• -o-transform
• -o-min-device-pixel-ratio

Next steps

• Need to decide if we should keep the compiled CSS files for css/burf-theme.css and css/burf-base.css in the repo.
• Need to decided if we should start removing the hardcoded vendor prefixes here and replacing them with the equivalent standard CSS property, so autoprefixer can do its job listening to the browserslist config defined in package.json.
• Apply autoprefixer workflows to both Framework and Child Starter

[ashleykolodziej]

I've confirmed IE10 would be considered dead by our analytics as well at this point.

I can answer some of these questions:

• We'll want to keep the compiled CSS - not necessarily for this pull request, but for Add KSS support #207, which introduces KSS support. The style guide is going to require a compiled CSS file.
• Yes, we should begin removing the hardcoded vendor prefixes. No sense in keeping those around with this in place. We can open a separate issue/pull request for that, though.
• Can you add the workflows in for Framework and Child Starter when you have a few?

[ashleykolodziej]

Everything appears to be working to me. Thanks for taking the lead on this! ⭐️