Update/postcss - Githubissues

10up / generator-wp-make

A Yeoman generator for making WordPress things

184 stars 42 forks source link

Update/postcss #44

Closed jonathantneal closed 8 years ago

jonathantneal commented 9 years ago

A major update to how (S)CSS files are handled. This changes the option of Autoprefixer to PostCSS and provides the following improvements:

Added: Source maps for CSS files
Added: Alternative CSS for old Internet Explorer
Added: Alternative SCSS variable for old Internet Explorer, $oldie
Added: Old IE CSS automatically unwraps or removes (non-)desktop media queries
Added: Old IE CSS automatically transpiles rem to compatible px units
Added: Old IE CSS automatically transpiles opacity to compatible ms-filter property
Added: Old IE CSS automatically transpiles :: to compatible : pseudo-elements in a selector
Updates: Autoprefixer dependency
Fixes: incorrectly linked PostCSS tasks in Gruntfile.js
Changes: Autoprefixer option to PostCSS option
Changes: Creates only one minified CSS file

These changes are based on successful practices I’ve seen leveraged by other 10up developers and of which I have been using as well.

allenmoore commented 9 years ago

+1 for this!

zzramesses commented 9 years ago

I've reviewed this as well and agree with the changes.

jonathantneal commented 9 years ago

Awesome, thank you so much for the reviews. Pinging @tlovett1 and @ericmann to maybe get this especially on their radar.

tlovett1 commented 9 years ago

So does this use PostCSS entirely instead of Sass?

jonathantneal commented 9 years ago

Sass is still here, just as before. Nothing about Sass changes. Since Autoprefixer is now a PostCSS plugin, it correctly identifies the Non-Sass Autoprefixer option as the Non-Sass PostCSS. It also adds a secondary grunt task to better compile CSS for old IE using PostCSS, by resolving media queries, converting rems to px, etc.

Camwyn commented 9 years ago

:+1: since I was doing some of this for another project :smile:

tlovett1 commented 9 years ago

@jonathantneal and everyone, great discussion here!

allenmoore commented 9 years ago

PostCSS, in conjunction with Autoprefixer, also allows the Front-End Engineers to rely less on Sass mixins that add vendor prefixs. In some cases, if a browser no longer requires the prefix and mixin has not been updated, we end up with additional styles that are no longer needed. Autoprefixer checks against the CanIUse API, and then adds the needed vendor prefixes to the stylesheet. Personally, I feel this requires maintenance in the long run.

jonbellah commented 9 years ago

@allenmoore To clarify, you feel which approach requires more maintenance in the long run? I think we all agree, but that ending made me unsure.

@tlovett1 +1 from me. Autoprefixer, as currently defined in the generator, is deprecated and throws warnings in the console to let you know. I'm also a fan of what PostCSS brings to the table, in general.

allenmoore commented 9 years ago

@JonBellah That should read, "I feel this requires less maintenance in the long run." And I am referencing using PostCSS with Autoprefixer.