Adds PostCSS support to brunch
Clone or download
Latest commit f0d7640 Sep 12, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
fixtures Allow passing arbitrary options to postcss (#42) Feb 23, 2017
.gitignore Initial commit Mar 18, 2014
CHANGELOG.md 0.6.0 Aug 2, 2016
README.md Allow passing arbitrary options to postcss (#42) Feb 23, 2017
index.js Remove pad (#57) Sep 12, 2018
package-lock.json Allow specifying optimizers (#56) Sep 3, 2018
package.json Release 2.10.1. Sep 12, 2018
test.js Allow specifying optimizers (#56) Sep 3, 2018

README.md

postcss-brunch

Adds PostCSS support to 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