Invalid selector: "@-webkit-keyframes spinner"

[pkolt]

Describe the bug
After upgrading from version 9.9.2 to version 9.10.0, our tests began to fail with the error:

DOMException: Invalid selector: "@-webkit-keyframes spinner"
 ❯ Function.getSelectorGroups node_modules/happy-dom/src/query-selector/SelectorParser.ts:143:10
 ❯ Function.match node_modules/happy-dom/src/query-selector/QuerySelector.ts:100:38
 ❯ CSSStyleDeclarationElementStyle.parseCSSRules node_modules/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationElementStyle.ts:292:42
 ❯ CSSStyleDeclarationElementStyle.getComputedElementStyle node_modules/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationElementStyle.ts:124:12
 ❯ CSSStyleDeclarationElementStyle.getElementStyle node_modules/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationElementStyle.ts:59:16
 ❯ CSSStyleDeclaration.getPropertyValue node_modules/happy-dom/src/css/declaration/AbstractCSSStyleDeclaration.ts:193:37
 ❯ CSSStyleDeclaration.get pointerEvents [as pointerEvents] node_modules/happy-dom/src/css/declaration/CSSStyleDeclaration.ts:3873:15
 ❯ hasPointerEvents node_modules/@testing-library/user-event/dist/index.mjs:1338:54
 ❯ assertPointerEvents node_modules/@testing-library/user-event/dist/index.mjs:1352:18
 ❯ node_modules/@testing-library/user-event/dist/index.mjs:2208:7

I tested it on the latest version 9.10.7, our tests keep crashing too:

DOMException: Invalid selector: "@-webkit-keyframes spinner"
 ❯ Function.getSelectorGroups node_modules/happy-dom/src/query-selector/SelectorParser.ts:166:10
 ❯ Function.match node_modules/happy-dom/src/query-selector/QuerySelector.ts:106:38
 ❯ CSSStyleDeclarationElementStyle.parseCSSRules node_modules/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationElementStyle.ts:292:42
 ❯ CSSStyleDeclarationElementStyle.getComputedElementStyle node_modules/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationElementStyle.ts:124:12
 ❯ CSSStyleDeclarationElementStyle.getElementStyle node_modules/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationElementStyle.ts:59:16
 ❯ CSSStyleDeclaration.getPropertyValue node_modules/happy-dom/src/css/declaration/AbstractCSSStyleDeclaration.ts:193:37
 ❯ CSSStyleDeclaration.get pointerEvents [as pointerEvents] node_modules/happy-dom/src/css/declaration/CSSStyleDeclaration.ts:3873:15
 ❯ hasPointerEvents node_modules/@testing-library/user-event/dist/index.mjs:1338:54
 ❯ assertPointerEvents node_modules/@testing-library/user-event/dist/index.mjs:1352:18
 ❯ node_modules/@testing-library/user-event/dist/index.mjs:2208:7

To Reproduce
I can't give you access to my repository, but if you have trouble reproducing this, let me know.

Expected behavior
Tests do not crash like in version 9.9.2.

[btea]

it seems normal 🤔

[pkolt]

Hi @btea !

This code is not called as a query for the DOM node of the selector (document.querySelector(...)).

This code is a CSS rule for describing a CSS animation.

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

The @-webkit- prefix adds the CSS preprocessor (PostCSS).

[btea]

Oh, the error message looks like the query selector api is called.

Can you provide a reproduction link? Maybe I can help troubleshoot.

[pkolt]

Hi @btea !

It would be great if you could fix this error.

Reproduction link - https://github.com/pkolt/bug_checkbox_happy_dom

Run test:

npm test src/pages/BugMediaQuery/index.test.tsx

Thanks!

[btea]

I debugged the code and the problem should have been located, and a pr has been submitted.

[capricorn86]

Thank you @pkolt for reporting! 🙂

Big thanks to @btea for your contribution! 🌟

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v9.13.1