fix(gatsby): postcss-svgo - remove plugin removeAttrs

[samouss]

This PR removes the plugin removeAttrs for postcss-svgo. The main reason behind this change is to remove warnings while building a Gatsby site with SVGs (see below). The removeAttrs plugin expect a pattern to remove matching attributes from the SVG, if none is provided the plugin is useless (see svg/svgo#1582).

With the current version of svgo:

$ gatsby build
[...]
warn Css Minimizer Plugin: postcss-svgo:
/Users/samuel.vaillant/Work/gatsby-svgo/styles.d07168f9038428354f1a.css:2:3: TypeError:
Cannot read properties of undefined (reading 'includes')
[...]
✨  Done in 19.87s.

With the "next" version (if the PR is merged):

$ gatsby build
[...]
Warning: The plugin "removeAttrs" requires the "attrs" parameter.
It should have a pattern to remove, otherwise the plugin is a noop.
Config example:

plugins: [
  {
    name: "removeAttrs",
    params: {
      attrs: "(fill|stroke)"
    }
  }
]
[...]
✨  Done in 22.70s.

[samouss]

I don't think the CI failure is related to this PR though... It looks like other PRs have the exact same error.

[TrySound]

Better use preset-default instead of long list

[natapg]

I am having this problem in my project after updating to gatsby 3, is there a way to fix it momentarily or should I wait for these changes to be released? Thanks

8:26:20 PM: warning Css Minimizer Plugin: postcss-svgo: /opt/build/repo/styles.dbf98c38294bf5d76d0e.css:9:4512: TypeError: Cannot read property 'includes' of undefined
8:26:20 PM: warning Css Minimizer Plugin: postcss-svgo: /opt/build/repo/styles.dbf98c38294bf5d76d0e.css:9:4975: TypeError: Cannot read property 'includes' of undefined

[samouss]

The package svgo is used by Gatsby as a dependency of another dependency of another dependency...

$ yarn why svgo
yarn why v1.22.5
[1/4] 🤔  Why do we have the module "svgo"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "svgo@2.6.1"
info Reasons this module exists
   - "gatsby#css-minimizer-webpack-plugin#cssnano#cssnano-preset-default#postcss-svgo" depends on it
   - Hoisted from "gatsby#css-minimizer-webpack-plugin#cssnano#cssnano-preset-default#postcss-svgo#svgo"
info Disk size without dependencies: "1.27MB"
info Disk size with unique dependencies: "3.72MB"
info Disk size with transitive dependencies: "5.64MB"
info Number of shared dependencies: 12
✨  Done in 0.63s.

The plugin is a noop without the attrs attribute so the error should be no arm. If you really want to remove the error from the build we have to wait for a new version of the svgo package AND manually update the package in the Gatsby project. Until the package is released we can use the version 2.4.0 of svgo. Here is how to do it with Yarn resolutions feature (don't forget to re-install the packages to pickup the changes):

{
  "resolutions": {
    "gatsby/**/svgo": "2.4.0"
  }
}

Unfortunately, with npm, it looks like a bit more complicated to do. There is a RFC for a similar feature than resolutions but it's not yet implemented AFAIK. You can probably edit the shrinkwrap to force a dedicated version (but I didn't test it). Hope that helps!

[LekoArts]

Thanks!