Skip to content

Container queries parse but conditions never match #282

Description

@XDLCS

Summary

CSS container queries parse but never activate: @container conditions always evaluate false, so the inner rules never apply. CSS.supports() reports container query units/features as supported, and the stylesheet parses without error — only the condition evaluation is dead.

Environment

  • moli 1.0.6, also verified on local build a1385e0 (main, 2026-08-30)
  • Chromium baseline: chrome-headless-shell 131.0.6778.204, same page

Reproduction

<style>
#cqbox { container-type: inline-size; width: 300px; }
.inner { color: blue; }
@container (min-width: 200px) { .inner { color: red; } }
</style>
<div id="cqbox"><div class="inner" id="cqinner">t</div></div>

Observed (moli)

getComputedStyle(document.getElementById('cqinner')).colorrgb(0, 0, 255) (base rule only; the @container block never matches, even though the container is 300px wide)

Expected (Chromium 131)

rgb(255, 0, 0) (container condition matches, inner rule applies)

Impact

Any page using container queries (increasingly common in modern responsive design) renders with wrong layout/colors in moli. Parsing-level support makes this especially misleading: no CSS error is surfaced, styles silently don't apply.

Verified on a1385e0: condition still never matches.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions