Fix polar color space to string (#501)

davesnx · Aug 12, 2024 · 6b74ab8 · 6b74ab8
1 parent 7a99281
commit 6b74ab8
Show file tree

Hide file tree

Showing 3 changed files with 253 additions and 49 deletions.
diff --git a/packages/ppx/test/css-support/color-module.t/input.re b/packages/ppx/test/css-support/color-module.t/input.re
@@ -155,79 +155,80 @@
 [%css {|column-rule-color: rebeccapurple;|}];
 
 /* CSS Color Module Level 5 */
-/* [%css {|color: color-mix(in srgb, teal 65%, olive);|}]; */
-/* [%css {|color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}]; */
-/* [%css {|color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%;|}]; */
-/* [%css {|color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%;|}]; */
-/* [%css {|color: color-mix(in lch, teal 65%, olive);|}]; */
-/* [%css {|color: color-mix(in hsl, teal 65%, olive);|}]; */
-/* [%css {|color: color-mix(in hwb, teal 65%, olive);|}]; */
-/* [%css {|color: color-mix(in xyz, teal 65%, olive);|}]; */
-/* [%css {|color: color-mix(in lab, teal 65%, olive);|}]; */
+[%css {|color: color-mix(in srgb, teal 65%, olive);|}];
+[%css {|color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}];
+[%css {|color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%);|}];
+[%css {|color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%);|}];
+[%css {|color: color-mix(in lch, teal 65%, olive);|}];
+[%css {|color: color-mix(in hsl, teal 65%, olive);|}];
+[%css {|color: color-mix(in hwb, teal 65%, olive);|}];
+[%css {|color: color-mix(in xyz, teal 65%, olive);|}];
+[%css {|color: color-mix(in lab, teal 65%, olive);|}];
+[%css {|color: color-mix(in lch longer hue, hsl(200deg 50% 80%), coral);|}];
 /* [%css {|color: color-contrast(wheat vs tan, sienna, #b22222, #d2691e);|}]; */
 /* [%css {|color: color-contrast(hsl(200 50% 80%) vs hsl(200 83% 23%), purple, hsl(300 100% 25%));|}]; */
 /* [%css {|color: color-adjust(peru lightness -20%);|}]; */
 /* [%css {|color: rgb(from indianred 255 g b);|}]; */
 /* [%css {|color: hsl(from lightseagreen calc(h+180) s l);|}]; */
 /* [%css {|color: lab(from orchid l 0 0);|}]; */
 /* [%css {|color: lch(from peru calc(l * 0.8) c h);|}]; */
-/* [%css {|background-color: color-mix(in srgb, teal 65%, olive);|}]; */
-/* [%css {|background-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}]; */
-/* [%css {|background-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%;|}]; */
-/* [%css {|background-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%;|}]; */
-/* [%css {|background-color: color-mix(in lch, teal 65%, olive);|}]; */
-/* [%css {|background-color: color-mix(in hsl, teal 65%, olive);|}]; */
-/* [%css {|background-color: color-mix(in hwb, teal 65%, olive);|}]; */
-/* [%css {|background-color: color-mix(in xyz, teal 65%, olive);|}]; */
-/* [%css {|background-color: color-mix(in lab, teal 65%, olive);|}]; */
+[%css {|background-color: color-mix(in srgb, teal 65%, olive);|}];
+[%css {|background-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}];
+[%css {|background-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%);|}];
+[%css {|background-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%);|}];
+[%css {|background-color: color-mix(in lch, teal 65%, olive);|}];
+[%css {|background-color: color-mix(in hsl, teal 65%, olive);|}];
+[%css {|background-color: color-mix(in hwb, teal 65%, olive);|}];
+[%css {|background-color: color-mix(in xyz, teal 65%, olive);|}];
+[%css {|background-color: color-mix(in lab, teal 65%, olive);|}];
 /* [%css {|background-color: color-contrast(wheat vs tan, sienna, #b22222, #d2691e);|}]; */
 /* [%css {|background-color: color-contrast(hsl(200 50% 80%) vs hsl(200 83% 23%), purple, hsl(300 100% 25%));|}]; */
 /* [%css {|background-color: color-adjust(peru lightness -20%);|}]; */
 /* [%css {|background-color: rgb(from indianred 255 g b);|}]; */
 /* [%css {|background-color: hsl(from lightseagreen calc(h+180) s l);|}]; */
 /* [%css {|background-color: lab(from orchid l 0 0);|}]; */
 /* [%css {|background-color: lch(from peru calc(l * 0.8) c h);|}]; */
