@asset-pipe/css-reader

@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:

• Merge feeds into a single feed
• Dedupe any items with identical id hashes keeping the last occurrence
• 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.