From bb7ebc74bc92eda743283e8649e5c5eda6f29bc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20B=C5=82a=C5=BCejewicz=20=28Peter=20Blazejewicz=29?=
 <peterblazejewicz@users.noreply.github.com>
Date: Thu, 20 Feb 2020 19:39:13 +0100
Subject: [PATCH] feat(mini-css-extract-plugin): missing `moduleFilename`
 option (#42505)

- update type definition with missig `moduleFilename` option
- update tests
- minor code cleanup via Prettier

https://github.com/webpack-contrib/mini-css-extract-plugin#module-filename-option

Thanks!
---
 types/mini-css-extract-plugin/index.d.ts      | 10 ++++++--
 .../mini-css-extract-plugin-tests.ts          | 24 +++++++++++++++----
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/types/mini-css-extract-plugin/index.d.ts b/types/mini-css-extract-plugin/index.d.ts
index 5c49b861fc..85818ef797 100644
--- a/types/mini-css-extract-plugin/index.d.ts
+++ b/types/mini-css-extract-plugin/index.d.ts
@@ -3,10 +3,10 @@
 // Definitions by: JounQin <https://github.com/JounQin>
 //                 Katsuya Hino <https://github.com/dobogo>
 //                 Spencer Miskoviak <https://github.com/skovy>
+//                 Piotr Błażejewicz <https://github.com/peterblazejewicz>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.3
 
-import { Plugin } from 'webpack';
+import { compilation, Plugin } from 'webpack';
 
 /**
  * Lightweight CSS extraction webpack plugin
@@ -40,6 +40,12 @@ declare namespace MiniCssExtractPlugin {
          * like in the case of module concatenation and tree shaking.
          */
         esModule?: boolean;
+        /**
+         * With the `moduleFilename` 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
+         */
+        moduleFilename?: (chunk: compilation.Chunk) => string;
     }
 }
 
diff --git a/types/mini-css-extract-plugin/mini-css-extract-plugin-tests.ts b/types/mini-css-extract-plugin/mini-css-extract-plugin-tests.ts
index 8cd6e1d037..16217f8002 100644
--- a/types/mini-css-extract-plugin/mini-css-extract-plugin-tests.ts
+++ b/types/mini-css-extract-plugin/mini-css-extract-plugin-tests.ts
@@ -34,11 +34,7 @@ configuration = {
             // or any other compile-to-css language
             {
                 test: /\.less$/,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    'css-loader',
-                    'style-loader',
-                ],
+                use: [MiniCssExtractPlugin.loader, 'css-loader', 'style-loader'],
             },
             // You could also use other loaders the same way. I. e. the autoprefixer-loader
         ],
@@ -76,3 +72,21 @@ configuration = {
         }),
     ],
 };
+
+configuration = {
+    // ...
+    plugins: [
+        new MiniCssExtractPlugin({
+            esModule: true,
+        }),
+    ],
+};
+
+configuration = {
+    // ...
+    plugins: [
+        new MiniCssExtractPlugin({
+            moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`,
+        }),
+    ],
+};