@vcl/preprocessor v0.6.3

VCL preprocessor

The VCL preprocessor allows to create builds from NPM based CSS modules. It is based on webpack and 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
  --optimize                 optimize css
  --source-map              generate source maps

Examples:
  vcl-preprocessor index.sss dist/compiled.css     Compile index.sss and output to
                                                    dist/compiled.css

The VCL CLI will create the destination directory if it does not exist.

API

var vcl = require('@vcl/preprocessor');

// Will compile the input file and store the result in the output file
vcl(inputFile, outputFile, opts).then(({css}) => {
  ...
});

// Will compile the input file and store the result in the output file
// Also recompiles the output file on changes
vcl.compileFile(inputFile, outputFile, opts);

// Will return an array of postCSS plugins
var plugins = vcl.createPostCSSPlugins(opts);

// Will create a webpack rule for .sss files
var rule = vcl.createWebpackSSSRule(opts);

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

Options

• root process.cwd() base directory for file based imports.
• sourceMap false creates a source map
• optimize false optimizes css
• watch false enables watch mode
• include [] includes for the webpack rule
• exclude [] excludes for the webpack rule

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.
• Media queries level 4 shim prevents unwanted hover behavior on touch devices via mq4-hover-shim.
• Next gen CSS features via postcss-preset-env.