Posted over 1 year ago. Visible to the public.

How to test Autoprefixer and CSSnext in PostCSS

PostCSS is a tool for transforming styles with JS plugins. In Webpacker you can configure the plugins and their settings via the postcss.config.js file.

Copy
module.exports = { plugins: [ require('postcss-import'), require('postcss-flexbugs-fixes'), require('postcss-preset-env')({ autoprefixer: { flexbox: 'no-2009' }, stage: 3 }) ] }

Note: Stage 3 means you can use all CSS features that are listed as "This idea is becoming part of the web". Do not use standards in any stage before (like 2, 1 or 0).

Run NODE_ENV=production rake assets:precompile to get compiled output in public/packs.

Check the following transformations to ensure you settings are applied. Remove public/packs afterwards again.

CSSnext

Input:

Copy
body { font-variant: small-caps; }

Output:

Copy
body { -webkit-font-feature-settings: "c2sc"; font-feature-settings: "c2sc"; font-variant: small-caps; }

Autoprefixer

Input:

Copy
body { ::placeholder { color: gray; } }

Output:

Copy
body { ::-webkit-input-placeholder { color: gray; } :-ms-input-placeholder { color: gray; } ::-ms-input-placeholder { color: gray; } ::placeholder { color: gray; } }

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

Owner of this card:

Avatar
Emanuel De
Last edit:
about 1 year ago
by Tobias Kraze
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Emanuel De to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more