diff --git a/README.md b/README.md index 90f0c22..41e6f2e 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ b.plugin(require('css-modulesify'), { }); var bundle = b.bundle() -bundle.on('css stream', function (css) { +b.on('css stream', function (css) { css.pipe(fs.createWriteStream('mycss.css')); }); ``` @@ -66,11 +66,12 @@ bundle.on('css stream', function (css) { - `rootDir`: absolute path to your project's root directory. This is optional but providing it will result in better generated classnames. - `output`: path to write the generated css. If not provided, you'll need to listen to the `'css stream'` event on the bundle to get the output. - `jsonOutput`: optional path to write a json manifest of classnames. -- `use`: optional array of postcss plugins (by default we use the css-modules core plugins). +- `use`: optional array of postcss plugins (by default we use the css-modules core plugins). NOTE: it's safer to use `after` +- `after`: optional array of postcss plugins to run after the required css-modules core plugins are run. - `generateScopedName`: (API only) a function to override the default behaviour of creating locally scoped classnames. ### Events -- `b.bundle().on('css stream', callback)` The callback is called with a readable stream containing the compiled CSS. You can write this to a file. +- `b.on('css stream', callback)` The callback is called with a readable stream containing the compiled CSS. You can write this to a file. ## Using CSS Modules on the backend diff --git a/index.js b/index.js index 4bbbbaa..e967841 100644 --- a/index.js +++ b/index.js @@ -184,7 +184,7 @@ module.exports = function (browserify, options) { compiledCssStream = new ReadableStream(); compiledCssStream._read = function () {}; - bundle.emit('css stream', compiledCssStream); + browserify.emit('css stream', compiledCssStream); bundle.on('end', function () { // Combine the collected sources into a single CSS file diff --git a/tests/stream-output.js b/tests/stream-output.js index 4268f7b..d33ff1a 100644 --- a/tests/stream-output.js +++ b/tests/stream-output.js @@ -28,32 +28,42 @@ tape('stream output', function (t) { t.plan(cssFilesTotal * 2 + 1); var cssFilesCount = 0; - browserify(path.join(simpleCaseDir, 'main.js')) + var b = browserify(path.join(simpleCaseDir, 'main.js')); + + b .plugin(cssModulesify, { rootDir: path.join(simpleCaseDir) }) .on('error', t.error) - .bundle(function noop () {}) - .on('css stream', function (stream) { - stream - .on('data', function onData (css) { - var cssString = css.toString(); - // just get the first class name, use that as an id - var cssId = cssString.split('\n')[0].split(' ')[0]; - - t.ok( - ++cssFilesCount <= cssFilesTotal - , 'emits data for ' + cssId - ); - - t.ok( - cssString.indexOf('._styles') === 0 - , 'emits compiled css for ' + cssId - ); - }) - .on('end', function onEnd () { - t.pass('ends the stream'); - }) - .on('error', t.error); - }); + .bundle(function noop () {}); + + b + .once('css stream', function (stream) { + stream + .on('data', function onData (css) { + var cssString = css.toString(); + // just get the first class name, use that as an id + var cssId = cssString.split('\n')[0].split(' ')[0]; + + t.ok( + ++cssFilesCount <= cssFilesTotal + , 'emits data for ' + cssId + ); + + t.ok( + cssString.indexOf('._styles') === 0 + , 'emits compiled css for ' + cssId + ); + }) + .on('end', function onEnd () { + t.pass('ends the stream'); + + b.bundle(function noop () {}); + + b.once('css stream', function (stream2) { + t.ok(stream2, 'registers a second event for a CSS stream'); + }); + }) + .on('error', t.error); + }); });