kirei-css

About | Installation | Usage | License

About

kirei-css is a PostCSS plugin collection that combines many of the popular PostCSS plugins in a functional order. Because plugin ordering is significant in PostCSS, be cautious when including kirei-css in a PostCSS plugin chain with other plugins — you are likely to run into conflicts.

Also note that there is currently no documentation for the style transformations this collection performs. That said, kirei-css is literally just a collection of other plugins. It doesn't do anything the included plugins aren't doing already, it just does all of those things together, letting you require one module instead of having to require around twenty modules and hope you have the order right. Documentation will likely be added later; for now, please check the individual module docs and the test suite.

Plugins in the Collection

• alias-atrules
• autoprefixer
• brand-colors
• calc
• custom-media
• custom-selectors
• define-units
• discard-empty
• if-media
• import
• lost
• media-minmax
• mixins
• nested
• prettify
• responsive-type
• round-subpixels
• simple-vars
• size

Each of these plugins is included with its default config except alias-atrules, which receives the following config by default:

{
  rules: {
    '%': 'define-mixin',
    $: 'mixin',
    breakpoint: 'custom-media',
  },
}

This allows defining mixins with @%, using mixins with @$, and defining custom media queries with @breakpoint. To configure plugins, see the Options API in the Usage section.

Installation

From a terminal

npm install --save-dev kirei-css

Usage

As a PostCSS Plugin

postcss([
  require('kirei-css')
])

Check the PostCSS docs for your chosen implementation.

Standalone

kirei-css also exposes a standalone PostCSS processor instance as kireiCss.process(css, opts):

var fs = require('mz/fs')
var kireiCss = require('kirei-css')

fs.readFile('src/style.css', 'utf8')
  .then(data => kireiCss.process(data))
  .then(res => fs.writeFile('dist/style.css', res.css))
  .catch(err => console.err(err.stack))

Options API

Each of the plugins kirei-css uses can receive a custom config. To pass a config object to a plugin, call kirei-css with an object that has the unique npm name of the plugin you want to configure as the key and the plugin's config as the value.

// custom config object
var opts = {
  autoprefixer: {
    browsers: ['> 1%', 'IE 7'],
  },
  'postcss-nested': {
    bubble: ['phone'],
  },
}

/*
 * using as plugin
 * kireiCss(opts)
 */
var postcss = require('postcss')
postcss([
  require('kirei-css')(opts)
])

/*
 * using standalone
 * kireiCss.process(css, opts)
 */
var fs = require('mz/fs')
var kireiCss = require('kirei-css')

fs.readFile('src/style.css', 'utf8')
  .then(data => kireiCss.process(data, opts))
  .then(res => fs.writeFile('dist/style.css', res.css))
  .catch(err => console.err(err.stack))

License

MIT