fix: some scrub bugs (#4240)

Fixes https://github.com/webstudio-is/webstudio/issues/4196
https://github.com/webstudio-is/webstudio/issues/4237

- fixed z-index scrubbing by rounding integrer number
- fixed background size by fallback to non layers value

apps/builder/app/builder/features/style-panel/sections/backgrounds/background-size.tsx

@@ -59,13 +59,13 @@ export const BackgroundSize = ({ index }: { index: number }) => {
   };
 
   const setValueX: SetValue = (value, options) => {
-    const [x] = value.type === "layers" ? value.value : [];
+    const [x] = value.type === "layers" ? value.value : [value];
     const nextValue = toTuple(x, customSizeValue.value[1]);
     setValue(nextValue, options);
   };
 
   const setValueY: SetValue = (value, options) => {
-    const [y] = value.type === "layers" ? value.value : [];
+    const [y] = value.type === "layers" ? value.value : [value];
     const nextValue = toTuple(customSizeValue.value[0], y);
     setValue(nextValue, options);
   };

apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts

@@ -44,6 +44,13 @@ export const parseIntermediateOrInvalidValue = (
   }
 
   if ("unit" in styleValue && styleValue.unit === "number") {
+    // when unit is number some properties supports only integer
+    // for example z-index
+    styleInput = parseCssValue(property, `${Math.round(Number(value))}`);
+    if (styleInput.type !== "invalid") {
+      return styleInput;
+    }
+
     // Most css props supports 0 as unitless value, but not other numbers.
     // Its possible that we had { value: 0, unit: "number" } and value has changed
     // Lets try to parse it as px value

apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts.test.ts

@@ -606,3 +606,17 @@ test("parse css variables as unparsed", () => {
     value: "url(https://my-image.com)",
   });
 });
+
+test("parse z-index", () => {
+  expect(
+    parseIntermediateOrInvalidValue("zIndex", {
+      type: "intermediate",
+      value: "6.5",
+      unit: "number",
+    })
+  ).toEqual({
+    type: "unit",
+    value: 7,
+    unit: "number",
+  });
+});