feat: publicPath can now be a function

Also added schema validation for publicPath.

Author: karlvr

README.md

@@ -38,6 +38,13 @@ npm install --save-dev mini-css-extract-plugin
 
 ### Configuration
 
+#### `publicPath`
+
+Type: `String|Function`
+Default: the `publicPath` in `webpackOptions.output`
+
+Specifies a custom public path for the target file(s).
+
 #### Minimal example
 
 **webpack.config.js**
@@ -74,6 +81,45 @@ module.exports = {
 }
 ```
 
+#### `publicPath` function example
+
+**webpack.config.js**
+
+```js
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+module.exports = {
+  plugins: [
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: "[name].css",
+      chunkFilename: "[id].css"
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: (resourcePath, context) => {
+                // publicPath is the relative path of the resource to the context
+                // e.g. for ./css/admin/main.css the publicPath will be ../../
+                // while for ./css/main.css the publicPath will be ../
+                return path.relative(path.dirname(resourcePath), context) + '/'
+              },
+            }
+          },
+          "css-loader"
+        ]
+      }
+    ]
+  }
+}
+```
+
 #### Advanced configuration example
 
 This plugin should be used only on `production` builds without `style-loader` in the loaders chain, especially if you want to have HMR in `development`.

src/loader.js

@@ -6,6 +6,9 @@ import NodeTargetPlugin from 'webpack/lib/node/NodeTargetPlugin';
 import LibraryTemplatePlugin from 'webpack/lib/LibraryTemplatePlugin';
 import SingleEntryPlugin from 'webpack/lib/SingleEntryPlugin';
 import LimitChunkCountPlugin from 'webpack/lib/optimize/LimitChunkCountPlugin';
+import validateOptions from 'schema-utils';
+
+import schema from './options.json';
 
 const MODULE_TYPE = 'css/mini-extract';
 const pluginName = 'mini-css-extract-plugin';
@@ -29,12 +32,17 @@ const findModuleById = (modules, id) => {
 
 export function pitch(request) {
   const query = loaderUtils.getOptions(this) || {};
+
+  validateOptions(schema, query, 'Mini CSS Extract Plugin Loader');
+
   const loaders = this.loaders.slice(this.loaderIndex + 1);
   this.addDependency(this.resourcePath);
   const childFilename = '*'; // eslint-disable-line no-path-concat
   const publicPath =
     typeof query.publicPath === 'string'
       ? query.publicPath
+      : typeof query.publicPath === 'function'
+      ? query.publicPath(this.resourcePath, this.rootContext)
       : this._compilation.outputOptions.publicPath;
   const outputOptions = {
     filename: childFilename,

src/options.json

@@ -0,0 +1,19 @@
+{
+	"additionalProperties": true,
+	"properties": {
+	  "publicPath": {
+		"anyOf": [
+		  {
+			"type": "string"
+		  },
+		  {
+			"instanceof": "Function"
+		  }
+		]
+	  }
+	},
+	"errorMessages": {
+	  "publicPath": "should be {String} or {Function} (https://github.com/webpack-contrib/mini-css-extract-plugin#publicpath)"
+	},
+	"type": "object"
+  }