Dcss NPM | npm.io

Discore CSS

This is a CSS Preprocessor used for Discore / Funraise.me!, etc. It is less than 25 lines long!

var rework = require('rework')
var cssWhitespace = require('css-whitespace')
var variables = require('rework-variables')
var inherit = require('rework-inherit')
var moveMedia = require('rework-move-media')
var autoprefixer = require('autoprefixer')

module.exports = function (dcss, options) {
  options = options || {}

  var css = rework(cssWhitespace(dcss))
  .use(variables(options.variables || {}))
  .use(inherit())
  .use(autoprefixer.rework())
  .use(moveMedia(options.queries))

  // Browser support
  if (rework.inline && options.inline)
    css.use(rework.inline(options.inline));

  return css.toString()
}

Want to try it out? Here's a live demo that should work on modern browsers (IE9+) and its source code.

Why?

Have more power and control over your CSS preprocessor
Add and remove features you want and don't want
Have the features you want work the way you want it. For me, Stylus' @extends didn't work the way I wanted it to, so I made my own.

I don't use most of any CSS preprocessors features, many of which just create problems. For example, I don't believe in logic in your CSS, but if you do need it, it should be in Javascript which you already know and love, not some new CSS preprocessor language.

rework makes creating your own CSS preprocessor easy. It parses your CSS file. You then pass in any function you'd like to "rework" your CSS. It then stringifies your CSS. That's all.

Middleware

Don't like the feature? Fork it and change your dependency. Want more? Add more! Each are small, making maintaining a fork relatively easy. Keeping modules small is the node.js way!

For more information on each middleware, just look at the link provided (if available). Each of these middleware can be considered the specifications and the documentation.