Gatsby plugin settings for gatsby-plugin-postcss + autoprefixer + browserslist

user_3689364 0
Viewed 1574

My goal is to have gatsby-plugin-postcss set all the browser prefixes for my CSS file during gatsby build. From the docs, the preferred way is to use browserslist, and use autoprefixer with postcsss during the gatsby build process.

My gatsby-config.js:

const autoprefixer = require("autoprefixer");
const browserslist = require('browserslist');

module.exports = {
  },
  plugins: [
    // `gatsby-plugin-postcss`,
    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        postCssPlugins: [
          autoprefixer({ browsers: browserslist() }),
        ],
      },
  ],
};

package.json:

  // ...
  "browserslist": ["defaults"]

I get this warining:

warn Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.json or .browserslistrc file.

Using browsers option can cause errors. Browserslist config can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at: https://github.com/browserslist/browserslist#readme https://twitter.com/browserslist

The HTML shows that no prefixes were set.

This configuration worked (as in the build files contained browser prefixes) but it still complains that I do not use browserlist:

{
    resolve: `gatsby-plugin-postcss`,
    options: {
      postCssPlugins: [
        autoprefixer({
          browsers: ['last 2 versions', 'not ie 10'],
          grid: true,
        })
      ],
    },
}

What is the correct plugin options configurations so the autoprefixer takes my browserslist?

autoprefixer postcss gatsby cross-browser css
1 Answers

In my gastby-config.js file

const autoprefixer = require('autoprefixer');
const postcssAspectRatio = require('postcss-aspect-ratio');


{
     resolve: `gatsby-plugin-postcss`,
     options: {
         postCssPlugins: [
             autoprefixer(),
             postcssAspectRatio
         ],
     },
 },

I have a separate .browserslistrc file for browser options. Check your dependencies, but a separate install of browserlist npm shouldn't be required.

user_3153500
Related