convertStyleToAttrs breaks IE11 in a case if CSS variables are used for colors

[FlyingDR]

As of v1.0.5 convertStyleToAttrs produces output that conflicts with IE11 in a case if CSS variables are used for colors. Example of such SVG is export of icomoon.io.

Here is test IcoMoon project, it can be loaded here. It consists of single facebook.svg icon. You can export SVG icons for the project by using Generate SVG & More below and then Download. Result of this export is symbol-defs.svg. As you can see - it basically consists of

<path fill="#3a589b" style="fill: var(--color1, #3a589b)" d=..."></path>

Attempt to optimize this project using svgo with this command line:

svgo --disable removeUselessDefs --disable cleanupIDs --enable removeTitle symbol-defs.svg

results into following <path>:

<path fill="var(--color1,#3a589b)" d=""/>

As you can see - result for fill attribute now contains CSS variable that is not supported in IE11. As a result - icon looks like plain black square in IE11.

Of course it is possible to just disable convertStyleToAttrs plugin in this case but maybe it worth to handle such situation by e.g. adding plugin that will strip CSS variables or detect CSS variable and not replace attribute in this case.

[TrySound]

convertStyleToAttrs will be disabled by default in the next release
#1365

[TrySound]

https://github.com/svg/svgo/releases/tag/v2.1.0