ref
https://github.com/webstudio-is/webstudio/issues/3574#issuecomment-4116312483
(e.g. Taillwind's rgb(r g b / var(--tw-opacity)))
- css-engine/schema: extend ColorValue.alpha to number | VarValue
- css-engine/to-value: serialize VarValue alpha using toValue()
- css-data/parse-css-value: add parseColorWithVarAlpha using css-tree
AST substitution (no fragile string replacement); inject fallback: 1
when var has no explicit CSS fallback
- style-object-model: resolve VarValue alpha in substituteVars so the
color picker receives a number when the custom property is defined
- color-control: use VarValue.fallback for the picker when alpha is
still unresolved, falling back to 1 only as a last resort
## Summary
Upgrades colorjs.io from v0.5.x to v0.6.x and adopts the new functional
API to fix TypeScript compatibility issues and reduce bundle size.
## Breaking Changes in v0.6
This release includes two major changes from colorjs.io that required
code updates:
1. `null` instead of `NaN` for "none" values — Coordinates now use
`number | null` instead of the custom `Number` instance that previously
used `"none"` strings. This eliminates runtime casting and improves
TypeScript DX.
2. Plain numbers instead of `Number` objects — Coordinates are now plain
number primitives rather than `Number` objects with parsing metadata,
improving performance and bundle size.
## Changes Made
- Upgraded colorjs.io to v0.6.x
- Adopted functional API (`/fn` entry point) for tree-shakeable imports
and reduced bundle size
- Updated coordinate handling to use `number | null` directly instead of
custom `Number` instances with `"none"` values
- Removed runtime casting previously required for TypeScript
compatibility
- Aligned with engramma and hdr-color-input — both already use the
functional style, enabling code deduplication
## Migration Notes
See [colorjs.io v0.6.0 release
notes](https://github.com/color-js/color.js/releases/tag/v0.6.0) for
full details on the breaking changes.
Ref https://github.com/webstudio-is/webstudio/issues/3574
Here improved css value parser to parse and store any color space.
oklch(), hsl(), color() and others can be used in any color input. Color
picker converts to rgb on the fly and do not support any other color
space at the moment.
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
Regenerated keyword values data with hyphenated properties. Since the
new object is strictly typed we can use it directly without
styleConfigByName utility which I removed.
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.
## Description
This PR allows to parse the `perspective-origin` property value as
`tuple`. And added test cases for different possible values.
## Steps for reproduction
- Allows to parse `perspective-origin` values as tuples.
## Code Review
- [ ] hi @TrySound , 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
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
## Description
The current parser is not able to parse all the possible values for
`transform-origin` property. The property takes `single`, `double` and
`triple` values. So these need to be parsed as `tuples` to support
`triple` values now.
## Code Review
- [ ] hi @TrySound , 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
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
Here refactored value parser with literal parser
which can be reused in all functions, tuples and layers.
Color parser now relies on specific ast types.
Tuples are generated for all values with multiple nodes.
This all will let us build more universal parsers with less effort.
Here added new utility for builder to support parsing css fragments in
style controls like background, transition, shadows etc.
The idea is to use regular parseCss where possible and fallback to
specified property parsing.
This way we do not need to strip property name manually and can always
have shorthands expanded in result.
Also user can paste multiple properties at once like background-color
and background-image when describe gradient.
<img width="266" alt="Screenshot 2024-07-11 at 16 38 06"
src="https://github.com/webstudio-is/webstudio/assets/5635476/8d3b8454-0f8a-48b2-adbd-389a28993e3a">
## Description
Adds support for parsing `scale` css property. Will be used in bringing
support for transforms ection in style panel.
## Code Review
- [ ] hi @TrySound , 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
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [ x added tests
## Description
Parses `translate` css property and converts them into tuples. Related
to the series of PR that enables transform property #3411
## 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
- [x] made a self-review
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] added tests
## Description
Parse `transform` value into tuples. We need to use shorthand transform
property for `skew` and `rotate` to support the UX.
- **skew** doesn't have individual property yet. So need to use this as
backup.
- **rotate** doesn support setting individual `x, y, z` properties on
the long hand property like in the design. So, we are can use transforms
as backup and allow to set individual `rotateX`, `rotateY` and `rotateZ`
values.
## Code Review
- [ ] hi @TrySound , I need you to do
- detailed review (read every line)
## Before requesting a review
- [x] made a self-review
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
All value parsers can be generalized at some point to make adding new
feature easier. Here moved timing-function parser into value parser and
reused it in builder.
Ref https://github.com/webstudio-is/webstudio/issues/2647
Here improved our value parser to not output invalid type every now and
then and just represent unknown properties as unparsed. This will let us
parse it in the future without loosing anything on paste.
Here added universal support for css wide keywords. initial, inherit and
unset will be parsed the same way for layered properties and singular
properties.
It will never be part of layers and always be represented as root
keyword.
Ref https://github.com/webstudio-is/webstudio/issues/2647
Here replaced shorthand background-position with
background-position-x and background-position-y
Added shorthand expander, migration and merger
for css engine to improve browser support for offsets.
Ref https://github.com/webstudio-is/webstudio/issues/2647
Here moved the logic to parse values as layers
from parseCss to parseCssValue utilities
so we could get correct values for example when expand shorthands in
migrations or try to parse unparsed values.
fixes#3593
## Description
This PR
- drops the `parseTransition` for parsing shorthand transition property.
- allows migration of existing transition property to long-hands.
- drops parsing `transition` when added from advanced tab. Because if we
parse and add it as proper layers. It will get remigrated again every
time the app is loaded.
- Adds tests for parsing individual transition properties and even
parses timing functions as timing functions now.
- [x] there is a bug associated with expanding transitions from
shorthands #3608 . Once fixed we need to test the new `FunctionValue`
parsing behaviour.
## Steps for reproduction
- Any previous values of `transitions` should we migrated into new
approach and should be available in the style-panel for using them.
## 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:
5de6)
- [ ] 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
## Description
fixes#3567
Use long-hand properties to save `transition` values in the style-panel.
## Steps for reproduction
- Add some layers in transition panel in UI.
- Delete some layers
- Swap some layers
## TODO
- [ ] Allow `show/hide` for each layer.
- [ ] Add tests for all the layer handlers for transition.
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
@TrySound i made some refactor to use individual properties as
long-hands instead of short-hand property. I am still yet to add tests
for the new handlers, since they need to be handled in a different way
now for transitions. But you can still play around with the current
setup.
## 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
## Description
- updated mdn build
- fixed font-width
- render unset instead of var()
- skip properties with empty values
- temp rendering input instead of select
- remove the flag
- unprefix -webkit-appearance
## 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:
5de6)
- [ ] 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
## Description
Combo classes, Custom attributes, Grid, Columns, Image
## 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:
5de6)
- [ ] 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
hyphenate-style-name utility is basically oneliner but requires to
install two packages. Considering we will switch to hyphenate property
naming by default, no reason to rely on this package.
Also switched to unprefixed property in css preview and property name
tooltips.
Just shows background-clip instead of -webkit-background-clip.
Oleg Isonen