Regression in CSS parsing - Bug in 2.2.1

[nico3333fr]

Describe the bug

We are using SVGO on our Design System at Proton to lint our SVG files, and last version 2.2.1 seems to have a regression.

To Reproduce

• linting the file given at the end of this ticket give this:

[LINT]: ./assets/img/shared/infinite-loader.svg
Error: Unmatched selector: %
    at Object.parse (/builds/web/core/design-system/node_modules/css-what/lib/parse.js:91:15)
    at compileUnsafe (/builds/web/core/design-system/node_modules/css-select/lib/compile.js:26:28)
    at Object.compile (/builds/web/core/design-system/node_modules/css-select/lib/compile.js:21:16)
    at is (/builds/web/core/design-system/node_modules/css-select/lib/index.js:132:61)
    at computeOwnStyle (/builds/web/core/design-system/node_modules/svgo/lib/style.js:92:9)
    at computeStyle (/builds/web/core/design-system/node_modules/svgo/lib/style.js:165:26)
    at Object.exports.fn (/builds/web/core/design-system/node_modules/svgo/plugins/removeHiddenElems.js:54:27)
    at /builds/web/core/design-system/node_modules/svgo/lib/svgo/plugins.js:65:37
    at Array.filter (<anonymous>)
    at monkeys (/builds/web/core/design-system/node_modules/svgo/lib/svgo/plugins.js:53:35)

Expected behavior
Version 2.2.0 was not triggering any bug:

$ npm i [email protected]                           
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ [email protected]
added 1 package from 1 contributor, updated 1 package and audited 346 packages in 2.388s
65 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
[atlas]: ~/dev/taf/webapp/design-system [hotfix/svg-linting*] 
$ npx svgo assets/img/shared/infinite-loader.svg 
infinite-loader.svg:
Done in 25 ms!
0.738 KiB - 32.7% = 0.497 KiB

Screenshots

Desktop (please complete the following information):

• SVGO Version - 2.2.1

Additional context
Here is the file:

<svg xmlns="http://www.w3.org/2000/svg" class="infinite-loader" viewBox="0 0 200 200" >
<style>
.infinite-loader {
  animation: loaderRotation 2s linear infinite;
  transform-origin: 50%;
}
@keyframes loaderRotation {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.infinite-loader-track,
.infinite-loader-circle {
	fill: none;
	stroke-width: 25;
}

.infinite-loader-track {
	stroke: rgba(255, 255, 255, .3);
}

.infinite-loader-circle {
	stroke: #fff;
	stroke-dasharray: 440;
	stroke-dashoffset: 440;
	animation: loading 4s linear infinite;
}
@keyframes loading {
  0% {
    stroke-dashoffset: 440;
  }
  50% {
    stroke-dashoffset: 0;
  }
  50.1% {
    stroke-dashoffset: 880;
  }
}

</style>
  <circle cx="100" cy="100" r="70" class="infinite-loader-track" />
  <circle cx="100" cy="100" r="70" class="infinite-loader-circle" />
</svg>

Seems CSSO https://github.com/css/csso is not causing issue, with both 2 versions we use the last version of CSSO (4.2.0).

[TrySound]

Hi! Try 2.2.2

[nico3333fr]

@TrySound tested, it works. Thanks a lot for prompt reply 👍