Closes#6470Closes#4806Closes#4392Closes#4804Closes#4616Closes#4863Closes#4912
Ref #1798
Advanced styles now uses a CSS block editor in the panel and a centered
editor. Local declarations are editable. Cascaded or inherited, preset,
and global declarations are grouped below them and are read-only. The
editor suggests properties and values, highlights search matches, shows
source details and color swatches, and previews valid local edits on the
canvas.
Keyframe CSS declarations use the reusable local block editor. The old
Add styles field, property-row editor, declaration menu actions, and
Navigator CSS Preview are removed.
### Delivery checklist
- [x] Edit and validate local CSS declarations, including shorthand
display and likely typo hints
- [x] Show other style sources with source colors, tooltips, and
read-only protection
- [x] Add search navigation, color swatches, and the centered editor
shortcut
- [x] Reuse the block editor for animation keyframes and preserve
transform controls
- [x] Preserve uploaded background layers when editing gradients or
reordering layers
- [x] Remove superseded editor and Navigator UI
- [x] Review and update the Style panel and Navigator guides
- [x] Remove the outdated CSS Preview sentence from the Builder anatomy
guide
- [x] Rename the stale Code view test title to match the Advanced editor
- [x] Regenerate fixtures and keep the Vercel build manifest through
regeneration
- [x] Resolve review threads and verify required CI
### Implementation notes
Styles remain stored as individual properties; equivalent shorthand text
is reconstructed for editing. Unknown property names become CSS
variables unless they resemble a known property, in which case the
editor warns and skips the typo. Editing is limited to the selected
local style block; read-only source groups remain visible for reference.
Existing uploaded image and hidden background layers are retained when
neighboring layers change. No schema migration is needed.
The Vercel manifest setting lives in the React Router template, so
fixture regeneration produces a clean worktree. The shared template also
generates the setting for the Docker fixture.
### Verification
On commit `7fb44d358`, both fixture checks, `check-size`, the main
workflow, all ten end-to-end shards, and the label-approved visual
comparison passed. The fixture regeneration, Vercel build, Builder
typecheck, focused lint, and formatting checks passed locally before the
final documentation and test-title cleanup; `git diff --check` passed
afterward. No local tests were run for the final cleanup, which changes
no behavior.
## Description
ref #877 - the ability to parse multiple gradient layers from Figma
closes#1255 - now background added at the top
fixes css value input invalid input now shows as invalid
## Steps for reproduction
Copy some background from figma like
```
background: linear-gradient(180deg, #11181C 0%, rgba(17, 24, 28, 0) 36.09%), none, linear-gradient(180deg, rgba(230, 60, 254, 0.33) 0%, rgba(255, 174, 60, 0) 100%), radial-gradient(54.1% 95.83% at 100% 100%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(122.33deg, rgba(74, 78, 250, 0.2) 0%, rgba(0, 0, 0, 0) 69.38%), radial-gradient(92.26% 201.29% at 98.6% 10.65%, rgba(255, 174, 60, 0.3) 0%, rgba(227, 53, 255, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, radial-gradient(84.64% 267.51% at 10.07% 81.45%, rgba(53, 255, 182, 0.2) 0%, rgba(74, 78, 250, 0.2) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, #EBFFFC;
```
Open any layer paste it into the code, and click enter or blur.
See layers added. BGColor has changed if set.
## Code Review
- [x] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Switching display from flex on block caused error in input field
We were not able to parse display block etc
As this is not fixed for display props.
```
setProperty should be called with a style object, string is deprecated
```
So we got that "parsed not valid behavior" which we decided to be
invalid.
CSSValueInput used useEffect and executed onChange etc events on its
own. What in case of any small changes caused loops and strange
behavior. Now should execute everything only as a result of user input.
`parseCssValue` - now stupid parse CSS value and someday will be used
only inside text-control.
setProperty - now accepts StyleValue, the string param is deprecated,
warning set.
CSSValueInput now not update styles during editing.
unit menu now not hiding during formulas etc
fixed bug with updating style on newly created items
fixed scrub bugs with unsubscribing
css-tree Adds 52101 gzip bytes.
A lot of size is coming from here
https://github.com/csstree/csstree/blob/97d7f3b95a3efd8f431af39986acc149dceefa59/lib/data.js
more than 1/3 of `esm` size (20+kb gz), and most huge are properties
json we need and use.
Doesn't look tree-shakeable, anyway can be loaded lazily as until
editing we don't need to validate CSS vars.
Investigating:
- [x] - Changing any style Combobox with mouse cause multiple value
updates to previous and current value (was a blur event issue)
Oleg Isonen