-/* [%css {|border-color: color-mix(in srgb, teal 65%, olive);|}]; */
-/* [%css {|border-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}]; */
-/* [%css {|border-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%;|}]; */
-/* [%css {|border-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%;|}]; */
-/* [%css {|border-color: color-mix(in lch, teal 65%, olive);|}]; */
-/* [%css {|border-color: color-mix(in hsl, teal 65%, olive);|}]; */
-/* [%css {|border-color: color-mix(in hwb, teal 65%, olive);|}]; */
-/* [%css {|border-color: color-mix(in xyz, teal 65%, olive);|}]; */
-/* [%css {|border-color: color-mix(in lab, teal 65%, olive);|}]; */
+[%css {|border-color: color-mix(in srgb, teal 65%, olive);|}];
+[%css {|border-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}];
+[%css {|border-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%);|}];
+[%css {|border-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%);|}];
+[%css {|border-color: color-mix(in lch, teal 65%, olive);|}];
+[%css {|border-color: color-mix(in hsl, teal 65%, olive);|}];
+[%css {|border-color: color-mix(in hwb, teal 65%, olive);|}];
+[%css {|border-color: color-mix(in xyz, teal 65%, olive);|}];
+[%css {|border-color: color-mix(in lab, teal 65%, olive);|}];
 /* [%css {|border-color: color-contrast(wheat vs tan, sienna, #b22222, #d2691e);|}]; */
 /* [%css {|border-color: color-contrast(hsl(200 50% 80%) vs hsl(200 83% 23%), purple, hsl(300 100% 25%));|}]; */
 /* [%css {|border-color: color-adjust(peru lightness -20%);|}]; */
 /* [%css {|border-color: rgb(from indianred 255 g b);|}]; */
 /* [%css {|border-color: hsl(from lightseagreen calc(h+180) s l);|}]; */
 /* [%css {|border-color: lab(from orchid l 0 0);|}]; */
 /* [%css {|border-color: lch(from peru calc(l * 0.8) c h);|}]; */
-/* [%css {|text-decoration-color: color-mix(in srgb, teal 65%, olive);|}]; */
-/* [%css {|text-decoration-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}]; */
-/* [%css {|text-decoration-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%;|}]; */
-/* [%css {|text-decoration-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%;|}]; */
-/* [%css {|text-decoration-color: color-mix(in lch, teal 65%, olive);|}]; */
-/* [%css {|text-decoration-color: color-mix(in hsl, teal 65%, olive);|}]; */
-/* [%css {|text-decoration-color: color-mix(in hwb, teal 65%, olive);|}]; */
-/* [%css {|text-decoration-color: color-mix(in xyz, teal 65%, olive);|}]; */
-/* [%css {|text-decoration-color: color-mix(in lab, teal 65%, olive);|}]; */
+[%css {|text-decoration-color: color-mix(in srgb, teal 65%, olive);|}];
+[%css {|text-decoration-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}];
+[%css {|text-decoration-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%);|}];
+[%css {|text-decoration-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%);|}];
+[%css {|text-decoration-color: color-mix(in lch, teal 65%, olive);|}];
+[%css {|text-decoration-color: color-mix(in hsl, teal 65%, olive);|}];
+[%css {|text-decoration-color: color-mix(in hwb, teal 65%, olive);|}];
+[%css {|text-decoration-color: color-mix(in xyz, teal 65%, olive);|}];
+[%css {|text-decoration-color: color-mix(in lab, teal 65%, olive);|}];
 /* [%css {|text-decoration-color: color-contrast(wheat vs tan, sienna, #b22222, #d2691e);|}]; */
 /* [%css {|text-decoration-color: color-contrast(hsl(200 50% 80%) vs hsl(200 83% 23%), purple, hsl(300 100% 25%));|}]; */
 /* [%css {|text-decoration-color: color-adjust(peru lightness -20%);|}]; */
 /* [%css {|text-decoration-color: rgb(from indianred 255 g b);|}]; */
 /* [%css {|text-decoration-color: hsl(from lightseagreen calc(h+180) s l);|}]; */
 /* [%css {|text-decoration-color: lab(from orchid l 0 0);|}]; */
 /* [%css {|text-decoration-color: lch(from peru calc(l * 0.8) c h);|}]; */
