├── LICENSE
├── README.md
├── index.js
└── package.json
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2018 Dustin Jaacks
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 | Inline Style Extension for the HTMLWebpackPlugin
2 | ========================================
3 |
4 | This package extends the [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) functionality by inlining existing styles to HTML elements using [juice](https://github.com/Automattic/juice).
5 |
6 | You might want to use this to automate email generation with webpack.
7 |
8 | The following input provided by the HTMLWebpackPlugin:
9 | ```html
10 |
11 | ```
12 |
13 | will result in
14 | ```html
15 |
16 | ```
17 |
18 | To include your style source/link into your document as shown above, have a look at [html-webpack-inline-source-plugin](https://github.com/DustinJackson/html-webpack-inline-source-plugin)
19 |
20 |
21 | Installation
22 | ------------
23 | You must be running webpack on node 6.4 or higher
24 |
25 | Install the plugin with npm:
26 | ```shell
27 | $ npm install --save-dev html-webpack-inline-style-plugin
28 | ```
29 |
30 | Install the plugin with yarn:
31 | ```shell
32 | $ yarn add --dev html-webpack-inline-style-plugin
33 | ```
34 |
35 | Basic Usage
36 | -----------
37 | Require the plugin in your webpack config:
38 |
39 | ```javascript
40 | var HtmlWebpackInlineStylePlugin = require('html-webpack-inline-style-plugin');
41 | ```
42 |
43 | Add the plugin to your webpack config as follows:
44 |
45 | ```javascript
46 | {
47 | ...
48 | plugins: [
49 | new HtmlWebpackPlugin(),
50 | new HtmlWebpackInlineStylePlugin()
51 | ]
52 | ...
53 | }
54 | ```
55 |
56 | With [Juice options](https://www.npmjs.com/package/juice#options):
57 |
58 | ```javascript
59 | {
60 | ...
61 | plugins: [
62 | new HtmlWebpackPlugin(),
63 | new HtmlWebpackInlineStylePlugin({
64 | juiceOptions: {
65 | removeStyleTags: false
66 | }
67 | })
68 | ]
69 | ...
70 | }
71 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const juice = require('juice');
4 |
5 | let juiceOptions;
6 |
7 | function HtmlWebpackInlinerPlugin(options) {
8 | // Initialize
9 | juiceOptions = options.juiceOptions || {};
10 | }
11 |
12 | HtmlWebpackInlinerPlugin.prototype.apply = compiler => {
13 | (compiler.hooks
14 | ? compiler.hooks.compilation.tap.bind(compiler.hooks.compilation, 'html-webpack-inline-style-plugin')
15 | : compiler.plugin.bind(compiler, 'compilation'))(compilation => {
16 |
17 | (compilation.hooks
18 | ? compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tapAsync.bind(compilation.hooks.htmlWebpackPluginAfterHtmlProcessing, 'html-webpack-inline-style-plugin')
19 | : compilation.plugin.bind(compilation, 'html-webpack-plugin-after-html-processing'))((htmlPluginData, callback) => {
20 | htmlPluginData.html = juice(htmlPluginData.html, juiceOptions);
21 | callback(null, htmlPluginData);
22 | });
23 | });
24 | };
25 |
26 | module.exports = HtmlWebpackInlinerPlugin;
27 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "html-webpack-inline-style-plugin",
3 | "version": "0.0.1",
4 | "description": "Inline styles using webpack, HTMLWebpackPlugin, and juice",
5 | "main": "index.js",
6 | "files": [
7 | "index.js"
8 | ],
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/djaax/html-webpack-inline-style-plugin.git"
12 | },
13 | "keywords": [
14 | "webpack",
15 | "plugin",
16 | "html-webpack-plugin",
17 | "inline",
18 | "style",
19 | "css",
20 | "email",
21 | "juice"
22 | ],
23 | "author": "Dustin Jaacks (https://github.com/djaax)",
24 | "license": "MIT",
25 | "bugs": {
26 | "url": "https://github.com/djaax/html-webpack-inline-style-plugin/issues"
27 | },
28 | "homepage": "https://github.com/djaax/html-webpack-inline-style-plugin",
29 | "dependencies": {
30 | "juice": "^4.2.2"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------