Rule.Selector now accepts string array instead of string (#534)

* refactor: Rule.Selector now accepts string array instead of string * chore: forgot to change rescript emotion binding * feat: create selectorMany to avoid breaking change
davesnx · Jan 13, 2025 · f0c162d · f0c162d
1 parent 08feeab
commit f0c162d
Show file tree

Hide file tree

Showing 33 changed files with 482 additions and 338 deletions.
diff --git a/packages/ppx/src/Css_to_runtime.re b/packages/ppx/src/Css_to_runtime.re
@@ -9,7 +9,7 @@ module CSS = {
   /* This is the public API of the CSS module */
   let ident = (~loc, name) =>
     {txt: Ldot(Lident("CSS"), name), loc} |> Builder.pexp_ident(~loc);
-  let selector = (~loc) => ident(~loc, "selector");
+  let selectorMany = (~loc) => ident(~loc, "selectorMany");
   let media = (~loc) => ident(~loc, "media");
   let global = (~loc) => ident(~loc, "global");
   let label = (~loc) => ident(~loc, "label");
@@ -166,12 +166,15 @@ and render_container_query = (~loc, at_rule: at_rule) => {
   | Error(error_expr) => error_expr
   | Ok(conditions) =>
     let query =
-      String_interpolation.transform(
-        ~attrs,
-        ~delimiter,
-        ~loc=at_rule.loc,
-        "@container " ++ conditions,
-      );
+      [
+        String_interpolation.transform(
+          ~attrs,
+          ~delimiter,
+          ~loc=at_rule.loc,
+          "@container " ++ conditions,
+        ),
+      ]
+      |> Builder.pexp_array(~loc=at_rule.loc);
 
     let rules =
       switch (at_rule.block) {
@@ -186,7 +189,7 @@ and render_container_query = (~loc, at_rule: at_rule) => {
 
     Helper.Exp.apply(
       ~loc=at_rule.loc,
-      CSS.selector(~loc=at_rule.loc),
+      CSS.selectorMany(~loc=at_rule.loc),
       [(Nolabel, query), (Nolabel, rules)],
     );
   };
@@ -336,7 +339,11 @@ and render_selector = (~loc, selector: selector) => {
         ":"
         ++ name
         ++ "("
-        ++ (render_selectors(~loc, payload) |> String.trim)
+        ++ (
+          render_selectors(~loc, payload)
+          |> String.concat(", ")
+          |> String.trim
+        )
         ++ ")";
       }
   and render_pseudo_selector =
@@ -389,8 +396,7 @@ and render_selector = (~loc, selector: selector) => {
 }
 and render_selectors = (~loc, selectors) => {
   selectors
-  |> List.map(((selector, _loc)) => render_selector(~loc, selector))
-  |> String.concat(", ");
+  |> List.map(((selector, _loc)) => render_selector(~loc, selector));
 }
 and render_style_rule = (~loc, rule: style_rule) => {
   let (prelude, prelude_loc) = rule.prelude;
@@ -407,16 +413,19 @@ and render_style_rule = (~loc, rule: style_rule) => {
   let selector_name =
     prelude
     |> render_selectors(~loc=selector_location)
-    |> String.trim
-    |> String_interpolation.transform(
-         ~attrs,
-         ~delimiter,
-         ~loc=selector_location,
-       );
+    |> List.map(String.trim)
+    |> List.map(
+         String_interpolation.transform(
+           ~attrs,
+           ~delimiter,
+           ~loc=selector_location,
+         ),
+       )
+    |> Builder.pexp_array(~loc=selector_location);
 
   Helper.Exp.apply(
     ~loc=selector_location,
-    CSS.selector(~loc=selector_location),
+    CSS.selectorMany(~loc=selector_location),
     [(Nolabel, selector_name), (Nolabel, selector_expr)],
   );
 };

diff --git a/packages/ppx/test/css-support/non-valid-property-location-error-nested.t/run.t b/packages/ppx/test/css-support/non-valid-property-location-error-nested.t/run.t
@@ -23,8 +23,8 @@ If this test fail means that the module is not in sync with the ppx
     CSS.style([|
       CSS.label("selectors"),
       CSS.color(CSS.white),
-      CSS.selector(
-        {js|&:hover|js},
+      CSS.selectorMany(
+        [|{js|&:hover|js}|],
         [|[%ocaml.error "Unknown property 'colorx'"]|],
       ),
     |]);

diff --git a/packages/ppx/test/css-support/non-valid-value-location-error-nested.t/run.t b/packages/ppx/test/css-support/non-valid-value-location-error-nested.t/run.t
@@ -23,8 +23,8 @@ If this test fail means that the module is not in sync with the ppx
     CSS.style([|
       CSS.label("selectors"),
       CSS.color(CSS.white),
-      CSS.selector(
-        {js|&:hover|js},
+      CSS.selectorMany(
+        [|{js|&:hover|js}|],
         [|[%ocaml.error "Property 'color' has an invalid value: 'cositas'"]|],
       ),
     |]);

diff --git a/packages/ppx/test/css-support/selector-interp-location-error.t/run.t b/packages/ppx/test/css-support/selector-interp-location-error.t/run.t
@@ -21,7 +21,10 @@ If this test fail means that the module is not in sync with the ppx
   let _className =
     CSS.style([|
       CSS.label("_className"),
-      CSS.selector({js|.lolaso :nth-child(2n)|js}, [|CSS.color(CSS.red)|]),
+      CSS.selectorMany(
+        [|{js|.lolaso :nth-child(2n)|js}|],
+        [|CSS.color(CSS.red)|],
+      ),
     |]);
 
   let _className = [%ocaml.error "Parse error while reading token '2'"];
diff --git a/packages/ppx/test/css-support/selectors.t/run.t b/packages/ppx/test/css-support/selectors.t/run.t
@@ -18,25 +18,27 @@ If this test fail means that the module is not in sync with the ppx
     CSS.style([|
       CSS.label("_chart"),
       CSS.userSelect(`none),
-      CSS.selector(
-        {js|.recharts-cartesian-grid-horizontal|js},
+      CSS.selectorMany(
+        [|{js|.recharts-cartesian-grid-horizontal|js}|],
         [|
-          CSS.selector(
-            {js|line|js},
+          CSS.selectorMany(
+            [|{js|line|js}|],
             [|
-              CSS.selector(
-                {js|:nth-last-child(1), :nth-last-child(2)|js},
+              CSS.selectorMany(
+                [|{js|:nth-last-child(1)|js}, {js|:nth-last-child(2)|js}|],
                 [|CSS.SVG.strokeOpacity(`num(0.))|],
               ),
             |],
           ),
         |],
       ),
-      CSS.selector(
-        {js|.recharts-scatter .recharts-scatter-symbol .recharts-symbols|js},
+      CSS.selectorMany(
+        [|
+          {js|.recharts-scatter .recharts-scatter-symbol .recharts-symbols|js},
+        |],
         [|
           CSS.opacity(0.8),
-          CSS.selector({js|:hover|js}, [|CSS.opacity(1.)|]),
+          CSS.selectorMany([|{js|:hover|js}|], [|CSS.opacity(1.)|]),
         |],
       ),
     |]);

diff --git a/packages/ppx/test/native/At_rule_test.re b/packages/ppx/test/native/At_rule_test.re
@@ -257,7 +257,7 @@ let container_query_tests = [
     [%expr [%cx "@container (min-width: 150px) {}"]],
     [%expr
       CSS.style([|
-        CSS.selector({js|@container (min-width: 150px)|js}, [||]),
+        CSS.selectorMany([|{js|@container (min-width: 150px)|js}|], [||]),
       |])
     ],
   ),
@@ -266,7 +266,7 @@ let container_query_tests = [
     [%expr [%cx "@container (max-width: 1000px) {}"]],
     [%expr
       CSS.style([|
-        CSS.selector({js|@container (max-width: 1000px)|js}, [||]),
+        CSS.selectorMany([|{js|@container (max-width: 1000px)|js}|], [||]),
       |])
     ],
   ),
@@ -275,23 +275,25 @@ let container_query_tests = [
     [%expr [%cx "@container name (width >= 150px) {}"]],
     [%expr
       CSS.style([|
-        CSS.selector({js|@container name (width >= 150px)|js}, [||]),
+        CSS.selectorMany([|{js|@container name (width >= 150px)|js}|], [||]),
       |])
     ],
   ),
   (
     "(height >= 150px)",
     [%expr [%cx "@container (height >= 150px) {}"]],
     [%expr
-      CSS.style([|CSS.selector({js|@container (height >= 150px)|js}, [||])|])
+      CSS.style([|
+        CSS.selectorMany([|{js|@container (height >= 150px)|js}|], [||]),
+      |])
     ],
   ),
   (
     "(inline-size >= 150px)",
     [%expr [%cx "@container (inline-size >= 150px) {}"]],
     [%expr
       CSS.style([|
-        CSS.selector({js|@container (inline-size >= 150px)|js}, [||]),
+        CSS.selectorMany([|{js|@container (inline-size >= 150px)|js}|], [||]),
       |])
     ],
   ),
@@ -300,7 +302,7 @@ let container_query_tests = [
     [%expr [%cx "@container (block-size >= 150px) {}"]],
     [%expr
       CSS.style([|
-        CSS.selector({js|@container (block-size >= 150px)|js}, [||]),
+        CSS.selectorMany([|{js|@container (block-size >= 150px)|js}|], [||]),
       |])
     ],
   ),
@@ -309,7 +311,7 @@ let container_query_tests = [
     [%expr [%cx "@container (aspect-ratio: 1 / 1) {}"]],
     [%expr
       CSS.style([|
-        CSS.selector({js|@container (aspect-ratio: 1 / 1)|js}, [||]),
+        CSS.selectorMany([|{js|@container (aspect-ratio: 1 / 1)|js}|], [||]),
       |])
     ],
   ),
@@ -318,7 +320,7 @@ let container_query_tests = [
     [%expr [%cx "@container (orientation: portrait) {}"]],
     [%expr
       CSS.style([|
-        CSS.selector({js|@container (orientation: portrait)|js}, [||]),
+        CSS.selectorMany([|{js|@container (orientation: portrait)|js}|], [||]),
       |])
     ],
   ),
@@ -327,8 +329,8 @@ let container_query_tests = [
     [%expr [%cx "@container (width >= 150px) and (orientation: portrait) {}"]],
     [%expr
       CSS.style([|
-        CSS.selector(
-          {js|@container (width >= 150px) and (orientation: portrait)|js},
+        CSS.selectorMany(
+          [|{js|@container (width >= 150px) and (orientation: portrait)|js}|],
           [||],
         ),
       |])
@@ -339,7 +341,7 @@ let container_query_tests = [
     [%expr [%cx "@container name not (width < 150px) {}"]],
     [%expr
       CSS.style([|
-        CSS.selector({js|@container name not (width < 150px)|js}, [||]),
+        CSS.selectorMany([|{js|@container name not (width < 150px)|js}|], [||]),
       |])
     ],
   ),
@@ -348,8 +350,8 @@ let container_query_tests = [
     [%expr [%cx "@container (width >= 150px) or (orientation: portrait) {}"]],
     [%expr
       CSS.style([|
-        CSS.selector(
-          {js|@container (width >= 150px) or (orientation: portrait)|js},
+        CSS.selectorMany(
+          [|{js|@container (width >= 150px) or (orientation: portrait)|js}|],
           [||],
         ),
       |])