Custom loader

README.md

@@ -454,6 +454,76 @@ module.exports = {
 }
 ```
 
+## Customized Loader
+
+In order to make it easier to customize new tooling on top of `postcss-loader`, it exposes a
+loader-builder utility to allow adding custom config and logic handling for each file
+the laoder processes.
+
+`postcssLoader.custom` accepts a callback that will be called with the instance of `postcss`
+used by the loader, so tooling can ensure that it's using the same `postcss` as the loader itself.
+
+```js
+const postcssLoader = require('postcss-loader');
+
+const utilityPostcssLoader = postcssLoader.custom((postcss) => {
+  return {
+    // customOptions is passed any user configured loader options
+    // You can use this hook to split out or your own options from the base loader's options
+    customOptions: ({ autoprefix, ...loader }) => ({
+      custom: { autoprefix }
+      loader,
+    })
+    // config provides a hook for customizing parsed postcss config file (or options from loader)
+    config(config, options) {
+      // file will be a path if parsed from a postcss.config.js file
+      const { file, plugins, options } = config
+      // the input css string, ast and input (if they exist)
+      // as well as the options parsed out in customOptions above
+      const { source, inputAst, inputMap, customOptions } = options
+
+      // Add custom handling
+
+      if (!customOptions.autoprefix) {
+        return config;
+      }
+
+      return {
+        ...config,
+        plugins: [
+          ...config.plugins,
+          require('autoprefixer'),
+        ],
+      }
+    }
+
+    // a hook for postprocessing the result of the loader.
+    // passed the postcss Result
+    result(result, options) {
+      return {
+        ...result,
+        css: result.css + "\n// Generated by some custom loader",
+      };
+    },
+  }
+})
+```
+
+```js
+// And in your Webpack config
+module.exports = {
+  // ..
+  module: {
+    rules: [{
+      // ...
+      loader: path.join(__dirname, './utility-loader.js'),
+      options: { autoprefix: true }
+      // ...
+    }]
+  }
+};
+```
+
 <h2 align="center">Maintainers</h2>
 
 <table>

package.json

@@ -13,7 +13,8 @@
     "loader-utils": "^1.1.0",
     "postcss": "^7.0.0",
     "postcss-load-config": "^2.0.0",
-    "schema-utils": "^1.0.0"
+    "schema-utils": "^1.0.0",
+    "semver": "^6.3.0"
   },
   "devDependencies": {
     "@webpack-utilities/test": "^1.0.0-alpha.0",