feat: give the user more options to specifiy where to inject html

README.md

@@ -55,15 +55,17 @@ In combination with [html-webpack-plugin](https://github.com/jantimon/html-webpa
 > **Note**: `html-webpack-plugin` _must_ come before `webapp-webpack-plugin` in the plugins array.
 
 ```html
+<link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-touch-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/assets/apple-touch-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-76x76.png">
 <link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png">
 <link rel="apple-touch-icon" sizes="120x120" href="/assets/apple-touch-icon-120x120.png">
 <link rel="apple-touch-icon" sizes="144x144" href="/assets/apple-touch-icon-144x144.png">
 <link rel="apple-touch-icon" sizes="152x152" href="/assets/apple-touch-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="167x167" href="/assets/apple-touch-icon-167x167.png">
 <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-180x180.png">
-<link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-touch-icon-57x57.png">
-<link rel="apple-touch-icon" sizes="60x60" href="/assets/apple-touch-icon-60x60.png">
-<link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png">
-<link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="1024x1024" href="/assets/apple-touch-icon-1024x1024.png">
 <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-320x460.png">
 <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x920.png">
 <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x1096.png">
@@ -75,8 +77,8 @@ In combination with [html-webpack-plugin](https://github.com/jantimon/html-webpa
 <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-768x1004.png">
 <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1536x2008.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
-<link rel="icon" type="image/png" sizes="228x228" href="/assets/coast-228x228.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="228x228" href="/assets/coast-228x228.png">
 <link rel="manifest" href="/assets/manifest.json">
 <link rel="shortcut icon" href="/assets/favicon.ico">
 <link rel="yandex-tableau-widget" href="/assets/yandex-browser-manifest.json">
@@ -93,10 +95,6 @@ In combination with [html-webpack-plugin](https://github.com/jantimon/html-webpa
 
 > https://github.com/jantimon/favicons-webpack-plugin/blob/master/test/fixtures/expected/html
 
-HTML injection is skipped for a particular `html-webpack-plugin` if either `inject` or `favicons`
-properties are set to `false` in its configuration object, unless `inject` is set to `'force'` in
-the configuration of `webapp-webpack-plugin`.
-
 ## Advanced Usage
 
 ```javascript
@@ -109,10 +107,17 @@ plugins: [
     cache: true,
     // Prefix path for generated assets
     prefix: 'assets/',
-    // Inject html links/metadata (requires html-webpack-plugin)
-    // false: disables injection
-    // true: enables injection if that is not disabled in html-webpack-plugin
-    // 'force': enables injection even if that is disabled in html-webpack-plugin
+    // Inject html links/metadata (requires html-webpack-plugin).
+    // This option accepts arguments of different types:
+    //  * boolean
+    //    `false`: disables injection
+    //    `true`: enables injection if that is not disabled in html-webpack-plugin
+    //  * string
+    //    `'force'`: enables injection even if that is disabled in html-webpack-plugin
+    //  * function
+    //    any predicate that takes an instance of html-webpack-plugin and returns either
+    //    `true` or `false` to control the injection of html metadata for the html files
+    //    generated by this instance.
     inject: true,
 
     // Favicons configuration options (see below)
@@ -134,7 +139,9 @@ respectively from `name`, `description`, `version`, `author.name` and
 To disable automatically retrieving metadata from `package.json`, simply set
 to `null` the properties you want to omit.
 
-### Example:
+### Examples
+
+#### Basic
 
 ```javascript
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
@@ -158,6 +165,30 @@ plugins: [
 ]
 ```
 
+#### Handling Multiple HTML Files
+
+```javascript
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+...
+
+plugins: [
+    new HtmlWebpackPlugin({
+        template: 'a.html.tmpl',
+        filename: 'a.html',
+    }),
+    new HtmlWebpackPlugin({
+        template: 'b.html.tmpl',
+        filename: 'b.html',
+    }),
+    new FaviconsWebpackPlugin({
+        logo: 'logo.svg',
+        inject: htmlPlugin => htmlPlugin.options.filename === 'a.html',
+    }),
+],
+```
+
 ## Contribution
 
 You're very welcome to contribute to this project by opening [issues](https://github.com/jantimon/favicons-webpack-plugin/issues) and/or [pull requests](https://github.com/jantimon/favicons-webpack-plugin/pulls).

src/index.js

@@ -37,14 +37,20 @@ module.exports = class FaviconsWebpackPlugin {
       });
     }
 
