asset-pipe-css-reader

A module that takes any number of css feed streams (provided by asset-pipe sinks) and bundles them into a readable stream of css content.

This is an internal module intended for use by other modules in the asset-pipe project.

Overview

Given any number of css feed streams, the reader will:

1. Merge streams into a single stream
2. Dedupe any items with identical id hashes keeping the last occurrence
3. Ensure order of streams given is preserved for the final output CSS

Input data format

The following is an example of a feed file: (Something like /path/to/feeds/feed-a.json)

[
    {
        // Unique id for entry. Created by hashing together name, version and file
        id: '4f32a8e1c6cf6e5885241f3ea5fee583560b2dfde38b21ec3f9781c91d58f42e',
        name: 'my-module-1',
        version: '1.0.1',
        file: 'my-module-1/main.css',
        // bundled css content with any @import statements inlined
        content: '/* ... */'
    }
]

Installation

npm install asset-pipe-css-reader

Usage

Require the reader

const CssReader = require('asset-pipe-css-reader')

Instantiating the reader

Either pass a single stream created by an asset-pipe sink:

const sink = new SinkFs({
    path: '/path/to/css/feeds'
});
const feedStream = sink.reader('feed-a.json');
const reader = new CssReader(feedStream)

Or pass an array of streams:

const sink = new SinkFs({
    path: '/path/to/css/feeds'
});
const feedStream1 = sink.reader('feed-a.json');
const feedStream2 = sink.reader('feed-b.json');
const reader = new CssReader([feedStream1, feedStream2])

Consuming content from the reader

You should wait for the reader to become ready by listening for the pipeline ready event.

The reader is a readable stream so in order to access the data you may register a data handler and listen for chunks to be passed to the handler:

reader.on('pipeline ready', () => {
    reader.on('data', data => {
        // ..
    })
})

You might also pipe the reader into a writeable or transform stream:

const { writeFile } = require('fs')
const consumer = writeFile('/path/to/save/file')
 
reader.on('pipeline ready', () => {
    reader.pipe(consumer)
})

API

Methods

constructor

Constructor takes a single stream or array of streams. Streams should be produced with an asset-pipe sink such as:

• asset-pipe-sink-s3
• asset-pipe-sink-fs
• asset-pipe-sink-gcs
• asset-pipe-sink-mem

Examples

new CssReader(stream)

new CssReader([stream, ...stream])

Returns: Readable Stream

Events

file found

Event produced whenever an underlying feed stream successfully reads its feed file from disk

cssReader.on('file found', file => {})

Param: file, name of the file given to the feed stream to read from

file not found

Event produced whenever an underlying feed stream is unable to read its feed file from disk

cssReader.on('file not found', file => {})

Param: file, name of the file given to the feed stream to read from

pipeline ready

Event produced once all feed file streams have been successfully merged into a pipeline

cssReader.on('pipeline ready', () => {})

data

Event that emits chunks of CSS content to a consumer

cssReader.on('data', chunk => {})

Param: chunk, a piece of CSS text

error

Event produced whenever any of the various stages of the pipeline emit errors

cssReader.on('error', err => {})

Param: err, Error forwarded from merged streams or otherwise emitted from the pipeline

Contributing

The contribution process is as follows:

• Fork this repository.
• Make your changes as desired.
• Run the tests using npm test. This will also check to ensure that 100% code coverage is maintained. If not you may need to add additional tests.
• Stage your changes.
• Run git commit or, if you are not familiar with sematic commit messages, please run npm run cm and follow the prompts instead which will help you write a correct semantic commit message.
• Push your changes and submit a PR.