reducejscss-module-deps
Walk the css dependency graph to generate a stream of json output.
Related
Example
var Deps = require('..')
var path = require('path')
var url = require('postcss-custom-url')
var atImport = require('postcss-simple-import')
var vars = require('postcss-advanced-variables')
var JSONStream = require('JSONStream')
var fixtures = path.resolve.bind(path, __dirname, 'src')
var stream = 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.pngimport-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 pathsource: 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.