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
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.
From a terminal
npm install --save-dev kirei-css
As a PostCSS Plugin
Check the PostCSS docs for your chosen implementation.
kirei-css also exposes a standalone PostCSS processor instance as
var fs =var kireiCss =fs
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 objectvar opts =autoprefixer:browsers: '> 1%' 'IE 7''postcss-nested':bubble: 'phone'/** using as plugin* kireiCss(opts)*/var postcss =/** using standalone* kireiCss.process(css, opts)*/var fs =var kireiCss =fs