browserify

modular-cssify

Browserify support for modular-css.

This plugin can be combined with the factor-bundle plugin to output a common CSS file as well as bundle-specific CSS files.

modular-cssify will use the basedir passed to browserify as it's cwd parameter.

Installation

$ npm i modular-cssify

Options

css

Location to write the generated CSS file to.

Shared Options

All other options are passed to the underlying Processor instance, see Options.

CLI

$ browserify -p [ modular-cssify --css "./style.css" ] entry.js

API

var browserify = require("browserify"),
    build;

build = browserify("./entry.js");

build.plugin("modular-cssify", {
    css : "./style.css",
});

factor-bundle

modular-cssify is fully factor-bundle aware and will output correctly-partitioned CSS bundles to match the JS bundles created by factor-bundle.

WARNING: Due to how factor-bundle works the modular-cssify must be applied to the Browserify object before factor-bundle.

CLI

$ browserify home.js account.js \
    -p [ modular-cssify --css gen/common.css ] \
    -p [ factor-bundle -o gen/home.js -o gen/account.js ] \
    -o bundle/common.js

API

var build = browserify([
        "./home.js",
        "./account.js"
    ]);

// NOTE modular-css applied before factor-bundle, it won't work otherwise!
build.plugin("modular-cssify", {
    css : "./gen/common.css"
});

build.plugin("factor-bundle", {
    outputs : [
        "./gen/home.js",
        "./get/account.js"
    ]
});