Merge pull request #255 from fetch/xhtml

Add xhtml option to make link tags self-closing

README.md

@@ -82,6 +82,7 @@ Allowed values are as follows:
 - `chunks`: Allows you to add only some chunks (e.g. only the unit-test chunk)
 - `chunksSortMode`: Allows to control how chunks should be sorted before they are included to the html. Allowed values: 'none' | 'auto' | 'dependency' | {function} - default: 'auto'
 - `excludeChunks`: Allows you to skip some chunks (e.g. don't add the unit-test chunk)
+- `xhtml`: `true | false` If `true` render the `link` tags as self-closing, XHTML compliant. Default is `false`
 
 Here's an example webpack config illustrating how to use these options:
 ```javascript

index.js

@@ -23,7 +23,8 @@ function HtmlWebpackPlugin (options) {
     showErrors: true,
     chunks: 'all',
     excludeChunks: [],
-    title: 'Webpack App'
+    title: 'Webpack App',
+    xhtml: false
   }, options);
 }
 
@@ -415,9 +416,11 @@ HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function (html, assets) {
   var scripts = assets.js.map(function (scriptPath) {
     return '<script src="' + scriptPath + '"></script>';
   });
+  // Make tags self-closing in case of xhtml
+  var xhtml = this.options.xhtml ? '/' : '';
   // Turn css files into link tags
   var styles = assets.css.map(function (stylePath) {
-    return '<link href="' + stylePath + '" rel="stylesheet">';
+    return '<link href="' + stylePath + '" rel="stylesheet"' + xhtml + '>';
   });
   // Injections
   var htmlRegExp = /(<html[^>]*>)/i;
@@ -428,7 +431,7 @@ HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function (html, assets) {
 
   // If there is a favicon present, add it to the head
   if (assets.favicon) {
-    head.push('<link rel="shortcut icon" href="' + assets.favicon + '">');
+    head.push('<link rel="shortcut icon" href="' + assets.favicon + '"' + xhtml + '>');
   }
   // Add styles to the head
   head = head.concat(styles);

spec/HtmlWebpackPluginSpec.js

@@ -394,7 +394,7 @@ describe('HtmlWebpackPlugin', function () {
         new HtmlWebpackPlugin(),
         new ExtractTextPlugin('styles.css')
       ]
-    }, ['<link href="styles.css"'], null, done);
+    }, ['<link href="styles.css" rel="stylesheet">'], null, done);
   });
 
   it('should work with the css extract plugin on windows and protocol relative urls support (#205)', function (done) {
@@ -478,6 +478,26 @@ describe('HtmlWebpackPlugin', function () {
     }, ['<link href="styles.css?%hash%"'], null, done);
   });
 
+  it('should output xhtml link stylesheet tag', function (done) {
+    var ExtractTextPlugin = require('extract-text-webpack-plugin');
+    testHtmlPlugin({
+      entry: path.join(__dirname, 'fixtures/theme.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'index_bundle.js'
+      },
+      module: {
+        loaders: [
+          { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }
+        ]
+      },
+      plugins: [
+        new HtmlWebpackPlugin({xhtml: true}),
+        new ExtractTextPlugin('styles.css')
+      ]
+    }, ['<link href="styles.css" rel="stylesheet"/>'], null, done);
+  });
+
   it('prepends the webpack public path to script src', function (done) {
     testHtmlPlugin({
       entry: path.join(__dirname, 'fixtures/index.js'),
@@ -893,6 +913,23 @@ describe('HtmlWebpackPlugin', function () {
     }, [/<link rel="shortcut icon" href="[^"]+\.ico">/], null, done);
   });
 
+  it('adds a favicon with xhtml enabled', function (done) {
+    testHtmlPlugin({
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'index_bundle.js'
+      },
+      plugins: [
+        new HtmlWebpackPlugin({
+          inject: true,
+          xhtml: true,
+          favicon: path.join(__dirname, 'fixtures/favicon.ico')
+        })
+      ]
+    }, [/<link rel="shortcut icon" href="[^"]+\.ico"\/>/], null, done);
+  });
+
   it('shows an error if the favicon could not be load', function (done) {
     testHtmlPlugin({
       entry: path.join(__dirname, 'fixtures/index.js'),