rework-custom-import

Handles inlining CSS imports where dependency resolution has already been completed by another build tool, mostly to improve source-map support.

I originally built this for use with mako-css, but I think there might eventually be value as a general-purpose tool.

Usage

This is a rework plugin that is very similar to rework-import. Instead of resolving the imports directly, this module assumes the resolution has already been completed.

API

customImport(mapping)

The mapping parameter is an object that looks just like the one created by module-deps (which is used by Browserify).

{
  "index.css": {
    "id": "index.css",
    "source": "\n@import './lib';\n\n* {\n  box-sizing: border-box;\n}\n",
    "deps": {
      "./lib": "lib/index.css"
    },
    "entry": true
  },
  "lib/index.css": {
    "id": "lib/index.css",
    "source": "\nbody {\n  background-color: blue;\n}\n",
    "deps": {}
  }
}

When running through rework, use the entry id as options.source:

var rework = require('rework');
var customImport = require('rework-custom-import');
var mapping = generateMapping(); // your external lib that generates the above JSON

let css = rework(mapping['index.css'].source, { source: 'index.css' })
  .use(customImport(mapping))
  .toString();

console.log(css);

NOTE: this module is entirely synchronous, just like any other rework plugin. Thus, your resolution must be finished before passing the CSS to rework.