feat: add unicodeRange to fontFace

davesnx · Sep 30, 2024 · b1c7de8 · b1c7de8
1 parent 2679b11
commit b1c7de8
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 18 deletions.
diff --git a/packages/css-property-parser/ppx/Generate.re b/packages/css-property-parser/ppx/Generate.re
@@ -52,17 +52,15 @@ module Make = (Builder: Ppxlib.Ast_builder.S) => {
 
  let value_name_of_css = str =>
  String.(
- {
- let length = length(str);
- let str =
- if (is_function(str)) {
- let str = sub(str, 0, length - 2);
- function_value_name(str);
- } else {
- str;
- };
- kebab_case_to_snake_case(str);
- }
+ let length = length(str);
+ let str =
+ if (is_function(str)) {
+ let str = sub(str, 0, length - 2);
+ function_value_name(str);
+ } else {
+ str;
+ };
+ kebab_case_to_snake_case(str)
  );
 
  // TODO: multiplier name

diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re
@@ -3156,7 +3156,9 @@ let render_single_transition_no_interp =
  ~timingFunction=?[%e
  render_option(~loc, render_timing_no_interp, timingFunction)
  ],
- ~property=?[%e render_option(~loc, render_transition_property, property)],
+ ~property=?[%e
+ render_option(~loc, render_transition_property, property)
+ ],
  (),
  )];
 };

diff --git a/packages/runtime/melange/Emotion_bindings.ml b/packages/runtime/melange/Emotion_bindings.ml
@@ -51,14 +51,15 @@ let keyframes frames =
 let renderKeyframes _renderer frames = makeAnimation (framesToDict frames)
 
 (* This method is a Css_type function, but with side-effects. It pushes the fontFace as global style *)
-let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust ()
-   =
+let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust
+ ?unicodeRange () =
  let fontFace =
  [|
  Kloth.Option.map ~f:Declarations.fontStyle fontStyle;
  Kloth.Option.map ~f:Declarations.fontWeight fontWeight;
  Kloth.Option.map ~f:Declarations.fontDisplay fontDisplay;
  Kloth.Option.map ~f:Declarations.sizeAdjust sizeAdjust;
+ Kloth.Option.map ~f:Declarations.unicodeRange unicodeRange;
  Some (Declarations.fontFamily fontFamily);
  Some
  (Rule.Declaration

diff --git a/packages/runtime/native/CSS.ml b/packages/runtime/native/CSS.ml
@@ -478,14 +478,15 @@ let style_tag ?key:_ ?children:_ () =
  []
 
 (* This method is a Css_type function, but with side-effects. It pushes the fontFace as global style *)
-let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust ()
-   =
+let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust
+ ?unicodeRange () =
  let fontFace =
  [|
  Kloth.Option.map ~f:Declarations.fontStyle fontStyle;
  Kloth.Option.map ~f:Declarations.fontWeight fontWeight;
  Kloth.Option.map ~f:Declarations.fontDisplay fontDisplay;
  Kloth.Option.map ~f:Declarations.sizeAdjust sizeAdjust;
+ Kloth.Option.map ~f:Declarations.unicodeRange unicodeRange;
  Some (Declarations.fontFamily fontFamily);
  Some
  (Rule.Declaration

diff --git a/packages/runtime/native/shared/Css_types.ml b/packages/runtime/native/shared/Css_types.ml
@@ -4064,6 +4064,23 @@ module FontVariantEmoji = struct
  | #Cascading.t as c -> Cascading.toString c
 end
 
+module URange = struct
+ type t =
+ [ `single of string
+ | `range of string * string
+ | `wildcard of string * string
+ ]
+ array
+
+ let toString (x : t) =
+ Kloth.Array.map_and_join
+ ~f:(function
+ | `single x -> "U+" ^ x
+ | `range (x, y) -> Printf.sprintf "U+%s-%s" x y
+ | `wildcard (x, y) -> "U+" ^ x ^ y)
+ ~sep:{js|, |js} x
+end
+
 module InflexibleBreadth = struct
  type t =
  [ Length.t

diff --git a/packages/runtime/native/shared/Declarations.ml b/packages/runtime/native/shared/Declarations.ml
@@ -906,3 +906,5 @@ let fontOpticalSizing x =
 
 let fontVariantEmoji x =
  Rule.declaration ({js|fontVariantEmoji|js}, FontVariantEmoji.toString x)
+
+let unicodeRange x = Rule.declaration ({js|unicodeRange|js}, URange.toString x)
diff --git a/packages/runtime/rescript/Emotion_bindings.ml b/packages/runtime/rescript/Emotion_bindings.ml
@@ -50,14 +50,15 @@ let keyframes frames =
 let renderKeyframes _renderer frames = makeAnimation (framesToDict frames)
 
 (* This method is a Css_type function, but with side-effects. It pushes the fontFace as global style *)
-let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust ()
-   =
+let fontFace ~fontFamily ~src ?fontStyle ?fontWeight ?fontDisplay ?sizeAdjust
+ ?unicodeRange () =
  let fontFace =
  [|
  Kloth.Option.map ~f:Declarations.fontStyle fontStyle;
  Kloth.Option.map ~f:Declarations.fontWeight fontWeight;
  Kloth.Option.map ~f:Declarations.fontDisplay fontDisplay;
  Kloth.Option.map ~f:Declarations.sizeAdjust sizeAdjust;
+ Kloth.Option.map ~f:Declarations.unicodeRange unicodeRange;
  Some (Declarations.fontFamily fontFamily);
  Some
  (Rule.Declaration

diff --git a/packages/runtime/test/test_styles.ml b/packages/runtime/test/test_styles.ml
@@ -408,6 +408,21 @@ let global =
  let css = get_string_style_rules () in
  assert_string css (Printf.sprintf "html{line-height:1.15;}")
 
+let fontFace =
+ test "global" @@ fun () ->
+ let _ =
+ CSS.fontFace ~fontFamily:"foo" ~fontWeight:`bold
+ ~src:[| `url "foo.bar" |]
+ ~fontDisplay:`swap ~fontStyle:`normal ()
+ ~unicodeRange:
+ [| `wildcard ("30", "??"); `range ("3040", "309F"); `single "30A0" |]
+ in
+ let css = get_string_style_rules () in
+ assert_string css
+ (Printf.sprintf
+ "@font-face{font-style:normal;font-weight:700;font-display:swap;unicode-range:U+30??, \
+ U+3040-309F, U+30A0;font-family:\"foo\";src:url(\"foo.bar\");}")
+
 let duplicated_styles_unique =
  test "duplicated_styles_unique" @@ fun () ->
  let classname1 = CSS.style [| CSS.flexGrow 1. |] in
@@ -1046,6 +1061,7 @@ let tests =
  avoid_hash_collision;
  keyframe;
  global;
+ fontFace;
  duplicated_styles_unique;
  style_tag;
  real_world;