Is there a way to test if PostCSS Autoprefixer is working? Specifically for Rails 6

Question

I am writing a Rails 6 webapp using Webpacker. Its my understanding that auto-prefixing in Rails 6 works out of the box via PostCSS and its autoprefixer plugin.

However I cannot verify if this library is in fact prefixing my css or not.

Is there a way to confirm if a standard default Rails 6.0.0 app auto-prefixes out of the box?

I have run yarn autoprefixer --info to see the css rules and browsers it applies to and its def applying to my browser chrome 77. And I tried using a parameter that it lists as applying to. It still however dosn't show any prefixed css in dev or production.

Im not sure how postcss-preset-env works so i'm not sure if the css only gets prefixed when using a browser that needs the prefix.

Im coming from using autoprefixer-rails gem that hooks into sprockets and just prefixes everything.

Here is my .postcss.config.js file...

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

Answer 1

You can test what your compiled CSS (including PostCSS's output) would look like in production by running

$ RAILS_ENV=production bundle exec rails webpacker:compile