mergeWithRules misjudges the rules.test equivalent

[RexSkz]

The issue happens on the latest version of webpack-merge.

Brief Description

Assume we have two tests using object:

// match all .less files in Ant Design
{ and: [/\.less$/, /antd/] }

// match all .less files in Material UI
{ and: [/\.less$/, /@mui/] }

They should be converted using less-loader but with different options, the value of use[0].options.lessOptions should be:

// for Ant Design
{ modifyVars: { a: 1 } }

// for Material UI
{ modifyVars: { b: 2 } }

The merge result is not as expected, because webpack-merge uses the toString result to compare the test value:

const matches = rulesToMatch.every(
  (rule) => ao[rule]?.toString() === o[rule]?.toString()
);

The two results are both "[object Object]", causing the latter rule to be missing and its lessOptions to override the former one.

Full Example

Run this script:

const { mergeWithRules } = require('webpack-merge');

const a = {
  module: {
    rules: [
      {
        test: { and: [/\.less$/, /antd/] },
        use: [
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                modifyVars: { a: 1 },
              },
            },
          },
        ],
      },
    ],
  },
};

const b = {
  module: {
    rules: [
      {
        test: { and: [/\.less$/, /@mui/] },
        use: [
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                modifyVars: { b: 2 },
              },
            },
          },
        ],
      },
    ],
  },
};

const result = mergeWithRules({
  module: {
    rules: {
      test: 'match',
      use: {
        loader: 'match',
        options: 'replace',
      },
    },
  },
})(a, b);

console.log(JSON.stringify(result, (_, value) => (
  value instanceof RegExp ? value.toString() : value
), 2));

And we will get:

{
  "module": {
    "rules": [
      {
        "test": {
          "and": [
            "/\\.less$/",
            "/antd/"
          ]
        },
        "use": [
          {
            "loader": "less-loader",
            "options": {
              "lessOptions": {
                "modifyVars": {
                  "b": 2
                }
              }
            }
          }
        ]
      }
    ]
  }
}

Suggestion

Using the deep equal (e.g. _.isEqual in lodash) to compare the test value.

[bebraw]

Can you send a PR? This package isn't maintained due to lack of funding but I can merge fixes.

[RexSkz]

Sure, PR is on the way~

[RexSkz]

Hello @bebraw, PR #213 fixes this issue and does not affect the scenarios that currently work; you can trigger the pipeline and have a look at my code :)

[bebraw]

Yup, thanks. I will have a good look today.

[bebraw]

Included in 5.10.0. Thanks a lot for your contribution.