Inline CSS modules in HTML

Author: maltsev

.eslintrc

@@ -0,0 +1,21 @@
+{
+    "parser": "babel-eslint",
+    "rules": {
+        "indent": [2, 4, {"SwitchCase": 1}],
+        "quotes": [2, "single"],
+        "linebreak-style": [2, "unix"],
+        "semi": [2, "always"],
+        "camelcase": [2, {"properties": "always"}],
+        "brace-style": [2, "1tbs", {"allowSingleLine": true}]
+    },
+    "env": {
+        "es6": true,
+        "node": true,
+        "browser": false,
+        "mocha": true
+    },
+    "extends": "eslint:recommended",
+    "ecmaFeatures": {
+        "experimentalObjectRestSpread": false
+    }
+}

.gitignore

@@ -0,0 +1,41 @@
+# Source: https://github.com/github/gitignore/blob/master/Node.gitignore
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+
+
+# Custom
+/lib/*.js

.npmignore

@@ -0,0 +1,7 @@
+.gitignore
+.eslintrc
+.travis.yml
+node_modules/
+npm-debug.log
+/lib/*.es6
+/test/

.travis.yml

@@ -0,0 +1,5 @@
+sudo: false
+language: node_js
+node_js:
+  - stable
+  - "0.12"

README.md

@@ -0,0 +1,72 @@
+# PostHTML CSS Modules
+[![npm version](https://badge.fury.io/js/posthtml-css-modules.svg)](http://badge.fury.io/js/posthtml-css-modules)
+[![Build Status](https://travis-ci.org/maltsev/posthtml-css-modules.svg?branch=master)](https://travis-ci.org/maltsev/posthtml-css-modules)
+
+[PostHTML](https://github.com/posthtml/posthtml) plugin that inlines [CSS modules](https://github.com/css-modules/css-modules) in HTML.
+
+
+## Usage
+I suggest to use [postcss-modules](https://github.com/outpunk/postcss-modules) to generate CSS modules.
+
+### Global file
+Let's say we have `cssClasses.json` with all CSS modules inside:
+```json
+{
+  "title": "_title_116zl_1 _heading_9dkf",
+  "profile": {
+    "user": "_profile_user_f93j"
+  }
+}
+```
+
+Now we can inline these CSS modules in our HTML:
+```js
+var posthtml = require('posthtml');
+
+posthtml([require('posthtml-css-modules')('./cssClasses.json')])
+    .process(
+        '<h1 css-module="title">My profile</h1>' +
+        // You can also use nested modules
+        '<div css-module="profile.user">John</div>'
+    )
+    .then(function (result) {
+        console.log(result.html);
+    });
+
+// <h1 class="_title_116zl_1 _heading_9dkf">My profile</h1>
+// <div class="_profile_user_f93j">John</div>
+```
+
+### Directory with several files
+CSS modules could be also separated in a several files.
+For example, `profile.js` and `article.js` inside directory `cssModules/`:
+```js
+// profile.js
+module.exports = {
+  user: '_profile_user_f93j'
+}
+```
+
+```js
+// article.js
+module.exports = {
+  title: '_article__tile _heading'
+}
+```
+You can use both JS and JSON for declaration, as long as the file could be required via `require()`.
+
+```js
+var posthtml = require('posthtml');
+
+posthtml([require('posthtml-css-modules')('./cssModules/')])
+    .process(
+        '<div class="baseWrapper" css-module="profile.user">John</div>' +
+        '<h2 css-module="article.title"></h2>'
+    )
+    .then(function (result) {
+        console.log(result.html);
+    });
+
+// <div class="baseWrapper _profile_user_f93j">John</div>
+// <h2 class="_article__tile _heading"></h2>
+```

index.js

@@ -0,0 +1 @@
+module.exports = require('./lib/cssModules').default;

lib/cssModules.es6

@@ -0,0 +1,48 @@
+import fs from 'fs';
+import path from 'path';
+import _get from 'lodash.get';
+import parseAttrs from 'posthtml-attrs-parser';
+
+
+export default (cssModulesPath) => {
+    return function cssModules(tree) {
+        tree.match({attrs: {'css-module': /\w+/}}, node => {
+            const attrs = parseAttrs(node.attrs);
+            const cssModuleName = attrs['css-module'];
+            delete attrs['css-module'];
+
+            attrs.class = attrs.class || [];
+            attrs.class.push(getCssClassName(cssModulesPath, cssModuleName));
+            node.attrs = attrs.compose();
+
+            return node;
+        });
+    };
+};
+
+
+function getCssClassName(cssModulesPath, cssModuleName) {
+    if (fs.lstatSync(cssModulesPath).isDirectory()) {
+        let cssModulesDir = cssModulesPath;
+        let cssModuleNameParts = cssModuleName.split('.');
+        let cssModulesFile = cssModuleNameParts.shift();
+        cssModuleName = cssModuleNameParts.join('.');
+        cssModulesPath = path.join(cssModulesDir, cssModulesFile);
+    }
+
+    const cssModules = require(path.resolve(cssModulesPath));
+    const cssClassName = _get(cssModules, cssModuleName);
+    if (! cssClassName) {
+        throw getError('CSS module "' + cssModuleName + '" is not found');
+    } else if (typeof cssClassName !== 'string') {
+        throw getError('CSS module "' + cssModuleName + '" is not a string');
+    }
+
+    return cssClassName;
+}
+
+
+function getError(message) {
+    const fullMessage = '[posthtml-css-modules] ' + message;
+    return new Error(fullMessage);
+}

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "posthtml-css-modules",
+  "version": "0.1.0",
+  "description": "Use CSS modules in HTML",
+  "main": "index.js",
+  "author": "Kirill Maltsev <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "compile": "rm -f lib/*.js && node_modules/.bin/babel -d lib/ lib/",
+    "lint": "node_modules/.bin/eslint *.js lib/*.es6 test/",
+    "pretest": "npm run lint && npm run compile",
+    "test": "node_modules/.bin/_mocha --compilers js:babel-core/register --recursive --check-leaks",
+    "prepublish": "npm run compile"
+  },
+  "keywords": [
+    "posthtml",
+    "posthtml-plugin",
+    "html",
+    "postproccessor",
+    "css",
+    "css-modules"
+  ],
+  "babel": {
+    "presets": [
+      "es2015"
+    ]
+  },
+  "dependencies": {
+    "lodash.get": "^4.0.2",
+    "posthtml-attrs-parser": "^0.1.1"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.4.5",
+    "babel-core": "^6.4.5",
+    "babel-eslint": "^4.1.8",
+    "babel-preset-es2015": "^6.3.13",
+    "eslint": "^1.10.3",
+    "expect": "^1.14.0",
+    "mocha": "^2.4.5",
+    "posthtml": "^0.8.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/maltsev/posthtml-css-modules.git"
+  },
+  "bugs": {
+    "url": "https://github.com/maltsev/posthtml-css-modules/issues"
+  },
+  "homepage": "https://github.com/maltsev/posthtml-css-modules"
+}

test/classes.json

@@ -0,0 +1,8 @@
+{
+    "title": "__title __heading",
+    "user": {
+        "profile": {
+            "photo": "__user__profile__photo"
+        }
+    }
+}

test/cssModules.js

@@ -0,0 +1,81 @@
+import path from 'path';
+import expect from 'expect';
+import posthtml from 'posthtml';
+import cssModules from '..';
+
+const classesPath = path.join(__dirname, 'classes.json');
+const classesDir = path.dirname(classesPath);
+
+
+describe('posthtml-css-modules', () => {
+    it('should inline CSS module from the file (flat config)', () => {
+        return init(
+            '<div class="foob" css-module="title"></div>',
+            '<div class="foob __title __heading"></div>',
+            classesPath
+        );
+    });
+
+
+    it('should inline CSS module from the file (deep config)', () => {
+        return init(
+            '<div css-module="user.profile.photo"></div>',
+            '<div class="__user__profile__photo"></div>',
+            classesPath
+        );
+    });
+
+
+    it('should inline CSS module from the directory', () => {
+        return init(
+            '<div css-module="classes.title"></div>',
+            '<div class="__title __heading"></div>',
+            classesDir
+        );
+    });
+
+
+    it('should throw an error if the file with the CSS modules is not found', () => {
+        return init(
+            '<div></div>',
+            '<div></div>',
+            classesPath
+        ).catch(error => {
+            expect(error.message)
+                .toInclude('Cannot find module')
+                .toInclude('config/notExists.json');
+        });
+    });
+
+
+    it('should throw an error if the CSS module is not found in the file', () => {
+        return init(
+            '<div css-module="notExists"></div>',
+            '<div css-module="notExists"></div>',
+            classesPath
+        ).catch(error => {
+            expect(error.message)
+                .toInclude('[posthtml-css-modules] CSS module "notExists" is not found');
+        });
+    });
+
+
+    it('should throw an error if the file with the CSS module is not found in the directory', () => {
+        return init(
+            '<div css-module="notExists"></div>',
+            '<div css-module="notExists"></div>',
+            classesDir
+        ).catch(error => {
+            expect(error.message)
+                .toInclude('Cannot find module')
+                .toInclude('test/notExists');
+        });
+    });
+});
+
+
+function init(html, expectedHtml, options) {
+    return posthtml([cssModules(options)]).process(html).then(result => {
+        expect(result.html).toBe(expectedHtml);
+    });
+}