Oleg Isonen 29f3839456 Make css helper tool for collapsing prevention on canvas really smart (#1059) ...

Closes https://github.com/webstudio-is/webstudio-builder/issues/604

## Description

-  User can now override helper definitions on canvas
- only boxes that would collapse without helper -  receive helper
- helper is removed when any CSS property is changed on that instance
that would prevent collapsing, so that helper can be removed
- Helper doesn't show on the preview or publish
- Helper goes away if an instance inserted as a child
- There is no need to set padding-right or padding-bottom if you just
need a small div with a defined or layout-based size, as soon as div is
not collapsing, helper is not applied

More: padding will be only added on the side that would collapse
otherwise.
For example when I add a div, it is a block element, it grows
automatically full width but has 0 height, in this case spacing heloper
with padidng-top: 50px will apply, so that it doesn't collapse.
If user sets height: 100px or does anything that would give it a height
- we remove the helper padding right away, so user can actually see the
height they set

In other words we prevent elements from collapsing when they have 0
height or width by making them non-zero on canvas, but then we remove
those padding universally without shortlists as soon as element doesn't
collapse.

## Steps for reproduction

1. add a box
2. set padding-top
3. see it applies on canvas

1. add a box
2. set width
3. see the exact width on canvas, no helper padding


1. add a box
2. set height
3. see the exact height on canvas, no helper padding

## Code Review

- [ ] hi @TrySound , I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)

## 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-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory

2023-02-17 20:46:12 +01:00

..

core

Make css helper tool for collapsing prevention on canvas really smart (#1059)

2023-02-17 20:46:12 +01:00

index.ts

move react hooks from css engine to shared styles, it's too tight with app

2022-11-16 17:38:01 +01:00