# Customizing PostCSS

Jetpack uses PostCSS by default, because:

- this way you get autoprefixing and modern CSS features
- you can be sure that the code you write will run in all the browsers you support

Jetpack uses the following PostCSS plugins and presets:

- `postcss-import`
- `postcss-flexbugs-fixes`
- `postcss-preset-env`

See [lib/webpack.css.js](../lib/webpack.css.js) for the exact configuration.

There are 2 ways to cusotmize postcss config.

## Specify extra postcss-preset-env features

If you just want to go beyond using Stage 2 PostCSS features, you can toggle them in `jetpack.config.js`:

```js
module.exports = {
  css: {
    features: {
      'nesting-rules': true,
      'custom-media-queries': true
    }
  }
}
```

## Use postcss.config.js

You can also create a postcss.config.js and use that to configure any plugins or other PostCSS features. Note that this will override any of the jetpack's configurations, so you might want to do something like:

```js
// postcss.config.js
module.exports = {
  plugins: {
    'jetpack/postcss-import': {},
    'jetpack/postcss-flexbugs-fixes': {},
    'jetpack/postcss-preset-env': {
      autoprefixer: { grid: true }
    },
    colorguard: {},
    stylelint: {}
  }
}
```

**Note!** If you use custom `postcss.config.js`, by default, `postcss-preset-env` will use browserslist default browsers and no longer jetpack's browserslist. That might be ok for the most part, but you should take extra care.
