fix: CSS unitless properties parsing (#4278)

## Description

ref #3399

## Steps for reproduction

1. click button
2. expect xyz

## 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)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

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

@@ -27,8 +27,15 @@ export const parseIntermediateOrInvalidValue = (
     "children" in ast && ast.children?.size === 1
       ? ast.children.first
       : undefined;
+
   if (node?.type === "Number") {
-    const testUnit = "unit" in styleValue ? (styleValue.unit ?? "px") : "px";
+    const unit = "unit" in styleValue ? styleValue.unit : undefined;
+
+    // Use number as a fallback for custom properties
+    const fallbackUnitAsString = property.startsWith("--") ? "" : "px";
+
+    const testUnit = unit === "number" ? "" : (unit ?? fallbackUnitAsString);
+
     const styleInput = parseCssValue(property, `${value}${testUnit}`);
 
     if (styleInput.type !== "invalid") {

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

@@ -570,6 +570,24 @@ test("parse unit in css variable", () => {
   });
 });
 
+test("prefer unitless css variable", () => {
+  expect(
+    parseIntermediateOrInvalidValue("--size", {
+      type: "intermediate",
+      value: "1",
+      unit: undefined,
+    })
+  ).toEqual({ type: "unit", value: 1, unit: "number" });
+
+  expect(
+    parseIntermediateOrInvalidValue("--size", {
+      type: "intermediate",
+      value: "1",
+      unit: "number",
+    })
+  ).toEqual({ type: "unit", value: 1, unit: "number" });
+});
+
 test("parse color in css variable", () => {
   expect(
     parseIntermediateOrInvalidValue("--size", {