mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-03 18:48:06 +09:00
Oleg Isonenandzehjotkah
d87142965c
## Problem
When defining CSS variables with different values for condition-based
breakpoints (e.g., `prefers-color-scheme:dark` vs
`prefers-color-scheme:light`), designers had no way to preview these
variations without manually changing system preferences.
Example:
```css
:root {
--primary-color: #000;
--background: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #fff;
--background: #000;
}
}
```
Previously, testing dark mode required switching OS settings back and
forth.
## Solution
Implements runtime CSS media rule manipulation to simulate
condition-based breakpoints without changing system settings. When a
designer selects a condition-based breakpoint, the simulator dynamically
modifies CSS media rules:
- Matching rules (e.g., `prefers-color-scheme:dark` when dark is
selected) → replaced with `(min-width: 0px)` (always true)
- Non-matching rules → appended with `(max-width: 0px)` (always false)
- Original media queries are stored and restored when switching away
## Features
**Core Functionality:**
- Simulates media query conditions by replacing them with
always-true/false queries
- Supports all condition-based media features (`prefers-color-scheme`,
`prefers-reduced-motion`, etc.)
- Handles both spaced and non-spaced formats
**Performance:**
- Caches media rules by feature to avoid repeated DOM traversal
- Debounces rapid breakpoint changes (50ms)
- Uses WeakMap for automatic memory management
**Robustness:**
- Validates restoration success with warning logs
- Handles CORS-restricted stylesheets gracefully
- Proper cleanup on abort signal with cache clearing
## Technical Implementation
**Key Functions:**
- `parseCondition()` - Parses condition strings
- `getMediaRulesForFeature()` - Caches and retrieves relevant media
rules
- `applySimulation()` - Debounced application of media rule
modifications
- `restoreAllRules()` - Restores original media queries
- `subscribeBreakpointSimulator()` - Integrates with nano-states and
lifecycle
**Integration:**
- Subscribes to `$selectedBreakpoint` nano-state
- Runs in design mode only
- Cleanup via AbortSignal
## Testing Instructions
**Setup:**
1. Create CSS variables with condition-based values
2. Configure breakpoints with conditions (e.g.,
`prefers-color-scheme:light`, `prefers-color-scheme:dark`)
**Test Cases:**
- Select condition-based breakpoint → verify canvas reflects correct
theme without changing OS settings
- Rapidly switch between breakpoints → verify smooth transitions
- Switch to width-based breakpoint → verify original media queries are
restored
- Check console for errors (should only see warnings for legitimate
issues)
## Impact
Designers can now preview dark/light themes and other condition-based
styles instantly without changing system settings, significantly
improving the workflow for building modern, accessible interfaces.
---------
Co-authored-by: zehjotkah <111518041+zehjotkah@users.noreply.github.com>
CSS Engine
This package is designed to render effectively CSS in the format produced by Webstudio Builder. It is using CSS variables for all dynamic parts and can render at runtime as for usage on Live Canvas in the Builder as well as for extracting a fully static style sheet for production.