Allow overriding Webpack module rules (#291)

.changeset/tidy-cows-complain.md

@@ -0,0 +1,23 @@
+---
+'playroom': patch
+---
+
+Allow overriding Webpack module rules
+
+Consumers may have complex Webpack configurations that can clash with Playroom's.
+In this case, it's useful to be able to override the module rules that Playroom defines.
+For example, overriding loaders defined for CSS files:
+
+```js
+// playroom.config.js
+module.exports = {
+  webpackConfig: () => ({
+    module: {
+      rules: [
+        // use your own CSS loaders
+        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+      ],
+    },
+  }),
+};
+```

lib/makeWebpackConfig.js

@@ -1,7 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
-const { merge } = require('webpack-merge');
+const { mergeWithRules } = require('webpack-merge');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const FriendlyErrorsWebpackPlugin = require('@soda/friendly-errors-webpack-plugin');
 const getStaticTypes = require('./getStaticTypes');
@@ -199,5 +199,14 @@ module.exports = async (playroomConfig, options) => {
     ? await playroomConfig.webpackConfig()
     : makeDefaultWebpackConfig(playroomConfig);
 
-  return merge(ourConfig, theirConfig);
+  const mergedConfig = mergeWithRules({
+    module: {
+      rules: {
+        test: 'match',
+        use: 'replace',
+      },
+    },
+  })(ourConfig, theirConfig);
+
+  return mergedConfig;
 };