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: (chunkData) =>
+    `${chunkData.name.replace('/js/', '/css/')}.[chunkhash:8].css`
+})
+```
+
 #### Long Term Caching
 
 For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`.

package.json

@@ -75,7 +75,7 @@
     "webpack": "^4.14.0",
     "webpack-cli": "^2.0.13",
     "webpack-defaults": "^2.3.0",
-    "webpack-dev-server": "^3.1.1"
+    "webpack-dev-server": "^3.1.14"
   },
   "keywords": [
     "webpack"

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,24 +114,25 @@ 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) {
-        this.options.chunkFilename = filename;
+      if (typeof filename === 'string') {
+        if (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(
+            /(^|\/)([^/]*(?:\?|$))/,
+            '$1[id].$2'
+          );
+        }
       } else {
-        // Elsewise prefix '[id].' in front of the basename to make it changing
-        this.options.chunkFilename = filename.replace(
-          /(^|\/)([^/]*(?:\?|$))/,
-          '$1[id].$2'
-        );
+        this.options.chunkFilename = `[id].${DEFAULT_FILENAME}`;
       }
     }
   }
@@ -170,6 +173,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 +186,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(
+              expectedDirectory,
+              path.join(outputDirectory, 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; }