Feat/filename transform

README.md

@@ -268,6 +268,17 @@ module.exports = {
 }
 ```
 
+#### Filename as function instead of string
+
+By using a function instead of a string, 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, the we'll change the filename to output the css to a different directory.
+
+```javascript
+const miniCssExtractPlugin = new MiniCssExtractPlugin({
+  filename: ({ name, chunkhash }) =>
+    `${name.replace('/js/', '/css/')}.[chunkhash:8].css`
+})
+```
+
 #### Long Term Caching
 
 For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`.

src/index.js

@@ -14,6 +14,8 @@ const pluginName = 'mini-css-extract-plugin';
 const REGEXP_CHUNKHASH = /\[chunkhash(?::(\d+))?\]/i;
 const REGEXP_CONTENTHASH = /\[contenthash(?::(\d+))?\]/i;
 const REGEXP_NAME = /\[name\]/i;
+const REGEXP_PLACEHOLDERS = /\[(name|id|chunkhash)\]/g;
+const DEFAULT_FILENAME = '[name].css';
 
 class CssDependency extends webpack.Dependency {
   constructor(
@@ -112,21 +114,18 @@ class MiniCssExtractPlugin {
   constructor(options) {
     this.options = Object.assign(
       {
-        filename: '[name].css',
+        filename: DEFAULT_FILENAME,
       },
       options
     );
     if (!this.options.chunkFilename) {
       const { filename } = this.options;
-      const hasName = filename.includes('[name]');
-      const hasId = filename.includes('[id]');
-      const hasChunkHash = filename.includes('[chunkhash]');
       // Anything changing depending on chunk is fine
-      if (hasChunkHash || hasName || hasId) {
+      if (typeof filename === 'string' && REGEXP_PLACEHOLDERS.test(filename)) {
         this.options.chunkFilename = filename;
       } else {
         // Elsewise prefix '[id].' in front of the basename to make it changing
-        this.options.chunkFilename = filename.replace(
+        this.options.chunkFilename = DEFAULT_FILENAME.replace(
           /(^|\/)([^/]*(?:\?|$))/,
           '$1[id].$2'
         );
@@ -170,6 +169,10 @@ class MiniCssExtractPlugin {
           const renderedModules = Array.from(chunk.modulesIterable).filter(
             (module) => module.type === MODULE_TYPE
           );
+          const { filename } = this.options;
+          const filenameTemplate =
+            typeof filename === 'function' ? filename(chunk) : filename;
+
           if (renderedModules.length > 0) {
             result.push({
               render: () =>
@@ -179,7 +182,7 @@ class MiniCssExtractPlugin {
                   renderedModules,
                   compilation.runtimeTemplate.requestShortener
                 ),
-              filenameTemplate: this.options.filename,
+              filenameTemplate,
               pathOptions: {
                 chunk,
                 contentHashType: MODULE_TYPE,

test/TestCases.test.js

@@ -60,20 +60,37 @@ describe('TestCases', () => {
             return;
           }
           const expectedDirectory = path.resolve(directoryForCase, 'expected');
-          for (const file of fs.readdirSync(expectedDirectory)) {
-            const content = fs.readFileSync(
-              path.resolve(expectedDirectory, file),
-              'utf-8'
-            );
-            const actualContent = fs.readFileSync(
-              path.resolve(outputDirectoryForCase, file),
-              'utf-8'
+
+          for (const file of walkSync(expectedDirectory)) {
+            const actualFilePath = file.replace(
+              new RegExp(`/cases/${directory}/expected/`),
+              `/js/${directory}/`
             );
-            expect(actualContent).toEqual(content);
+            const expectedContent = fs.readFileSync(file, 'utf-8');
+            const actualContent = fs.readFileSync(actualFilePath, 'utf-8');
+
+            expect(actualContent).toEqual(expectedContent);
           }
           done();
         });
       }, 10000);
     }
   }
 });
+
+/**
+ * Synchronously traverse directory of files
+ * @param {String} dir
+ * @returns {String} path to file or directory
+ */
+function* walkSync(dir) {
+  for (const file of fs.readdirSync(dir)) {
+    const pathToFile = path.join(dir, file);
+    const isDirectory = fs.statSync(pathToFile).isDirectory();
+    if (isDirectory) {
+      yield* walkSync(pathToFile);
+    } else {
+      yield pathToFile;
+    }
+  }
+}

test/cases/filename/expected/demo/css/main.css

@@ -0,0 +1,2 @@
+body { background: purple; }
+

test/cases/filename/index.js

@@ -0,0 +1 @@
+import './style.css';

test/cases/filename/style.css

@@ -0,0 +1 @@
+body { background: purple; }

test/cases/filename/webpack.config.js

@@ -0,0 +1,24 @@
+const Self = require('../../../');
+
+module.exports = {
+  entry: {
+    'demo/js/main': './index.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [Self.loader, 'css-loader'],
+      },
+    ],
+  },
+  output: {
+    filename: '[name].js',
+  },
+  plugins: [
+    new Self({
+      filename: ({ name }) =>
+        `${name.replace('/js/', '/css/')}.css`,
+    }),
+  ],
+};