feat: introduce styleTagFactory

Used to customize the style tag. Fix runjuu#31

Author: runjuu

README.md

@@ -53,7 +53,8 @@ module.exports = {
 ## Config
 ```typescript
 interface Config {
-  filter?(fileName: string): boolean
+  filter?: (fileName: string) => boolean
+  styleTagFactory?: (params: { style: string }) => string
   leaveCSSFile?: boolean
   replace?: {
     target: string
@@ -65,15 +66,33 @@ interface Config {
 
 ### filter(optional)
 ```typescript
-filter?(fileName: string): boolean
+filter?: (fileName: string) => boolean
 ```
 Return `true` to make current file internal, otherwise ignore current file. Include both css file and html file name.
+##### example
+```typescript
+...
+new HTMLInlineCSSWebpackPlugin({
+  filter(fileName) {
+    return fileName.includes('main');
+  },
+}),
+...
+```
+
+### styleTagFactory(optional)
+```typescript
+styleTagFactory?: (params: { style: string }) => string
+```
+
+Used to customize the style tag.
+
 ##### example
 ```typescript
 ...
   new HTMLInlineCSSWebpackPlugin({
-    filter(fileName) {
-      return fileName.includes('main');
+    styleTagFactory({ style }) {
+      return `<style type="text/css">${style}</style>`;
     },
   }),
 ...

src/core/base-plugin.ts

@@ -1,4 +1,9 @@
-import { Config, DEFAULT_REPLACE_CONFIG, FileCache } from '../types'
+import {
+  Config,
+  StyleTagFactory,
+  DEFAULT_REPLACE_CONFIG,
+  FileCache,
+} from '../types'
 import { isCSS, escapeRegExp } from '../utils'
 
 interface Asset {
@@ -17,6 +22,13 @@ export class BasePlugin {
     return this.config.replace || DEFAULT_REPLACE_CONFIG
   }
 
+  protected get styleTagFactory(): StyleTagFactory {
+    return (
+      this.config.styleTagFactory ||
+      (({ style }) => `<style type="text/css">${style}</style>`)
+    )
+  }
+
   constructor(protected readonly config: Config = {}) {}
 
   protected prepare({ assets }: Compilation) {
@@ -75,8 +87,10 @@ export class BasePlugin {
     htmlFileName: string
     style: string
   }) {
-    const styleString = `<style type="text/css">${style}</style>`
-    const replaceValues = [styleString, this.replaceConfig.target]
+    const replaceValues = [
+      this.styleTagFactory({ style }),
+      this.replaceConfig.target,
+    ]
 
     if (this.replaceConfig.position === 'after') {
       replaceValues.reverse()

src/types.ts

@@ -4,6 +4,8 @@ export interface ReplaceConfig {
   target: string
 }
 
+export type StyleTagFactory = (params: { style: string }) => string
+
 export const TAP_KEY_PREFIX = 'html-inline-css-webpack-plugin'
 
 export const DEFAULT_REPLACE_CONFIG: ReplaceConfig = {
@@ -14,6 +16,7 @@ export interface Config {
   filter?(fileName: string): boolean
   leaveCSSFile?: boolean
   replace?: ReplaceConfig
+  styleTagFactory?: StyleTagFactory
 }
 
 export interface FileCache {