admin/webstudio
1
0 Fork 0
mirror of https://github.com/webstudio-is/webstudio.git synced 2026-11-04 02:58:23 +09:00
Code Issues Packages Projects Releases Wiki Activity
Files
0.254.0
webstudio/apps/builder/package.json
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

150 lines
5.5 KiB
JSON
Raw Permalink Blame History

{
"name": "@webstudio-is/builder",
"version": "0.0.0",
"private": true,
"description": "Webstudio Builder UI as a service",
"type": "module",
"scripts": {
"prebuild": "which remix",
"build": "remix vite:build",
"css-to-ws": "NODE_OPTIONS=--conditions=webstudio css-to-ws",
"build:webflow-presets": "pnpm css-to-ws ./app/shared/copy-paste/plugin-webflow/style-presets.css ./app/shared/copy-paste/plugin-webflow/__generated__/style-presets.ts",
"build:tailwind-preflight": "tsx --conditions=webstudio ./app/shared/tailwind/preflight-bin.ts && prettier --write ./app/shared/tailwind/__generated__/preflight.ts",
"start": "remix-serve build/server/index.js",
"build:http-client": "pnpm --filter=@webstudio-is/http-client build",
"dev": "pnpm build:http-client && remix vite:dev",
"dev:auth": "pnpm build:http-client && DEBUG=OAuth2Strategy,ws:* remix vite:dev",
"typecheck": "tsgo --noEmit --emitDeclarationOnly false",
"test": "vitest run"
},
"dependencies": {
"@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
"@bomb.sh/args": "^0.3.1",
"@codemirror/autocomplete": "^6.18.6",
"@codemirror/commands": "^6.8.0",
"@codemirror/lang-css": "^6.3.1",
"@codemirror/lang-html": "^6.4.9",
"@codemirror/lang-javascript": "^6.2.3",
"@codemirror/lang-markdown": "^6.3.2",
"@codemirror/language": "^6.11.0",
"@codemirror/lint": "^6.8.5",
"@codemirror/state": "^6.5.2",
"@codemirror/view": "^6.36.4",
"@emotion/hash": "^0.9.2",
"@floating-ui/dom": "^1.6.13",
"@fontsource-variable/inter": "^5.0.20",
"@fontsource-variable/manrope": "^5.0.20",
"@fontsource/roboto-mono": "^5.0.18",
"@lexical/headless": "^0.21.0",
"@lexical/link": "^0.21.0",
"@lexical/react": "^0.21.0",
"@lexical/selection": "^0.21.0",
"@lexical/utils": "^0.21.0",
"@lezer/common": "^1.2.3",
"@lezer/css": "^1.1.11",
"@lezer/highlight": "^1.2.1",
"@nanostores/react": "^0.8.0",
"@nkzw/use-relative-time": "^1.1.0",
"@radix-ui/react-select": "^2.2.2",
"@radix-ui/react-tooltip": "^1.2.4",
"@react-aria/interactions": "^3.23.0",
"@react-aria/utils": "^3.27.0",
"@remix-run/node": "^2.16.5",
"@remix-run/react": "^2.16.5",
"@remix-run/serve": "^2.16.5",
"@remix-run/server-runtime": "^2.16.5",
"@trpc/client": "^10.45.2",
"@trpc/server": "^10.45.2",
"@tsndr/cloudflare-worker-jwt": "^2.5.3",
"@unocss/core": "66.1.2",
"@unocss/preset-legacy-compat": "66.1.2",
"@unocss/preset-wind3": "66.1.2",
"@vercel/remix": "2.15.3",
"@webstudio-is/asset-uploader": "workspace:*",
"@webstudio-is/authorization-token": "workspace:*",
"@webstudio-is/css-data": "workspace:*",
"@webstudio-is/css-engine": "workspace:*",
"@webstudio-is/dashboard": "workspace:*",
"@webstudio-is/design-system": "workspace:*",
"@webstudio-is/domain": "workspace:*",
"@webstudio-is/feature-flags": "workspace:*",
"@webstudio-is/fonts": "workspace:*",
"@webstudio-is/html-data": "workspace:*",
"@webstudio-is/http-client": "workspace:*",
"@webstudio-is/icons": "workspace:*",
"@webstudio-is/image": "workspace:*",
"@webstudio-is/postgrest": "workspace:*",
"@webstudio-is/project": "workspace:*",
"@webstudio-is/project-build": "workspace:*",
"@webstudio-is/react-sdk": "workspace:*",
"@webstudio-is/sdk": "workspace:*",
"@webstudio-is/sdk-components-animation": "workspace:*",
"@webstudio-is/sdk-components-react": "workspace:*",
"@webstudio-is/sdk-components-react-radix": "workspace:*",
"@webstudio-is/template": "workspace:*",
"@webstudio-is/trpc-interface": "workspace:*",
"args-tokenizer": "^0.3.0",
"bcp-47": "^2.1.0",
"change-case": "^5.4.4",
"colorjs.io": "^0.5.0",
"cookie": "^1.0.1",
"css-tree": "^3.1.0",
"debug": "^4.3.7",
"downshift": "^6.1.7",
"entrijs": "^0.0.11",
"fast-deep-equal": "^3.1.3",
"immer": "^10.1.1",
"immerhin": "^0.10.0",
"isbot": "^5.1.25",
"lexical": "^0.21.0",
"match-sorter": "^8.0.0",
"micromark": "^4.0.2",
"micromark-extension-gfm": "^3.0.0",
"nanoevents": "^9.1.0",
"nanoid": "^5.1.5",
"nanostores": "^0.11.3",
"parse5": "7.3.0",
"picocolors": "^1.1.1",
"pretty-bytes": "^6.1.1",
"react": "18.3.0-canary-14898b6a9-20240318",
"react-dom": "18.3.0-canary-14898b6a9-20240318",
"react-error-boundary": "^5.0.0",
"remix-auth": "^3.7.0",
"remix-auth-form": "^1.5.0",
"remix-auth-github": "^1.7.0",
"remix-auth-google": "^2.0.0",
"remix-auth-oauth2": "^2.3.0",
"shallow-equal": "^3.1.0",
"slugify": "^1.6.6",
"strip-indent": "^4.0.0",
"tiny-invariant": "^1.3.3",
"title-case": "^4.3.2",
"urlpattern-polyfill": "^10.1.0",
"use-debounce": "^10.0.4",
"valid-filename": "^4.0.0",
"warn-once": "^0.1.1",
"zod": "^3.24.2",
"zod-validation-error": "^3.4.0"
},
"devDependencies": {
"@remix-run/dev": "^2.16.5",
"@types/debug": "^4.1.12",
"@types/dom-navigation": "^1.0.5",
"@types/react": "^18.2.70",
"@types/react-dom": "^18.2.25",
"@vitest/coverage-v8": "3.1.2",
"@webstudio-is/tsconfig": "workspace:*",
"css.escape": "^1.5.1",
"fast-glob": "^3.3.2",
"html-tags": "^4.0.0",
"react-router-dom": "^6.30.0",
"react-test-renderer": "18.3.0-canary-14898b6a9-20240318",
"type-fest": "^4.37.0",
"typescript": "5.8.2",
"vite": "^6.3.4",
"vitest": "^3.1.2"
},
"sideEffects": false,
"license": "AGPL-3.0-or-later"
}
Reference in new issue View Git Blame Copy Permalink