From a04486453b7746a1cb95749e0d41db0e152119e6 Mon Sep 17 00:00:00 2001
From: Remus Mate <3297808+mrm007@users.noreply.github.com>
Date: Tue, 1 Aug 2023 15:33:23 +1000
Subject: [PATCH] Allow overriding Webpack module rules (#291)

---
 .changeset/tidy-cows-complain.md | 23 +++++++++++++++++++++++
 lib/makeWebpackConfig.js         | 13 +++++++++++--
 2 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tidy-cows-complain.md

diff --git a/.changeset/tidy-cows-complain.md b/.changeset/tidy-cows-complain.md
new file mode 100644
index 00000000..2e02f0e6
--- /dev/null
+++ b/.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'] },
+      ],
+    },
+  }),
+};
+```
diff --git a/lib/makeWebpackConfig.js b/lib/makeWebpackConfig.js
index 993b0faa..6ca8355b 100644
--- a/lib/makeWebpackConfig.js
+++ b/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;
 };