0 Fork 0

mirror of https://github.com/webstudio-is/webstudio.git synced 2026-11-04 19:20:28 +09:00

Files

T

Oleg Isonenandzehjotkah d87142965c feat: Breakpoint simulator (#5608 )

## 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>

2026-02-05 22:33:20 +01:00

bin

feat: Pseudo elements (#5572 )

2026-01-19 17:28:47 +01:00

src

feat: Breakpoint simulator (#5608 )

2026-02-05 22:33:20 +01:00

LICENSE

Change license from MIT to AGPL V3 (#1980 )

2023-07-26 01:06:21 +02:00

LICENSE-3RD-PARTY

feat: Add helper functions for Tailwind support: shorthand expansion and variable substitution (#2371 )