🤖 Merge PR #49936 mini-css-extract-plugin by @david-fong

* Add LoaderOptions and add missing PluginOption properties

* mini-css-extract-plugin add types and tests

* remove mainainter annotation

* fix: make namedExport optional and improve type assertion style

* refactor object literal cast to variable

* Update types/mini-css-extract-plugin/mini-css-extract-plugin-tests.ts

Co-authored-by: Piotr Błażejewicz (Peter Blazejewicz) <peterblazejewicz@users.noreply.github.com>

Co-authored-by: Piotr Błażejewicz (Peter Blazejewicz) <peterblazejewicz@users.noreply.github.com>

types/mini-css-extract-plugin/index.d.ts

@@ -9,13 +9,16 @@
 import { Configuration, Compiler } from 'webpack';
 
 /**
- * Lightweight CSS extraction webpack plugin
- * This plugin extract CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
+ * Lightweight CSS extraction webpack plugin.
+ *
+ * This plugin extracts CSS into separate files. It creates a CSS file per JS file which
+ * contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
+ *
  * Configuration Detail: https://github.com/webpack-contrib/mini-css-extract-plugin#configuration
  */
 declare class MiniCssExtractPlugin {
     /**
-     * Webpack loader used always at the end of loaders list
+     * Webpack loader always used at the end of loaders list (ie. array index zero).
      */
     static loader: string;
 
@@ -30,13 +33,12 @@ declare class MiniCssExtractPlugin {
 declare namespace MiniCssExtractPlugin {
     interface PluginOptions {
         /**
-         * Options similar to the same options in webpackOptions.output, both options are optional
-         * May contain `[name]`, `[id]`, `hash` and `[chunkhash]`
-         * With the filename option you can use chunk data to customize the filename.
-         * This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk.
-         * In the example below, we'll use filename to output the generated css into a different directory.
+         * Works like [`output.filename`](https://webpack.js.org/configuration/output/#outputfilename).
          */
         filename?: Required<Configuration>['output']['filename'];
+        /**
+         * Works like [`output.chunkFilename`](https://webpack.js.org/configuration/output/#outputchunkfilename).
+         */
         chunkFilename?: string;
         /**
          * For projects where CSS ordering has been mitigated through consistent
@@ -44,6 +46,42 @@ declare namespace MiniCssExtractPlugin {
          * disabled by setting this flag to true for the plugin.
          */
         ignoreOrder?: boolean;
+        /**
+         * Specify where to insert the link tag.
+         *
+         * A string value specifies a DOM query for a parent element to attach to.
+         *
+         * A function allows to override default behavior for non-entry CSS chunks.
+         * This code will run in the browser alongside your application. It is recommend
+         * to only use ECMA 5 features and syntax. The function won't have access to the
+         * scope of the webpack configuration module.
+         *
+         * @default function() { document.head.appendChild(linkTag); }
+         */
+        insert?: string | ((linkTag: any) => void);
+        /**
+         * Specify additional html attributes to add to the link tag.
+         *
+         * Note: These are only applied to dynamically loaded css chunks. To modify link
+         * attributes for entry CSS chunks, please use html-webpack-plugin.
+         */
+        attributes?: Record<string, string>;
+        /**
+         * This option allows loading asynchronous chunks with a custom link type, such as
+         * `<link type="text/css" ...>`.
+         *
+         * `false` disables the link `type` attribute.
+         *
+         * @default 'text/css'
+         */
+        linkType?: string | false | 'text/css';
+    }
+    interface LoaderOptions {
+        /**
+         * Overrides [`output.publicPath`](https://webpack.js.org/configuration/output/#outputpublicpath).
+         * @default output.publicPath
+         */
+        publicPath?: string | ((resourcePath: string, context: string) => string);
         /**
          * By default, `mini-css-extract-plugin` generates JS modules that use the ES modules syntax.
          * There are some cases in which using ES modules is beneficial,
@@ -51,12 +89,19 @@ declare namespace MiniCssExtractPlugin {
          * @default true
          */
         esModule?: boolean;
-        /**
-         * This option allows loading asynchronous chunks with a custom link type, such as <link type="text/css" ...>.
-         * `false` disables the link `type` attribute
-         * @default `text/css`
-         */
-        linkType?: boolean | 'text/css';
+        modules?: {
+            /**
+             * Enables/disables ES modules named export for locals.
+             *
+             * Names of locals are converted to camelCase. It is not allowed to use
+             * JavaScript reserved words in CSS class names. Options `esModule` and
+             * `modules.namedExport` in css-loader and MiniCssExtractPlugin.loader
+             * must be enabled.
+             *
+             * @default false
+             */
+            namedExport?: boolean;
+        };
     }
 }
 

types/mini-css-extract-plugin/mini-css-extract-plugin-tests.ts

@@ -3,6 +3,14 @@ import MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 let configuration: webpack.Configuration;
 
+const loaderOptions: MiniCssExtractPlugin.LoaderOptions = {
+    publicPath: '/',
+    esModule: true,
+    modules: {
+        namedExport: true,
+    }
+};
+
 configuration = {
     // The standard entry point and output config
     entry: {
@@ -25,9 +33,7 @@ configuration = {
                 test: /\.css$/,
                 use: {
                     loader: MiniCssExtractPlugin.loader,
-                    options: {
-                        publicPath: '/',
-                    },
+                    options: loaderOptions,
                 },
             },
             // Optionally extract less files
@@ -82,15 +88,6 @@ configuration = {
     ],
 };
 
-configuration = {
-    // ...
-    plugins: [
-        new MiniCssExtractPlugin({
-            esModule: true,
-        }),
-    ],
-};
-
 configuration = {
     // `linkType`
     plugins: [