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

[jakob-metro]

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.

[mherchel]

I'm also running into this issue trying to implement this using USWDS .

[aKzenT]

@surma Any updates on this? We have a large code base with many "container" classes and this issue is currently preventing us from using the library.

[jakehamilton]

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

I took a look and I think this is the line being referenced: https://github.com/GoogleChromeLabs/container-query-polyfill/blob/main/src/engine.ts#L291

It is a bit awkward since the whole block is being searched. Without constructing an AST it is hard to determine if this is a part of a selector or a rule.

Maybe the simplest option for now would be to add a way to disable the "content-" syntax?

[ZhengRui]

I am facing the same issue right now, is there any solution to this?

[naarl]

I am facing the same issue too, in a project using Angular's Material Design project because there is a CSS rule named "mat-checkbox-inner-container"

[RodrigoTomeES]

@surma do you see the pr #33 that solve this issue?

[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!