experimental: add backface-visibility property for transforms

[JayaKrishnaNamburu]

Description

Allow to add backface-visibility property in the transforms section. hidden is not possible on the backface-visibility property. Because it takes only visible or hidden as value. The other way to simulate hidden is to reset the value to visible because that's the default value for property. But i don't think it's really needed to manage this.

Steps for reproduction

1. Click on the + icon on the transforms section.
2. Select Backface Visibility
3. This will add the property and show the value in the transform layer list.
4. Click on the layer list item and you can change the property value.

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)

[kof]

We need to think more about this

• its a bit weird having so much custom logic for backface visibility
• is hiding using a "hidden" as a value in all other cases? why not here as well? Or is it that the property gets removed while its hidden? in that case same question, why not here as well?
• since we take space for select control, why not use combobox and support other values as well like we do in such cases? I think when we designed it we weren't thinking about it
• scale shouldn't be released without the lock
• all properties miss descriptions in tooltips
• please hide the transforms behind a feature flag because its not ready

[JayaKrishnaNamburu]

since we take space for select control, why not use combobox and support other values as well like we do in such cases? I think when we designed it we weren't thinking about it

backface-visibility takes only ether visible or hidden. So not sure if combobox will be a good idea to use.
https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility#syntax
Any other value other than these two is invalid as value.

is hiding using a "hidden" as a value in all other cases? why not here as well? Or is it that the property gets removed while its hidden? in that case same question, why not here as well?

For all other cases when it is hidden like tuple or layers the toValue just don't render the property
https://github.com/webstudio-is/webstudio/blob/main/packages/css-engine/src/core/to-value.ts#L97-L110
for keyword there is no such thing yet
https://github.com/webstudio-is/webstudio/blob/main/packages/css-engine/src/core/to-value.ts#L58-L60

But some properties still set to none for hidden. But none is invalid value for the property. So, we can add hidden to keyword values too. And just don't render in that case. But, need to test so, there might be side-effects.

its a bit weird having so much custom logic for backface visibility

The actual backface-visibility is only just one file. The changes are related to showing it in the same layer stye as transforms.

[kof]

@JayaKrishnaNamburu don't we want to support global values when possible?

[JayaKrishnaNamburu]

@JayaKrishnaNamburu don't we want to support global values when possible?

Yeah true, missed it here with select 👍

[JayaKrishnaNamburu]

[kof]

works nicely