When running with a jest test which uses container queries through griffel, the error is thrown from the test

[sjwilczynski]

Hey folks,

I wanted to start using container queries with @fluentui/react-components in 1JS and I saw a weird error appearing in each test rendering a component whose style contain container queries. Here is a simple repository with one component and one test showcasing the issue.

When I run jest in this repo I get:

➜  containerCheck  yarn test
yarn run v1.22.15
$ jest
  console.error
    There was a problem inserting the following rule: "@container (width > 600px){.f1wd2ja7{background-color:red;}}" Error: Unexpected } (line 1, char 60)
        at parseError (C:\Users\stwilczy\Repos\containerCheck\node_modules\cssom\lib\parse.js:62:15)
        at Object.parse (C:\Users\stwilczy\Repos\containerCheck\node_modules\cssom\lib\parse.js:385:7)
        at CSSStyleSheet.CSSOM.CSSStyleSheet.insertRule (C:\Users\stwilczy\Repos\containerCheck\node_modules\cssom\lib\CSSStyleSheet.js:43:22)
        at Object.insertRule (C:\Users\stwilczy\Repos\containerCheck\packages\core\src\renderer\createIsomorphicStyleSheet.ts:21:33)
        at Object.insertRule [as safeInsertRule] (C:\Users\stwilczy\Repos\containerCheck\packages\core\src\renderer\safeInsertRule.ts:21:11)
        at Object.safeInsertRule (C:\Users\stwilczy\Repos\containerCheck\packages\core\src\renderer\createDOMRenderer.ts:97:13)
        at insertCSSRules (C:\Users\stwilczy\Repos\containerCheck\packages\react\src\insertionFactory.ts:14:18)
        at commitHookEffectListMount (C:\Users\stwilczy\Repos\containerCheck\node_modules\react-dom\cjs\react-dom.development.js:23150:26)
        at commitMutationEffectsOnFiber (C:\Users\stwilczy\Repos\containerCheck\node_modules\react-dom\cjs\react-dom.development.js:24299:13)
        at recursivelyTraverseMutationEffects (C:\Users\stwilczy\Repos\containerCheck\node_modules\react-dom\cjs\react-dom.development.js:24273:7)
        at commitMutationEffectsOnFiber (C:\Users\stwilczy\Repos\containerCheck\node_modules\react-dom\cjs\react-dom.development.js:24432:9)
        at commitMutationEffects (C:\Users\stwilczy\Repos\containerCheck\node_modules\react-dom\cjs\react-dom.development.js:24243:3)
        at commitRootImpl (C:\Users\stwilczy\Repos\containerCheck\node_modules\react-dom\cjs\react-dom.development.js:26810:5)
        at commitRoot (C:\Users\stwilczy\Repos\containerCheck\node_modules\react-dom\cjs\react-dom.development.js:26682:5)
        at finishConcurrentRender (C:\Users\stwilczy\Repos\containerCheck\node_modules\react-dom\cjs\react-dom.development.js:25981:9)
        at performConcurrentWorkOnRoot (C:\Users\stwilczy\Repos\containerCheck\node_modules\react-dom\cjs\react-dom.development.js:25809:7)
        at flushActQueue (C:\Users\stwilczy\Repos\containerCheck\node_modules\react\cjs\react.development.js:2667:24)
        at act (C:\Users\stwilczy\Repos\containerCheck\node_modules\react\cjs\react.development.js:2582:11)
        at C:\Users\stwilczy\Repos\containerCheck\node_modules\@testing-library\react\dist\act-compat.js:46:25
        at renderRoot (C:\Users\stwilczy\Repos\containerCheck\node_modules\@testing-library\react\dist\pure.js:161:26)
        at render (C:\Users\stwilczy\Repos\containerCheck\node_modules\@testing-library\react\dist\pure.js:247:10)
        at Object.<anonymous> (C:\Users\stwilczy\Repos\containerCheck\Component.test.jsx:10:33)
        at Promise.then.completed (C:\Users\stwilczy\Repos\containerCheck\node_modules\jest-circus\build\utils.js:300:28)
        at new Promise (<anonymous>)
        at callAsyncCircusFn (C:\Users\stwilczy\Repos\containerCheck\node_modules\jest-circus\build\utils.js:233:10)
        at _callCircusTest (C:\Users\stwilczy\Repos\containerCheck\node_modules\jest-circus\build\run.js:315:40)
        at processTicksAndRejections (node:internal/process/task_queues:96:5)
        at _runTest (C:\Users\stwilczy\Repos\containerCheck\node_modules\jest-circus\build\run.js:251:3)
        at _runTestsForDescribeBlock (C:\Users\stwilczy\Repos\containerCheck\node_modules\jest-circus\build\run.js:125:9)
        at _runTestsForDescribeBlock (C:\Users\stwilczy\Repos\containerCheck\node_modules\jest-circus\build\run.js:120:9)
        at run (C:\Users\stwilczy\Repos\containerCheck\node_modules\jest-circus\build\run.js:70:3)
        at runAndTransformResultsToJestFormat (C:\Users\stwilczy\Repos\containerCheck\node_modules\jest-circus\build\legacy-code-todo-rewrite\jestAdapterInit.js:122:21)
        at jestAdapter (C:\Users\stwilczy\Repos\containerCheck\node_modules\jest-circus\build\legacy-code-todo-rewrite\jestAdapter.js:79:19)
        at runTestInternal (C:\Users\stwilczy\Repos\containerCheck\node_modules\jest-runner\build\runTest.js:367:16)
        at runTest (C:\Users\stwilczy\Repos\containerCheck\node_modules\jest-runner\build\runTest.js:444:34) {
      line: 1,
      char: 60,
      styleSheet: CSSStyleSheet {
        parentStyleSheet: null,
        cssRules: [ [CSSStyleRule] ]
      }
    }

      at Object.error [as safeInsertRule] (packages/core/src/renderer/safeInsertRule.ts:26:15)
      at Object.safeInsertRule (packages/core/src/renderer/createDOMRenderer.ts:97:13)
      at insertCSSRules (packages/react/src/insertionFactory.ts:14:18)
      at commitHookEffectListMount (node_modules/react-dom/cjs/react-dom.development.js:23150:26)
      at commitMutationEffectsOnFiber (node_modules/react-dom/cjs/react-dom.development.js:24299:13)
      at recursivelyTraverseMutationEffects (node_modules/react-dom/cjs/react-dom.development.js:24273:7)
      at commitMutationEffectsOnFiber (node_modules/react-dom/cjs/react-dom.development.js:24432:9)
      at commitMutationEffects (node_modules/react-dom/cjs/react-dom.development.js:24243:3)
      at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:26810:5)
      at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:26682:5)
      at finishConcurrentRender (node_modules/react-dom/cjs/react-dom.development.js:25981:9)
      at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25809:7)
      at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
      at act (node_modules/react/cjs/react.development.js:2582:11)
      at node_modules/@testing-library/react/dist/act-compat.js:46:25
      at renderRoot (node_modules/@testing-library/react/dist/pure.js:161:26)
      at render (node_modules/@testing-library/react/dist/pure.js:247:10)
      at Object.<anonymous> (Component.test.jsx:10:33)

 PASS  ./Component.test.jsx
  Component
    √ renders (115 ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 written, 1 total
Time:        5.003 s
Ran all test suites.
Done in 6.57s.

The test still finished so it's not super bad but it is definitely confusing. To be honest I am not sure if it should be an issue on Griffel (potentially it should be on the testing framework) but wanted to get your opinion on how do you think I should proceed about it. Looking forward to your feedback!

[layershifter]

Hey,

It's not a problem with Griffel, cssom & its fork rrweb-cssom currently used by jsdom don't support @container in CSS rules:

• Error: Could not parse CSS stylesheet NV/CSSOM#109
• https://stackblitz.com/edit/stackblitz-starters-bmdcmt

Other CSS-in-JS will also emit the same warning:

• https://github.com/emotion-js/emotion/blob/f3b268f7c52103979402da919c9c0dd3f9e0e189/packages/sheet/src/index.js#L146-L149
• https://github.com/styled-components/styled-components/blob/0a27d797c018075b9f2c90e573c9a37fb7a80196/packages/styled-components/src/sheet/Tag.ts#L32-L35

---

You can suppress by a spy on console.error on by a noop renderer that prevents Griffel from rendering styles:

import { RendererProvider } from '@griffel/react'
import { RendererProvider } from '@fluentui/react-components'

const noopRenderer: GriffelRenderer = {
  id: "",
  insertionCache: {},
  stylesheets: {},
  insertCSSRules() {},
  compareMediaQueries() {
    return 0;
  }
};

// ---

<RendererProvider value={noopProvider} />

[sjwilczynski]

Thanks so much for feedback!