diff --git a/CHANGELOG.md b/CHANGELOG.md index bfc172fa..909dbff5 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/lib/makeWebpackConfig.js b/lib/makeWebpackConfig.js index 0d8d08bc..7d1bd89e 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; }; diff --git a/package.json b/package.json index 75c2d796..4a3d93f0 100644 --- a/package.json +++ b/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",