@vcl/preprocessor

The VCL preprocessor


Keywords
vcl, modular, css, preprocessor, postcss, npm
License
MIT
Install
npm install @vcl/preprocessor@0.7.0-alpha.3

Documentation

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.

Installation

$ npm install -g @vcl/preprocessor

Usage

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          base directory for file based 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');

// Signature
var process = vcl(css, opts);

// will return promise on the compiled css
var process = vcl('body\n  color: blue');
process.then(result => result.css);

// will process a package including its dependencies
// package.json needs to have a `style` property pointing to the entry styl file
var process = vcl.package('./my-page/package.json');
process.then(result => result.css);

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

Options

  • npm.root [process.cwd()] base directory for file based imports.
  • namespaceOptions [none] name spacing of all CSS by applying class to elements matching the selector: { selector: '.gmh', class: 'gmh' }.
  • useMq4HoverShim [false] whether the MQ4 hover shim shall be used.
  • mq4HoverShimOptions [{ shimPrefixClass: '.vclHoverSupport' }] prefix class name for MQ4 hover shim.

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