feat: Breakpoint simulator by kof · Pull Request #5608

feat: Breakpoint simulator by kof · Pull Request #5608 · webstudio-is/webstudio

and others added 2 commits

February 5, 2026 16:26

Implements runtime CSS media rule manipulation to simulate condition-based
breakpoints (e.g., prefers-color-scheme) without changing system settings.

Features:
- Simulates media query conditions by replacing them with always-true/false queries
- Caches media rules by feature to avoid repeated DOM traversal
- Debounces rapid breakpoint changes (50ms) for performance
- Validates restoration success with warning logs
- Proper cleanup on abort signal with cache clearing
- Handles CORS-restricted stylesheets gracefully

Technical implementation:
- Uses WeakMap for automatic memory management of original media texts
- Separates immediate and debounced application logic
- Integrates with nano-states for reactive breakpoint selection
- Supports both spaced and non-spaced media query formats

This enables designers to preview different breakpoint conditions in the
builder without modifying browser/system preferences.

- Extract simulateMediaCondition, parseMediaCondition, and mediaQueryMatchesValue to @webstudio-is/css-data
- Use css-tree for robust CSS parsing instead of regex
- Fix media rule manipulation by using mediaText='all'/'not all' instead of broken appendMedium()
- Add comprehensive jsdom tests (32 tests)
- Handle nested rules in @supports, @layer, @container
- Guard against missing CSSSupportsRule/CSSLayerBlockRule in jsdom
- Simplify breakpoint-simulator.ts to thin wrapper (216 -> 45 lines)

kof mentioned this pull request

Feb 5, 2026

…ial simulation when not needed

When userSheet.render() replaces <style> textContent, the browser
destroys the old CSSOM and creates fresh unmodified CSSMediaRule
objects. The breakpoint simulator's modifications are lost because
it held references to the now-orphaned rules.

Add a MutationObserver on document.head to detect style element
changes and re-apply the simulation to the new CSSOM rules.
Also extract shared applySimulation() helper to reduce duplication.

…ints

- Add simulateConditionBreakpoints pure function in styles.ts
- Transform breakpoint options before passing to CSS engine
- Fix MediaRule #mediaType caching bug (read from options in generateRule)
- Fix compareMedia to handle simulated conditions (mediaType-only options)
- Add 'not all' to MediaRuleOptions.mediaType union
- Export MediaRuleOptions type from css-engine
- Delete old CSSOM-based breakpoint-simulator.ts
- Remove unused simulateMediaCondition/mediaQueryMatchesValue from css-data
- Add comprehensive tests for all changes
- Add css.escape polyfill for Node test environment

kof deleted the fix/breakpoint-simulator-improvements branch

February 5, 2026 21:33