JSPM

tl;dr:

If you use HtmlWebpackPlugin and ExtractTextPlugin in your Webpack builds to create HTML <link>s to external stylesheet files, add this plugin to convert the links to <style> elements containing internal CSS.

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 builds on this by moving the CSS content generated by ExtractTextPlugin from an external CSS file to an internal <style> element.

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

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

Installation

You can be running webpack v1.x or v2.x on node v4 or higher.

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@XXX 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).


## Important Upgrade Note

**Your v2.x configuration will no longer work**

Version 3.x is a complete rewrite of the plugin with a completely new configuration and using a completely new mechanism.

The plugin now piggy-backs on [ExtractTextPlugin](https://github.com/webpack/extract-text-webpack-plugin)'s functionality so works in any use case that [ExtractTextPlugin](https://github.com/webpack/extract-text-webpack-plugin) works.  This has the convenient effect of fixing all raised issues with v2.x.  i

However  [ExtractTextPlugin](https://github.com/webpack/extract-text-webpack-plugin) does **not** support HMR (Hot Module Replacement).  See the [Hot Module Replacment](#Use Case: Hot Module Replacement) discussion below for more.


## Basic Usage

### Use Case: Internalize all your CSS
Just add the plugin to your webpack config:
```javascript
module: {
  loaders: [
    { test: /\.css$/, loader: ExtractTextPlugin.extract(...)}
  ]
}
plugins: [
  new HtmlWepbackPlugin({...}),
  new ExtractTextWebpackPlugin('styles.css'),
  new StyleExtHtmlWebpackPlugin()  // << add
]

That's it.

Use Case: Internalize critical CSS only

Add the plugin and use more than one loader for your CSS:

module: {
  loaders: [
    { test: /critical.css/, loader: ExtractTextPlugin.extract(...)},
    { test: /other.css/, loader: 'style-loader!css-loader'},  << add seperate loader
  ]
}
plugins: [
  new HtmlWepbackPlugin({...}),
  new ExtractTextWebpackPlugin('styles.css'),
  new StyleExtHtmlWebpackPlugin() 
]

Use Case: Internalize critical CSS with all other CSS in an external file

Use two instances of ExtractTextPlugin and tell StyleExtWebpckPlugin which one to target by giving it the name of the output file:

const internalCSS = new ExtractTextPlugin('internal.css');
const externalCSS = new ExtractTextPlugin('styles.css');
return {
  ...
  module: {
    loaders: [
      { test: /critical.css/, loader: internalCSS.extract(...)},
      { test: /other.css/, loader: externalCSS.extract(...)},
    ]
  }
  plugins: [
    new HtmlWepbackPlugin({...}),
    internalCSS,
    externalCSS,
    new StyleExtHtmlWebpackPlugin('internal.css') << tell the plugin which to target 
  ]
}

Use Case: Minification/Uglifying/Sass/PostCSS Processing etc.

All as per ExtractTextPlugin.

If you have any problems, your first debug step is to simply remove the StyleExtPlugin and check that ExtractTextPlugin works by itself. If it does and reintroducing StyleExtPlugin still has problems, please raise an issue giving your configuration.

Use Case: Hot Module Replacement

As discussed earlier, ExtractTextPlugin does not support HMR. If you really need this for your CSS you have two options:

1. revert to/stick with v2.x of the plugin;
2. only internalize the CSS on production builds.

The former option is viable if v2.x supports your requirements but that version is no longer maintained hence the second approach is recommended. Use a conditional in your webpack.config to:

• choose whether to select between ExtractTextPlugin or a loader that supports HMR such as the style-loader;
• either remove the StyleExtPlugin or disable it by passing false to its constructor:

const DEBUG = (process.env.NODE_ENV !== 'production');
return {
  ...
  module: {
    loaders: [
      {
        test: /\.css$/, 
        loader: DEBUG ? 'style-loader|css-loader' : ExtractTextPlugin.extract({...})
      }
    ]
  },
  plugins: [
    new HtmlWepbackPlugin({...}),
    new ExtractTextPlugin('styles.css'),
    new StyleExtHtmlWebpackPlugin(!DEBUG)
  ]
}

Change History

• v3.0.0 - complete rewrite to piggback off ExtractTextPlugin
• 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