csscat

A CSS Dependency Manager.

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.

  • 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;
          }       
      }
    
$ npm install csscat
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 );
  • Unit tests
  • Optimization/Minification options
  • Compatibility with popular build tools (Grunt, etc.)
  • Source maps- Source maps