feat: support html-webpack-plugin v4

Author: runjuu

package.json

@@ -44,6 +44,7 @@
   },
   "homepage": "https://github.com/Runjuu/html-inline-css-webpack-plugin#readme",
   "devDependencies": {
+    "@types/html-webpack-plugin": "^3.2.1",
     "@types/lodash": "^4.14.137",
     "@types/webpack": "^4.4.0",
     "husky": "^1.3.1",
@@ -56,6 +57,9 @@
     "typescript": "^3.2.2",
     "webpack": "^4.11.1"
   },
+  "peerDependencies": {
+    "html-webpack-plugin": "^3.0.0"
+  },
   "dependencies": {
     "lodash": "^4.17.15"
   }

src/core/base-plugin.ts

@@ -0,0 +1,101 @@
+import { Config, DEFAULT_REPLACE_CONFIG, FileCache } from '../types'
+import { isCSS, escapeRegExp } from '../utils'
+
+interface Asset {
+  source(): string
+  size(): number
+}
+
+interface Compilation {
+  assets: { [key: string]: Asset }
+}
+
+export class BasePlugin {
+  protected cssStyleCache: FileCache = {}
+
+  protected get replaceConfig() {
+    return this.config.replace || DEFAULT_REPLACE_CONFIG
+  }
+
+  constructor(protected readonly config: Config = {}) {}
+
+  protected prepare({ assets }: Compilation) {
+    Object.keys(assets).forEach((fileName) => {
+      if (isCSS(fileName) && this.isCurrentFileNeedsToBeInlined(fileName)) {
+        this.cssStyleCache[fileName] = assets[fileName].source()
+
+        if (!this.config.leaveCSSFile) {
+          delete assets[fileName]
+        }
+      }
+    })
+  }
+
+  protected getCSSStyle({
+    cssLink,
+    publicPath,
+  }: {
+    cssLink: string
+    publicPath: string
+  }): string | undefined {
+    // Link pattern: publicPath + fileName + '?' + hash
+    const fileName = cssLink
+      .replace(new RegExp(`^${escapeRegExp(publicPath)}`), '')
+      .replace(/\?.+$/g, '')
+
+    if (this.isCurrentFileNeedsToBeInlined(fileName)) {
+      const style = this.cssStyleCache[fileName]
+
+      if (style === undefined) {
+        console.error(
+          `Can not get css style for ${cssLink}. It may be a bug of html-inline-css-webpack-plugin.`,
+        )
+      }
+
+      return style
+    } else {
+      return undefined
+    }
+  }
+
+  protected isCurrentFileNeedsToBeInlined(fileName: string): boolean {
+    if (typeof this.config.filter === 'function') {
+      return this.config.filter(fileName)
+    } else {
+      return true
+    }
+  }
+
+  protected addStyle({
+    html,
+    htmlFileName,
+    style,
+  }: {
+    html: string
+    htmlFileName: string
+    style: string
+  }) {
+    const styleString = `<style type="text/css">${style}</style>`
+    const replaceValues = [styleString, this.replaceConfig.target]
+
+    if (this.replaceConfig.position === 'after') {
+      replaceValues.reverse()
+    }
+
+    if (html.indexOf(this.replaceConfig.target) === -1) {
+      throw new Error(
+        `Can not inject css style into "${htmlFileName}", as there is not replace target "${
+          this.replaceConfig.target
+        }"`,
+      )
+    }
+
+    return html.replace(this.replaceConfig.target, replaceValues.join(''))
+  }
+
+  protected cleanUp(html: string) {
+    return this.replaceConfig.removeTarget
+      ? html.replace(this.replaceConfig.target, '')
+      : html
+  }
+}

src/core/index.ts

@@ -0,0 +1,2 @@
+export * from './v3'
+export * from './v4'

src/core/v3.ts

