VCL preprocessor

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

Usage

Installation

$ npm install -g vcl-preprocessor

Command Line

Usage: vcl-preprocessor <input> [output]
 
Options:
  --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
 
Examples:
  vcl-preprocessor index.styl dist/compiled.css     Compile index.styl and output to
                                                    dist/compiled.css
  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
                                                    compiled.css

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

API

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";

Features

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