Create your CSS styles in CoffeeScript for Meteor

I've created my first Meteor package today: CSSC. This package eases the creation of CSS stylesheets in CoffeeScript.

For using it, adds the package into your Meteor's project:

meteor add pierreeric:cssc

Once done, just create your stylesheets using DOM and CSSOM notation. For instance, I will create 2 classes selected and unselected:

if Meteor.isClient
  Meteor.startup ->
    css = new CSSC

    css.add '.selected',
      margin: CSSC.x 3
      border: "3px solid #{CSSC.yellow}"
      borderRadius: CSSC.x 5
    css.add '.unselected',
      color: CSSC.yellow

As you can see it, the syntax is close to what you would use in Stylus or SASS (when using .sass notation).

I've also created 2 plugins for this package:

• CSSC-Colors which allows inclusion of a nicer set of colors

• CSSC-Famous which avoids you from including CSS files from Famo.us.

With Meteor, this package and its plugins, you don't have to send CSS files to your client. Everything is packed within a single JS file.