Skip to content

feat: add support for sorting @container queries#1008

Merged
layershifter merged 13 commits into
microsoft:mainfrom
Yakubko:Support-sorting-for-container-queries
Jul 3, 2026
Merged

feat: add support for sorting @container queries#1008
layershifter merged 13 commits into
microsoft:mainfrom
Yakubko:Support-sorting-for-container-queries

Conversation

@Yakubko

@Yakubko Yakubko commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

Summary
Griffel sorts @media queries so conditional rules cascade deterministically. @container queries didn't get this — they were ordered only by insertion order. This PR brings @container queries 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 @container rules (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/@container conditions 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

  • Default behavior is unchanged — compareContainerQueries defaults to compareMediaQueries. Pass compareCSSQueries to opt into numeric ordering.
  • Container rules now land in the new x bucket instead of c (which remains supported).

Tests & docs
Added unit, browser, and SSR tests, a ContainerQueries Storybook story, and updated docs and READMEs.

Jakub Miskech and others added 6 commits June 24, 2026 10:09
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>
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>
@Yakubko Yakubko requested a review from a team as a code owner June 30, 2026 10:00
Comment thread packages/core/src/renderer/getStyleSheetForBucket.ts Outdated
Comment thread packages/core/src/renderer/getStyleSheetForBucket.ts Outdated
Comment thread packages/core/src/renderer/getStyleSheetForBucket.ts Outdated
Comment thread packages/core/src/renderer/getStyleSheetForBucket.ts Outdated
Comment thread packages/react/src/renderToStyleElements-node.test.tsx
Comment thread packages/react/src/renderToStyleElements-node.test.tsx
Comment thread packages/react/src/renderToStyleElements.ts Outdated
Comment thread packages/utils/package.json Outdated
Comment thread packages/utils/project.json Outdated
Comment thread packages/utils/README.md Outdated
Comment thread packages/webpack-plugin/src/utils/sortCSSRules.mts Outdated
Comment thread packages/core/src/renderer/getStyleSheetForBucket.ts
@layershifter layershifter changed the title Add support for sorting @container queries feat: add support for sorting @container queries Jul 3, 2026
@layershifter layershifter force-pushed the Support-sorting-for-container-queries branch from d104e74 to 8a92e5a Compare July 3, 2026 08:54
@github-actions

github-actions Bot commented Jul 3, 2026

Copy link
Copy Markdown
Contributor

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
@griffel/core
makeStyles (runtime)
25.359 kB
8.948 kB
25.425 kB
8.959 kB
66 B
11 B
@griffel/react
__styles
4.324 kB
1.862 kB
4.568 kB
1.972 kB
244 B
110 B
@griffel/react
makeResetStyles (runtime)
20.25 kB
7.576 kB
20.507 kB
7.682 kB
257 B
106 B
@griffel/react
makeStaticStyles (runtime)
9.898 kB
4.266 kB
10.149 kB
4.378 kB
251 B
112 B
@griffel/react
makeStyles (runtime)
28.031 kB
9.956 kB
28.363 kB
10.064 kB
332 B
108 B
@griffel/shadow-dom
createShadowDOMRenderer
4.246 kB
1.726 kB
4.786 kB
1.927 kB
540 B
201 B
@griffel/sort-css-queries
compareCSSQueries
0 B
0 B
353 B
219 B
🆕 New entry
Unchanged fixtures
Package & Exports Size (minified/GZIP)
@griffel/core
__resetStyles (makeResetStyles)
271 B
196 B
@griffel/core
__styles (makeStyles)
1.694 kB
815 B
@griffel/core
makeResetStyles (runtime)
17.583 kB
6.53 kB
@griffel/core
mergeClasses
1.829 kB
879 B
@griffel/core
shorthands.padding()
4.672 kB
1.519 kB
@griffel/react
__css
1.708 kB
804 B
🤖 This report was generated against 27d5bbbfed094468d2b85f3204c054e944651e74

@layershifter layershifter merged commit fd8b4ef into microsoft:main Jul 3, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants