Problem inserving rule: @media

[sethreidnz]

Describe the bug

I am using the Microsoft design system library @fluentui/react-components and I have noticed that we get a warning when running tests with HappyDom when rendering their the MenuItem component. I'm not 100% sure what is going on in there that is failing in happy-dom but it looks ilke it has its origin in this file

https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts

To Reproduce
Steps to reproduce the behavior:

1. Open this stackblitz reproduction
2. Wait for it to finish installing the packages and run startup command
3. See the output will be success but if you scroll up a little you will see the following:

There was a problem inserting the following rule: "@media (forced-colors: active){.rfoezjv:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.rfoezjv:focus{outline-style:none;}.rfoezjv:focus-visible{outline-style:none;}.rfoezjv[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}@media (forced-colors: active){.rfoezjv[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}.rfoezjv[data-fui-focus-visible]::after{content:"";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}}" TypeError: Cannot read properties of undefined (reading 'DOMException')
    at CSSStyleSheet.insertRule (file:///home/projects/6gz26ktq/node_modules/happy-dom/lib/css/CSSStyleSheet.js:67:51)
    at Object.insertRule (/home/projects/6gz26ktq/node_modules/@griffel/core/renderer/createIsomorphicStyleSheet.cjs.js:17:33)
    at Object.safeInsertRule (/home/projects/6gz26ktq/node_modules/@griffel/core/renderer/safeInsertRule.cjs.js:15:11)
    at Object.insertCSSRules (/home/projects/6gz26ktq/node_modules/@griffel/core/renderer/createDOMRenderer.cjs.js:53:28)
    at eval (/home/projects/6gz26ktq/node_modules/@griffel/react/insertionFactory.cjs.js:13:18)
    at commitHookEffectListMount (/home/projects/6gz26ktq/node_modules/react-dom/cjs/react-dom.development.js:23189:26)
    at commitMutationEffectsOnFiber (/home/projects/6gz26ktq/node_modules/react-dom/cjs/react-dom.development.js:24338:13)
    at recursivelyTraverseMutationEffects (/home/projects/6gz26ktq/node_modules/react-dom/cjs/react-dom.development.js:24312:7)
    at commitMutationEffectsOnFiber (/home/projects/6gz26ktq/node_modules/react-dom/cjs/react-dom.development.js:24385:9)
    at recursivelyTraverseMutationEffects (/home/projects/6gz26ktq/node_modules/react-dom/cjs/react-dom.development.js:24312:7)
There was a problem inserting the following rule: "@media (forced-colors: active){.r8lt3v0:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r8lt3v0:focus{outline-style:none;}.r8lt3v0:focus-visible{outline-style:none;}.r8lt3v0[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}@media (forced-colors: active){.r8lt3v0[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}.r8lt3v0[data-fui-focus-visible]::after{content:"";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}}" TypeError: Cannot read properties of undefined (reading 'DOMException')
    at CSSStyleSheet.insertRule (file:///home/projects/6gz26ktq/node_modules/happy-dom/lib/css/CSSStyleSheet.js:67:51)
    at Object.insertRule (/home/projects/6gz26ktq/node_modules/@griffel/core/renderer/createIsomorphicStyleSheet.cjs.js:17:33)
    at Object.safeInsertRule (/home/projects/6gz26ktq/node_modules/@griffel/core/renderer/safeInsertRule.cjs.js:15:11)
    at Object.insertCSSRules (/home/projects/6gz26ktq/node_modules/@griffel/core/renderer/createDOMRenderer.cjs.js:53:28)
    at eval (/home/projects/6gz26ktq/node_modules/@griffel/react/insertionFactory.cjs.js:13:18)
    at commitHookEffectListMount (/home/projects/6gz26ktq/node_modules/react-dom/cjs/react-dom.development.js:23189:26)
    at commitMutationEffectsOnFiber (/home/projects/6gz26ktq/node_modules/react-dom/cjs/react-dom.development.js:24338:13)
    at recursivelyTraverseMutationEffects (/home/projects/6gz26ktq/node_modules/react-dom/cjs/react-dom.development.js:24312:7)
    at commitMutationEffectsOnFiber (/home/projects/6gz26ktq/node_modules/react-dom/cjs/react-dom.development.js:24385:9)
    at recursivelyTraverseMutationEffects (/home/projects/6gz26ktq/node_modules/react-dom/cjs/react-dom.development.js:24312:7)

Expected behavior

I would expect to not see the warning of failure. The library could just ignore the inserting of the css presumably as the test still passes but the warning creates noise.

Screenshots

Device:

• OS: MacOS
• Browser: vitest runner
• Version: 17.0.4

[capricorn86]

Thank you for reporting @sethreidnz! 🙂

The issue should be fixed now in v17.1.1.

[sethreidnz]

Thank you for reporting @sethreidnz! 🙂

The issue should be fixed now in v17.1.1.

Legend! No problem.