node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


VCL preprocessor

Build Status Coverage Status

The VCL preprocessor allows to create builds from NPM based CSS modules. It is based on the postcss processor framework.



$ npm install -g vcl-preprocessor

Command Line

Usage: vcl-preprocessor <input> [output]
  --version, -v              Show version number
  --help, -h                 Show help
  --watch, -w                watches the input file for changes
  --import-root, -i          directory for imports
  --direct-input             waits for input from stdin
  --include-dev              include dev dependencies of module          [default: true]
  --hoverSelectorPrefix, -p  specify a hover selector prefix, use '.vclHoverSupport' if no argument was provided
  vcl-preprocessor index.styl dist/compiled.css     Compile index.styl and output to
  cat index.styl | vcl-preprocessor > compiled.css  Compile index.styl and pipe
                                                    output to compiled.css
  vcl-preprocessor ./package.json > compiled.css    Fetch the package dependencies
                                                    and compile everything to

The vcl cli will create the destination directory if it does not exist.


var vcl = require('vcl-preprocessor');
// will return the finished css 
var process = vcl('body\n  color: blue');
process.then(result => result.css);
// will process a package including its dependencies 
// package needs to have a `style` property pointing to the main styl file 
var process = vcl.package('./my-page/package.json');
process.then(result => result.css);

This function will return the generated CSS code as string that can be written to a file for example.

Entry CSS File

The following ways to import CSS files are supported:

@import "node-module-name";
@import "node-module-name/file";
@import "./local-file-relative-to-this.css";


  • Node module and local file imports via postcss-import.
  • CSS level 4 variables syntax postcss-css-variables.
  • Support for color functions such as rgba() via [postcss-color-function] (
  • Support for CSS level 4 proposed color() function via [postcss-color-function].
  • Support for lighten|darken({color}, {amount}%) function via [rucksack-css].
  • Inheritance support via [rucksack-css].
  • Custom media to do things like @media (--narrow-window) via [rucksack-css].
  • Easing functions via [rucksack-css].
  • Simple clear: fix construct via [rucksack-css].
  • Namespacing via postcss-add-namespace.