Exceptions relating to media queries

[thomasheartman]

Hi 👋🏼 Super stoked to see a polyfill for this! Thanks for your work 😄

I wanted to try this out on a Docusaurus page for a custom component, but when loading the polyfill, I get the following two errors:

Uncaught DOMException: Element.matches: '@media (min-width: 1440px) ' is not a valid selector cqfill.js:130

Uncaught (in promise) DOMException: Document.querySelectorAll: '@media (min-width: 1440px) ' is not a valid selector cqfill.js:204

I'm not entirely sure what's going on, but it seems to me that @media[...] gets picked up as a rule and that it breaks some queries. That said, I may very well be doing something wrong. This happens both in Firefox 96 and in Chrome 97.

Do you have any ideas about what may be going wrong and/or how I can fix it?

Thanks for any input!

[Nagell]

Same here. Is there any reason why @media should not be used with container queries?

[surma]

Can either of you provide me with a as-small-as-possible stylesheet that triggers this exception? As long a you don’t nest CQs inside MQs, it is supposed to work, but there might be bugs :D

[thomasheartman]

I can try if it's relevant, but in my case, I don't even need to use container queries in my styling. Just importing the polyfill causes the errors.

On closer inspection, my guess is that it's these lines in the docusaurus styles (line 3019--3023) that cause the problem and that it's related to #9. The lines in question are:

@media (min-width: 1440px) {
    .container {
      max-width: var(--ifm-container-width-xl);
    }
}

Update

Based on the convo in #9, it seems that it might also trigger because of the variable name, seeing as it's reported as working on the container class name in isolation?

[Nagell]

There it is:

@media (min-width: 768px) {
	.container-fluid {
		margin-left: 2rem;
		margin-right: 2rem
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 768px
	}
}

Most probably it is this one:

@media (min-width: 768px) {
	.container {
		max-width: 768px
	}
}

but some of the rules are autogenerated by tailwind, so I cannot be sure.

[RodrigoTomeES]

I have the same issue, I am using the last version of the polyfill, v.0.1.2 and I am getting the error -> Document.querySelectorAll: '@media (min-width: 375px) ' is not a valid selector

I am using React v17.0.2 and NextJS 12.1.0.

I add the import in useEffect inside the _app file

[devknoll]

This issue should be fixed by the latest version of the polyfill (currently in alpha). Let me know if you run into any further problems and I'd be happy to reopen the issue.

Thank you!