@@ -0,0 +1,65 @@
+import { SyncHook } from 'tapable'
+import { Compiler } from 'webpack'
+
+import { TAP_KEY_PREFIX } from '../types'
+import { BasePlugin } from './base-plugin'
+
+interface HtmlWebpackPluginData {
+  html: string
+  outputName: string
+  assets: {
+    publicPath: string
+    css: string[]
+  }
+}
+
+export class PluginForHtmlWebpackPluginV3 extends BasePlugin {
+  private process(data: HtmlWebpackPluginData) {
+    // check if current html needs to be inlined
+    if (this.isCurrentFileNeedsToBeInlined(data.outputName)) {
+      data.assets.css.forEach((cssLink, index) => {
+        const style = this.getCSSStyle({
+          cssLink,
+          publicPath: data.assets.publicPath,
+        })
+
+        if (style) {
+          data.html = this.addStyle({
+            html: data.html,
+            htmlFileName: data.outputName,
+            style: style,
+          })
+
+          // prevent generate <link /> tag
+          data.assets.css.splice(index, 1)
+        }
+      })
+
+      data.html = this.cleanUp(data.html)
+    }
+  }
+
+  apply(compiler: Compiler) {
+    compiler.hooks.compilation.tap(
+      `${TAP_KEY_PREFIX}_compilation`,
+      (compilation) => {
+        if ('htmlWebpackPluginBeforeHtmlProcessing' in compilation.hooks) {
+          const hook: SyncHook<HtmlWebpackPluginData> =
+            // @ts-ignore Error:(130, 27) TS2339: Property 'htmlWebpackPluginBeforeHtmlProcessing' does not exist on type 'CompilationHooks'.
+            compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing
+          hook.tap(
+            `${TAP_KEY_PREFIX}_htmlWebpackPluginBeforeHtmlProcessing`,
+            (data: HtmlWebpackPluginData) => {
+              this.prepare(compilation)
+              this.process(data)
+            },
+          )
+        } else {
+          throw new Error(
+            '`html-webpack-plugin` should be ordered first before html-inline-css-webpack-plugin',
+          )
+        }
+      },
+    )
+  }
+}

src/core/v4.ts

@@ -0,0 +1,95 @@
+import { SyncHook } from 'tapable'
+import { Compiler } from 'webpack'
+import HTMLWebpackPlugin = require('html-webpack-plugin')
+
+import { TAP_KEY_PREFIX } from '../types'
+import { BasePlugin } from './base-plugin'
+
+interface BeforeAssetTagGenerationData {
+  outputName: string
+  assets: {
+    publicPath: string
+    css: string[]
+  }
+  plugin: HTMLWebpackPlugin
+}
+
+interface BeforeEmitData {
+  html: string
+  outputName: string
+  plugin: HTMLWebpackPlugin
+}
+
+interface HTMLWebpackPluginHooks {
+  beforeAssetTagGeneration: SyncHook<BeforeAssetTagGenerationData>
+  beforeEmit: SyncHook<BeforeEmitData>
+}
+
+type CSSStyle = string
+
+export class PluginForHtmlWebpackPluginV4 extends BasePlugin {
+  // Using object reference to distinguish styles for multiple files
+  private cssStyleMap: Map<HTMLWebpackPlugin, CSSStyle[]> = new Map()
+
+  private prepareCSSStyle(data: BeforeAssetTagGenerationData) {
+    data.assets.css.forEach((cssLink, index) => {
+      if (this.isCurrentFileNeedsToBeInlined(cssLink)) {
+        const style = this.getCSSStyle({
+          cssLink,
+          publicPath: data.assets.publicPath,
+        })
+
+        if (style) {
+          if (this.cssStyleMap.has(data.plugin)) {
+            this.cssStyleMap.get(data.plugin)!.push(style)
+          } else {
+            this.cssStyleMap.set(data.plugin, [style])
+          }
+
+          // prevent generate <link /> tag
+          data.assets.css.splice(index, 1)
+        }
+      }
+    })
+  }
+
+  private process(data: BeforeEmitData) {
+    // check if current html needs to be inlined
+    if (this.isCurrentFileNeedsToBeInlined(data.outputName)) {
+      const cssStyles = this.cssStyleMap.get(data.plugin) || []
+
+      cssStyles.forEach((style) => {
+        data.html = this.addStyle({
+          style,
+          html: data.html,
+          htmlFileName: data.outputName,
+        })
+      })
+
+      data.html = this.cleanUp(data.html)
+    }
+  }
+
+  apply(compiler: Compiler) {
+    compiler.hooks.compilation.tap(
+      `${TAP_KEY_PREFIX}_compilation`,
+      (compilation) => {
+        const hooks: HTMLWebpackPluginHooks = (HTMLWebpackPlugin as any).getHooks(
+          compilation,
+        )
+
+        hooks.beforeAssetTagGeneration.tap(
+          `${TAP_KEY_PREFIX}_beforeAssetTagGeneration`,
+          (data) => {
+            this.prepare(compilation)
+            this.prepareCSSStyle(data)
+          },
+        )
+
+        hooks.beforeEmit.tap(`${TAP_KEY_PREFIX}_beforeEmit`, (data) => {
+          this.process(data)
+        })
+      },
+    )
+  }
+}