Csscat NPM | npm.io

CSSCat

CSSCat is a nodejs tool to manage CSS dependencies. Its goal is to facilitate CSS modularity through the liberal use of @import statements during development that can then be built into single files for production.

NOTE: PLEASE USE WITH CAUTION. CSSCAT IS CURRENTLY AN ALPHA RELEASE AND IS NOT CONSIDERED STABLE. DUE TO ITS FILE TRANSFORMATION FUNCTIONALITY, IT SHOULD ONLY BE USED IN A MANNER THAT DOES NOT JEOPARDIZE VALUABLE WORK. MORE TESTING AND REAL-WORLD USE IS NEEDED TO ENSURE A SOLID TOOL THAT FUNCTIONS AS ADVERTISED.

Features

Concatenates file dependencies by parsing their @import statements (minification coming soon)

Parses @import statements that include media conditions, wrapping the imported CSS in an equivalent @media block. Example:

Before

  @import url( 'a.css' ) screen and ( min-width: 100px );

After

  @media screen and ( min-width: 100px ) {
      #some-id {
          display:awesome;
      }       
  }

Installation

$ npm install csscat

Usage

var csscat = require( 'csscat' );
var options = {
    
    // Enable to see the `files` object. It is also returned from `csscat.init`
    debug: false,
    
    // The relative to the file from which `csscat.init` is invoked.
    dir: 'path/to/css/directory'
}

csscat.init( {
    dir: '../css' // relative to the file from which `csscat.init` is invoked.
});

Since CSSCat does not copy the files into a new directory before processing, you can use the following snippet in a build.js file to create a copy of the original directory you intend to build:

var csscat = require( 'csscat' )
    , fsh = require( 'csscat/lib/fs-helper' )
    ;

// Path to the directory to copy
var original = 'css';

var options = {
    dir: 'css-build'
}

// Delete destination directory
if ( fsh.exists( options.dir ) ) fsh.rm( options.dir );

// Copy the original directory to the destination directory
fsh.copyDir( original, options.dir );

csscat.init( options );