CSS Media Queries (screen width, prefers-color-scheme) #123

Overview#

Implement CSS Media Queries Level 4 (core subset) to support responsive design and user preferences.

Requirements#

Parsing#

• Parse @media rules with media types: screen, print, all
• Parse media features:
  • width, min-width, max-width
  • height, min-height, max-height
  • prefers-color-scheme: light | dark
  • prefers-reduced-motion: reduce | no-preference
• Parse logical operators: and, not, only, , (OR)
• Range syntax: (width >= 768px), (400px <= width <= 1200px)

Evaluation#

• Evaluate media queries against the current viewport dimensions
• Query macOS for color scheme preference (via NSApp.effectiveAppearance)
• Re-evaluate on viewport resize
• Signal style recalculation when media query results change

Integration#

• Extend @media parsing in crates/css/
• Integrate with stylesheet application in crates/style/ — only apply rules when media query matches
• Connect to viewport dimensions from crates/platform/

Acceptance Criteria#

• @media screen and @media print evaluate correctly
• @media (min-width: 768px) matches based on viewport
• @media (prefers-color-scheme: dark) detects macOS dark mode
• Logical operators and, not, only work correctly
• Comma-separated media queries act as OR
• Rules inside non-matching @media blocks are not applied
• All existing tests continue to pass
• New unit tests for parsing and evaluation