topcoat-resin v0.5.0

Resin

A future facing CSS preprocessor made with Rework.

Installation

npm install topcoat-resin

Usage

var resin = require('topcoat-resin');

    resin({
        // Pass it a css file to process
        src: 'src/entry.css',
        // Alternatively pass it the file contents, defaults to src
        contents: 'body { color: rgba(#fff, 0.5); }',
        // Tell it what browsers to prefix for
        browsers: ['last 1 version', 'ios', 'android 4'],
        // Add a namespace to your classes to avoid collisions
        namespace: 'dam',
        // Add a license to the final output
        license: '// Copyright 2013 and stuff \n',
        // Generate sourecemaps for debugging
        debug: true,
        // Extend resin further with more rework plugins
        use: [rework.ease()]
    });

This function will return an evaluated string that you can write to a file, or stream etc.

Example writing to a file:

var resin = require('topcoat-resin'),
   write = require('fs').writeFileSync,
   output;

   output = resin({
       // Pass it a css file to process
       src: 'src/entry.css',
       // Tell it what browsers to prefix for
       browsers: ['last 1 version', 'ios', 'android 4']
       // Add a namespace to your classes to avoid collisions
       namespace: 'dam'
   });

   write('path/to/output/dir/filename.css', output);

Entry CSS file

@import "node-package-name";
@import "other-node-package-name";

Resin will pull in CSS source files distributed via npm packages and add them to the AST. Uses rework-npm under the covers.

Features

Resin supports:

• Imports
• Variables
• Colors
• Extend
• Namespacing
• Autoprefixer
• License addition
• Adding more rework plugins
• Source maps for debugging

TODO

• Topdoc
  • issue#1
• Functions
  • issue#2
• Linter
  • issue#3
• Optimize
  • issues#4