postcss-brunch

Install

npm install --save-dev postcss-brunch

Add plugins

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.

Options

You can specify PostCSS options, such as custom parser for CSS:

plugins: {
  postcss: {
    options: {
      parser: require('postcss-scss'),
    },
  },
},

CSS Modules

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).

Dependencies

You can pass options for progeny which retrieves dependencies for the input CSS file.

For example, if you use postcss-partial-import plugin, your CSS files prefixed with underscore and have .css extension. In this case, you need pass to progeny prefix option, so brunch can properly rebuild your partials on their change.

module.exports = {
   // ...
   plugins: {
      postcss: {
         progeny: {
            prefix: '_'
         }
      }
   }
}

License

MIT