init

Author: runjuu

build/index.d.ts

@@ -0,0 +1,23 @@
+import { Compiler } from 'webpack';
+interface Module {
+    type?: string;
+    content: string;
+}
+interface Compilation {
+    modules: Module[];
+}
+interface PluginData {
+    html: string;
+    assets: {
+        css: string[];
+    };
+}
+export default class Plugin {
+    static makeReg(fileName: string): RegExp;
+    static getStyleString(modules: Module[]): string;
+    static addStyleInToHTML(compilation: Compilation, pluginData: PluginData): void;
+    static removeLinkTag(pluginData: PluginData): void;
+    static replace(compilation: Compilation, pluginData: PluginData, callback: (...args: any[]) => void): void;
+    apply(compiler: Compiler): void;
+}
+export {};

build/index.js

@@ -0,0 +1,26 @@
+{
+  "name": "html-inline-css-webpack-plugin",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./build/index.js",
+  "scripts": {
+    "build": "rm -rf ./build && tsc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Runjuu/html-inline-css-webpack-plugin.git"
+  },
+  "keywords": [],
+  "author": "Runjuu",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Runjuu/html-inline-css-webpack-plugin/issues"
+  },
+  "homepage": "https://github.com/Runjuu/html-inline-css-webpack-plugin#readme",
+  "devDependencies": {
+    "@types/webpack": "^4.4.0",
+    "tslib": "^1.9.2",
+    "typescript": "^2.9.1",
+    "webpack": "^4.11.1"
+  }
+}

build/index.js.map

@@ -0,0 +1,60 @@
+import { Compiler } from 'webpack';
+
+interface Module {
+  type?: string
+  content: string
+}
+
+interface Compilation {
+  modules: Module[]
+}
+
+interface PluginData {
+  html: string
+  assets: { css: string[] }
+}
+
+export default class Plugin
+{
+
+  static makeReg(fileName: string) {
+    return new RegExp(`<link[^>]+href=['"]${fileName}['"][^>]+(>|\\\\>|><\\/link>)`);
+  }
+
+  static getStyleString(modules: Module[]): string {
+    return modules
+      .filter(({ type = '' }) => type.includes('mini-css-extract-plugin'))
+      .reduce((result, { content = '' }) => {
+        return result + content;
+      }, '');
+  }
+
+  static addStyleInToHTML(compilation: Compilation, pluginData: PluginData) {
+    const style = this.getStyleString(compilation.modules);
+    pluginData.html = pluginData.html
+      .replace('</head>', `<style>\n${style}\n</style></head>`);
+  }
+
+  static removeLinkTag(pluginData: PluginData) {
+    pluginData.assets.css.forEach((fileName: string) => {
+      pluginData.html = pluginData.html
+        .replace(this.makeReg(fileName), '');
+    });
+  }
+
+  static replace(compilation: Compilation, pluginData: PluginData, callback: (...args: any[]) => void) {
+    Plugin.removeLinkTag(pluginData);
+    Plugin.addStyleInToHTML(compilation, pluginData);
+    callback(null, pluginData);
+  }
+
+  apply(compiler: Compiler) {
+    compiler.hooks.compilation.tap('HtmlReplaceWebpackPlugin', (compilation: any) => {
+      compilation.hooks.htmlWebpackPluginAfterHtmlProcessing
+        .tapAsync(
+          'html-webpack-plugin-before-html-processing',
+          Plugin.replace.bind(Plugin, compilation)
+        );
+    });
+  }
+}

package.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "module": "commonjs",
+    "outDir": "build/",
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "lib": ["dom", "es2015", "es2016"],
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "noEmitHelpers": true,
+    "importHelpers": true,
+    "strict": true,
+    "downlevelIteration": true,
+    "noImplicitReturns": true
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}