webpack-merge icon indicating copy to clipboard operation
webpack-merge copied to clipboard

Deep deep mergeWithRules

Open michael-vasyliv opened this issue 4 years ago • 1 comments

  1. Check the version of webpack-merge you are using. If it's not the newest version, update and try again (see changelog while updating!). my version 5.8.0
  2. If the issue is still there, write a minimal script showing the problem and expected output. You can also set up a repository (even better). Input data

const a = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    ['111'],
                                    ['222']
                                ]
                            }
                        }
                    },
                    { loader: 'sass-loader' }
                ]
            }
        ]
    }
};
const b = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    ['333']
                                ]
                            }
                        }
                    }
                ]
            }
        ]
    }
};

const asd = mergeWithRules({
    module: {
        rules: {
            test: 'match',
            use: {
                loader: 'match',
                options: {
                    postcssOptions: {
                        plugins: 'append'
                    }
                }
            }
        }
    }
})(a, b);

Current result

{
  "module": {
    "rules": [
      {
        "test": {},
        "use": [
          {
            "loader": "style-loader",
            "options": {
              "postcssOptions": {
                "plugins": [
                  [
                    "111"
                  ],
                  [
                    "222"
                  ]
                ]
              }
            }
          },
          {
            "loader": "sass-loader"
          }
        ]
      }
    ]
  }
}

What I expect

{
  "module": {
    "rules": [
      {
        "test": {},
        "use": [
          {
            "loader": "style-loader",
            "options": {
              "postcssOptions": {
                "plugins": [
                  [
                    "111"
                  ],
                  [
                    "222"
                  ],
                  [
                    "333"
                  ]
                ]
              }
            }
          },
          {
            "loader": "sass-loader"
          }
        ]
      }
    ]
  }
}

If I change append to smth else it still does not work 3. Include the script to the issue. Mention Node version and OS in your report. node v14.17.3

michael-vasyliv avatar Aug 27 '21 13:08 michael-vasyliv

As the project isn't funded at the moment, I am not maintaining it actively.

That said, I pushed a branch with an initial test under name fix/193-recursive-match in case somebody wants to try to fix the issue. I am happy to help with the PR and releasing then.


To work around, I would go with a regular merge and wrap the behavior behind a function. See the styling section of my book of how that could work out. I've found regular merge preferable and more understandable over mergeWithRules.

bebraw avatar Aug 27 '21 14:08 bebraw

Included to 5.9.0.

bebraw avatar May 22 '23 07:05 bebraw