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.

css-whitespace

Allows you to write your code without {} or ;s like in Stylus. Also supports nesting, although I don't believe in it.

rework-variables

Pass in an object of variables. Refer to these variables in your CSS with a $ prefix.

rework-inherit

This allows you to inherit one selector to another. This will literally inherit every single rule referenced by the selector you are inheriting. It also allows "placeholders".

rework-move-media

Consolidates your media queries, sorts them by a list of queries, then moves them to the end of your CSS file.

Notes

We use the .styl extension for Stylus for the syntax highlighting.

Compatibility

IE9+, though browser support is really only for the sake of the demo.

License

WTFPL