Error: Unmatched selector: %

[PavelFil]

When run svgo icon.svg, I receive the error

Error: Unmatched selector: %
    at parse (/usr/local/lib/node_modules/svgo/node_modules/css-what/lib/commonjs/parse.js:85:15)
    at compileUnsafe (/usr/local/lib/node_modules/svgo/node_modules/css-select/lib/compile.js:48:69)
    at compile (/usr/local/lib/node_modules/svgo/node_modules/css-select/lib/compile.js:43:16)
    at is (/usr/local/lib/node_modules/svgo/node_modules/css-select/lib/index.js:140:76)
    at matches (/usr/local/lib/node_modules/svgo/lib/xast.js:38:10)
    at computeOwnStyle (/usr/local/lib/node_modules/svgo/lib/style.js:151:9)
    at computeStyle (/usr/local/lib/node_modules/svgo/lib/style.js:265:26)
    at Object.enter (/usr/local/lib/node_modules/svgo/plugins/removeUnknownsAndDefaults.js:153:15)
    at visit (/usr/local/lib/node_modules/svgo/lib/xast.js:52:30)
    at visit (/usr/local/lib/node_modules/svgo/lib/xast.js:68:9)

The file is:

<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id='mask1'>
  <rect width="24" height="25" fill="black" />
  <path d="M15.9639 16.0657V13.7215C15.4365 14.581 14.2448 15.2647 12.4476 15.2647C10.6699 15.2647 9.67363 14.4443 9.49782 12.8228H16.7453V11.8852C16.7453 8.81815 15.0458 7.07953 12.2132 7.06C9.2634 7.06 7.23175 8.87676 7.23175 12.1196C7.23175 15.4796 9.14619 17.2573 12.3695 17.2378C14.1472 17.2573 15.4951 16.6126 15.9639 16.0657ZM12.1546 9.05257C13.5416 9.05257 14.4011 9.87305 14.4597 11.2014H9.53689C9.77131 9.79491 10.6895 9.05257 12.1546 9.05257Z" fill="white"/>
</mask>
<mask id='mask2'>
  <rect width="24" height="25" fill="black" />
  <path fill-rule="evenodd" clip-rule="evenodd" d="M19.4632 3.51013H4.51375C3.96146 3.51013 3.51375 3.95785 3.51375 4.51013V19.788C3.51375 20.3403 3.96146 20.788 4.51375 20.788H19.4632C20.0155 20.788 20.4632 20.3403 20.4632 19.788V4.51013C20.4632 3.95785 20.0155 3.51013 19.4632 3.51013ZM4.51375 1.51013C2.85689 1.51013 1.51375 2.85328 1.51375 4.51013V19.788C1.51375 21.4449 2.85689 22.788 4.51375 22.788H19.4632C21.1201 22.788 22.4632 21.4449 22.4632 19.788V4.51013C22.4632 2.85328 21.1201 1.51013 19.4632 1.51013H4.51375Z" fill="white"/>
  <path d="M4.15306 0.445507C4.15306 0.279822 4.28737 0.145508 4.45306 0.145508H6.58239C6.74807 0.145508 6.88239 0.279822 6.88239 0.445508V2.57484C6.88239 2.74052 6.74807 2.87484 6.58239 2.87484H4.45306C4.28737 2.87484 4.15306 2.74052 4.15306 2.57484V0.445507Z" fill="white"/>
  <path d="M4.15327 21.7234C4.15327 21.5577 4.28759 21.4234 4.45327 21.4234H6.5826C6.74829 21.4234 6.8826 21.5577 6.8826 21.7234V23.8527C6.8826 24.0184 6.74829 24.1527 6.5826 24.1527H4.45327C4.28759 24.1527 4.15327 24.0184 4.15327 23.8527V21.7234Z" fill="white"/>
  <path d="M2.57841 4.14749C2.74409 4.14749 2.87841 4.28181 2.87841 4.44749V6.57682C2.87841 6.74251 2.74409 6.87682 2.57841 6.87682H0.449078C0.283393 6.87682 0.149078 6.74251 0.149078 6.57682L0.149078 4.44749C0.149078 4.28181 0.283393 4.14749 0.449079 4.14749H2.57841Z" fill="white"/>
  <path d="M23.528 4.14749C23.6937 4.14749 23.828 4.28181 23.828 4.44749V6.57682C23.828 6.74251 23.6937 6.87682 23.528 6.87682H21.3987C21.233 6.87682 21.0987 6.74251 21.0987 6.57682V4.44749C21.0987 4.28181 21.233 4.14749 21.3987 4.14749H23.528Z" fill="white"/>
  <path d="M10.6238 0.445507C10.6238 0.279822 10.7581 0.145508 10.9238 0.145508H13.0531C13.2188 0.145508 13.3531 0.279822 13.3531 0.445508V2.57484C13.3531 2.74052 13.2188 2.87484 13.0531 2.87484H10.9238C10.7581 2.87484 10.6238 2.74052 10.6238 2.57484V0.445507Z" fill="white"/>
  <path d="M10.624 21.7234C10.624 21.5577 10.7583 21.4234 10.924 21.4234H13.0533C13.219 21.4234 13.3533 21.5577 13.3533 21.7234V23.8527C13.3533 24.0184 13.219 24.1527 13.0533 24.1527H10.924C10.7583 24.1527 10.624 24.0184 10.624 23.8527V21.7234Z" fill="white"/>
  <path d="M2.57841 10.6182C2.74409 10.6182 2.87841 10.7525 2.87841 10.9182V13.0475C2.87841 13.2132 2.74409 13.3475 2.57841 13.3475H0.449078C0.283393 13.3475 0.149078 13.2132 0.149078 13.0475L0.149078 10.9182C0.149078 10.7525 0.283393 10.6182 0.449079 10.6182H2.57841Z" fill="white"/>
  <path d="M23.528 10.6182C23.6937 10.6182 23.828 10.7525 23.828 10.9182V13.0475C23.828 13.2132 23.6937 13.3475 23.528 13.3475H21.3987C21.233 13.3475 21.0987 13.2132 21.0987 13.0475V10.9182C21.0987 10.7525 21.233 10.6182 21.3987 10.6182H23.528Z" fill="white"/>
  <path d="M17.0941 0.445507C17.0941 0.279822 17.2284 0.145508 17.3941 0.145508H19.5235C19.6891 0.145508 19.8235 0.279822 19.8235 0.445508V2.57484C19.8235 2.74052 19.6891 2.87484 19.5235 2.87484H17.3941C17.2284 2.87484 17.0941 2.74052 17.0941 2.57484V0.445507Z" fill="white"/>
  <path d="M17.0943 21.7234C17.0943 21.5577 17.2287 21.4234 17.3943 21.4234H19.5237C19.6894 21.4234 19.8237 21.5577 19.8237 21.7234V23.8527C19.8237 24.0184 19.6894 24.1527 19.5237 24.1527H17.3943C17.2287 24.1527 17.0943 24.0184 17.0943 23.8527V21.7234Z" fill="white"/>
  <path d="M2.57841 17.0885C2.74409 17.0885 2.87841 17.2228 2.87841 17.3885V19.5179C2.87841 19.6835 2.74409 19.8179 2.57841 19.8179H0.449078C0.283393 19.8179 0.149078 19.6835 0.149078 19.5179L0.149078 17.3885C0.149078 17.2228 0.283393 17.0885 0.449079 17.0885H2.57841Z" fill="white"/>
  <path d="M23.528 17.0885C23.6937 17.0885 23.828 17.2228 23.828 17.3885V19.5179C23.828 19.6835 23.6937 19.8179 23.528 19.8179H21.3987C21.233 19.8179 21.0987 19.6835 21.0987 19.5179V17.3885C21.0987 17.2228 21.233 17.0885 21.3987 17.0885H23.528Z" fill="white"/>
