mdreizin / gatsby-plugin-postcss

This repo has been moved into gatsbyjs/gatsby

gatsby-plugin-postcss

Gatsby plugin to handle PostCSS.

Install

yarn add gatsby-plugin-postcss

or

npm install --save gatsby-plugin-postcss

How to Use

gatsby-config.js

module.exports = {
  plugins: ['gatsby-plugin-postcss']
};

This plugin uses postcss-loader with its default options that means you can use your own postcss.config.js:

postcss.config.js

const postcssPresetEnv = require('postcss-preset-env');

module.exports = () => ({
  plugins: [
    postcssPresetEnv({
      stage: 0
    })
  ]
});

Options

You can use any allowed postcss-loader options using postcss property:

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-postcss',
      options: {
        postcss: {
          plugins: () => [require('postcss-preset-env')({ stage: 0 })]
        }
      }
    }
  ]
};

gatsby-plugin-postcss's Issues

How to apply different postcss plugins in development vs. production?

Thanks for creating this plugin!

Is there a way to specify different postcss plugins to be used in development vs. production?

(I'm specifically interested in adding purgeCSS in production.)