@asset-pipe/css-reader

A module that takes any number of css feeds and bundles them into a css bundle.

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

Overview

Given any number of css feeds, the reader will:

1. Merge feeds into a single feed
2. Dedupe any items with identical id hashes keeping the last occurrence
3. Ensure order of feeds 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
        source: '/* ... */'
    }
]

Installation

npm install @asset-pipe/css-reader

Usage

Require the reader

const cssReader = require('@asset-pipe/css-reader')

Instantiating the reader

Pass feeds created by an asset-pipe sink:

const sink = new SinkFs({
    path: '/path/to/css/feeds'
});
const feed1 = JSON.parse(await sink.get('feed-a.json'));
const feed2 = JSON.parse(await sink.get('feed-b.json'));
const bundle = await cssReader([feed1, feed2])

API

Reader takes an array of feeds. Feeds 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

Example

const bundle = await cssReader([feed, ...feeds])

This module has the following API:

function(feeds, [options])

Supported arguments are:

• feeds - Array - An Array of feeds.
• options - Object - configuration.
  • options.minify (default: false) Specify whether to minify code using cssnano.

Returns: Promise<string> - A promise that resolves to a bundle string that is processed by autoprefixer.

Remember to specify a browserslist in your project to ensure cssnano and autoprefixer support the browsers your users use.

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.