mako-css

A plugin for working with CSS, using npm as a package manager. In addition to bundling the CSS together, it also handles inlining assets or rewriting URLs to them.

Purpose

• builds CSS files in a manner similar to mako-js, allowing npm packages with CSS, images, fonts, and other assets to also be modularized
• finds dependencies via @import "..."; and url(...) declarations
• rewrites URLs relative to the output files (for easy deployment)
• allow inlining assets like images

API

css(options)

Create a new plugin instance, with the following options available:

• extensions extensions in addition to .css to resolve (eg: .sass)
• inline used to enable asset inlining (see below for more information)
• resolveOptions additional options to be passed to resolve
• sourceMaps specify true to enable source-maps (default: false)
• sourceRoot specifies the source map root (default: "mako://")

css.images

An Array of extensions for image files that this plugin will interact with. You can add to this array directly, but for core support of other types, please open an issue.

css.fonts

An Array of extensions for image files that this plugin will interact with. You can add to this array directly, but for core support of other types, please open an issue.

Inlining Assets

By using options.inline, you can allow for mako-css to inline assets into your CSS as data URIs. This is opt-in, so the following formats are available for configuration:

• true use to inline all assets (probably not ideal for production use)
• <number> indicates that only files that size (in bytes) or smaller should be inline. (eg: inline: 2048 means only files <= 2KB will be inlined)
• fn(file) can be used as a function to provide the most flexibility. It is invoked with the file as an argument, the return value is cast into a bool.