Style HTML tag

[pedrobslisboa]

Why

As mentioned by @purefunctor it would be nice to have full SSR support on styled-ppx:

That way the user doesn't need to create a function to handle it and it will work out of the box by the library.

How

• Deprecating render_style_tag since it doesn't render a tag but the style rules;
  • This avoids breaking change needs.
• Creating get_string_style_rules based on render_style_tag;
• Creating get_string_style_hashes to get all hashes;
• Creating the render_style_html_tag to deliver a full SSR-supported style tag.
  • Example: <style data-s data-emotion="css className1">.css-className1 { display: block; }</style>

Attention, this branch is a extension of this one: #468

Screenshot

The screenshot below shows how the emotion handles it well, only creating on client size only client styles the universal styles were not recreated.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
styled-ppx	⬜️ Ignored (Inspect)	Visit Preview		Apr 29, 2024 6:41pm

[davesnx]

Thanks for doing this, it's a great improvemenet

[davesnx]

We might not need the same tests cases as test_css_js_styles and we can live with one simple case and a "real world" example.

[davesnx]

Can you use render_style_tag inside render_style_html_tag?

[pedrobslisboa]

Hey @davesnx thank you for the review, to use the render_style_tag we would need something like this:

(** Deprecated: Use get_string_style_rules instead*)
let render_style_tag () =
  Stylesheet.get_all instance
  |> List.fold_left
       (fun accumulator (hash, rules) ->
         match rules with
         | Classnames rules ->
           let rules = pp_rules hash rules |> String.trim in
           Printf.sprintf "%s %s" accumulator rules
         | Keyframes keyframes ->
           let rules = pp_keyframes hash keyframes |> String.trim in
           Printf.sprintf "%s %s" accumulator rules)
       ""
  |> String.trim

let get_string_style_rules = render_style_tag

let get_string_style_hashes () =
  Stylesheet.get_all instance
  |> List.fold_left
       (fun accumulator (hash, _) ->
         Printf.sprintf "%s %s" accumulator hash |> String.trim)
       ""

let render_style_html_tag () =
  Printf.sprintf "<style data-s data-emotion=\"css %s\">%s</style>"
    (get_string_style_hashes ()) (get_string_style_rules ())

WDYT?

I'm also trying to define a better name for those functions, any idea about it?

[davesnx]

Having both tests is a bit unnecessary, I would only keep one

[purefunctor]

This looks good so far! Though, there's one quirk about the style tag rendering that I misspoke about in the screenshot above. The expected output should actually look like this:

<style data-emotion="css id123-someName" data-s>
  .css-id123-someName { }
</style>

Basically, the IDs used in data-emotion should not have the css- prefix. Also, to keep consistent with emotion's client-side behaviour maybe data-s could go second?

To my knowledge, Stylesheet.get_all already returns names prefixed with css-, so the only way to extract the IDs is to mechanically chop the prefix, which works, but is a little unsafe. Thoughts, @davesnx?

[davesnx]

Probably best to add the prefix where it matters only, and render here without any change.

Do you know why emotion doesn't need the "css-" prefix here?

[pedrobslisboa]

This looks good so far! Though, there's one quirk about the style tag rendering that I misspoke about in the screenshot above. The expected output should actually look like this:

<style data-emotion="css id123-someName" data-s>
  .css-id123-someName { }
</style>

Basically, the IDs used in data-emotion should not have the css- prefix. Also, to keep consistent with emotion's client-side behaviour maybe data-s could go second?

To my knowledge, Stylesheet.get_all already returns names prefixed with css-, so the only way to extract the IDs is to mechanically chop the prefix, which works, but is a little unsafe. Thoughts, @davesnx?

@purefunctor What about the animation- prefix? Does it need to be removed?

[purefunctor]

Do you know why emotion doesn't need the "css-" prefix here?

I'm not entirely sure myself, maybe it's just how emotion encodes it? Ultimately it sees the prefix already as the first word under data-emotion.

What about the animation- prefix? Does it need to be removed?

Not sure as well, it's be good to check but I won't be able to until tomorrow!

[pedrobslisboa]

Probably best to add the prefix where it matters only, and render here without any change.

Do you know why emotion doesn't need the "css-" prefix here?

Were you talking about something like this?

- let pp_keyframes hash keyframes =
+ let pp_keyframes preffix hash keyframes =
   let pp_keyframe (percentage, rules) =
     Printf.sprintf "%i%% { %s }" percentage (render_declarations rules)
   in
   let definition = keyframes |> List.map pp_keyframe |> String.concat " " in
-  Printf.sprintf "@keyframes %s { %s }" hash definition
+  Printf.sprintf "@keyframes %s-%s { %s }" preffix hash definition

(* ... *)

