Merge branch 'main' into input-border

webstudio-is · Oct 14, 2024 · 1726c2c · 1726c2c
2 parents caf0cb5 + 11f5450
commit 1726c2c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/...uilder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts b/...uilder/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") {

diff --git a/...eatures/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts.test.ts b/...eatures/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", {