Merge branch 'master' into add-vite-support

CHANGELOG.md

@@ -1,5 +1,29 @@
 # playroom
 
+## 0.32.1
+
+### Patch Changes
+
+- a044864: 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'] },
+        ],
+      },
+    }),
+  };
+  ```
+
 ## 0.32.0
 
 ### Minor Changes

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;
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.32.0",
+  "version": "0.32.1",
   "description": "Design with code, powered by your own component library",
   "main": "utils/index.js",
   "types": "utils/types.d.ts",