Fix toString on backgroundSize

Author: davesnx

e2e/melange/package.json

@@ -12,7 +12,6 @@
     "jsdom": "^21.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-
     "webpack": "^5.73.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.9.1"

e2e/melange/src/ui/ui.re

@@ -89,9 +89,16 @@ let container = [%cx
 ];
 
 module App = {
+  let blockDefaultBackground = [%cx
+    {|
+       background-size: 20px 20px;
+       background-position: 0 0, 10px 0, 10px -10px, 0 10px;
+     |}
+  ];
+
   [@react.component]
   let make = () =>
-    <>
+    <main className=blockDefaultBackground>
       <div className=post>
         <div className={card ++ " " ++ container}>
           <h2> {React.string("Card title")} </h2>
@@ -102,7 +109,7 @@ module App = {
         <div className=clx> {React.string("code everywhere!")} </div>
         <div className=selectors> {React.string("Red text")} </div>
       </Cositas>
-    </>;
+    </main>;
 };
 
 let color = `hex("333");

packages/ppx/test/css-support/backgrounds-and-borders-module.t/input.re

@@ -45,6 +45,7 @@ module Color = {
 [%css {|background-size: 10px auto|}];
 [%css {|background-size: auto 10%|}];
 [%css {|background-size: 50em 50%|}];
+[%css {|background-size: 20px 20px|}];
 /* [%css {|background: url(foo.png), url(bar.svg)|}]; */
 [%css {|background: top left / 50% 60%|}];
 [%css {|background: border-box|}];

packages/ppx/test/css-support/backgrounds-and-borders-module.t/run.t

@@ -61,6 +61,7 @@ If this test fail means that the module is not in sync with the ppx
   CSS.backgroundSize(`size((`pxFloat(10.), `auto)));
   CSS.backgroundSize(`size((`auto, `percent(10.))));
   CSS.backgroundSize(`size((`em(50.), `percent(50.))));
+  CSS.backgroundSize(`size((`pxFloat(20.), `pxFloat(20.))));
 
   CSS.backgroundPosition(`hvOffset((`left, `top)));
   CSS.backgroundOrigin(`borderBox);

packages/runtime/native/shared/Css_types.ml

@@ -3653,9 +3653,14 @@ module BackgroundSize = struct
     let size (x : [ Length.t | Auto.t ]) (y : [ Length.t | Auto.t ]) =
       `size (x, y)
 
-    let rec toString (x : t) =
+    let size_to_string (x : [ Length.t | Auto.t ]) =
+      match x with
+      | #Length.t as l -> Length.toString l
+      | #Auto.t -> Auto.toString
+
+    let toString (x : t) =
       match x with
-      | `size (x, y) -> (toString (x :> t) ^ {js| |js}) ^ toString (y :> t)
+      | `size (x, y) -> size_to_string x ^ {js| |js} ^ size_to_string y
       | `cover -> {js|cover|js}
       | `contain -> {js|contain|js}
       | #Length.t -> Auto.toString