Merge branch 'main' into fix-calc-function

davesnx · Aug 17, 2024 · bcd0738 · bcd0738
2 parents 1a38d24 + 95a9de9
commit bcd0738
Show file tree

Hide file tree

Showing 14 changed files with 847 additions and 466 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,5 +1,12 @@
 # Changes
 
+## 0.60.0
+- [BREAKING] Transition property on `CSS.Transition.shorthand` function is now an optional argument (#499) (@zakybilfagih)
+- [BREAKING] `CSS.gridTemplateColumns`, `CSS.gridTemplateRows`, `CSS.gridAutoColumns`, `CSS.gridAutoRows` now accepts `` `value of Track.t array `` (#502) (@zakybilfagih)
+- [BREAKING] Rename `Track.t` `` `name `` to `` `lineNames ``  (#502) (@zakybilfagih)
+- [FIX] False polar color space toString function (#501) (@zakybilfagih)
+- [FIX] Unsupported feature string interpolation not supporting other than single interpolation syntax (#498) (@zakybilfagih)
+
 ## 0.59.0
 - [BREAKING] Change entry point module `CSS` (from `CssJs`) on `styled-ppx.melange`, `styled-ppx.native` and `styled-ppx.rescript` (#490) (@davesnx)
 - [FEATURE] Add support and interpolation for `zoom`, `will-change` and `user-select` properties (#489) (@davesnx)

diff --git a/packages/css-property-parser/lib/Parser.re b/packages/css-property-parser/lib/Parser.re
@@ -1850,9 +1850,9 @@ and single_transition_no_interp = [%value.rec
   "[ <single-transition-property-no-interp> | 'none' ] || <extended-time-no-interp> || <timing-function-no-interp> || <extended-time-no-interp>"
 ]
 and single_transition = [%value.rec
-  "[ [<single-transition-property> | 'none'] <extended-time>]
-  | [ [<single-transition-property> | 'none'] <extended-time> <timing-function>]
-  | [ [<single-transition-property> | 'none'] <extended-time> <timing-function> <extended-time>]"
+  "[ [<single-transition-property> | 'none'] <extended-time> ]
+  | [ [<single-transition-property> | 'none'] <extended-time> <timing-function> ]
+  | [ [<single-transition-property> | 'none'] <extended-time> <timing-function> <extended-time> ]"
 ]
 and single_transition_property = [%value.rec
   "<custom-ident> | <interpolation> | 'all'"

diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re
@@ -3107,6 +3107,8 @@ let transition_delay =
 let render_transition_property = (~loc) =>
   fun
   | `None => render_string(~loc, "none")
+  | `Single_transition_property_no_interp(x) =>
+    render_single_transition_property_no_interp(~loc, x)
   | `Single_transition_property(x) =>
     render_single_transition_property(~loc, x);
 
@@ -3116,15 +3118,17 @@ let render_single_transition = (~loc) =>
       [%expr
        CSS.Transition.shorthand(
          ~duration=[%e render_extended_time(~loc, duration)],
-         [%e render_transition_property(~loc, property)],
+         ~property=[%e render_transition_property(~loc, property)],
+         (),
        )];
     }
   | `Static_1(property, duration, timingFunction) => {
       [%expr
        CSS.Transition.shorthand(
          ~duration=[%e render_extended_time(~loc, duration)],
          ~timingFunction=[%e render_timing(~loc, timingFunction)],
-         [%e render_transition_property(~loc, property)],
+         ~property=[%e render_transition_property(~loc, property)],
+         (),
        )];
     }
   | `Static_2(property, duration, timingFunction, delay) => {
@@ -3133,7 +3137,8 @@ let render_single_transition = (~loc) =>
          ~duration=[%e render_extended_time(~loc, duration)],
          ~delay=[%e render_extended_time(~loc, delay)],
          ~timingFunction=[%e render_timing(~loc, timingFunction)],
-         [%e render_transition_property(~loc, property)],
+         ~property=[%e render_transition_property(~loc, property)],
+         (),
        )];
     };
 
@@ -3142,18 +3147,6 @@ let render_single_transition_no_interp =
       ~loc,
       (property, delay, timingFunction, duration): Types.single_transition_no_interp,
     ) => {
-  let property =
-    switch (
-      Option.value(
-        property,
-        ~default=`Single_transition_property_no_interp(`All),
-      )
-    ) {
-    | `None => render_string(~loc, "none")
-    | `Single_transition_property_no_interp(x) =>
-      render_single_transition_property_no_interp(~loc, x)
-    };
-
   [%expr
    CSS.Transition.shorthand(
      ~duration=?[%e
@@ -3163,7 +3156,8 @@ let render_single_transition_no_interp =
      ~timingFunction=?[%e
        render_option(~loc, render_timing_no_interp, timingFunction)
      ],
-     [%e property],
+     ~property=?[%e render_option(~loc, render_transition_property, property)],
+     (),
    )];
 };
 
@@ -3691,7 +3685,7 @@ let render_line_names = (~loc, value: Types.line_names) => {
   line_names
   |> String.concat(" ")
   |> Printf.sprintf("[%s]")
-  |> (name => [[%expr `name([%e render_string(~loc, name)])]]);
+  |> (name => [[%expr `lineNames([%e render_string(~loc, name)])]]);
 };
 
 let render_maybe_line_names = (~loc, value) => {
@@ -3898,13 +3892,15 @@ let grid_template_columns =
     (~loc) => [%expr CSS.gridTemplateColumns],
     (~loc, value: Types.property_grid_template_columns) =>
       switch (value) {
-      | `None => [%expr [|`none|]]
       | `Interpolation(v) => render_variable(~loc, v)
+      | `None => [%expr `none]
       | `Track_list(track_list, line_names) =>
-        render_track_list(~loc, track_list, line_names)
-      | `Auto_track_list(list) => render_auto_track_list(~loc, list)
-      | `Static((), None) => [%expr [|`subgrid|]]
-      | `Static((), Some(subgrid)) => render_subgrid(~loc, subgrid)
+        [%expr `value([%e render_track_list(~loc, track_list, line_names)])]
+      | `Auto_track_list(list) =>
+        [%expr `value([%e render_auto_track_list(~loc, list)])]
+      | `Static((), None) => [%expr `value([|`subgrid|])]
+      | `Static((), Some(subgrid)) =>
+        [%expr `value([%e render_subgrid(~loc, subgrid)])]
       },
   );
 
@@ -3914,13 +3910,15 @@ let grid_template_rows =
     (~loc) => [%expr CSS.gridTemplateRows],
     (~loc, value: Types.property_grid_template_rows) =>
       switch (value) {
-      | `None => [%expr [|`none|]]
       | `Interpolation(v) => render_variable(~loc, v)
+      | `None => [%expr `none]
       | `Track_list(track_list, line_names) =>
-        render_track_list(~loc, track_list, line_names)
-      | `Auto_track_list(list) => render_auto_track_list(~loc, list)
-      | `Static((), None) => [%expr [|`subgrid|]]
-      | `Static((), Some(subgrid)) => render_subgrid(~loc, subgrid)
+        [%expr `value([%e render_track_list(~loc, track_list, line_names)])]
+      | `Auto_track_list(list) =>
+        [%expr `value([%e render_auto_track_list(~loc, list)])]
+      | `Static((), None) => [%expr `value([|`subgrid|])]
+      | `Static((), Some(subgrid)) =>
+        [%expr `value([%e render_subgrid(~loc, subgrid)])]
       },
   );
 
@@ -5328,15 +5326,11 @@ let properties = [
 
 let render_when_unsupported_features = (~loc, property, value) => {
   /* Transform property name to camelCase since we bind to emotion with the Object API */
-  let propertyName = property |> to_camel_case |> render_string(~loc);
-  let unsafeInterpolation =
-    value
-    |> Property_parser.parse(Standard.interpolation)
-    |> Result.map(render_variable(~loc));
-  let value =
-    Result.value(unsafeInterpolation, ~default=render_string(~loc, value));
+  let propertyExpr = property |> to_camel_case |> render_string(~loc);
+  let valueExpr =
+    String_interpolation.transform(~loc, ~delimiter="js", value);
 
-  [%expr CSS.unsafe([%e propertyName], [%e value])];
+  [%expr CSS.unsafe([%e propertyExpr], [%e valueExpr])];
 };
 
 let findProperty = name => {

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%);|}]; */