Unmatched selector: % when using CSS in an SVG

[mrtndwrd]

🐛 Bug Report

When I use an SVG with CSS in it, that contains keyframes with percentages, svgr fails to turn the SVG into a JSX element. The error message is Unmatched selector: %.

To Reproduce

Steps to reproduce the behavior:

Use the following SVG:

You can even reproduce this error in the web playground

Expected behavior

The SVG gets turned into a JSX element

Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

Paste the results here:

## System:
 - OS: Linux 5.13 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
 - CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
 - Memory: 12.92 GB / 27.27 GB
 - Container: Yes
 - Shell: 5.1.16 - /bin/bash

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[SethFalco]

This is actually an issue with SVGO, an upstream dependency of SVGR. Thanks for reporting it and providing an example. The fix for this has been released in SVGO v3.0.4.