codeforamerica / honeycrisp-gem

A Rails gem with base styles and Javascript for Code for America products
http://honeycrisp.herokuapp.com
MIT License
24 stars 8 forks source link

Autoprefix CSS for distribution assets #289

Closed coltborg closed 3 years ago

coltborg commented 3 years ago

This closes #287.

What does this PR do?

When running rake assets:package, the CSS assets aren't run through a vendor autoprefixer, as happens automatically in a Rails app with the autoprefixer-rails gem.

Calling autoprefixer manually in Ruby is able to vendor prefix the CSS that gets pushed to the /dist folder.

Why does this matter?

Automatically adding vendor prefixes adding better CSS support for older browsers.

In the Percy issues, Firefox v73.0 CSS needed an old -moz- prefix for appearance so that a <select> element can be customized.

Screen Shot 2021-08-25 at 4 08 05 PM

How to test this?

After running rake assets:package, the outputted CSS (both .css and .min.css) should have -moz- -webkit vendor prefixes.

For example:

Before

before-css before-min-css

After

after-css after-min-css