cssbag is a collection of PostCSS plugins I use, it's similar to precss.
$ npm install -D cssbag
const cssbag = require('cssbag')
postcss([cssbag(options)]).process(css) //...
Each plugin has its own option namespace. For example, if you want to set options for postcss-smart-import
, simply:
postcss([
cssbag({
'smart-import': {},
// or use camelCase
smartImport: {}
})
])
Unwrap nested rules like how Sass does it.
Sass-like variables, conditionals, and iteratives.
Transform W3C CSS Custom Properties for cascading variables.
Loading/including other files (transform @import rules by inlining content) and quering/referring assets (referred in url() functions). Think of postcss-import + postcss-url + postcss-assets.
PostCSS plugin for mixins.
PostCSS plugin to reduce calc()
Writing simple and graceful Media Queries!
Transform W3C CSS Extensions(Custom Selectors) to more compatible CSS.
Transform W3C CSS Custom Media Queries to more compatible CSS
PostCSS plugin for property lookups, similar to Stylus.
Transform :matches() W3C CSS pseudo class to more compatible CSS (simpler selectors).
Transform :not() W3C CSS level 4 pseudo class to more compatible CSS (multiple css3 :not() selectors).
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature