README
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] (https://github.com/postcss/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.