Posted over 3 years 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. Make sure that postcss-loader is part of your package.json.

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

Note: Stage 3 Archive 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 unsupported versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2).

Owner of this card:

Avatar
Emanuel De
Last edit:
over 1 year ago
by Michael Leimstädtner
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