Svgr: Not possible to override config for prefixIds svgo plugin

[runeh]

When using the programatic API, it's not possible to pass in config for the prefixIds svgo plugin. The settings are ignored.

To Reproduce

Steps to reproduce the behavior:

Invoke svgr with custom options for prefixIds:

const svg = await svgr(
  text,
  {
    plugins: [
      '@svgr/plugin-svgo',
      '@svgr/plugin-jsx',
    ],
    svgoConfig: {
      plugins: {
        prefixIds: { prefix: 'custom_prefix' },
      },
    },
  },
  { componentName },
);

Expected behavior

The generated SVG uses custom_prefix as the prefix.

Actual behaviour

The generated SVG uses the default prefix prefix.

Reason

The reason seems to be the mergeDeep call here: https://github.com/smooth-code/svgr/blob/f476c8ec7e928efd5c11324bed95a8110214dc79/packages/plugin-svgo/src/index.js#L100

The default config and user provided config are not merged, but contains both the configurations for prefixIds. The first one seems to be used, hence the error. The merged config looks like this:

  plugins: [
    { prefixIds: true },
    { prefixIds: { prefix: 'custom_prefix' } }
  ]

Environment

Paste the results here:

## System:
 - OS: Linux 4.14 Manjaro Linux undefined
 - CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
 - Memory: 310.39 MB / 15.44 GB
 - Container: Yes
 - Shell: 5.0.3 - /bin/bash
## Binaries:
 - Node: 10.14.0 - ~/.nvm/versions/node/v10.14.0/bin/node
 - Yarn: 1.15.2 - ~/.nvm/versions/node/v10.14.0/bin/yarn
 - npm: 6.4.1 - ~/.nvm/versions/node/v10.14.0/bin/npm

└─ $ ▶ yarn list | grep svgr
│  ├─ @svgr/webpack@^4.0.3
├─ @svgr/[email protected]
├─ @svgr/[email protected]
├─ @svgr/[email protected]
├─ @svgr/[email protected]
├─ @svgr/[email protected]
├─ @svgr/[email protected]
├─ @svgr/[email protected]
├─ @svgr/[email protected]
├─ @svgr/[email protected]
│  ├─ @svgr/babel-plugin-add-jsx-attribute@^4.2.0
│  ├─ @svgr/babel-plugin-remove-jsx-attribute@^4.2.0
│  ├─ @svgr/babel-plugin-remove-jsx-empty-expression@^4.2.0
│  ├─ @svgr/babel-plugin-replace-jsx-attribute-value@^4.2.0
│  ├─ @svgr/babel-plugin-svg-dynamic-title@^4.2.0
│  ├─ @svgr/babel-plugin-svg-em-dimensions@^4.2.0
│  ├─ @svgr/babel-plugin-transform-react-native-svg@^4.2.0
│  └─ @svgr/babel-plugin-transform-svg-component@^4.2.0
├─ @svgr/[email protected]
│  ├─ @svgr/plugin-jsx@^4.2.0
├─ @svgr/[email protected]
├─ @svgr/[email protected]
│  ├─ @svgr/babel-preset@^4.2.0
│  ├─ @svgr/hast-util-to-babel-ast@^4.2.0
├─ @svgr/[email protected]
├─ @svgr/[email protected]
├─ @svgr/[email protected]
│  ├─ @svgr/core@^4.2.0
│  ├─ @svgr/plugin-jsx@^4.2.0
│  ├─ @svgr/plugin-svgo@^4.2.0
│  ├─ @svgr/core@^4.1.0
│  ├─ @svgr/plugin-jsx@^4.1.0
│  ├─ @svgr/plugin-prettier@^4.0.3
│  ├─ @svgr/plugin-svgo@^4.0.3
│  ├─ @svgr/core@^4.1.0
│  ├─ @svgr/plugin-prettier@^4.0.3
│  ├─ @svgr/plugin-svgo@^4.0.3

[gregberge]

Hello @runeh, thanks for the bug report. Could someone try to fix it in a PR. It looks like mergeDeep is not sufficient to merge plugins, we have to create something more specific.

[kumarharsh]

The simplest way to fix this, as I see it are:

a. Make the default plugins an empty array
b. Move the default plugins to the last while doing mergeDeep.

I think (b) this would solve the issue, and not be backwards incompatible. Does that make sense @neoziro?

[kumarharsh]

Hold on... on further inspection, it seems like I've got it working without changing anything. The key is that the plugins property needs to be an array, not an object as @runeh has originally put it. It's working for me. Here's my config:

{
  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        svgoConfig: {
          plugins: [{ prefixIds: false }],
        },
      },
    },
  ],
},

[gregberge]

SVGO config is a little fucked up, but I can't change it sorry.