Merge branch 'release/v1.1.7'

.eslintignore

@@ -0,0 +1,2 @@
+/.eslintrc.cjs
+/dist/

.eslintrc.cjs

@@ -0,0 +1,5 @@
+// https://github.com/andreashuber69/async-css-plugin#--
+module.exports = {
+    extends: "@andreashuber69",
+    ignorePatterns: ["/**/*.config.js"],
+};

.vscode/extensions.json

@@ -3,7 +3,7 @@
     "davidanson.vscode-markdownlint",
     "eamodio.gitlens",
     "eg2.vscode-npm-script",
-    "ms-vscode.vscode-typescript-tslint-plugin",
+    "dbaeumer.vscode-eslint",
     "streetsidesoftware.code-spell-checker",
     "vector-of-bool.gitflow"
   ]

README.md

@@ -47,18 +47,19 @@ much better perceived responsiveness of your site.
 
 ## Prerequisites
 
-This plugin is designed for applications that are built using **[webpack](https://v4.webpack.js.org/)**. More
+This plugin is designed for applications that are built using **[webpack](https://webpack.js.org/)**. More
 specifically, your application must satisfy **one** of the following conditions:
 
 - Your application is built using **webpack** directly or a framework that allows for the configuration of **webpack**
-  with *[webpack.config.js](https://v4.webpack.js.org/configuration/)*.
+  with *[webpack.config.js](https://webpack.js.org/configuration/)*, like e.g. [React](https://reactjs.org/).
 - Your application is built using a framework like **[Vue](https://vuejs.org)** that "abstracts away"
   *webpack.config.js* but provides a [different way](https://cli.vuejs.org/guide/webpack.html#chaining-advanced) to
   modify the **webpack** configuration.
 
-> This version of the plugin has so far only been tested with **webpack** v4 and **Vue** v2. Due to the fact that only a
-> very stable API of a plugin is used internally (namely `HtmlWebpackPlugin.getHooks`) it might work with projects that
-> are based on later versions of these frameworks but it hasn't been tested yet.
+> NOTE: Unfortunately, this plugin does not seem to work with apps based on [Angular](https://angular.io/), see
+> [this repo](https://github.com/andreashuber69/async-css-angular-example) for more information. The steps still
+> work with **Angular** v14, except for step 9, which can be safely skipped (with v14 css is always extracted, the
+> `extractCss` setting is therefore no longer supported).
 
 ## Getting Started
 
@@ -71,22 +72,41 @@ specifically, your application must satisfy **one** of the following conditions:
 `AsyncCssPlugin` configuration depends on how your project is set up, please see [Prerequisites](#prerequisites) for
 more information.
 
-#### webpack.config.js
+#### webpack.config.js for webpack v4 & v5
 
-If your project does not yet contain *[webpack.config.js](https://v4.webpack.js.org/configuration/)*, please create one
-in the same folder as *package.json*. Otherwise, please modify accordingly. In order for webpack to generate HTML, you
-need to add [html-webpack-plugin](https://v4.webpack.js.org/plugins/html-webpack-plugin/). Moreover, for CSS to be
+If your project is configurable with *[webpack.config.js](https://webpack.js.org/configuration/)*, it most likely
+already contains this file. For example, if you create a new **React** application with
+[create-react-app](https://www.npmjs.com/package/create-react-app) and then run `npm run eject`, you'll find the file
+in the *config* folder. In this case you usually only need to add 2 lines of code:
+
+``` js
+// ... existing requires ...
+const AsyncCssPlugin = require("async-css-plugin"); // added for async CSS loading
+
+module.exports = {
+    // ... existing options ...
+    plugins: [
+        // ... existing plugins ...
+        new AsyncCssPlugin({ logLevel: "info" }), // added for async CSS loading
+    ],
+};
+```
+
+If you started with webpack directly, e.g. as described
+[here](https://webpack.js.org/guides/getting-started/#basic-setup), then you've probably already created
+*webpack.config.js* yourself. In this case, you first need to get webpack to generate HTML, with
+[html-webpack-plugin](https://webpack.js.org/plugins/html-webpack-plugin/). Moreover, for CSS to be
 generated into separate files it is recommended to use
-[mini-css-extract-plugin](https://v4.webpack.js.org/plugins/mini-css-extract-plugin/) and
-[css-loader](https://v4.webpack.js.org/loaders/css-loader/). You can add these dependencies as follows:
+[mini-css-extract-plugin](https://webpack.js.org/plugins/mini-css-extract-plugin/) and
+[css-loader](https://webpack.js.org/loaders/css-loader/). You can add these dependencies as follows:
 
 `npm install html-webpack-plugin mini-css-extract-plugin css-loader --save-dev`
 
 Given the configuration recommendations for these plugins with added asynchronous CSS loading your *webpack.config.js*
 should minimally look something like this:
 
 ``` js
-const AsyncCssPlugin = require("async-css-plugin"); // Added for async CSS loading
+const AsyncCssPlugin = require("async-css-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -107,24 +127,21 @@ module.exports = {
     plugins: [
         new HtmlWebpackPlugin(),
         new MiniCssExtractPlugin(),
-        new AsyncCssPlugin({ logLevel: "info" }), // Added for async CSS loading
-    ]
+        new AsyncCssPlugin({ logLevel: "info" }),
+    ],
 };
 ```
 
-#### vue.config.js
+#### vue.config.js for Vue v3
 
-If your **Vue** project does not yet contain *[vue.config.js](https://cli.vuejs.org/config/)*, please create one in the
+If your **Vue** v3 project does not yet contain *[vue.config.js](https://cli.vuejs.org/config/)*, please create one in the
 same folder as *package.json*. Otherwise, please adapt accordingly:
 
 ``` js
-const AsyncCssPlugin = require("async-css-plugin"); // Added for async CSS loading
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+const AsyncCssPlugin = require("async-css-plugin");
 
 module.exports = {
     chainWebpack: config => {
-        // Added for async CSS loading
-        config.plugin("html-webpack-plugin").use(HtmlWebpackPlugin);
         config.plugin("async-css-plugin").use(AsyncCssPlugin, [{ logLevel: "info" }]);
     },
 };
@@ -133,6 +150,27 @@ module.exports = {
 By default, **Vue** already generates separate *.css* files, so there should be no need to make additional changes in
 *vue.config.js*.
 
+#### vue.config.js for Vue v2
+
+If your **Vue** v2 project does not yet contain *[vue.config.js](https://cli.vuejs.org/config/)*, please create one in the
+same folder as *package.json*. Otherwise, please adapt accordingly:
+
+``` js
+const AsyncCssPlugin = require("async-css-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+    chainWebpack: config => {
+        config.plugin("html-webpack-plugin").use(HtmlWebpackPlugin);
+        config.plugin("async-css-plugin").use(AsyncCssPlugin, [{ logLevel: "info" }]);
+    },
+};
+```
+
+Note that for **Vue** v2 it seems to be necessary to add `HtmlWebpackPlugin` even though the plugin is already
+used internally. In **Vue** v3 however, adding this plugin leads to an error during build, so the config **must** be
+different in v2 vs. v3.
+
 ## Usage
 
 Once **webpack** is configured as detailed above, stylesheet links in the generated HTML will look similar to the