</mask>
<rect id="rect3" width="72" height="25" fill="url(#gradient4)" mask="url(#mask1)" />
<rect id="rect2" width="72" height="25" fill="url(#gradient5)" mask="url(#mask2)" />
<defs>

<linearGradient id="gradient4" x1="0" y1="1" x2="1" y2="1" gradientTransform="rotate(-3)">
<stop offset=".05" stop-color="#FF175D"/>
<stop offset=".2" stop-color="#FFA826"/>
<stop offset=".33" stop-color="#FFA826"/>
<stop offset=".66" stop-color="#FF175D"/>
<stop offset=".72" stop-color="#FF175D"/>
<stop offset=".87" stop-color="#FFA826"/>
</linearGradient>

<linearGradient id="gradient5" x1="0" y1="1" x2="1" y2="1" gradientTransform="rotate(-9)">
<stop offset=".0" stop-color="#FF175D"/>
<stop offset=".32" stop-color="#FFA826"/>
<stop offset=".33" stop-color="#FFA826"/>
<stop offset=".6" stop-color="#FF175D"/>
<stop offset=".67" stop-color="#FF175D"/>
<stop offset=".99" stop-color="#FFA826"/>
</linearGradient>
</defs>

<style>
#rect2 {
    -moz-animation: 2s cycle2 1s alternate 3;
    -webkit-animation: 2s cycle2 1s alternate 3;
    animation: 2s cycle2 1s alternate 3;}
#rect3 {
    -moz-animation: 2s cycle 1s alternate 3;
    -webkit-animation: 2s cycle 1s alternate 3;
    animation: 2s cycle 1s alternate 3;
}
#rect2:hover, #rect3:hover {
   -moz-animation: 2s cycle2 1s alternate infinite;
    -webkit-animation: 2s cycle2 1s alternate infinite;
    animation: 2s cycle2 1s alternate infinite;
}
@-webkit-keyframes cycle {
   from {
      x: 0px;
   }
   to {
      x: -48px;
   }
}
@moz-keyframes cycle {
   from {
      x: 0px;
   }
   to {
      x: -48px;
   }
}
@keyframes cycle {
   from {
      x: 0px;
   }
   to {
      x: -48px;
   }
}

@-webkit-keyframes cycle2 {
   from {
      x: 0px;
   }
   to {
      x: -48px;
   }
}
@-moz-keyframes cycle2 {
   from {
      x: 0px;
   }
   to {
      x: -48px;
   }
}
@keyframes cycle2 {
   from {
      x: 0px;
   }
   to {
      x: -48px;
   }
}
</style>
</svg>

• SVGO Version 3.3.2
• NodeJs Version 18.19.1
• OS: Ubuntu 24.04

[GreLI]

It's not SVGO problem. As you can see by stacktrace it's an error in css-what through css-select dependency.

[PavelFil]

It's not SVGO problem. As you can see by stacktrace it's an error in css-what through css-select dependency.

It's need to create a correct bug report ticket in css-what repo. For that, it's need to know how svgo uses the repo. I mean, it's need to provide a correct code example, that reproduce the problem using only css-what repo.

[GreLI]

Stacktrace shows all the chain. Basically, it computes styles for elements. It needs debugging to say what happens, but I'm not sure how good animations are supported by those libraries.

[johnkenny54]

This works for me with the latest SVGO code (version 4). It fails as described above with the 3.3.2 code. The css libraries used by SVGO appear to be identical between SVGO 4 and 3.3.2.