├── .editorconfig
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE.md
├── README.md
├── index.js
├── package.json
└── test
    ├── compose.spec.css
    ├── index.spec.js
    └── test.spec.css


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = tab
 5 | end_of_line = lf
 6 | charset = utf-8
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | 
10 | [{package.json,*.yml,*.md}]
11 | indent_style = space
12 | indent_size = 2
13 | 
14 | [*.md]
15 | trim_trailing_whitespace = false
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Mac
 2 | .DS_Store
 3 | 
 4 | # Node
 5 | node_modules
 6 | npm-debug.log
 7 | .nyc_output
 8 | coverage
 9 | 
10 | # Swap
11 | .swp
12 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | npm-debug.log
 3 | *.swp
 4 | coverage
 5 | .nyc_output
 6 | test
 7 | .editorconfig
 8 | .gitattributes
 9 | .travis.yml
10 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - 'node'
4 |   - 'lts/*'
5 |   - '8'
6 | 
7 | after_success:
8 |   - npm run coverage
9 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 PostHTML Aleksandr Yakunichev
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | [![NPM][npm]][npm-url]
  2 | [![Deps][deps]][deps-url]
  3 | [![Tests][travis]][travis-url]
  4 | [![Coverage][cover]][cover-url]
  5 | [![XO Code Style][style]][style-url]
  6 | 
  7 | <div align="center">
  8 |   <a href="https://github.com/posthtml/posthtml">
  9 |     <img width="180" height="180" src="http://posthtml.github.io/posthtml/logo.svg">
 10 |   </a>
 11 |   <img width="108" height="108" title="PostCSS"                 src="http://postcss.github.io/postcss/logo.svg" hspace="20">
 12 |   <img width="150" height="150"  src="https://raw.githubusercontent.com/css-modules/logos/master/css-modules-logo.png" />
 13 |   <h1>PostCSS Modules Plugin</h1>
 14 |   <p>A plugin to modules resources with ease<p>
 15 | </div>
 16 | 
 17 | <h2 align="center">Install</h2>
 18 | 
 19 | ```bash
 20 | npm i -D posthtml-postcss-modules
 21 | ```
 22 | 
 23 | <h2 align="center">Usage</h2>
 24 | 
 25 | ```js
 26 | options = {
 27 |   root: './', // root path for links lookup
 28 |   from: '' // pathname to resolving file (it's always better to provide it)
 29 |   plugins: [], // postcss plugins to apply for every link
 30 |   generateScopedName: genericNames // function to process css names or string
 31 | };
 32 | ```
 33 | 
 34 | ### Related
 35 | 
 36 | [CSS Modules](https://github.com/css-modules/css-modules)
 37 | 
 38 | <h2 align="center">Example</h2>
 39 | 
 40 | ```html
 41 | <!-- header.html -->
 42 | <link href="header.css" module/>
 43 | 
 44 | <style module>
 45 |   .navigation {height: 100px;}
 46 | </style>
 47 | 
 48 | <header classname="root">
 49 |   <nav classname="root navigation">
 50 |   </nav>
 51 | </header>
 52 | ```
 53 | 
 54 | ```css
 55 | /* header.css */
 56 | .root {background-color: white;}
 57 | ```
 58 | 
 59 | ```js
 60 | const { readFileSync } = require('fs')
 61 | const posthtml = require('posthtml')
 62 | 
 63 | posthtml()
 64 |   .use(require('posthtml-postcss-modules')({
 65 |     generateScopedName: '[hash:base64:5]'
 66 |   }))
 67 |   .process(readFileSync('header.html', 'utf8'))
 68 |   .then((result) => result)
 69 |   })
 70 | ```
 71 | 
 72 | ```html
 73 |  <style>.wqroe {background-color: white;}</style>
 74 |  <style>._32Lja {height: 100px;}</style>
 75 | 
 76 |  <header class="wqroe">
 77 |     <nav class="wqroe _32Lja"></nav>
 78 |  </header>
 79 | ```
 80 | 
 81 | <h2 align="center">LICENSE</h2>
 82 | 
 83 | MIT License (MIT)
 84 | 
 85 | Copyright (c) 2016 PostHTML [Aleksandr Yakunichev](https://github.com/canvaskisa)
 86 | 
 87 | > Permission is hereby granted, free of charge, to any person obtaining a copy
 88 | of this software and associated documentation files (the "Software"), to deal
 89 | in the Software without restriction, including without limitation the rights
 90 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 91 | copies of the Software, and to permit persons to whom the Software is
 92 | furnished to do so, subject to the following conditions:
 93 | 
 94 | > The above copyright notice and this permission notice shall be included in all
 95 | copies or substantial portions of the Software.
 96 | 
 97 | > THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 98 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 99 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
100 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
101 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
102 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
103 | SOFTWARE.
104 | 
105 | [npm]: https://img.shields.io/npm/v/posthtml-postcss-modules.svg
106 | [npm-url]: https://npmjs.com/package/posthtml-postcss-modules
107 | 
108 | [deps]: https://david-dm.org/posthtml/posthtml-postcss-modules.svg
109 | [deps-url]: https://david-dm.org/posthtml/posthtml-postcss-modules
110 | 
111 | [style]: https://img.shields.io/badge/code_style-XO-5ed9c7.svg
112 | [style-url]: https://github.com/sindresorhus/xo
113 | 
114 | [travis]: http://img.shields.io/travis/posthtml/posthtml-postcss-modules.svg
115 | [travis-url]: https://travis-ci.org/posthtml/posthtml-postcss-modules
116 | 
117 | [cover]: https://coveralls.io/repos/github/posthtml/posthtml-postcss-modules/badge.svg?branch=master
118 | [cover-url]: https://coveralls.io/github/posthtml/posthtml-postcss-modules?branch=master
119 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const match = require('posthtml-match-helper');
  6 | const genericNames = require('generic-names');
  7 | 
  8 | const postcss = require('postcss');
  9 | const Values = require('postcss-modules-values');
 10 | const LocalByDefault = require('postcss-modules-local-by-default');
 11 | const ExtractImports = require('postcss-modules-extract-imports');
 12 | const Scope = require('postcss-modules-scope');
 13 | const Parser = require('postcss-modules-parser');
 14 | 
 15 | /**
 16 |  * Retieves content of node element
 17 |  * or reads file from href attribute of <link module>
 18 |  * @param  {Object} options [plugin's options]
 19 |  * @param  {Object} node [ast node]
 20 |  * @return {Promise<String>} contents of file or <style> tag
 21 |  */
 22 | function getContentFromNode(options, node) {
 23 | 	return new Promise((resolve, reject) => {
 24 | 		if (node.tag === 'link') {
 25 | 			return fs.readFile(normalizePath(node.attrs.href, options.root, options.from), 'utf8', (err, res) => {
 26 | 				return err ? reject(err) : resolve(res);
 27 | 			});
 28 | 		}
 29 | 
 30 | 		return resolve(node.content);
 31 | 	});
 32 | }
 33 | 
 34 | /**
 35 |  * [normalizePath description]
 36 |  * @param  {String} href  [path to the file]
 37 |  * @param  {String} _root [context]
 38 |  * @param  {String} _from [relative file]
 39 |  * @return {String}       [absolute path to file]
 40 |  */
 41 | function normalizePath(href, _root, _from) {
 42 | 	/* istanbul ignore next */
 43 | 	return href ? path.join(path.isAbsolute(href) ? _root : path.dirname(_from), href) : _from;
 44 | }
 45 | 
 46 | /**
 47 |  * Processes css with css-modules plugins
 48 |  * @param  {Object} options [plugin's options]
 49 |  * @param  {String} href [path to the file]
 50 |  * @return {Function} [generate scoped name]
 51 |  */
 52 | function processContentWithPostCSS(options, href) {
 53 | 	/**
 54 | 	 * @param  {String} content [css to process]
 55 | 	 * @return {Object}         [object with css tokens and css itself]
 56 | 	 */
 57 | 	return function (content) {
 58 | 		if (options.generateScopedName) {
 59 | 			options.generateScopedName = typeof options.generateScopedName === 'function' ?
 60 | 				/* istanbul ignore next */
 61 | 				options.generateScopedName :
 62 | 				genericNames(options.generateScopedName, {context: options.root});
 63 | 		} else {
 64 | 			options.generateScopedName = function (local, filename) {
 65 | 				return Scope.generateScopedName(local, path.relative(options.root, filename));
 66 | 			};
 67 | 		}
 68 | 
 69 | 		// Setup css-modules plugins 💼
 70 | 		const runner = postcss([
 71 | 			Values,
 72 | 			LocalByDefault,
 73 | 			ExtractImports,
 74 | 			new Scope({generateScopedName: options.generateScopedName}),
 75 | 			new Parser({fetch})
 76 | 		].concat(options.plugins));
 77 | 
 78 | 		function fetch(_to, _from) {
 79 | 			// Seems ok 👏
 80 | 			const filePath = normalizePath(_to, options.root, _from);
 81 | 
 82 | 			return new Promise((resolve, reject) => {
 83 | 				return fs.readFile(filePath, 'utf8', (err, content) => {
 84 | 					/* istanbul ignore next: just error handler */
 85 | 					if (err) {
 86 | 						return reject(err);
 87 | 					}
 88 | 
 89 | 					return runner.process(content, {from: filePath})
 90 | 						.then(result => {
 91 | 							return resolve(result.root.tokens);
 92 | 						}).catch(reject);
 93 | 				});
 94 | 			});
 95 | 		}
 96 | 
 97 | 		return runner.process(content, {from: normalizePath(href, options.root, options.from)});
 98 | 	};
 99 | }
100 | 
101 | module.exports = function (options) {
102 | 	options = options || {};
103 | 	options.root = path.resolve(options.root || './');
104 | 	options.plugins = options.plugins || [];
105 | 	options.from = options.from || '';
106 | 
107 | 	return function (tree) {
108 | 		const promises = [];
109 | 
110 | 		tree.match(match('link[module][href], style[module]'), node => {
111 | 			promises.push(getContentFromNode(options, node)
112 | 				.then(processContentWithPostCSS(options, node.attrs && node.attrs.href))
113 | 				.then(processed => {
114 | 					/**
115 | 					 * Replacing all classname attributes in html,
116 | 					 * with classes from css
117 | 					 */
118 | 					Object.keys(processed.root.tokens).forEach(key => {
119 | 						tree.match({attrs: {classname: new RegExp('(?:^|\\s)' + key + '(?:\\s|$)')}}, node => {
120 | 							node.attrs.class = node.attrs.class ? node.attrs.class + ' ' + processed.root.tokens[key] : processed.root.tokens[key];
121 | 							return node;
122 | 						});
123 | 					});
124 | 
125 | 					// Remove classname attribute from everything
126 | 					tree.match(match('[classname]'), node => {
127 | 						delete node.attrs.classname;
128 | 						return node;
129 | 					});
130 | 
131 | 					/**
132 | 					 * Remove href and module attributes
133 | 					 * and replace tag with <style>
134 | 					 * and content with parsed css, hooray! 🙌
135 | 					 */
136 | 					delete node.attrs.href;
137 | 					delete node.attrs.module;
138 | 					node.tag = 'style';
139 | 					node.content = [processed.css];
140 | 				})
141 | 			);
142 | 
143 | 			return node;
144 | 		});
145 | 
146 | 		/* istanbul ignore next */
147 | 		return promises.length > 0 ? Promise.all(promises).then(() => {
148 | 			return tree;
149 | 		}) : tree;
150 | 	};
151 | };
152 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "posthtml-postcss-modules",
 3 |   "version": "0.1.7",
 4 |   "description": "CSS Modules in html",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "nyc ava",
 8 |     "pretest": "xo",
 9 |     "coverage": "nyc report --reporter=text-lcov | coveralls"
10 |   },
11 |   "keywords": [
12 |     "posthtml",
13 |     "parser",
14 |     "transform",
15 |     "html",
16 |     "module",
17 |     "css-modules",
18 |     "postcss",
19 |     "postcss-modules"
20 |   ],
21 |   "author": "Aleksandr Yakunichev <canvaskisa@gmail.com> (https://github.com/canvaskisa)",
22 |   "license": "MIT",
23 |   "repository": {
24 |     "type": "git",
25 |     "url": "git+https://github.com/canvaskisa/posthtml-postcss-modules.git"
26 |   },
27 |   "bugs": {
28 |     "url": "https://github.com/canvaskisa/posthtml-postcss-modules/issues"
29 |   },
30 |   "homepage": "https://github.com/canvaskisa/posthtml-postcss-modules",
31 |   "dependencies": {
32 |     "generic-names": "^2.0.1",
33 |     "postcss": "^7.0.17",
34 |     "postcss-modules-extract-imports": "^2.0.0",
35 |     "postcss-modules-local-by-default": "^3.0.2",
36 |     "postcss-modules-parser": "^1.1.0",
37 |     "postcss-modules-scope": "^2.1.0",
38 |     "postcss-modules-values": "^3.0.0",
39 |     "posthtml-match-helper": "^1.0.1"
40 |   },
41 |   "devDependencies": {
42 |     "ava": "^2.1.0",
43 |     "nyc": "^14.1.1",
44 |     "posthtml": "^0.11.4",
45 |     "xo": "^0.24.0"
46 |   },
47 |   "nyc": {
48 |     "lines": 100,
49 |     "branches": 100,
50 |     "statements": 100,
51 |     "functions": 100,
52 |     "check-coverage": true
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/test/compose.spec.css:
--------------------------------------------------------------------------------
1 | .compositor {
2 | 	height: 100px;
3 | }
4 | 


--------------------------------------------------------------------------------
/test/index.spec.js:
--------------------------------------------------------------------------------
 1 | import fs from 'fs';
 2 | import path from 'path';
 3 | import test from 'ava';
 4 | import posthtml from 'posthtml';
 5 | import plugin from '..';
 6 | 
 7 | console.log(path.resolve(__dirname, './test.spec.css'));
 8 | 
 9 | const filecontents = fs.readFileSync(path.resolve(__dirname, './test.spec.css'), 'utf8');
10 | 
11 | test('Must include css', async t => {
12 | 	const actual = '<div><link href="./test/test.spec.css" module/></div>';
13 | 	const expected = `<div><style>${filecontents}</style></div>`;
14 | 
15 | 	const {html} = await posthtml().use(plugin({
16 | 		generateScopedName: '[local]'
17 | 	})).process(actual);
18 | 
19 | 	t.is(html, expected);
20 | });
21 | 
22 | test('Must replace html classes with processed ones', async t => {
23 | 	const actual = '<link href="./test/test.spec.css" module/><div classname="root"></div>';
24 | 	const expected = `<style>${filecontents}</style><div class="root"></div>`;
25 | 
26 | 	const {html} = await posthtml().use(plugin({
27 | 		generateScopedName: '[local]'
28 | 	})).process(actual);
29 | 
30 | 	t.is(html, expected);
31 | });
32 | 
33 | test('Must keep previous classes on html elements', async t => {
34 | 	const actual = '<link href="./test/test.spec.css" module/><div classname="root" class="div-class"></div>';
35 | 	const expected = `<style>${filecontents}</style><div class="div-class root"></div>`;
36 | 
37 | 	const {html} = await posthtml().use(plugin({
38 | 		generateScopedName: '[local]'
39 | 	})).process(actual);
40 | 
41 | 	t.is(html, expected);
42 | });
43 | 
44 | test('Must fail when module\'s href cannot be found', async t => {
45 | 	const source = '<div><link href="./undefined.css" module/></div>';
46 | 	const error = await t.throwsAsync(posthtml().use(plugin()).process(source));
47 | 	t.is(error.message, 'ENOENT: no such file or directory, open \'undefined.css\'');
48 | });
49 | 
50 | test('Must process <style module/> contents', async t => {
51 | 	const source = '<style module>.a {color: black} .b {color: white}</style><div classname="a b"></div>';
52 | 	const expected = '<style>.a-test {color: black} .b-test {color: white}</style><div class="a-test b-test"></div>';
53 | 	const {html} = await posthtml().use(plugin({generateScopedName: '[local]-test'})).process(source);
54 | 	t.is(html, expected);
55 | });
56 | 
57 | test('Must match classes properly', async t => {
58 | 	const source = '<style module>.a {color: black} .ab {color: white}</style><div classname="ab"></div>';
59 | 	const expected = '<style>.a-test {color: black} .ab-test {color: white}</style><div class="ab-test"></div>';
60 | 	const {html} = await posthtml().use(plugin({generateScopedName: '[local]-test'})).process(source);
61 | 	t.is(html, expected);
62 | });
63 | 
64 | test('Must be able to compose styles', async t => {
65 | 	const source = '<style module>.c {width: 50px;} .b {height: 100px;} .a {color: black; composes: b c;}</style><div classname="a"></div>';
66 | 	const expected = '<style>.c-test {width: 50px;} .b-test {height: 100px;} .a-test {color: black;}</style><div class="a-test b-test c-test"></div>';
67 | 	const {html} = await posthtml().use(plugin({generateScopedName: '[local]-test'})).process(source);
68 | 	t.is(html, expected);
69 | });
70 | 
71 | test('Must be able to compose styles from file', async t => {
72 | 	const source = '<style module>.compose {color: black; composes: compositor from "./compose.spec.css"}</style><div classname="compose"></div>';
73 | 	const expected = '<style>.compose-test {color: black}</style><div class="compose-test compositor-test"></div>';
74 | 	const {html} = await posthtml().use(plugin({from: __filename, generateScopedName: '[local]-test'})).process(source);
75 | 	t.is(html, expected);
76 | });
77 | 
78 | test('Must generate default classnames if generateScopedName is undefined', async t => {
79 | 	const actual = '<style module>.root {color: red;}</style><div classname="root"></div>';
80 | 	const expected = '<style>._test_index_spec__root {color: red;}</style><div class="_test_index_spec__root"></div>';
81 | 	const {html} = await posthtml().use(plugin({from: __filename})).process(actual);
82 | 	t.is(html.replace(/(\n|\t)/g, ''), expected);
83 | });
84 | 


--------------------------------------------------------------------------------
/test/test.spec.css:
--------------------------------------------------------------------------------
1 | .root {background-color: white;}
2 | .test {color: red;}
3 | 


--------------------------------------------------------------------------------