Search code examples
reactjsmaterial-uiautoprefixer

Do inline styles get autoprefixed?

I'm creating an app with react and material UI. Autoprefixer is in the package.json and configured in webpack like so:

 postcss: function() {
    return [
      autoprefixer({
        browsers: [
          '>1%',
          'last 4 versions',
          'Firefox ESR',
          'not ie < 9', // React doesn't support IE8 anyway
        ]
      }),
    ];
},

it also says this:

// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
{
  test: /\.css$/,
  loader: 'style!css?importLoaders=1!postcss'
},

I'm using inline styles (I know), are they auto prefixed?

Can I configure them to be? Using radium for example.

Solution

  • No, but you can use postcss-js for this. It's thankfully mentioned in the autoprefixer docs:

    https://github.com/postcss/autoprefixer#css-in-js