fix: preserve exclusive native media query bounds

[maxlapides]

Fixes #674.

At exactly 402 points, (width > 402px) and (width < 402px) both incorrectly applied their native styles. The compiler discarded the distinction between exclusive and inclusive operators, and the native resolver treated every bound inclusively.

Preserve exclusivity as metadata alongside each width bound and reject equality for exclusive bounds during native resolution. Bounds retain their original values, including fractions. Exclusive bounds also register dimension dependencies, including width > 0px, so cached styles update when the viewport changes.

Regression coverage

The tests compile CSS into native JavaScript artifacts for iOS and Android and resolve them through the real native style store. They verify padding below, at, and above both 402pt and 402.5pt boundaries for >, >=, <, and <=, using quarter-point viewport steps. The eight exclusive comparison cases failed before the fix and pass afterward. Additional cases preserve legacy min-width/max-width inclusivity and verify cache invalidation across an exclusive zero bound.

All 22 focused cases, 193 native tests, and 30 web tests pass. Package build, source/test/public type checks, lint, formatting, and circular dependency checks also pass. Device UI and browser E2E tests were not run.

Summary by CodeRabbit

• Bug Fixes

  • Fixed native media query handling for strict > and < width comparisons.
  • Styles now correctly exclude matching breakpoint widths without rounding fractional screen dimensions.
  • Improved responsive style selection at exact breakpoint boundaries across iOS and Android.

• Tests

  • Added coverage for inclusive and exclusive media query operators at integer and fractional widths.

• Documentation

  • Updated CSS processing documentation to describe exclusive native width bounds.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: fc41fdfd-c2b2-422d-888f-d452d8ba45f8

📥 Commits

Reviewing files that changed from the base of the PR and between 44388b4 and b854a0b.

📒 Files selected for processing (7)

• CONTEXT.md
• packages/uniwind/src/bundler/css-processor/addMetaToStylesTemplate.ts
• packages/uniwind/src/bundler/css-processor/mq.ts
• packages/uniwind/src/bundler/css-processor/types.ts
• packages/uniwind/src/core/native/store.ts
• packages/uniwind/src/core/types.ts
• packages/uniwind/tests/native/styles-parsing/media-queries.test.ts

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.

---

📝 Walkthrough

Walkthrough

The change preserves > and < width-bound exclusivity through media-query compilation, style metadata, and native breakpoint filtering. New iOS and Android tests cover inclusive, exclusive, integer, and fractional boundaries.

Changes

Media-query width bounds

Layer / File(s)	Summary
Compile exclusive width bounds packages/uniwind/src/bundler/css-processor/mq.ts, packages/uniwind/src/bundler/css-processor/types.ts	The resolver records exclusive flags for > and < bounds and defaults both flags to false.
Propagate bounds to native filtering packages/uniwind/src/core/types.ts, packages/uniwind/src/bundler/css-processor/addMetaToStylesTemplate.ts, packages/uniwind/src/core/native/store.ts	Style metadata carries the exclusivity flags, and native filtering excludes equal widths when the corresponding flag is enabled.
Validate boundary behavior packages/uniwind/tests/native/styles-parsing/media-queries.test.ts, CONTEXT.md	Tests cover iOS and Android behavior for all four comparison operators at integer and fractional boundaries. The CSS processing documentation describes the preserved exclusivity flags.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to b854a

Native width media queries now correctly distinguish strict and inclusive bounds, including fractional widths, with regression coverage for boundary resolution and viewport-change updates. No current merge-blocking risk remains.

Suggested reviewers: brentlok

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: preserving exclusive native media query bounds.
Linked Issues check	✅ Passed	The changes address issue [#674] by preserving inclusive and exclusive width operators, retaining fractional bounds, applying exclusive comparisons during native resolution, registering dimension depe…
Out of Scope Changes check	✅ Passed	All changes support the linked issue objectives. The implementation, type updates, native resolver changes, regression tests, and related documentation are in scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 6…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[greptile-apps]

Greptile Summary

This PR preserves exclusive native width-query semantics throughout compilation and runtime resolution.

• Records whether minimum and maximum width bounds are exclusive.
• Excludes equality for native > and < comparisons without rounding fractional bounds.
• Registers dimension dependencies for exclusive bounds, including the zero-bound case, so cached styles are invalidated.
• Adds iOS and Android regression coverage for inclusive, exclusive, integer, fractional, and cache-invalidation cases.
• Updates the architecture context to document the compiler/runtime contract.

Confidence Score: 5/5

The PR appears safe to merge; the compiler metadata, runtime matching, dependency invalidation, and regression coverage are aligned.

No actionable failure remains after tracing exclusive bounds from parsing through generated metadata, native resolution, and dimension-driven cache invalidation.

Important Files Changed

Filename	Overview
packages/uniwind/src/bundler/css-processor/mq.ts	Preserves the distinction between strict and inclusive width comparison operators while initializing safe defaults.
packages/uniwind/src/bundler/css-processor/addMetaToStylesTemplate.ts	Serializes exclusivity metadata and records dimension dependencies for every exclusive bound.
packages/uniwind/src/core/native/store.ts	Rejects viewport equality when the corresponding compiled width bound is exclusive.
packages/uniwind/tests/native/styles-parsing/media-queries.test.ts	Adds native end-to-end regression coverage across platforms, comparison operators, fractional boundaries, and cache invalidation.
packages/uniwind/src/core/types.ts	Aligns the internal runtime Style contract with the newly generated bound metadata.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  A[CSS width query] --> B[Parse numeric bound and operator]
  B --> C[Emit min/max width plus exclusivity flag]
  C --> D[Record Dimensions dependency]
  C --> E[Native style store]
  E --> F{Viewport satisfies bound?}
  F -->|Yes| G[Apply native style]
  F -->|Equality at exclusive bound| H[Reject native style]
  I[Viewport change] --> J[Dimensions notification]
  J --> K[Invalidate cached result]
  K --> E

Loading

_{Reviews (1): Last reviewed commit: "fix: preserve exclusive native media que..." | Re-trigger Greptile}