@asset-pipe/css-writer

@asset-pipe/css-writer

A module that takes any number of css file entry points and packages them together with meta data before providing them as a readable stream.

Overview

Given any number of css file paths, for each file path, this module will:

• fetch the file at the path
• fetch a name and version from the nearest package.json to the file
• bundle the css found in the file (resolving any @import statements and inlining them)
• put all this together in an object (See Output data format below)

The module provides a readable stream of the resulting objects.

Output data format

{
    // Unique id for entry. Created by hashing together name, version and file
    id: '4f32a8e1c6cf6e5885241f3ea5fee583560b2dfde38b21ec3f9781c91d58f42e',
    // 'name' from nearest package.json file found by working up from the css file's directory
    name: 'my-module-1',
    // 'version' from nearest package.json file found by working up from the css file's directory
    version: '1.0.1',
    // path to file on disk relative to nearest package.json file found by working up from the css file's directory
    file: 'my-module-1/main.css',
    // bundled css content with any @import statements inlined
    content: '/* ... */'
}

Installation

npm install asset-pipe-css-writer

Usage

Require the writer

const CssWriter = require('@asset-pipe/css-writer');

Instantiating the writer

Either pass a path to a single css file:

const writer = new CssWriter('/path/to/css/file.css');

Or pass an array of paths to css files:

const writer = new CssWriter([
    '/path/to/css/file1.css',
    '/path/to/css/file2.css',
]);

Consuming content from the writer

The writer is an event emitter, which has a method called bundle, which returns a readable stream in object mode so in order to access the data you may register a data handler and listen for objects to be passed to the handler:

writer.bundle().on('data', data => {
    // { id, name, version, file, content }
});

You might also pipe the writer into a writeable or transform stream (with input in object mode):

const { Writeable } = require('stream');
const consumer = new Writeable({
    objectMode: true,
    write(chunk, encoding, callback) {
        // chunk will be an object of the shape: { id, name, version, file, content }
        console.log(chunk);
        callback();
    },
});

writer.bundle().pipe(consumer);

If you want to create a single file output, send true as the second argument when creating the Writer.

const writer = new CssWriter(
    ['/path/to/css/file1.css', '/path/to/css/file2.css'],
    true,
);

writer.bundle().on('data', data => {
    // the two files bundled together as a single CSS
});