========================================

Enhances HtmlWebpackPlugin functionality by enabling inline styles.

This is an extension plugin for the Webpack plugin HtmlWebpackPlugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.

The raw HtmlWebpackPlugin can bundle CSS assets as <link> elements if used in conjunction with ExtractTextPlugin. This extension plugin offers an alternative - inline <style> elements instead of <link> elements.

Note: this is for inlining <style>'s only - if you wish to inline <scripts>'s please take a look at:

• the HtmlWebpackPlugin inline example based on jade templates;
• the experimental inlining feature of sister plugin script-ext-html-webpack-plugin.

You must be running webpack v1.x or v2.x on node v4,5,6+.

Install the plugin with npm:

$ npm install --save-dev style-ext-html-webpack-plugin

Note: you may see the following warning: shell npm WARN html-webpack-plugin@2.22.0 requires a peer of webpack@* but none was installed.

This is fine - for testing, we dynamically download multiple version of webpack (via the [dynavers](https://github.com/numical/dynavers) module).

Basic Usage
-----------
The plugin must be added to the webpack config as both a plugin *and* as the loader for the CSS assets you wish to be inlined:

```javascript
module: {
  loaders: [
    { test: /\.css$/, loader: StyleExtHtmlWebpackPlugin.inline() }
  ]           
},
plugins: [
  new HtmlWebpackPlugin(
    ...
    cache: false
  ),
  new StyleExtHtmlWebpackPlugin()
]  

The inline loader can be the end of a chain of CSS loaders, though note that any prior loader must output pure CSS, not javascript. This means that css-loader and style-loader cannot be used, though the very useful post-css loader can be:

module: {
  loaders: [
    { test: /\.css$/, loader: StyleExtHtmlWebpackPlugin.inline('postcss-loader') }
  ]           
},
postcss: [
  require('autoprefixer')
],
plugins: [
  new HtmlWebpackPlugin({
    ...
    cache: false
  }),
  new StyleExtHtmlWebpackPlugin()
]  

If you wish to allow for hot module replacements either directly via webpack watch options or indirectly using webpack-dev-server then there are two further configuration constraints:

1. HtmlWebpackPlugin must have its cache switched off;
2. any Webpack devtool settings must not include any eval option:

plugins: [
  new HtmlWebpackPlugin({
    ...
    cache: false
  }),
  new StyleExtHtmlWebpackPlugin()
],
devtool: 'cheap-source-map' // fine but 'eval-source-map' would not be

You may wish to have only some of your CSS inlined.

This can be achieved by using this plugin alongside webpack's conventional CSS loaders and/or the ExtractTextPlugin. The trick is to define multiple, distinct CSS loader paths in webpack's configuration:

Example: to have stylesheet 1 inlined and stylesheets 2-9 loaded via javascript:

module: {
  loaders: [
    { test: /stylesheet1.css/, loader: StyleExtHtmlWebpackPlugin.inline() },
    { test: /stylesheet[2-9].css/, loader: 'style!css' }
  ]
},
plugins: [
  new HtmlWebpackPlugin(),
  new StyleExtHtmlWebpackPlugin()
]

Example: to have stylesheet 1 inlined and stylesheets 2-9 combined and <link>'d in styles.css:

module: {
  loaders: [
    { test: /stylesheet1.css/, loader: StyleExtHtmlWebpackPlugin.inline() },
    { test: /stylesheet[2-9].css/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }
  ]
},
plugins: [
  new HtmlWebpackPlugin(),
  new StyleExtHtmlWebpackPlugin(),
  new ExtractTextPlugin('styles.css')
]

Of course, more sophisticated RegEx's offer more selectivity. Make sure test patterns do not overlap else you will end up with CSS in multiple places.

The plugin can be configured to use clean-css to minify the inlined CSS.

Note that clean-css is an optional dependency so to use it you must explicitly install it:

$ npm install clean-css

If you forget this you will recieve error: Cannot find module 'clean-css'

Clean-css is enabled by passing the StyleExtHtmlWebpackPlugin constructor a hash with a single property:

• minify: true or, to customise css-clean behaviour, another hash with properties defined in the clean-css docs.

Example: default minification

plugins: [
  new HtmlWebpackPlugin(),
  new StyleExtHtmlWebpackPlugin({
    minify: true
  })
]

Example: customised minification

plugins: [
  new HtmlWebpackPlugin(),
  new StyleExtHtmlWebpackPlugin({
    minify: {
      keepSpecialComments: *,
      roundingPrecision: -1
    }
  })
]

v2.x of this plugin brought Webpack 2.x compatibility but at the price of potentially slower performance. Moreover, for hot module replacement, this plugin also requires that HtmlWebpackPlugin's cache is switched off. If you consider performance unacceptable please raise an issue giving your configuration.

If you have problems and want to sort them out yourself(!), this plugin has built-in debugging that may help. It uses the debug utility. Available debug names:

• StyleExtHtmlWebpackPlugin:plugin for the plugin;
• StyleExtHtmlWebpackPlugin:loader for the loader;
• StyleExtHtmlWebpackPlugin:detail for core values (note verbose!);
• StyleExtHtmlWebpackPlugin:hot-reload-spec for instrumenting the hot reload tests;
• or, for all of them: StyleExtHtmlWebpackPlugin:*

• v2.0.5 - modified test to use dynavers with webpack 1.13.2 and 2.1.0-beta.16
• v2.0.4 - fixed jasmine dependency to explicit version v2.4.1 due to bug in v2.5
• v2.0.3 - updated dependency versions, reclassified some dependencies
• v2.0.2 - merged pull request by 7pass fixing 2.0.1 - thanks!
• v2.0.1 - added explicit guard against use of devtool eval option
• v2.0.0 - webpack 1.x and 2.x compatible, including hot reloading
• v2.0.0.beta.3 - warnings about beta testing (!), debug enhancements, and better unescaping
• v2.0.0.beta.2 - Travis timeout and tag spacing fixes
• v2.0.0-beta.1 - node 4.x fix and fixed handling of multiple scripts
• v2.0.0-beta.0 - hot module reload working (with HtmlWepbackPlugin cache switched off)
• v1.1.1 - hot module reload not working with webpack 2
• v1.1.0 - now Webpack 2.x compatible
• v1.0.7 - added warning that not compatible with Webpack 2
• v1.0.6 - updated tests to match changes in script-ext-html-webpack-plugin
• v1.0.5 - updated code to match changes in semistandard
• v1.0.4 - added debug options
• v1.0.3 - documentation update
• v1.0.2 - documentation update
• v1.0.1 - now plays happily with plugins on same event
• v1.0.0 - initial release

Note that an alternative mechanism to inline CSS is possible, using the ExtractTextPlugin and templates - see the HtmlWebpackPlugin example.