feat: add support for sorting @container queries#1008
Merged
layershifter merged 13 commits intoJul 3, 2026
Conversation
Gate media/container comparison by bucket so "@media" and "@container" sheets stay separated in bucket order (m before c), matching the runtime DOM insertion order in findInsertionPoint. Keeps the existing media sort behavior unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…b.com/Yakubko/griffel into Support-sorting-for-container-queries
Container-query sorting previously reused bucket "c", which other packages built on Griffel may also write into. Route Griffel's sorted container rules (bucket name + metadata key) to a new dedicated "x" bucket to avoid that conflict, while keeping "c" recognized for backward-compatible rehydration of legacy SSR output and for other packages. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…-container-queries
layershifter
reviewed
Jul 1, 2026
layershifter
reviewed
Jul 1, 2026
layershifter
reviewed
Jul 1, 2026
layershifter
reviewed
Jul 1, 2026
layershifter
reviewed
Jul 1, 2026
layershifter
reviewed
Jul 1, 2026
layershifter
reviewed
Jul 1, 2026
layershifter
reviewed
Jul 1, 2026
layershifter
reviewed
Jul 1, 2026
layershifter
reviewed
Jul 1, 2026
layershifter
reviewed
Jul 1, 2026
layershifter
reviewed
Jul 2, 2026
d104e74 to
8a92e5a
Compare
Contributor
📊 Bundle size reportUnchanged fixtures
|
layershifter
approved these changes
Jul 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

Summary
Griffel sorts
@mediaqueries so conditional rules cascade deterministically.@containerqueries didn't get this — they were ordered only by insertion order. This PR brings@containerqueries to parity: they're now ordered by a configurable comparator at both runtime and build time.What changed
@griffel/core: New dedicated x bucket for sorted@containerrules (the old c bucket stays for backward compatibility). New compareContainerQueries option on createDOMRenderer (defaults to compareMediaQueries). Conditions are stored on a new data-container attribute, since container queries have no native <style media> equivalent.@griffel/utils(new package): Adds compareCSSQueries, an optional comparator that orders@media/@containerconditions numerically by min-width/max-width instead of lexicographically.@griffel/react: renderToStyleElements sorts conditional sheets in both the m and x buckets.@griffel/shadow-dom: Adopted style sheets in the x bucket are ordered via compareContainerQueries.@griffel/webpack-plugin/@griffel/webpack-extraction-plugin: New compareContainerQueries plugin option (defaults to compareMediaQueries).Notes
Tests & docs
Added unit, browser, and SSR tests, a ContainerQueries Storybook story, and updated docs and READMEs.