add impl

Author: Michael Manukyan

.editorconfig

@@ -0,0 +1,11 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 120
+trim_trailing_whitespace = true

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "rules": {
+        "indent": [
+            "error",
+            4
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+};

.gitignore

@@ -57,3 +57,4 @@ typings/
 # dotenv environment variables file
 .env
 
+.idea

.npmignore

@@ -0,0 +1 @@
+examples

README.md

@@ -1,2 +1,60 @@
 # css-chunks-html-webpack-plugin
-Injecting css chunks extracted using extract-css-chunks-webpack-plugin to HTML for html-webpack-plugin
+Plugin for injecting css chunks, extracted using extract-css-chunks-webpack-plugin, to HTML for html-webpack-plugin
+
+Use in conjunction with
+[extract-css-chunks-webpack-plugin](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin) and
+[babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)
+to inject CSS chunks paths into your HTML file with
+[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin).
+
+## Recommended Installation
+
+```bash
+npm install --save-dev css-chunks-html-webpack-plugin extract-css-chunks-webpack-plugin babel-plugin-dual-import html-webpack-plugin
+```
+
+*webpack.config.js*
+```js
+  const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
+  const HtmlWebpackPlugin = require('html-webpack-plugin');
+  const CssChunkHashPlugin = require('../lib');
+
+
+  module.exports = {
+    // your other options
+    plugins: [
+      new ExtractCssChunks(),
+      new CssChunkHashPlugin({ inject: true }),
+      new HtmlWebpackPlugin(),
+    ]
+  };
+
+```
+
+## Configuration
+
+You can pass an object of configuration options to CssChunkHashPlugin. Allowed values are as follows:
+
+* `inject`: `true` | `false` whether to inject chunks paths object into HTML, used for manually adding chunks paths using custom teamplte for HtmlWebpackPlugin (default `true`)
+
+The CSS chunks paths map is saved in `htmlWebpackPlugin.files.cssHash` in your template. So if you want to manually add CSS chunks map you can do (if you are using EJS):
+
+```ejs
+<script type="text/javascript">
+    window.__CSS_CHUNKS__ = JSON.parse('<%= JSON.stringify(htmlWebpackPlugin.files.cssHash) %>')
+</script>
+```
+
+Otherwise, if you set `inject: true` the script tag with `window.__CSS_CHUNKS__` will be injected in `head` or `body` according your HtmlWebpackPlugin configuration.
+
+## Example
+
+There is a basic example of usage in [examples][examples]
+
+# Contribution
+
+You're free to contribute to this project by submitting [issues](https://github.com/mike1808/css-chunks-html-webpack-plugin/issues) and/or [pull requests](https://github.com/mike1808/css-chunks-html-webpack-plugin/pulls).
+
+# License
+
+This project is licensed under [MIT](LICENSE).

examples/README.md

@@ -0,0 +1,13 @@
+# Examples
+
+This is a sample example of usage of CssChunkHashPlugin. We have 4 `.js` and `.css` files.
+The entry `a.js` file on button click dynamically imports `b.js` which in turn dynamically loads `c.js` and the last dynamically loads `d.js`
+
+The result of the build is 8 chunks for each file `.js` and `.css` file.
+
+To run the build:
+
+```bash
+npm install
+../node_modules/.bin/webpack --config webpack.config.js
+```

examples/a.css

@@ -0,0 +1,3 @@
+.a {
+  color: red;
+}

examples/a.js

@@ -0,0 +1,17 @@
+import styles from './a.css';
+
+
+const button = document.createElement('button');
+button.className = styles.a;
+button.innerText = 'load modules';
+button.addEventListener('click', () => {
+  button.innerText = 'loading...';
+  import('./b.js')
+    .then(() => {
+      button.innerText = 'loaded';
+    });
+});
+
+document.body.appendChild(button);
+
+

examples/b.css

@@ -0,0 +1,3 @@
+.a {
+  color: green;
+}

examples/b.js

@@ -0,0 +1,4 @@
+import styles from './b.css';
+
+
+import('./c.js');

examples/c.css

@@ -0,0 +1,3 @@
+.c {
+  color: blue;
+}

examples/c.js

@@ -0,0 +1,4 @@
+import styles from './c.css';
+
+
+import('./d.js');

examples/d.css

@@ -0,0 +1,3 @@
+.d {
+  color: gold;
+}

examples/d.js

@@ -0,0 +1,8 @@
+import styles from './d.css';
+
+const anchor = document.createElement('a');
+anchor.className = styles.d;
+anchor.innerText = 'Hi!';
+anchor.href = 'https://github.com/mike1808/css-chunks-html-webpack-plugin';
+
+document.body.appendChild(anchor);

examples/dist/0.f5ed473c5f50a4f04b94.js

@@ -0,0 +1,29 @@
+webpackJsonp([0],{
+
+/***/ 4:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_plugin_dual_import_importCss_js__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_plugin_dual_import_importCss_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_plugin_dual_import_importCss_js__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__b_css__ = __webpack_require__(6);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__b_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__b_css__);
+
+
+
+Promise.all([__webpack_require__.e/* import() */(2).then(__webpack_require__.bind(null, 7)), __WEBPACK_IMPORTED_MODULE_0_babel_plugin_dual_import_importCss_js___default()('c')]).then(function (proms) {
+  return proms[0];
+});
+
+/***/ }),
+
+/***/ 6:
+/***/ (function(module, exports) {
+
+// removed by extract-text-webpack-plugin
+module.exports = {"a":"b__a--35CkO"};
+
+/***/ })
+
+});

examples/dist/1.824e5b18c4b57fab2f79.js

@@ -0,0 +1,29 @@
+webpackJsonp([1],{
+
+/***/ 10:
+/***/ (function(module, exports) {
+
+// removed by extract-text-webpack-plugin
+module.exports = {"d":"d__d--2-Mju"};
+
+/***/ }),
+
+/***/ 9:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__d_css__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__d_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__d_css__);
+
+
+var anchor = document.createElement('a');
+anchor.className = __WEBPACK_IMPORTED_MODULE_0__d_css___default.a.d;
+anchor.innerText = 'Hi!';
+anchor.href = 'https://github.com/mike1808/css-chunks-html-webpack-plugin';
+
+document.body.appendChild(anchor);
+
+/***/ })
+
+});

examples/dist/2.f26b0f1f2fd32b696fd3.js

@@ -0,0 +1,29 @@
+webpackJsonp([2],{
+
+/***/ 7:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_plugin_dual_import_importCss_js__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_plugin_dual_import_importCss_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_plugin_dual_import_importCss_js__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__c_css__ = __webpack_require__(8);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__c_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__c_css__);
+
+
+
+Promise.all([__webpack_require__.e/* import() */(1).then(__webpack_require__.bind(null, 9)), __WEBPACK_IMPORTED_MODULE_0_babel_plugin_dual_import_importCss_js___default()('d')]).then(function (proms) {
+  return proms[0];
+});
+
+/***/ }),
+
+/***/ 8:
+/***/ (function(module, exports) {
+
+// removed by extract-text-webpack-plugin
+module.exports = {"c":"c__c--1O-Px"};
+
+/***/ })
+
+});