## Description
Multiple style elements are easier to differentiate when they have some
hint on the purpose
## Steps for reproduction
1. select style element on canvas, see data-webstudio attribute with a
name
## Code Review
- [ ] hi @TrySound , I need you to do
- conceptual review (architecture, feature-correctness)
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [x] 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
pnpm prevents access to jest and @types/jest from packages so we need to
explicitly install it. Though @types/jest is not officially maintained
and often late for months with new major which bloats node_modules with
two versions of jest transitives.
Here is alternative way to use official types. The only downside is
complains these types has less descriptions.
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.
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)
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>
Here "include" often have list of extensions and forgotten .tsx so such
modules are left unchecked. Replaced with just "src" which consider all
typescript extensions.
Ideally stop using tsc to build artifacts, switch to esbuild and remove
complex configuration from all tsconfig.json.
Oleg Isonen
