feat: tolerate comma instead of dot typo in style value input

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

@@ -14,7 +14,7 @@ export const parseIntermediateOrInvalidValue = (
   property: StyleProperty,
   styleValue: IntermediateStyleValue | InvalidValue
 ): StyleValue => {
-  const value = styleValue.value.trim();
+  let value = styleValue.value.trim();
 
   if (property.startsWith("--")) {
     return {
@@ -23,6 +23,12 @@ export const parseIntermediateOrInvalidValue = (
     };
   }
 
+  // If input contains a number, we assume its either a value or value + unit.
+  // Users often mistype comma instead of dot and we want to be tolerant to that.
+  if (Number.isNaN(Number.parseFloat(value)) === false) {
+    value = value.replace(",", ".");
+  }
+
   const valueInfo = properties[property as keyof typeof properties];
 
   // - When user enters a number, we don't know if its a valid unit value,

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

@@ -118,6 +118,33 @@ describe("Parse intermediate or invalid value without math evaluation", () => {
       value: "border-box",
     });
   });
+
+  test("tolerate comma instead of dot typo", () => {
+    const result = parseIntermediateOrInvalidValue("width", {
+      type: "intermediate",
+      value: "2,5",
+      unit: "rem",
+    });
+
+    expect(result).toEqual({
+      type: "unit",
+      value: 2.5,
+      unit: "rem",
+    });
+  });
+
+  test("tolerate comma instead of dot typo with unit input", () => {
+    const result = parseIntermediateOrInvalidValue("width", {
+      type: "intermediate",
+      value: "2,5rem",
+    });
+
+    expect(result).toEqual({
+      type: "unit",
+      value: 2.5,
+      unit: "rem",
+    });
+  });
 });
 
 describe("Parse intermediate or invalid value with math evaluation", () => {