experimental: add backface-visibility property for transforms (#3802)

## 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

- [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)

apps/builder/app/builder/features/style-panel/sections/transforms/transform-backface-visibility.tsx

@@ -0,0 +1,40 @@
+import { type StyleProperty } from "@webstudio-is/css-engine";
+import { Grid, theme } from "@webstudio-is/design-system";
+import { TextControl } from "../../controls";
+import { PropertyName } from "../../shared/property-name";
+import { styleConfigByName } from "../../shared/configs";
+import type { SectionProps } from "../shared/section";
+
+const property: StyleProperty = "backfaceVisibility";
+
+export const BackfaceVisibility = (props: SectionProps) => {
+  const { currentStyle, setProperty, deleteProperty } = props;
+  const value = currentStyle[property]?.local;
+  const { label } = styleConfigByName(property);
+
+  if (value?.type !== "keyword") {
+    return;
+  }
+
+  return (
+    <Grid
+      css={{
+        px: theme.spacing[9],
+        gridTemplateColumns: `2fr 1fr`,
+      }}
+    >
+      <PropertyName
+        label={label}
+        properties={[property]}
+        style={currentStyle}
+        onReset={() => deleteProperty(property)}
+      />
+      <TextControl
+        property={property}
+        currentStyle={currentStyle}
+        setProperty={setProperty}
+        deleteProperty={deleteProperty}
+      />
+    </Grid>
+  );
+};

apps/builder/app/builder/features/style-panel/sections/transforms/transform-utils.ts

@@ -8,7 +8,7 @@ import {
 } from "@webstudio-is/css-engine";
 import type { DeleteProperty, SetProperty } from "../../shared/use-style-data";
 import type { StyleInfo } from "../../shared/style-info";
-import type { TransformPanel } from "./transforms";
+import type { TransformPanel, transformPanelDropdown } from "./transforms";
 
 export type TransformPanelProps = {
   currentStyle: StyleInfo;
@@ -81,7 +81,7 @@ export const getHumanizedTextFromTransformLayer = (
 };
 
 export const addDefaultsForTransormSection = (props: {
-  panel: TransformPanel;
+  panel: (typeof transformPanelDropdown)[number];
   currentStyle: StyleInfo;
   setProperty: SetProperty;
 }) => {
@@ -98,6 +98,13 @@ export const addDefaultsForTransormSection = (props: {
       return setProperty("scale")(scale);
     }
 
+    case "backfaceVisibility": {
+      return setProperty("backfaceVisibility")({
+        type: "keyword",
+        value: "visible",
+      });
+    }
+
     case "skew":
     case "rotate": {
       const value = currentStyle["transform"]?.value;
@@ -127,14 +134,23 @@ export const addDefaultsForTransormSection = (props: {
 
 export const isTransformPanelPropertyUsed = (params: {
   currentStyle: StyleInfo;
-  panel: TransformPanel;
+  panel: (typeof transformPanelDropdown)[number];
 }): boolean => {
   const { currentStyle, panel } = params;
   switch (panel) {
     case "scale":
     case "translate":
       return currentStyle[panel]?.value.type === "tuple";
 
+    /*
+      backface-visibility is a keyword property. And it's default value is visible.
+      It's not inherited. So, we need to check with the local value to enable/disable in the dropdown.
+      If we check with the computed value, it will always return true.
+      https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility#formal_definition
+    */
+    case "backfaceVisibility":
+      return currentStyle["backfaceVisibility"]?.local?.type === "keyword";
+
     case "rotate": {
       const rotate = currentStyle["transform"]?.value;
       return (

apps/builder/app/builder/features/style-panel/sections/transforms/transforms.tsx

@@ -38,6 +38,7 @@ import { TranslatePanelContent } from "./transform-translate";
 import { ScalePanelContent } from "./transform-scale";
 import { RotatePanelContent } from "./transform-rotate";
 import { SkewPanelContent } from "./transform-skew";
+import { BackfaceVisibility } from "./transform-backface-visibility";
 import { humanizeString } from "~/shared/string-utils";
 import { getStyleSource } from "../../shared/style-info";
 import { PropertyName } from "../../shared/property-name";
@@ -51,13 +52,19 @@ export const transformPanels = [
   "skew",
 ] as const;
 
+export const transformPanelDropdown = [
+  ...transformPanels,
+  "backfaceVisibility",
+] as const;
+
 export type TransformPanel = (typeof transformPanels)[number];
 
 const label = "Transforms";
 export const properties = [
   "translate",
   "scale",
   "transform",
+  "backfaceVisibility",
 ] satisfies Array<StyleProperty>;
 
 export const Section = (props: SectionProps) => {
@@ -71,6 +78,9 @@ export const Section = (props: SectionProps) => {
   const translateStyleSource = getStyleSource(currentStyle["translate"]);
   const scaleStyleSource = getStyleSource(currentStyle["scale"]);
   const rotateAndSkewStyleSrouce = getStyleSource(currentStyle["transform"]);
+  const backfaceVisibilityStyleSource = getStyleSource(
+    currentStyle["backfaceVisibility"]
+  );
 
   const isAnyTransformPropertyAdded = transformPanels.some((panel) =>
     isTransformPanelPropertyUsed({
@@ -84,6 +94,7 @@ export const Section = (props: SectionProps) => {
     batch.deleteProperty("translate");
     batch.deleteProperty("scale");
     batch.deleteProperty("transform");
+    batch.deleteProperty("backfaceVisibility");
     batch.publish();
   };
 
@@ -106,7 +117,7 @@ export const Section = (props: SectionProps) => {
                   collisionPadding={16}
                   css={{ width: theme.spacing[20] }}
                 >
-                  {transformPanels.map((panel) => {
+                  {transformPanelDropdown.map((panel) => {
                     return (
                       <DropdownMenuItem
                         disabled={
@@ -143,7 +154,8 @@ export const Section = (props: SectionProps) => {
                 color={
                   translateStyleSource ||
                   scaleStyleSource ||
-                  rotateAndSkewStyleSrouce
+                  rotateAndSkewStyleSrouce ||
+                  backfaceVisibilityStyleSource
                 }
               >
                 {label}
@@ -156,16 +168,20 @@ export const Section = (props: SectionProps) => {
     >
       {isAnyTransformPropertyAdded === true ? (
         <CssValueListArrowFocus>
-          {transformPanels.map((panel, index) => (
-            <TransformSection
-              {...props}
-              key={panel}
-              index={index}
-              panel={panel}
-            />
-          ))}
+          <Flex direction="column">
+            {transformPanels.map((panel, index) => (
+              <TransformSection
+                {...props}
+                key={panel}
+                index={index}
+                panel={panel}
+              />
+            ))}
+          </Flex>
         </CssValueListArrowFocus>
       ) : undefined}
+
+      <BackfaceVisibility {...props} />
     </CollapsibleSectionRoot>
   );
 };
@@ -178,6 +194,7 @@ const TransformSection = (
     const property =
       panel === "rotate" || panel === "skew" ? "transform" : panel;
     const value = currentStyle[property]?.value;
+
     if (value === undefined || value.type !== "tuple") {
       return;
     }