Fix and add test filterModuleRules for next-plugin-storybook

packages/next-plugin-storybook/preset.js

@@ -25,7 +25,25 @@ async function webpackFinal(config) {
     ...nextWebpackConfig.resolve,
   }
 
-  config.module.rules = [
+  config.module.rules = {
+    ...filterModuleRules(config),
+    ...nextWebpackConfig.module.rules.map((rule) => {
+      // we need to resolve next-babel-loader since it's not available
+      // relative with storybook's config
+      if (rule.use && rule.use.loader === 'next-babel-loader') {
+        rule.use.loader = require.resolve(
+          'next/dist/build/webpack/loaders/next-babel-loader'
+        )
+      }
+      return rule
+    }),
+  }
+
+  return config
+}
+
+function filterModuleRules(config) {
+  return [
     ...config.module.rules.filter((rule) => {
       // the rules we're filtering use RegExp for the test
       if (!(rule.test instanceof RegExp)) return true
@@ -43,21 +61,10 @@ async function webpackFinal(config) {
       }
       return true
     }),
-    ...nextWebpackConfig.module.rules.map((rule) => {
-      // we need to resolve next-babel-loader since it's not available
-      // relative with storybook's config
-      if (rule.use && rule.use.loader === 'next-babel-loader') {
-        rule.use.loader = require.resolve(
-          'next/dist/build/webpack/loaders/next-babel-loader'
-        )
-      }
-      return rule
-    }),
   ]
-
-  return config
 }
 
 module.exports = {
   webpackFinal,
+  filterModuleRules,
 }

test/unit/webpack-config-overrides.unit.test.js

@@ -1,5 +1,18 @@
 /* eslint-env jest */
 import { attachReactRefresh } from 'next/dist/build/webpack-config'
+import * as storybookPlugin from '../../packages/next-plugin-storybook/preset'
+
+describe('next-plugin-storybook filterModuleRules', () => {
+  it('should filter module rules correctly', async () => {
+    const input = {
+      module: { rules: [{ test: 'babel-loader' }, { test: /.*\.css/ }] },
+    }
+    const expected = [{ test: 'babel-loader' }]
+
+    const output = storybookPlugin.filterModuleRules(input)
+    expect(output).toEqual(expected)
+  })
+})
 
 describe('webpack-config attachReactRefresh', () => {
   it('should skip adding when unrelated', () => {