-/* [%css {|column-rule-color: color-mix(in srgb, teal 65%, olive);|}]; */
-/* [%css {|column-rule-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}]; */
-/* [%css {|column-rule-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%;|}]; */
-/* [%css {|column-rule-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%;|}]; */
-/* [%css {|column-rule-color: color-mix(in lch, teal 65%, olive);|}]; */
-/* [%css {|column-rule-color: color-mix(in hsl, teal 65%, olive);|}]; */
-/* [%css {|column-rule-color: color-mix(in hwb, teal 65%, olive);|}]; */
-/* [%css {|column-rule-color: color-mix(in xyz, teal 65%, olive);|}]; */
-/* [%css {|column-rule-color: color-mix(in lab, teal 65%, olive);|}]; */
+[%css {|column-rule-color: color-mix(in srgb, teal 65%, olive);|}];
+[%css {|column-rule-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}];
+[%css {|column-rule-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%);|}];
+[%css {|column-rule-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%);|}];
+[%css {|column-rule-color: color-mix(in lch, teal 65%, olive);|}];
+[%css {|column-rule-color: color-mix(in hsl, teal 65%, olive);|}];
+[%css {|column-rule-color: color-mix(in hwb, teal 65%, olive);|}];
+[%css {|column-rule-color: color-mix(in xyz, teal 65%, olive);|}];
+[%css {|column-rule-color: color-mix(in lab, teal 65%, olive);|}];
 /* [%css {|column-rule-color: color-contrast(wheat vs tan, sienna, #b22222, #d2691e);|}]; */
 /* [%css {|column-rule-color: color-contrast(hsl(200 50% 80%) vs hsl(200 83% 23%), purple, hsl(300 100% 25%));|}]; */
 /* [%css {|column-rule-color: color-adjust(peru lightness -20%);|}]; */

