|
1 | 1 | # asset-pipe-css-writer
|
2 | 2 |
|
| 3 | +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. |
| 4 | + |
| 5 | +## Overview |
| 6 | + |
| 7 | +Given any number of css file paths, for each file path, this module will: |
| 8 | +1. fetch the file at the path |
| 9 | +2. fetch a name and version from the nearest package.json to the file |
| 10 | +3. bundle the css found in the file (resolving any @import statements and inlining them) |
| 11 | +4. put all this together in an object (See Output data format below) |
| 12 | + |
| 13 | +The module provides a readable stream of the resulting objects. |
| 14 | + |
| 15 | +### Output data format |
| 16 | + |
| 17 | +```js |
| 18 | +{ |
| 19 | + // Unique id for entry. Created by hashing together name, version and file |
| 20 | + id: '4f32a8e1c6cf6e5885241f3ea5fee583560b2dfde38b21ec3f9781c91d58f42e', |
| 21 | + // 'name' from nearest package.json file found by working up from the css file's directory |
| 22 | + name: 'my-module-1', |
| 23 | + // 'version' from nearest package.json file found by working up from the css file's directory |
| 24 | + version: '1.0.1', |
| 25 | + // path to file on disk relative to nearest package.json file found by working up from the css file's directory |
| 26 | + file: 'my-module-1/main.css', |
| 27 | + // bundled css content with any @import statements inlined |
| 28 | + content: '/* ... */' |
| 29 | +} |
| 30 | +``` |
| 31 | + |
| 32 | +## Installation |
| 33 | + |
| 34 | +```bash |
| 35 | +npm install asset-pipe-css-writer |
| 36 | +``` |
| 37 | + |
| 38 | +## Usage |
| 39 | + |
| 40 | +### Require the writer |
| 41 | +```js |
| 42 | +const CssWriter = require('asset-pipe-css-writer') |
| 43 | +``` |
| 44 | + |
| 45 | +### Instantiating the writer |
| 46 | + |
| 47 | +Either pass a path to a single css file: |
| 48 | +```js |
| 49 | +const writer = new CssWriter('/path/to/css/file.css') |
| 50 | +``` |
| 51 | + |
| 52 | +Or pass an array of paths to css files: |
| 53 | +```js |
| 54 | +const writer = new CssWriter(['/path/to/css/file1.css', '/path/to/css/file2.css']) |
| 55 | +``` |
| 56 | + |
| 57 | +### Consuming content from the writer |
| 58 | + |
| 59 | +The writer is a readable stream in object mode so in order to access the data you may register a data handler |
| 60 | +and listen for objects to be passed to the handler: |
| 61 | +```js |
| 62 | +writer.on('data', data => { |
| 63 | + // { id, name, version, file, content } |
| 64 | +}) |
| 65 | +``` |
| 66 | + |
| 67 | +You might also pipe the writer into a writeable or transform stream (with input in object mode): |
| 68 | +```js |
| 69 | +const { Writable } = require('stream') |
| 70 | +const consumer = new Writeable({ |
| 71 | + objectMode: true, |
| 72 | + write(chunk, encoding, callback) { |
| 73 | + // chunk will be an object of the shape: { id, name, version, file, content } |
| 74 | + console.log(chunk) |
| 75 | + callback() |
| 76 | + } |
| 77 | +}) |
| 78 | + |
| 79 | +writer.pipe(consumer) |
| 80 | +``` |
0 commit comments