This PR replaces the limited "States" dropdown in the Style Panel with a
flexible input field that supports any CSS selector, pseudo-class, or
pseudo-element. This allows for advanced styling capabilities such as
`:has()`, `:focus-visible`, and complex combinators.
## Key Changes
### Flexible Selector Input
- Replaced the fixed "States" category list with a free-form input
field.
- Supports **any** valid CSS selector (e.g., `:hover`, `::before`,
`:has(:checked)`).
- Validation logic ensures only valid selectors are accepted (triggered
on `Enter` key).
## How to Test
1. Select an element and open the Style Panel.
2. Click on the Local style source or a Token.
3. In the input field (bottom of menu), type a selector like `:hover` or
`:first-child` and press Enter.
4. Verify the selector is added and selected.
---------
Co-authored-by: zehjotkah <111518041+zehjotkah@users.noreply.github.com>
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] 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
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
properties data are now more type safe and can accept any CssProperty
name though in case of custom properties (--string) will return
undefined.
This also removes a lot of `keyof typeof properties` castings.
Migrated two more sections and made ComputedStyleDecl['property'] more
strict instead of just a string, now can get rid from `as StyleProperty`
casting all over the codebase.
Ref https://github.com/webstudio-is/webstudio/issues/3399
Here added support for parsing var() when paste styles and fixed cyclic
dependency when use the same var() a few times like `background-image:
var(--gradient), var(--gradient)`.
Ref https://github.com/webstudio-is/webstudio/issues/3399
Here added support for computing css variables inside layers and tuples
to support cases like
```css
transition-timing-function: var(--ease), var(--ease-in);
```
Ref https://github.com/webstudio-is/webstudio/issues/3399
Initially css variable fallback was defined in schema as array though
it's actually a single value by spec and may contain commas. We don't
have css variables in data yet so should be safe to change schema before
too late.
Color control can be a thin wrapper around color picker
- fixed "inherit" keyword support
- moved intermediate value into color picker
- merge highlight and change low level events
Ref https://github.com/webstudio-is/webstudio/issues/1536https://github.com/webstudio-is/webstudio/issues/3399
Here added very basic setup for style object model. Computed all
normalized data with "computed" store.
It will let us to integrate style object model
into a few controls and test new engine.
Instance selector now is an input for getComputedStyleDecl to allow
looking into parent styles, like we do for flex child.
Here reduced the work in every cascade value computation by storing all
data in normalized way.
These normalized maps can be created incrementally later.
Ref https://github.com/webstudio-is/webstudio/issues/1536
Here improved sorting declared values and computing cascade value. Added
support for breakpoints and states. Introduced specificity rules to sort
by State-Breakpoint-StyleSource without complicated logic.
Ref https://github.com/webstudio-is/webstudio/issues/1536
Here added support for css custom properties in style object model.
Added guaranteed-invalid value to schema to represent initial value of
custom properties.
Here slightly changed how color: currentcolor is treated. Before on
color property inherited value was used. Though this didn't handle the
case when inherited value is also currentcolor. Here found note in
another spec which says color: currentcolor should be interpreted same
as inherit keyword.
Ref https://github.com/webstudio-is/webstudio/issues/1536
Here added style object model basic functionality with inheritance and a
few keywords like "initial", "inherit" and "unset".
The algorithm is following css spec and will get more features in next
PRs.