+    if (typeof this.options.inject !== 'function') {
+      const { inject } = this.options;
+      this.options.inject = htmlPlugin =>
+        inject === 'force'
+        || htmlPlugin.options.favicons !== false && htmlPlugin.options.inject && inject;
+    }
+
     tap(compiler, 'make', 'FaviconsWebpackPlugin', (compilation, callback) =>
       // Generate favicons
       child.run(this.options, compiler.context, compilation)
         .then(tags => {
           // Hook into the html-webpack-plugin processing and add the html
           tapHtml(compilation, 'FaviconsWebpackPlugin', (htmlPluginData, callback) => {
-            const htmlPluginDataInject = htmlPluginData.plugin.options.inject && htmlPluginData.plugin.options.favicons !== false;
-            if (htmlPluginDataInject && this.options.inject || this.options.inject === 'force') {
+            if (this.options.inject(htmlPluginData.plugin)) {
               const idx = (htmlPluginData.html + '</head>').search(/<\/head>/i);
               htmlPluginData.html = [htmlPluginData.html.slice(0, idx), ...tags, htmlPluginData.html.slice(idx)].join('');
             }

test/fixtures/expected/multiplehtml/a.html

@@ -0,0 +1 @@
+<!doctype html><html><head><link rel="shortcut icon" href="/assets/favicon.ico"><link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png"><link rel="manifest" href="/assets/manifest.json"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#fff"><meta name="application-name"><link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/assets/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/assets/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/assets/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/assets/apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="167x167" href="/assets/apple-touch-icon-167x167.png"><link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-180x180.png"><link rel="apple-touch-icon" sizes="1024x1024" href="/assets/apple-touch-icon-1024x1024.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-320x460.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x920.png"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-640x1096.png"><link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-750x1294.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1182x2208.png"><link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/assets/apple-touch-startup-image-1242x2148.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-748x1024.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/assets/apple-touch-startup-image-768x1004.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1496x2048.png"><link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/assets/apple-touch-startup-image-1536x2008.png"><link rel="icon" type="image/png" sizes="228x228" href="/assets/coast-228x228.png"><meta name="msapplication-TileColor" content="#fff"><meta name="msapplication-TileImage" content="/assets/mstile-144x144.png"><meta name="msapplication-config" content="/assets/browserconfig.xml"><link rel="yandex-tableau-widget" href="/assets/yandex-browser-manifest.json"></head><body></body></html>

test/fixtures/expected/multiplehtml/assets/browserconfig.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/assets/mstile-70x70.png"/>
+            <square150x150logo src="/assets/mstile-150x150.png"/>
+            <wide310x150logo src="/assets/mstile-310x150.png"/>
+            <square310x310logo src="/assets/mstile-310x310.png"/>
+            <TileColor>#fff</TileColor>
+
+        </tile>
+
+    </msapplication>
+
+</browserconfig>

test/fixtures/expected/multiplehtml/assets/manifest.json

@@ -0,0 +1,59 @@
+{
+  "name": null,
+  "short_name": null,
+  "description": null,
+  "dir": "auto",
+  "lang": "en-US",
+  "display": "standalone",
+  "orientation": "any",
+  "start_url": "/?homescreen=1",
+  "background_color": "#fff",
+  "theme_color": "#fff",
+  "icons": [
+    {
+      "src": "/assets/android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

test/fixtures/expected/multiplehtml/assets/manifest.webapp

@@ -0,0 +1,14 @@
+{
+  "version": "1.0",
+  "name": null,
+  "description": null,
+  "icons": {
+    "60": "/assets/firefox_app_60x60.png",
+    "128": "/assets/firefox_app_128x128.png",
+    "512": "/assets/firefox_app_512x512.png"
+  },
+  "developer": {
+    "name": null,
+    "url": null
+  }
+}

test/fixtures/expected/multiplehtml/assets/yandex-browser-manifest.json

@@ -0,0 +1,9 @@
+{
+  "version": "1.0",
+  "api_version": 1,
+  "layout": {
+    "logo": "/assets/yandex-browser-50x50.png",
+    "color": "#fff",
+    "show_title": true
+  }
+}

test/fixtures/expected/multiplehtml/b.html

@@ -0,0 +1 @@
+<!doctype html><html><head></head><body></body></html>

test/nohtml.test.js → test/html.false.test.js

@@ -2,7 +2,7 @@ const test = require('ava');
 const path = require('path');
 const fs = require('fs-extra');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const WebappWebpackPlugin = require('../');
+const FaviconsWebpackPlugin = require('../');
 
 const { logo, mkdir, generate, compare, expected } = require('./util');
 
@@ -17,7 +17,7 @@ test('should allow disabling html injection', async t => {
     },
     plugins: [
       new HtmlWebpackPlugin(),
-      new WebappWebpackPlugin({ logo, inject: false }),
+      new FaviconsWebpackPlugin({ logo, inject: false }),
     ],
   });
 
@@ -33,7 +33,7 @@ test('should respect HtmlWebpackPlugin@inject flag', async t => {
     },
     plugins: [
       new HtmlWebpackPlugin({ inject: false }),
-      new WebappWebpackPlugin({ logo }),
+      new FaviconsWebpackPlugin({ logo }),
     ],
   });
 
@@ -49,7 +49,7 @@ test('should respect HtmlWebpackPlugin@favicons flag', async t => {
     },
     plugins: [
       new HtmlWebpackPlugin({ favicons: false }),
-      new WebappWebpackPlugin({ logo }),
+      new FaviconsWebpackPlugin({ logo }),
     ],
   });
 

test/html.multiple.test.js

@@ -0,0 +1,35 @@
+const test = require('ava');
+const path = require('path');
+const fs = require('fs-extra');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const FaviconsWebpackPlugin = require('../');
+
+const { logo, mkdir, generate, compare, expected } = require('./util');
+
+test.beforeEach(async t => t.context.root = await mkdir());
+
+test('should allow handling multiple html-webpack-plugin', async t => {
+  const dist = path.join(t.context.root, 'dist');
+  await generate({
+    context: t.context.root,
+    output: {
+      path: dist,
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        filename: 'a.html',
+      }),
+      new HtmlWebpackPlugin({
+        filename: 'b.html',
+      }),
+      new FaviconsWebpackPlugin({
+        logo,
+        inject: htmlPlugin => htmlPlugin.options.filename === 'a.html',
+      }),
+    ],
+  });
+
+  t.deepEqual(await compare(dist, path.resolve(expected, 'multiplehtml')), []);
+});
+
+test.afterEach(t => fs.remove(t.context.root));

test/html.test.js → test/html.true.test.js

@@ -33,7 +33,7 @@ test('should inject html despite HtmlWebpackPlugin@inject flag with inject force
     },
     plugins: [
       new HtmlWebpackPlugin({ inject: false }),
-      new WebappWebpackPlugin({ logo, inject: 'force' }),
+      new FaviconsWebpackPlugin({ logo, inject: 'force' }),
     ],
   });
 
@@ -49,7 +49,7 @@ test('should work together with the html-webpack-plugin with no <head></head> ta
     },
     plugins: [
       new HtmlWebpackPlugin({ templateContent: '' }),
-      new WebappWebpackPlugin({ logo }),
+      new FaviconsWebpackPlugin({ logo }),
     ],
   });