style-deps

style-deps

Traverse the dependency graph of a CSS project using npm-style import statements, asynchronously. Basically: rework-npm meets module-deps.

Usage

styleDeps(file, [opts], done)

Starting with file as the entry file, traverse your project's dependency tree and come back with a single CSS bundle. Accepts for the following options:

• compress: whether to minify the final CSS. Defaults to false.
• debug: set to true to enable CSS sourcemaps. Defaults to false.
• transforms: transform streams for modifying your CSS before it gets parsed.

Text Transforms

Much like browserify transforms, each text transform is a function which takes the absolute file path and returns a through stream that modifies the file before it's parsed:

var deps = require('style-deps')
var through = require('through')
var map = require('map-stream')
var path = require('path')

// Lower-case all of your project's CSS
function transform(file) {
  if (path.extname(file) !== '.CSS') return through()

  return map(function(chunk, next) {
    next(null, chunk.toString().toLowerCase())
  })
}

deps(__dirname + '/index.css', {
  transforms: [transform]
}, function(err, src) {
  if (err) throw err
  console.log(src)
})

Source Transforms

Similar to text transforms, except instead of returning a stream source transforms should return a function. This function should accept a CSS AST generated by css-parse, modifying it to make changes to the stylesheet after being parsed but before importing any modules.

Using source transforms instead of text transforms is recommended, considering that in the latter case transforms tend to parse/stringify content repeatedly resulting in unnecessary overhead.

Each returned source transform function is passed two arguments:

• style: the parsed CSS AST to process.
• next(err, new): a callback to be called when complete. You can either pass the callback nothing, or provide a new replacement value for the AST to use in the next modifier.

var shade = require('rework-shade')
var deps = require('style-deps')

function modifier(file, style, next) {
  shade()(style)
  next(null, style)
}

deps(__dirname + '/index.css', {
  transforms: [modifier]
}, function(err, src) {
  if (err) throw err
  console.log(src)
})