12 oct. 2014

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:
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.