attempt to fix tests for webpack3

mini-css-extract-plugin does not work AT ALL with webpack3. The old
configuration for extract-text-plugin should work, but I'm missing
something, because the webpack build never completes, and just hangs.
I've tested in an actual webpack3 project and verified it works, so
there's something in my test setup, not the project code itself. Will
eventually fix, but I don't want to hold up an actual fix to fix a
test...

Author: localyost3000

.github/workflows/build.yml

@@ -6,7 +6,7 @@ jobs:
     strategy:
       matrix:
         webpack: [4]
-        html-webpack: [4, 3]
+        html-webpack: [3, 4]
         include:
           - webpack: 5
             html-webpack: 5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-link-type-plugin",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "a plugin for html-webpack-plugin to allow for mimetype tagging of injected links",
   "main": "dist/plugin.js",
   "scripts": {
@@ -23,10 +23,12 @@
     "@types/node": "12.19.15",
     "chai": "4.2.0",
     "css-loader": "5.0.1",
+    "extract-text-webpack-plugin": "3.0.2",
     "html-webpack-plugin": ">=3.2.0",
     "mini-css-extract-plugin": "1.3.5",
     "mocha": "8.2.1",
     "rimraf": "3.0.2",
+    "style-loader": "3.3.0",
     "ts-node": "9.1.1",
     "typescript": "4.1.3",
     "webpack": ">=3.0.0"

spec/index.spec.ts

@@ -4,27 +4,66 @@ import {expect} from 'chai';
 import * as webpack from 'webpack';
 import * as HtmlWebpackPlugin from 'html-webpack-plugin';
 import * as rimraf from 'rimraf';
-import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import {HtmlWebpackLinkTypePlugin} from '../src/plugin';
 
 const OUTPUT_DIR = join(__dirname, './test_dist');
 
+const webpackPackageVersion = process.env.npm_package_devDependencies_webpack.replace(/[^0-9.]/g, '')
+const htmlPluginPackageVersion = process.env.npm_package_devDependencies_html_webpack_plugin.replace(/[^0-9.]/g, '')
+
+const webpackVersion = webpack.version ?? webpackPackageVersion
+const htmlPluginVersion = HtmlWebpackPlugin.version ?? htmlPluginPackageVersion
+
+console.log('\nWEBPACK VERSION', webpackVersion,'\n');
+console.log('\nHTML-WEBPACK_PLUGIN VERSION', htmlPluginVersion,'\n');
+
+let cssRule;
+let cssPlugin;
+let cssPluginOpts;
+let addMode = true;
+
+if (/^\s*[3]/.test(webpackVersion)) {
+    // use extractTextWebpackPlugin
+    const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
+    cssRule = ExtractTextWebpackPlugin.extract({
+        fallback: 'style-loader',
+        use: 'css-loader'
+    });
+    cssPlugin = ExtractTextWebpackPlugin;
+    cssPluginOpts = '[name].css'
+    addMode = false;
+} else {
+    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+    cssRule = [
+        {
+            loader: MiniCssExtractPlugin.loader
+        },
+        {
+            loader: 'css-loader'
+        },
+    ];
+    cssPlugin = MiniCssExtractPlugin;
+    cssPluginOpts = {
+        filename: '[name].css'
+    };
+}
+
 const HtmlWebpackPluginOptions: HtmlWebpackPlugin.Options = {
     filename: 'index.html',
     hash: false,
-    inject: 'body',
+    inject: true,
     minify: {
         collapseWhitespace: true,
         removeComments: true,
         removeRedundantAttributes: true,
         useShortDoctype: true
     },
-    showErrors: false,
+    showErrors: true,
     template: join(__dirname, './test_data/index.html'),
 };
 
+
 const webpackDevOptions: webpack.Configuration = {
-    mode: 'development',
     entry: {
         app: join(__dirname, './test_data/entry.js'),
         styles: join(__dirname, './test_data/entry.css'),
@@ -36,122 +75,114 @@ const webpackDevOptions: webpack.Configuration = {
         rules: [
             {
                 test: /\.css$/,
-                use: [
-                    {
-                        loader: MiniCssExtractPlugin.loader
-                    },
-                    {
-                        loader: 'css-loader'
-                    },
-                ]
+                use: cssRule
             }
         ]
     },
 };
 
 const webpackProdOptions: webpack.Configuration = {
-    ...webpackDevOptions,
-    mode: 'production',
+    ...webpackDevOptions
 };
 
+if (addMode) {
+    webpackDevOptions.mode = 'development'
+    webpackProdOptions.mode = 'production'
+}
+
 function testAutoAssign(err) {
+    if (err) {
+        console.error(err)
+    }
     expect(!!err).to.be.false;
     const htmlFile = join(OUTPUT_DIR, './index.html');
     const htmlContents = readFileSync(htmlFile).toString('utf8');
-    expect(!!htmlContents).to.be.true;
-    expect(/href="styles\.css"[^>]*?type="text\/css"/i.test(htmlContents)).to.be.true;
-    expect(/src="app\.js"/i.test(htmlContents)).to.be.true;
+    expect(!!htmlContents, 'Missing HTML contents').to.be.true;
+    expect(/href="styles\.css"[^>]*?type="text\/css"/i.test(htmlContents), 'Missing labeled styles output').to.be.true;
+    expect(/src="app\.js"/i.test(htmlContents), 'No app.js file appended to html').to.be.true;
 }
 
 
 function testTypeOverride(err) {
+    if (err) {
+        console.error(err)
+    }
     expect(!!err).to.be.false;
     const htmlFile = join(OUTPUT_DIR, './index.html');
     const htmlContents = readFileSync(htmlFile).toString();
-    expect(!!htmlContents).to.be.true;
-    expect(/href="styles\.css"[^>]*?type="testtype"/i.test(htmlContents)).to.be.true;
-    expect(/src="app\.js"/i.test(htmlContents)).to.be.true;
+    expect(!!htmlContents, 'Missing HTML contents!').to.be.true;
+    expect(/href="styles\.css"[^>]*?type="testtype"/i.test(htmlContents), 'Incorrect type applied or type not found').to.be.true;
+    expect(/src="app\.js"/i.test(htmlContents), 'No app.js file appended to html').to.be.true;
 }
 
-console.log('\nWEBPACK VERSION', webpack.version,'\n');
-console.log('\nHTML-WEBPACK_PLUGIN VERSION', HtmlWebpackPlugin.version,'\n');
-
 describe('HtmlWebpackLinkTypePlugin Development Mode', () => {
 
     afterEach((done) => {
         rimraf(OUTPUT_DIR, done);
     });
 
-    it('should auto assign types to css and js', function (done) {
+    it('should auto assign types to css and js', (done) => {
         webpack({ ...webpackDevOptions,
             plugins: [
+                new cssPlugin(cssPluginOpts),
                 new HtmlWebpackPlugin(HtmlWebpackPluginOptions),
                 new HtmlWebpackLinkTypePlugin(),
-                new MiniCssExtractPlugin ({
-                    filename: '[name].css'
-                }),
             ]
         }, (err) => {
             testAutoAssign( err );
-            done();
+            done(err);
         });
-    });
+    })
 
-    it('should allow type overrides', function (done) {
+    it('should allow type overrides', (done) => {
         webpack({
             ...webpackDevOptions,
             plugins: [
                 new HtmlWebpackPlugin(HtmlWebpackPluginOptions),
                 new HtmlWebpackLinkTypePlugin({
                     '*.css': 'testtype'
                 }),
-                new MiniCssExtractPlugin ({
-                    filename: '[name].css'
-                }),
+                new cssPlugin(cssPluginOpts),
             ]
         }, (err) => {
             testTypeOverride(err);
-            done();
+            done(err);
         });
     });
 });
 
-
-describe('HtmlWebpackLinkTypePlugin Production Mode', () => {
-
-    afterEach((done) => {
-        rimraf(OUTPUT_DIR, done);
-    });
-
-    it('should auto assign types to css and js', function (done) {
-        webpack({ ...webpackProdOptions,
-            plugins: [
-                new HtmlWebpackPlugin(HtmlWebpackPluginOptions),
-                new HtmlWebpackLinkTypePlugin(),
-                new MiniCssExtractPlugin ({
-                    filename: '[name].css'
-                }),
-            ]
-        }, (err) => {
-            testAutoAssign(err);
-            done();
+if (addMode) {
+    describe('HtmlWebpackLinkTypePlugin Production Mode', () => {
+        afterEach((done) => {
+            rimraf(OUTPUT_DIR, done);
         });
-    });
-
-    it('should allow type overrides', function (done) {
-        webpack({ ...webpackProdOptions,
-            plugins: [
-                new HtmlWebpackPlugin(HtmlWebpackPluginOptions),
-                new HtmlWebpackLinkTypePlugin({
-                    '*.css': 'testtype'
-                }),
-                new MiniCssExtractPlugin ({
-                    filename: '[name].css'
-                }),
-            ]
-        }, (err) => {
-            testTypeOverride(err);
-            done();
+    
+        it('should auto assign types to css and js', (done) => {
+            webpack({ ...webpackProdOptions,
+                plugins: [
+                    new HtmlWebpackPlugin(HtmlWebpackPluginOptions),
+                    new HtmlWebpackLinkTypePlugin(),
+                    new cssPlugin(cssPluginOpts),
+                ]
+            }, (err) => {
+                testAutoAssign(err);
+                done(err);
+            });
+        });
+    
+        it('should allow type overrides', (done) => {
+            webpack({ ...webpackProdOptions,
+                plugins: [
+                    new HtmlWebpackPlugin(HtmlWebpackPluginOptions),
+                    new HtmlWebpackLinkTypePlugin({
+                        '*.css': 'testtype'
+                    }),
+                    new cssPlugin(cssPluginOpts),
+                ]
+            }, (err) => {
+                testTypeOverride(err);
+                done(err);
+            });
         });
     });
-});
+}