webpack-blocks - PostCSS

This is the postcss block providing PostCSS configuration.

Usage

 const { createConfig, match } = require('@webpack-blocks/webpack')
const { css } = require('@webpack-blocks/assets')
const postcss = require('@webpack-blocks/postcss')

module.exports = createConfig([
  match(['*.css', '!*node_modules*'], [
    css(),
    postcss()
  ])
])

NOTE: the postcss block handles only the postcss transformation, you must use the css block if
you want to require the css in your browser.

We recommend you to configure PostCSS using the postcss.config.js file (see
PostCSS loader usage):

 // postcss.config.js
const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [autoprefixer({ browsers: ['last 2 versions'] })]
}

But you can pass configuration directly to the postcss block:

 const { createConfig, match } = require('@webpack-blocks/webpack')
const { css } = require('@webpack-blocks/assets')
const postcss = require('@webpack-blocks/postcss')
const autoprefixer = require('autoprefixer')

module.exports = createConfig([
  css(),
  postcss({
    plugins: [autoprefixer({ browsers: ['last 2 versions'] })]
    /* Other PostCSS options */
  })
])

Options

PostCSS options

parser (optional)

Package name of a custom PostCSS parser to use. Pass for instance 'sugarss' to be able to write
indent-based CSS.

stringifier (optional)

Package name of a custom PostCSS stringifier to use.

syntax (optional)

Package name of a custom PostCSS syntax to use. The package must export a parse and a stringify
function.

plugins (optional)

Array of PostCSS plugins.

webpack-blocks

Check out the

👉 Main documentation

Released under the terms of the MIT license.