Using @container query logs error #3597

zbigg · 2023-09-14T08:16:37Z

Basic info:

Node.js version: v20.6.1
jsdom version: 22.1.0

Minimal reproduction case

const { JSDOM } = require('jsdom');

new JSDOM(`
  <style>
    @container (min-width: 700px) {
      .card h2 {
        font-size: 2em;
      }
    }
  </style>
`);

The container query is taken from MDN documentation in this feature, so it should be correct (?)

Sorry if there is duplicate already, but brief search was unsuccessfull.

How does similar code behave in browsers?

Works as expected - container query has effect on style applied to elements.

zbigg · 2023-09-14T09:58:50Z

Looks like this is implemented by cssom and there is open issue there: NV/CSSOM#109 and not being tackled rrweb-ccsom used currently by jsdom.

domenic · 2023-09-14T10:00:13Z

I don't think this is implemented by cssom? We switched to rrweb-cssom because cssom was not maintained.

zbigg · 2023-09-14T10:06:07Z

And sorry for wrong title (fixed now), it just reports error on virtual console and classic workaround of providing custom virtual console (possibly silent) helps with at least ignoring this error:

new jsdom.JSDOM('',
  { virtualConsole: new jsdom.VirtualConsole() }
)

hoepfnerdennis · 2023-09-20T22:30:09Z

There is the same error log when using @layer...

const { JSDOM } = require('jsdom');

new JSDOM(`
  <style>
    @layer {
      .card h2 {
        font-size: 2em;
      }
    }
  </style>
`);

dustindowns · 2023-10-13T19:18:32Z

Getting the same @layer error too when attempting to test with PrimeVue components.

The-Real-1 · 2023-12-07T19:52:04Z

Hi everyone,

We are also facing the same problem when having @layer specified in our Css files.
We looked up the source code of CSSOM and the problem is inside the parser() method. The code does not handle correctly some attibutes starting with an @.
We also noticed that this library is no longer maintained by the author . You can see here the repository : CSSOM Repository .

The last version (0.5.0) is now two yeard old and maybe it's time to move on.
Finding an alternative and remove CSSOM from JSDOM dependencies will be great if not too costy for the team.

viceice · 2023-12-22T15:38:09Z

any known workaround for jest jsdom? I'm facing the issue with primeng and @layer.

cluxig · 2024-01-18T09:30:10Z

Same for me. Unable to test primeng properly.

SergioCanalejo · 2024-02-26T15:30:29Z

Any update or workaround about that? I've been stuck in a old primevue version because of that

romain-blatrix · 2024-04-04T09:02:17Z

I made a fork where I added support for @container : https://github.com/mirakl/cssom

jantimon · 2024-05-02T05:57:56Z

in the meantime @domenic and @seanparmelee switched from cssom 0.5.0 to rrweb-cssom 0.6.0 in #3497
rrweb-cssom is maintained by @YunFeng0817 npm/fitz5264

so I moved the @container fix by @romain-blatrix there: rrweb-io/CSSOM#2

lets hope for the best

alopix · 2024-05-02T07:36:21Z

It has already been merged. Now to hope for a new version being released someday.

YunFeng0817 · 2024-05-02T07:54:19Z

Hi jsdom team, v0.7.0 has been published!

jantimon · 2024-05-02T08:24:33Z

thanks @YunFeng0817

I created a pr to bump the version:

#3707

jantimon · 2024-05-23T15:44:05Z

finally the pipeline is green 🎉

domenic · 2025-04-13T09:14:16Z

I'll close this since I guess people are happy we no longer throw errors about container queries. But we don't actually implement them correctly, so, I'll open a new issue tracking that, and add a test confirming that our implementation just ignores them.

In the future, people who want to ignore CSS and just get no errors should pay attention to #2005.

See #3858. Inspired by #3597.