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.

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:

body {
  font-variant: small-caps;
}

Output:

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

Autoprefixer

Input:

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

Output:

body {
  ::-webkit-input-placeholder {
    color: gray;
  }
  :-ms-input-placeholder {
    color: gray;
  }
  ::-ms-input-placeholder {
    color: gray;
  }
  ::placeholder {
    color: gray;
  }
}
Emanuel De about 2 years ago
This website uses short-lived cookies to improve usability.
Accept or learn more