Skip to content

Commit 26b2f32

Browse files
committed
fix: don't round decimal unitless values for properties that accept them
Decimals like `line-height: 1.5` were being rounded to integers because the rounding logic in parseIntermediateOrInvalidValue applied to all `unit: "number"` values unconditionally. Now it only rounds when parseCssValue confirms the decimal is actually invalid for the property (e.g. z-index, column-count require integers; line-height does not).
1 parent 7227590 commit 26b2f32

2 files changed

Lines changed: 48 additions & 1 deletion

File tree

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,12 @@ export const parseIntermediateOrInvalidValue = (
5353
if ("unit" in styleValue && styleValue.unit === "number") {
5454
const numericValue = Number(value);
5555
if (!Number.isNaN(numericValue) && !Number.isInteger(numericValue)) {
56-
value = String(Math.round(numericValue));
56+
// Only round if the decimal value is not valid for this property
57+
// (e.g. z-index requires integers, but line-height accepts decimals)
58+
const decimalTest = parseCssValue(property, value);
59+
if (decimalTest.type === "invalid") {
60+
value = String(Math.round(numericValue));
61+
}
5762
}
5863
}
5964

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -389,6 +389,48 @@ describe("Value ending with `-` should be considered unitless", () => {
389389
});
390390
});
391391

392+
test("Decimal number intermediate for line-height is not rounded", () => {
393+
const result = parseIntermediateOrInvalidValue("line-height", {
394+
type: "intermediate",
395+
value: "1.5",
396+
unit: "number",
397+
});
398+
399+
expect(result).toEqual({
400+
type: "unit",
401+
value: 1.5,
402+
unit: "number",
403+
});
404+
});
405+
406+
test("Decimal number intermediate for z-index is rounded to integer", () => {
407+
const result = parseIntermediateOrInvalidValue("z-index", {
408+
type: "intermediate",
409+
value: "1.5",
410+
unit: "number",
411+
});
412+
413+
expect(result).toEqual({
414+
type: "unit",
415+
value: 2,
416+
unit: "number",
417+
});
418+
});
419+
420+
test("Decimal number intermediate for column-count is rounded to integer", () => {
421+
const result = parseIntermediateOrInvalidValue("column-count", {
422+
type: "intermediate",
423+
value: "2.7",
424+
unit: "number",
425+
});
426+
427+
expect(result).toEqual({
428+
type: "unit",
429+
value: 3,
430+
unit: "number",
431+
});
432+
});
433+
392434
test("Unitless expression transformed to unitless", () => {
393435
const result = parseIntermediateOrInvalidValue("line-height", {
394436
type: "intermediate",

0 commit comments

Comments
 (0)