## Description
1. What is this PR about (link the issue and add a short description)
Enable using css functions in CssValueInput
closes#990
## Steps for reproduction
Add
`blur(2px)` or
`drop-shadow(16px 16px 20px blue)` or
`blur(2px) drop-shadow(16px 16px 20px blue)` to the filter field
It should work.
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio-designer/issues/744
We are trying to co-locate data and simplify cloning/copying. Here I
migrated Breakpoints.values into Build.breakpoints.
This makes Build responsible to all data scoped to project build similar
to tree scope.
We get projectId defined for free and no need additional sql
maintenance.
Ref https://github.com/webstudio-is/webstudio-designer/issues/366
There were many unitless initial values with "px" unit. Here I extracted
all possible unit types from properties syntaxes. csstree provides a
list of unit groups which in the future will let us provide correct list
of units for css value input.
While fixing units found a lot of keywords appear from css functions
which are complex values and should be ignored. So here I changed
traversing of properties syntaxes to support only top level values and
keywords.
Mostly gone color words
```diff
-6639 lines 116 KB
+4808 lines 85.8 KB
```
See diff for more info
Ref https://github.com/webstudio-is/webstudio-designer/issues/366
Parsed initial values to get correct unit instead of px for some
properties. There is still edge case with unitless values I'm gonna fix
in another PR.
Also bumped mdn-data and removed overrides fixed on mdn side.
## Description
1. What is this PR about (link the issue and add a short description)
Do not show flex properties in the style panel when a layout is not flex
closes#687
<img width="272" alt="image"
src="https://user-images.githubusercontent.com/5077042/210067036-4571be1d-4745-48a3-be7f-45f91791a6a9.png">
Here I patched `appliesTo` of properties `alignItems`, `justifyItems`
see https://github.com/mdn/data/issues/585
## Steps for reproduction
Opens designer panel, check no flex props in display: block layout
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
ref #534
Next PR #705
Db support for ImageValue style.
Having that ImageValue can contain assets we need to transform assets to
`assetId` and back during save/load.
`zod + dataloader` is used for transform for simplicity, allows avoiding
tree traversal, and highly simplifies code.
_I want to merge it to not make one huge PR, it has no breaking changes,
just a new feature save/load support_
## Steps for reproduction
## Code Review
- [x] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- [x] hi @TrySound, I need
- detailed review (read every line)
## 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)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
The reason of use opaque types, as otherwise props like `value` reused
everywhere.
Implemented same as CssValueInputLogic - during input editing nothing
changed.
Error is shown on Enter click. Value resetted on blur.
https://github.com/webstudio-is/webstudio-designer/issues/494
This PR Renders this UI and, when adding tokens - renders CSS variables
on the canvas: It's behind a feature flag.
<img width="411" alt="Screenshot 2022-11-25 at 15 51 00"
src="https://user-images.githubusercontent.com/52824/204009859-81ed72c4-e758-4973-be49-c8c65e6b4661.png">
## Before requesting a review
- [ ] if the PR is WIP - use draft mode
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
- [ ] what kind of review is needed?
- [ ] conceptual
- [ ] detailed
- [ ] with testing
## Test cases
- [ ] step by step interaction description and what is expected to
happen
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Co-authored-by: istarkov <istarkov@gmail.com>
- [x] - Image optimization component moved into standalone package
- [x] - generate-arg-types moved into standalone package - one issue
with current yarn https://github.com/yarnpkg/yarn/issues/4964 (you need
to delete root node_modules, then yarn and yarn build to make
generate-arg-types to work)
- [x] - move json into `__generated__` folder, (allow import json from
__generated__ folders only)
- [x] - Icons moved all gen into `__generated__`
- [x] - css-data generated content moved to `__generated__`
Ivan Starkov