diff --git a/packages/ppx/test/css-support/color-module.t/run.t b/packages/ppx/test/css-support/color-module.t/run.t
@@ -146,5 +146,209 @@ If this test fail means that the module is not in sync with the ppx
   CSS.unsafe({js|columnRuleColor|js}, {js|#000000FF|js});
   CSS.unsafe({js|columnRuleColor|js}, {js|rebeccapurple|js});
 
+  CSS.color(
+    `colorMix((`srgb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.color(
+    `colorMix((
+      `srgb,
+      (`rgba((255, 0, 0, `num(0.2))), Some(`percent(65.))),
+      (CSS.olive, None),
+    )),
+  );
+  CSS.color(
+    `colorMix((
+      `srgb,
+      (`currentColor, None),
+      (`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
+    )),
+  );
+  CSS.color(
+    `colorMix((
+      `srgb,
+      (`currentColor, Some(`percent(10.))),
+      (`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
+    )),
+  );
+  CSS.color(
+    `colorMix((`lch, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.color(
+    `colorMix((`hsl, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.color(
+    `colorMix((`hwb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.color(
+    `colorMix((`xyz, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.color(
+    `colorMix((`lab, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.color(
+    `colorMix((
+      `polar_with_hue((`lch, `longer)),
+      (`hsl((`deg(200.), `percent(50.), `percent(80.))), None),
+      (CSS.coral, None),
+    )),
+  );
+
+  CSS.backgroundColor(
+    `colorMix((`srgb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.backgroundColor(
+    `colorMix((
+      `srgb,
+      (`rgba((255, 0, 0, `num(0.2))), Some(`percent(65.))),
+      (CSS.olive, None),
+    )),
+  );
+  CSS.backgroundColor(
+    `colorMix((
+      `srgb,
+      (`currentColor, None),
+      (`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
+    )),
+  );
+  CSS.backgroundColor(
+    `colorMix((
+      `srgb,
+      (`currentColor, Some(`percent(10.))),
+      (`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
+    )),
+  );
+  CSS.backgroundColor(
+    `colorMix((`lch, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.backgroundColor(
+    `colorMix((`hsl, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.backgroundColor(
+    `colorMix((`hwb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.backgroundColor(
+    `colorMix((`xyz, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.backgroundColor(
+    `colorMix((`lab, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+
+  CSS.borderColor(
+    `colorMix((`srgb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.borderColor(
+    `colorMix((
+      `srgb,
+      (`rgba((255, 0, 0, `num(0.2))), Some(`percent(65.))),
+      (CSS.olive, None),
+    )),
+  );
+  CSS.borderColor(
+    `colorMix((
+      `srgb,
+      (`currentColor, None),
+      (`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
+    )),
+  );
+  CSS.borderColor(
+    `colorMix((
+      `srgb,
+      (`currentColor, Some(`percent(10.))),
+      (`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
+    )),
+  );
+  CSS.borderColor(
+    `colorMix((`lch, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.borderColor(
+    `colorMix((`hsl, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.borderColor(
+    `colorMix((`hwb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.borderColor(
+    `colorMix((`xyz, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.borderColor(
+    `colorMix((`lab, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+
+  CSS.textDecorationColor(
+    `colorMix((`srgb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.textDecorationColor(
+    `colorMix((
+      `srgb,
+      (`rgba((255, 0, 0, `num(0.2))), Some(`percent(65.))),
+      (CSS.olive, None),
+    )),
+  );
+  CSS.textDecorationColor(
+    `colorMix((
+      `srgb,
+      (`currentColor, None),
+      (`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
+    )),
+  );
+  CSS.textDecorationColor(
+    `colorMix((
+      `srgb,
+      (`currentColor, Some(`percent(10.))),
+      (`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
+    )),
+  );
+  CSS.textDecorationColor(
+    `colorMix((`lch, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.textDecorationColor(
+    `colorMix((`hsl, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.textDecorationColor(
+    `colorMix((`hwb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.textDecorationColor(
+    `colorMix((`xyz, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+  CSS.textDecorationColor(
+    `colorMix((`lab, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
+  );
+
+  CSS.unsafe(
+    {js|columnRuleColor|js},
+    {js|color-mix(in srgb, teal 65%, olive)|js},
+  );
+  CSS.unsafe(
+    {js|columnRuleColor|js},
+    {js|color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive)|js},
+  );
+  CSS.unsafe(
+    {js|columnRuleColor|js},
+    {js|color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%)|js},
+  );
+  CSS.unsafe(
+    {js|columnRuleColor|js},
+    {js|color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%)|js},
+  );
+  CSS.unsafe(
+    {js|columnRuleColor|js},
+    {js|color-mix(in lch, teal 65%, olive)|js},
+  );
+  CSS.unsafe(
+    {js|columnRuleColor|js},
+    {js|color-mix(in hsl, teal 65%, olive)|js},
+  );
+  CSS.unsafe(
+    {js|columnRuleColor|js},
+    {js|color-mix(in hwb, teal 65%, olive)|js},
+  );
+  CSS.unsafe(
+    {js|columnRuleColor|js},
+    {js|color-mix(in xyz, teal 65%, olive)|js},
+  );
+  CSS.unsafe(
+    {js|columnRuleColor|js},
+    {js|color-mix(in lab, teal 65%, olive)|js},
+  );
+
   CSS.color(`rgba((0, 0, 0, `num(1.))));
   CSS.color(`rgba((0, 0, 0, `calc(`sub((`num(10.), `num(1.)))))));
diff --git a/packages/runtime/native/shared/Css_types.ml b/packages/runtime/native/shared/Css_types.ml
@@ -1501,11 +1501,10 @@ module Color = struct
     | #rectangular_color_space as rcs -> rectangular_color_space_to_string rcs
     | #polar_color_space as pcs -> polar_color_space_to_string pcs
     | `polar_with_hue (pcs, hs) ->
-      {js|polar-with-hue(|js}
-      ^ polar_color_space_to_string pcs
-      ^ {js|, |js}
+      polar_color_space_to_string pcs
+      ^ {js| |js}
       ^ hue_size_to_string hs
-      ^ {js|)|js}
+      ^ {js| hue|js}
 
   let rec toString (x : t) =
     match x with