css-module-deps

Walk the css dependency graph to generate a stream of json output.

Related

• depsify
• reduce-css
• reduce-css-postcss

Example

varDeps=require('..')varpath=require('path')varurl=require('postcss-custom-url')varatImport=require('postcss-simple-import')varvars=require('postcss-advanced-variables')varJSONStream=require('JSONStream')varfixtures=path.resolve.bind(path,__dirname,'src')varstream=Deps({atRuleName: 'external',basedir: fixtures(),processor: [atImport(),url(),vars()],})stream.end({file: './import-and-deps.css'})stream.pipe(JSONStream.stringify(false,null,null,2)).pipe(process.stdout)

Directory structure:

⌘ tree example/src
example/src
├── import-and-deps.css
├── import-url.css
└── node_modules
├── helper
│ └── vars.css
└── sprites
└── dialog
├── index.css
└── sp-dialog.png

import-and-deps.css:

@external"./import-url";
@import"helper/vars";
.import-and-deps {
color: $red;
}

import-url.css

@import"sprites/dialog";
.importUrl{}

helper/vars.css:

$red:#FF0000;

sprites/dialog/index.css:

.dialog {
background:url(sp-dialog.png)
}

output:

⌘ node example/deps.js
{
"file": "/Users/zoubin/usr/src/self/css-module-deps/example/src/import-url.css",
"source": ".dialog {\n background: url(node_modules/sprites/dialog/sp-dialog.png)\n}\n.importUrl{}\n\n",
"deps": {},
"id": "/Users/zoubin/usr/src/self/css-module-deps/example/src/import-url.css"
}
{
"file": "/Users/zoubin/usr/src/self/css-module-deps/example/src/import-and-deps.css",
"source": ".import-and-deps {\n color: #FF0000;\n}\n\n",
"deps": {
"./import-url": "/Users/zoubin/usr/src/self/css-module-deps/example/src/import-url.css"
},
"id": "/Users/zoubin/usr/src/self/css-module-deps/example/src/import-and-deps.css"
}

stream = Deps(opts)

Return an object stream that expects { file: ... } objects as input, and produces objects for every dependency from a recursive module traversal as output.

opts

resolve

Specify how to resolve a file path

Type: Function

Receives the string to be resolved, and an option object with basedir.

Should return a promise, or the absolute path.

noParse

Specify which files to skip parsing.

Type: Array

Passed to multimatch to do matching.

atRuleName

Specify the name of at-rules to declare a dependency.

Type: String

Default: deps

Dependencies are declared through the @deps at-rule by default.

transform

Used to transform each file in the dependency graph.

Type: Function, Array

Signature: fn(result)

Return a promise to make it asynchronous.

result is an instance of Result.

processor

Specify postcss plugins to transform css file contents.

Type: Array

basedir

Type: String

Used to resolve input filenames.

dependenciesFilter

To filter the resolved dependencies.

Type: Function

Signature: var newDeps = dependenciesFilter(deps, file)

Result

var r = new Result(row)

Each row has the following fields:

• file: file path
• source: file contents

Read or modify r.root (the AST object) or r.css to do transformations.

Usually, you do not have to access both.

r.from is the file path.

r is an emitter.

Events

stream.on('file', file => {})

Before readFile called.

stream.on('transform', (result, file) => {})

Before applying transforms.

result is an Result.