Merge pull request #1 from asset-pipe/develop

Develop

Author: digitalsadhu

.eslintignore

@@ -0,0 +1 @@
+coverage

.eslintrc

@@ -1,7 +1,11 @@
 {
-  "root": true,
-  "extends": [
-    "finn",
-    "finn/node"
-  ]
-}
+    "root": true,
+    "parserOptions": {
+        "ecmaVersion": 2017
+    },
+    "extends": ["finn", "finn/node"],
+    "env": {
+        "node": true,
+        "jest": true
+    }
+}

.gitignore

@@ -6,3 +6,4 @@ tmp/**/*
 .idea/**/*
 *.iml
 *.log
+coverage

.travis.yml

@@ -2,7 +2,6 @@ language: node_js
 
 node_js:
   - "8"
-  - "6"
 
 script:
   - npm test

README.md

@@ -1,2 +1,80 @@
 # asset-pipe-css-writer
 
+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.
+
+## Overview
+
+Given any number of css file paths, for each file path, this module will:
+1. fetch the file at the path
+2. fetch a name and version from the nearest package.json to the file
+3. bundle the css found in the file (resolving any @import statements and inlining them)
+4. put all this together in an object (See Output data format below)
+
+The module provides a readable stream of the resulting objects.
+
+### Output data format
+
+```js
+{
+    // Unique id for entry. Created by hashing together name, version and file
+    id: '4f32a8e1c6cf6e5885241f3ea5fee583560b2dfde38b21ec3f9781c91d58f42e',
+    // 'name' from nearest package.json file found by working up from the css file's directory
+    name: 'my-module-1',
+    // 'version' from nearest package.json file found by working up from the css file's directory
+    version: '1.0.1',
+    // path to file on disk relative to nearest package.json file found by working up from the css file's directory
+    file: 'my-module-1/main.css',
+    // bundled css content with any @import statements inlined
+    content: '/* ... */'
+}
+```
+
+## Installation
+
+```bash
+npm install asset-pipe-css-writer
+```
+
+## Usage
+
+### Require the writer
+```js
+const CssWriter = require('asset-pipe-css-writer')
+```
+
+### Instantiating the writer
+
+Either pass a path to a single css file:
+```js
+const writer = new CssWriter('/path/to/css/file.css')
+```
+
+Or pass an array of paths to css files:
+```js
+const writer = new CssWriter(['/path/to/css/file1.css', '/path/to/css/file2.css'])
+```
+
+### Consuming content from the writer
+
+The writer is a readable stream in object mode so in order to access the data you may register a data handler
+and listen for objects to be passed to the handler:
+```js
+writer.on('data', data => {
+    // { id, name, version, file, content }
+})
+```
+
+You might also pipe the writer into a writeable or transform stream (with input in object mode):
+```js
+const { Writable } = require('stream')
+const consumer = new Writeable({
+    objectMode: true,
+    write(chunk, encoding, callback) {
+        // chunk will be an object of the shape: { id, name, version, file, content }
+        console.log(chunk)
+        callback()
+    }
+})
+
+writer.pipe(consumer)
+```

lib/util.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const path = require('path');
+const { promisify } = require('util');
+const fs = require('fs');
+const readFile = promisify(fs.readFile);
+const readPkgUp = require('read-pkg-up');
+const postcss = require('postcss');
+const atImport = require('postcss-import');
+
+module.exports.identifyCssModule = async function identifyCssModule (filePath) {
+    const { pkg: { name, version }, path: packagePath } = await readPkgUp({
+        normalize: false,
+        cwd: path.dirname(filePath),
+    });
+    const file = filePath.replace(path.dirname(packagePath), name);
+
+    return { name, version, file };
+};
+
+module.exports.bundleCssModule = async function bundleCssModule (filePath) {
+    const fileContents = await readFile(filePath, 'utf8');
+    const { css } = await postcss()
+        .use(atImport())
+        .process(fileContents, { from: filePath });
+    return css;
+};

lib/writer.js

@@ -0,0 +1,42 @@
+'use strict';
+
+const { Readable } = require('stream');
+const { identifyCssModule, bundleCssModule } = require('./util');
+const { existsSync } = require('fs');
+const { isAbsolute } = require('path');
+const assert = require('assert');
+const { hasher } = require('asset-pipe-common');
+
+module.exports = class Writer extends Readable {
+    constructor (files = []) {
+        super({ objectMode: true });
+
+        assert(
+            Array.isArray(files) || typeof files === 'string',
+            `Expected 'files' to be of type 'Array' or a 'string', instead got '${typeof files}'`
+        );
+        this.files = Array.isArray(files) ? files : [files];
+        for (const file of this.files) {
+            assert(typeof file === 'string', `Expected 'file' (${file}) to be of type 'string', instead got '${typeof file}'`);
+            assert(isAbsolute(file), `Expected 'file' (${file}) to be an absolute path to a file but it was not`);
+            assert(existsSync(file), `Expected 'file' (${file}) to exist on file system but it did not`);
+        }
+    }
+
+    async _read () {
+        const file = this.files.shift();
+        if (!file) {
+            this.push(null);
+            return;
+        }
+
+        try {
+            const [css, meta] = await Promise.all([bundleCssModule(file), identifyCssModule(file)]);
+            meta.id = hasher(`${meta.name}|${meta.version}|${meta.file}|${css}`);
+            meta.content = css;
+            this.push(meta);
+        } catch (err) {
+            this.emit('error', err);
+        }
+    }
+};