options.logoMaskable (string, array)

README.md

@@ -118,6 +118,8 @@ plugins: [
   new FaviconsWebpackPlugin({
     // Your source logo (required)
     logo: './src/logo.png',
+    // Your maskable source logo (optional)
+    logoMaskable: './src/logo-maskable.png',
     // Allow caching the assets across webpack builds. By default this will use
     // webpack's cache configuration, but can be set to false to disable caching.
     // Note: disabling caching may increase build times considerably.

src/index.js

@@ -89,6 +89,24 @@ class FaviconsWebpackPlugin {
       this.options.logo = [path.resolve(compiler.context, this.options.logo)];
     }
 
+    if (this.options.logoMaskable !== undefined) {
+      if (typeof this.options.logoMaskable === 'string') {
+        this.options.logoMaskable = [this.options.logoMaskable];
+      }
+
+      // @ts-ignore
+      assert(
+        this.options.logoMaskable instanceof Array,
+        'options.logoMaskable must be string or array '
+      );
+
+      this.options.logoMaskable = this.options.logoMaskable.map(
+        (logoMaskable) => path.resolve(compiler.context, logoMaskable)
+      );
+    } else {
+      this.options.logoMaskable = [];
+    }
+
     if (typeof this.options.manifest === 'string') {
       this.options.manifest = path.resolve(
         compiler.context,
@@ -101,12 +119,16 @@ class FaviconsWebpackPlugin {
     compiler.hooks.make.tapPromise(
       'FaviconsWebpackPlugin',
       async (compilation) => {
+        const manifestAbsoluteFilePath =
+          typeof this.options.manifest === 'string'
+            ? this.options.manifest
+            : '';
+
         const faviconCompilation = runCached(
           [
             ...this.options.logo,
-            typeof this.options.manifest === 'string'
-              ? this.options.manifest
-              : '',
+            ...this.options.logoMaskable,
+            manifestAbsoluteFilePath,
           ],
           this,
           this.options.cache,
@@ -130,10 +152,20 @@ class FaviconsWebpackPlugin {
               0,
               this.options.logo.length
             );
-            const manifestFileSource = fileSources[this.options.logo.length];
+
+            const logoMaskableFileSources = fileSources.slice(
+              this.options.logo.length,
+              this.options.logo.length + this.options.logoMaskable.length
+            );
+
+            const manifestFileSource =
+              fileSources[
+                this.options.logo.length + this.options.logoMaskable.length
+              ];
 
             return this.generateFavicons(
               logoFileSources,
+              logoMaskableFileSources,
               manifestFileSource.content,
               compilation,
               outputPath
@@ -146,6 +178,10 @@ class FaviconsWebpackPlugin {
           compilation.fileDependencies.add(logo);
         }
 
+        for (const logoMaskable of this.options.logoMaskable) {
+          compilation.fileDependencies.add(logoMaskable);
+        }
+
         // Watch for changes to the base manifest.json
         if (typeof this.options.manifest === 'string') {
           compilation.fileDependencies.add(this.options.manifest);
@@ -303,17 +339,31 @@ class FaviconsWebpackPlugin {
    * Generate the favicons
    *
    * @param {{content: Buffer | string, hash: string}[]} logoFileSources
+   * @param {{content: Buffer | string, hash: string}[]} logoMaskableFileSources
    * @param {Buffer | string} baseManifest - the content of the file from options.manifest
    * @param {import('webpack').Compilation} compilation
    * @param {string} outputPath
    */
-  generateFavicons(logoFileSources, baseManifest, compilation, outputPath) {
+  generateFavicons(
+    logoFileSources,
+    logoMaskableFileSources,
+    baseManifest,
+    compilation,
+    outputPath
+  ) {
     const logoFileSourceContents = logoFileSources.map(
       (source) => source.content
     );
 
+    const logoMaskableFileSourceContents = logoMaskableFileSources.map(
+      (source) => source.content
+    );
+
     const resolvedPublicPath = getResolvedPublicPath(
-      getContentHash(...logoFileSourceContents),
+      getContentHash(
+        ...logoFileSourceContents,
+        ...logoMaskableFileSourceContents
+      ),
       compilation,
       this.options
     );
@@ -334,6 +384,7 @@ class FaviconsWebpackPlugin {
 
         return this.generateFaviconsLight(
           logoFileSourceContents,
+          logoMaskableFileSourceContents,
           parsedBaseManifest,
           compilation,
           resolvedPublicPath,
@@ -345,6 +396,7 @@ class FaviconsWebpackPlugin {
 
         return this.generateFaviconsWebapp(
           logoFileSourceContents,
+          logoMaskableFileSourceContents,
           parsedBaseManifest,
           compilation,
           resolvedPublicPath,
@@ -359,13 +411,15 @@ class FaviconsWebpackPlugin {
    * it is the default mode for development
    *
    * @param {(Buffer | string)[]} logoFileSources
+   * @param {(Buffer | string)[]} logoMaskableFileSources
    * @param {{[key: string]: any}} baseManifest
    * @param {import('webpack').Compilation} compilation
    * @param {string} resolvedPublicPath
    * @param {string} outputPath
    */
   async generateFaviconsLight(
     logoFileSources,
+    logoMaskableFileSources,
     baseManifest,
     compilation,
     resolvedPublicPath,
@@ -418,13 +472,15 @@ class FaviconsWebpackPlugin {
    * supports all common browsers and devices
    *
    * @param {(Buffer | string)[]} logoFileSources
+   * @param {(Buffer | string)[]} logoMaskableFileSources
    * @param {{[key: string]: any}} baseManifest
    * @param {import('webpack').Compilation} compilation
    * @param {string} resolvedPublicPath
    * @param {string} outputPath
    */
   async generateFaviconsWebapp(
     logoFileSources,
+    logoMaskableFileSources,
     baseManifest,
     compilation,
     resolvedPublicPath,
@@ -444,6 +500,10 @@ class FaviconsWebpackPlugin {
       // once it has been provided by the html-webpack-plugin
       path: '',
       ...this.options.favicons,
+      // set maskable icons
+      ...(logoMaskableFileSources.length !== 0 && {
+        manifestMaskable: logoMaskableFileSources,
+      }),
     });
 
     const modifiedFiles = files.map((file) => {

src/options.d.ts

@@ -1,6 +1,8 @@
 export interface FaviconWebpackPlugionOptions {
   /** our source logo - can be png or svg (required) */
   logo: string | string[],
+  /** our maskable source logo - can be png or svg (optional) */
+  logoMaskable?: string | string[],
   /** 
    * Enable caching
    *  Note: disabling caching may increase build times considerably

test/_util.mjs

@@ -14,6 +14,7 @@ const __dirname = path.dirname(__filename);
 export const fixtures = path.resolve(__dirname, 'fixtures');
 export const expected = path.resolve(fixtures, 'expected');
 export const logo = path.resolve(fixtures, 'logo.png');
+export const logoMaskable = path.resolve(fixtures, 'logo-maskable.png');
 export const empty = path.resolve(fixtures, 'empty.png');
 export const invalid = path.resolve(fixtures, 'invalid.png');
 /** the size of the webpack cache without favicons */

test/logoMaskable.test.mjs

@@ -0,0 +1,25 @@
+import test from 'ava';
+import * as path from 'path';
+import FaviconsWebpackPlugin from '../src/index.js';
+import {
+  logo,
+  logoMaskable,
+  generate,
+  withTempDirectory,
+  snapshotCompilationAssets,
+} from './_util.mjs';
+
+withTempDirectory(test);
+
+test('should generate the expected default result', async (t) => {
+  const dist = path.join(t.context.root, 'dist');
+  const compilationStats = await generate({
+    context: t.context.root,
+    output: {
+      path: dist,
+    },
+    plugins: [new FaviconsWebpackPlugin({ logo, logoMaskable })],
+  });
+
+  snapshotCompilationAssets(t, compilationStats);
+});