Skip to content

Commit b0138f6

Browse files
committed
fix: use valid CSS color space names in toValue()
colorjs uses internal short names (p3, a98rgb, prophoto) that don't match the CSS predefined color space identifiers required by the spec: - p3 → display-p3 - a98rgb → a98-rgb - prophoto → prophoto-rgb This caused toValue() to emit invalid CSS like `color(p3 ...)`, which the css-tree lexer rejects when re-validating the value in the CSS value input (e.g. after a round-trip through the style panel).
1 parent f4f2406 commit b0138f6

2 files changed

Lines changed: 8 additions & 4 deletions

File tree

packages/css-engine/src/core/to-value.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,7 @@ describe("Convert WS CSS Values to native CSS strings", () => {
331331
components: [0.8, 0.4, 0.6],
332332
alpha: 0.8,
333333
});
334-
expect(value).toBe("color(p3 0.8 0.4 0.6 / 0.8)");
334+
expect(value).toBe("color(display-p3 0.8 0.4 0.6 / 0.8)");
335335
});
336336

337337
test("color with xyz-d65 uses color() function", () => {
@@ -361,7 +361,7 @@ describe("Convert WS CSS Values to native CSS strings", () => {
361361
components: [0.4, 0.6, 0.3],
362362
alpha: { type: "var", value: "tw-bg-opacity" },
363363
});
364-
expect(value).toBe("color(p3 0.4 0.6 0.3 / var(--tw-bg-opacity))");
364+
expect(value).toBe("color(display-p3 0.4 0.6 0.3 / var(--tw-bg-opacity))");
365365
});
366366

367367
test("color in tuple", () => {

packages/css-engine/src/core/to-value.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,11 +112,15 @@ export const toValue = (
112112
return `oklab(${c1} ${c2} ${c3} / ${alpha})`;
113113
case "oklch":
114114
return `oklch(${c1} ${c2} ${c3} / ${alpha})`;
115-
// Fall back to color() function for less common color spaces
115+
// Fall back to color() function for less common color spaces.
116+
// Webstudio uses colorjs internal names; map to CSS predefined color space names.
116117
case "p3":
117-
case "srgb-linear":
118+
return `color(display-p3 ${c1} ${c2} ${c3} / ${alpha})`;
118119
case "a98rgb":
120+
return `color(a98-rgb ${c1} ${c2} ${c3} / ${alpha})`;
119121
case "prophoto":
122+
return `color(prophoto-rgb ${c1} ${c2} ${c3} / ${alpha})`;
123+
case "srgb-linear":
120124
case "rec2020":
121125
case "xyz-d65":
122126
case "xyz-d50":

0 commit comments

Comments
 (0)