(* `resolved_rule` here means to print valid CSS, selectors are nested
   and properties aren't autoprefixed. This function transforms into correct CSS. *)
- let pp_rules hash rules =
+ let pp_keyframes preffix hash keyframes =
   (* TODO: Refactor with partition or partition_map. List.filter_map is error prone.
      Ss might need to respect the order of definition, and this breaks the order *)
   let list_of_rules = rules |> resolve_selectors in
   let declarations =
     list_of_rules
     |> List.map Autoprefixer.prefix
     |> List.flatten
     |> List.filter_map render_declaration
     |> String.concat " "
-    |> fun all -> Printf.sprintf ".%s { %s }" hash all
+    |> Printf.sprintf "@keyframes %s-%s { %s }" preffix hash definition
   in

(* ... *)

- let render_hash prefix hash styles =
+ let render_hash hash styles =
    let is_label = function D ("label", value) -> Some value | _ -> None in
    match List.find_map is_label styles with
-   | None -> Printf.sprintf "%s-%s" prefix hash
-   | Some label -> Printf.sprintf "%s-%s-%s" prefix hash label
+   | None -> Printf.sprintf "%s" hash
+   | Some label -> Printf.sprintf "%s-%s" hash label

let style (styles : rule list) =
  match styles with
  | [] -> ""
  | _ ->
+    let type_ = "css"
     let hash = Emotion_hash.Hash.default (rules_to_string styles) in
-    let className = render_hash "css" hash styles in
+    let className = render_hash hash styles in
     Stylesheet.push instance (type_, className, Classnames styles);
-    className
+    Printf.sprintf "%s-%s" type_ className

let keyframes (keyframes : (int * rule list) list) =
  match keyframes with
  | [] -> ""
  | _ ->
+  let type_ = "animation"
    let hash = Emotion_hash.Hash.default (keyframes_to_string keyframes) in
    Stylesheet.push instance (type_, hash, Keyframes keyframes);
-   animationName
+  "Printf.sprintf "%s-%s" type_ animationName

let get_style_rules () =
  Stylesheet.get_all instance
  |> List.fold_left
        (fun accumulator (type_, hash, rules) ->
          match rules with
          | Classnames rules ->
            let rules = pp_rules type_ hash rules |> String.trim in
            Printf.sprintf "%s %s" hash rules
          | Keyframes keyframes ->
            let rules = pp_keyframes type_ hash keyframes |> String.trim in
            Printf.sprintf "%s %s" hash rules)
        ""
  |> String.trim

[purefunctor]

Here's an initial fix I came up with, it doesn't account for animations yet:
purefunctor@3032dee

[purefunctor]

Okay, so with animations, here's what @emotion/server emits on my SSR script. They're stuffed under the css-global namespace with the hashes (as expected):

<style data-emotion="css-global 1acbpvw">
  @-webkit-keyframes animation-1acbpvw {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes animation-1acbpvw {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
</style>

I also discovered that for [%styled.global ...] styles, emotion emits the following, though I'm not entirely sure where it got the hash from.

<style data-emotion="css-global 1dvid4v">
  body {
    background-color: #1F1F1F;
    color: #F5F5F5;
    margin: 0;
    padding: 0;
  }

  #root {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    box-sizing: border-box;
    padding: 1rem;
    min-height: 100vh;
  }

  #root>main {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }

  @media screen and (min-width: 768px) {
    #root {
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }
  }
</style>

[pedrobslisboa]

@davesnx I have to issue a mea culpa for not testing it on a project using a reasonml SSR.
I'm going to take the @purefunctor details and going to make some changes and test it on a side project. As soon as I have it I'll push to this PR.

[pedrobslisboa]

⚠️ To my future me ⚠️

It would be nice to have a demo of this feature on styleppx

[davesnx]

maybe a record here would be needed now, wdyt?

[pedrobslisboa]

Due to your comment below (#467 (comment))

I was thinking to keep as before:

Suggested change

	mutable rules : (string * string * declarations) list;
	mutable rules : (string * declarations) list;

And have the declarations like this:

type declarations =
  | Global of rule list
  | Classnames of (string * rule list)
  | Keyframes of (string * (int * rule list) list)

Maybe declarations Classnames and Keyframes could be a record for better documentation.

type declarations =
  | Global of rule list
  | Classnames of {
      name : string;
      styles : rule list;
    }
  | Keyframes of {
      name : string;
      keyframes : (int * rule list) list;
    }

(* ... *)

let render_style_tag () =
  Stylesheet.get_all instance
  |> List.fold_left
       (fun accumulator (_, rules) ->
         match rules with
         | Global rules ->
           Printf.sprintf "%s %s" accumulator (rules_to_string rules)
         | Classnames { name; styles } ->
           let rules = pp_rules name styles |> String.trim in
           Printf.sprintf "%s %s" accumulator rules
         | Keyframes { name; keyframes } ->
           let rules = pp_keyframes name keyframes |> String.trim in
           Printf.sprintf "%s %s" accumulator rules)
       ""
  |> String.trim

WDYT?

[davesnx]

Looking at this I wonder if the prefix can be stored inside Classnames and don't need to do anything in Global, thoughts?

[pedrobslisboa]

Nice idea, what about something like this:

let style (styles : rule list) =
  match styles with
  | [] -> ""
  | _ ->
    let hash = render_hash (Murmur2.default (rules_to_string styles)) styles in
    let className = Printf.sprintf "%s-%s" "css" hash in
    Stylesheet.push instance (hash, Classnames (className, styles));
    className

let global (styles : rule list) =
  match styles with
  | [] -> ""
  | _ ->
    let hash = Murmur2.default (rules_to_string styles) in
    Stylesheet.push instance (hash, Global styles);
    hash

let keyframes (keyframes : (int * rule list) list) =
  match keyframes with
  | [] -> ""
  | _ ->
    let hash = Murmur2.default (keyframes_to_string keyframes) in
    let animationName = Printf.sprintf "%s-%s" "animation" hash in
    Stylesheet.push instance (hash, Keyframes (animationName, keyframes));
    animationName

Then we can manage hash, which is a value for all styles, and the variant provides the need for extra info.

The usage can be:

let render_style_tag () =
  Stylesheet.get_all instance
  |> List.fold_left
       (fun accumulator (_, rules) ->
         match rules with
         | Global rules ->
           Printf.sprintf "%s %s" accumulator (rules_to_string rules)
         | Classnames (className, rules) ->
           let rules = pp_rules className rules |> String.trim in
           Printf.sprintf "%s %s" accumulator rules
         | Keyframes (animationName, keyframes) ->
           let rules = pp_keyframes animationName keyframes |> String.trim in
           Printf.sprintf "%s %s" accumulator rules)
       ""
  |> String.trim

[davesnx]

You moved away from the idea of having a server-reason-react component here?

[pedrobslisboa]

I forgot to add it.
I'm going to apply it like this:

let style_tag =
  React.createElement "style"
    [
      String ("data-emotion", "css " ^ get_string_style_hashes ());
      Bool ("data-s", true);
      DangerouslyInnerHtml (get_string_style_rules ());
    ]
    []

wdyt?

[davesnx]

That's exactly it

[pedrobslisboa]

@davesnx I was trying to create this style_tag to use like <Css.styleTag/>

let style_tag ?key:_ ()=
  React.createElement "style"
    [
      String ("data-emotion", "css " ^ get_string_style_hashes ());
      Bool ("data-s", true);
      DangerouslyInnerHtml (get_string_style_rules ());
    ]
    []

But I'm receiving this issue:

A workaround for it is:

let style_tag ?key:_ ?children:_ ()=
  React.createElement "style"
    [
      String ("data-emotion", "css " ^ get_string_style_hashes ());
      Bool ("data-s", true);
      DangerouslyInnerHtml (get_string_style_rules ());
    ]
    []

But seems strange to have children that isn't used and even without breaking the calling when adding it:
<Css.styleTag/> children </Css.styleTag> It should have an error since it shouldn't receive a children value.

Should I use the workaround or do you have any idea how to handle it?

[davesnx]

The error message isn't the best, but it tells about a missing children argument, which should be there, so the function should be:

let style_tag ?key:_ () =
  React.createElement "style"
    [
      String ("data-emotion", "css " ^ get_string_style_hashes ());
      Bool ("data-s", true);
      DangerouslyInnerHtml (get_string_style_rules ());
    ]
    []

actually, not even key should be needed in this case, it doesn't hurt but isn't needed by any chance.

[pedrobslisboa]

I thought the same, but I guess it is the way JSX is being handled, when calling the make function from the component as , it expects those parameters. Does it make sense?

[davesnx]

Random idea: Do you have server-reason-react.react added as dependency?

[pedrobslisboa]

I'm testing it on e2e-melange which has this dune for the debug:

(executable
 (name debug)
 (public_name e2e_melange_debug)
 (modules :standard \ index)
 (libraries ui_native server-reason-react.react server-reason-react.reactDom styled-ppx.emotion_native styled-ppx.css_native)
 (preprocess
  (pps styled-ppx)))

Here is where I'm testing it:
https://github.com/davesnx/styled-ppx/pull/467/files#diff-91524fce38f09c49377280b9f79564819152a9851f302f5a91ad126a0ea3b991

I update de PR to be better to read the new ideas.

BTW, is this the demo you're talking about at the discord? I didn't find any demo folder.

[davesnx]

Really great addition.