search

asset-pipe / 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.
Other
0 stars 0 forks source link

readme

@asset-pipe/css-reader

Travis CI Build Status NPM version Dependency Status Dev Dependency Status

Greenkeeper badge

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:

Example

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

This module has the following API:

function(feeds, [options])

Supported arguments are:

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: