Error parsing stylesheets where media query contains classname that contains the string 'container-'

Given the following stylesheet:

@media (max-width: 500px) {
    .container {

    }
    .container_foobar {

    }
}

This gets parsed fine, without error, but the following cases

@media (max-width: 500px) {
    .container- {

    }
    .container-foobar {

    }
}

Causes the following error

As you can see, this only happens if the stylesheet contains a class name that contains the string container-, within a media query

It seems to be trying to emulate a container query for the class container-* by selecting @media (max-width: 500px) { which is not a valid dom selector. It does not fail if the class exists outside of a media query, nor does it fail if the hyphen is absent in the class name.

A point of clarification, I don’t want any emulation of container queries on the above styles There seems to be a conflict with the above styles where the polyfill thinks it needs to find an element to emulate cq.

Tested in Chrome 96.0.4664.45 (Official Build) (64-bit)

[surma]

Yeah you are right, a string match matches here that technically shouldn’t. I’ll have a think on how to solve this.

[devknoll]

This is fixed in the newest version (currently in alpha). If you have any further issues, please feel free to open a new issue.

Thank you!