postcss

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.