mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-10-24 12:07:17 +09:00
Oleg Isonen
ab5717c9cf
## Summary - Make every CSS property in the current MDN dataset available in the Advanced style workflow, regardless of standards status. - Mark experimental, nonstandard, and obsolete properties with a yellow warning icon, status-specific tooltip, and MDN link. - Add complete CSS anchor-positioning property and value support. - Update `mdn-data` from 2.28.0 to 2.33.0 and `css-tree` from 3.1.0 to 3.2.1. ## Root cause Webstudio generated its supported property list from MDN data but filtered by status and then manually allowed a few experimental and nonstandard entries. A property could therefore exist in the installed MDN package without being exposed by the Builder. Runtime validation had a separate grammar gap. CSS-tree 3.2.1 now includes the anchor functions and alignment values, but its bundled data predates the current `position-anchor: normal | match-parent` additions. ## Implementation - Remove status-based property filtering and the nonstandard-property allowlist. - Generate one property-to-status map for 486 standard, 40 experimental, 119 nonstandard, and 15 obsolete properties. - Show status-specific browser-compatibility guidance for every non-standard status. Active declarations keep the warning after the value with 3px left spacing. - Infer MDN links from existing property metadata and fall back to MDN search for entries without a direct URL. - Preserve known vendor prefixes from the generated property inventory instead of maintaining a prefix allowlist. - Generate WebKit text fill/stroke longhands directly from MDN instead of preserving them through parser exceptions. - Preserve unsupported initial-value shapes as unparsed CSS rather than excluding their properties. - Use CSS-tree 3.2.1's native anchor-function and alignment grammars. Keep one narrow extension for the current `position-anchor` keywords missing from its bundled MDN data. - Generate recursively flattened shorthand longhands and initial values from MDN. - Expand syntax-defined shorthands generically from CSS-tree's matched property captures, including function-valued components. - Decline generic expansion when CSS-tree and MDN disagree about the longhand set or a longhand repeats. - Update the font grammar reference and CSS math validation for CSS-tree 3.2.1 compatibility. - Regenerate CSS metadata and property-variable fixtures. ## Checklist - [x] Include MDN properties regardless of status. - [x] Generate status metadata for standard, experimental, nonstandard, and obsolete properties. - [x] Show warning icons in Add styles results and active declarations. - [x] Add status-specific consequences and MDN links. - [x] Preserve generated vendor-prefixed properties during CSS import. - [x] Generate WebKit text fill/stroke longhands without parser exceptions. - [x] Support `anchor()`, `anchor-size()`, and `anchor-center`. - [x] Support current `position-anchor` keywords. - [x] Expand syntax-compatible shorthands through generic MDN metadata and CSS-tree captures. - [x] Cover ordered optional, unordered, slash-separated, function-valued, omitted, CSS-wide, variable, invalid, and incompatible-data cases. - [x] Verify new status, warning, prefix, and shorthand tests fail without their implementations and pass when restored. - [x] Update to CSS-tree 3.2.1. - [x] Regenerate CSS metadata and property-variable fixtures. - [x] Review documentation impact; no authoritative Builder documentation lists individual supported CSS properties, so no update is needed. - [x] Review fixture impact; 668 fixtures and 2,030 valid cases were regenerated with zero unsupported. ## Verification - `pnpm --filter @webstudio-is/css-data test` — 4,618 passed, 1 skipped. - Builder CSS editor and property-status tests — 25 passed. - CSS data, CSS engine, Project Build, and Builder typechecks passed. - Lint, formatting, repeated regeneration, and diff checks passed. ## Known limitation This change covers CSS declarations and values. It does not add a dedicated Builder editor for the `@position-try` at-rule. Closes #6162
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.