@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

$3

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

``js
[
{
// 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

`bash
npm install @asset-pipe/css-reader
`

Usage

$3


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

$3

Pass feeds created by an asset-pipe sink:
`js
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
- " class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">asset-pipe-sink-fs
- asset-pipe-sink-gcs
- " class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">asset-pipe-sink-mem

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

This module has the following API:

$3

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 - 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.