node package manager

postcss-brunch

Adds PostCSS support to brunch.

postcss-brunch

Adds PostCSS support to brunch

npm install --save-dev postcss-brunch

Add all plugins you want to use with PostCSS in your package.json file too. For example, here we add Autoprefixer and CSS Wring.

{
  "postcss-brunch": "^2.0",
  "autoprefixer": "^6.3",
  "csswring": "^5.1"
}

Or, use npm install --save-dev <plugin> to get latest version in package.json.

Then, configure postcss-brunch in the plugins section of your brunch-config file, like so:

plugins: {
  postcss: {
    processors: [
      require('autoprefixer')(['last 8 versions']),
      require('csswring')()
    ]
  }
}

You can add as many processors as you want. CSS will be parsed only once. See PostCSS and each plugins docs.

You can use CSS Modules with postcss-brunch. To enable it, change your config to:

module.exports = {
  // ... 
  plugins: {
    postcss: {
      modules: true
    }
  }
};

You can also pass options directly to postcss-modules:

module.exports = {
  // ... 
  plugins: {
    postcss: {
      modules: {
        generateScopedName: '[name]__[local]___[hash:base64:5]'
      }
    }
  }
};

Then, author your styles like you normally would:

.title {
  font-size: 32px;
}

And reference CSS class names by requiring the specific style into your javascript:

var style = require('./title.css');
 
<h1 className={style.title}>Yo</h1>

Note: enabling modules does so for every stylesheet in your project, so it's all-or-nothing. Even the files you don't require will be transformed into CSS modules (aka will have obfuscated class names, like turn .title into ._title_fdphn_1).

MIT