Fix media query on nested selector (#536)

* fix: move media at top nesting * chore: keep previous test
davesnx · Jan 15, 2025 · d78567c · d78567c
1 parent f0c162d
commit d78567c
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 15 deletions.
diff --git a/packages/runtime/native/CSS.ml b/packages/runtime/native/CSS.ml
@@ -271,9 +271,9 @@ let resolve_selectors rules =
        we split those into separate selectors with the same rules *)
     Array.partition_map rules ~f:(function
       (* in case of being at @media, don't do anything to it *)
-      | Rule.Selector (current_selector, selector_rules)
+      | Rule.Selector (current_selector, _) as rule
         when starts_with_at current_selector.(0) ->
-        Right [| Rule.Selector (current_selector, selector_rules) |]
+        Left rule
       | Rule.Selector (current_selector, selector_rules) ->
         (* we derive the new prefix based on the current_selector and the previous "prefix" (aka the prefix added by the parent selector) *)
         let new_prefix =
@@ -297,14 +297,14 @@ let resolve_selectors rules =
         let new_selector = Rule.Selector ([| new_prefix |], selectors) in
         Right (Array.append [| new_selector |] rest_of_declarations)
       | _ as rule -> Left rule)
-    |> fun (selectors, declarations) -> selectors, Array.flatten declarations
+    |> fun (declarations, selectors) -> declarations, Array.flatten selectors
   in
 
   let rules = move_media_at_top rules in
   let rules = split_multiple_selectors rules in
   (* The base case for unnesting is without any prefix *)
   let declarations, selectors = unnest_selectors ~prefix:None rules in
-  Array.append declarations selectors
+  Array.append (move_media_at_top selectors) declarations
 
 let render_keyframes ~buffer animationName keyframes =
   Buffer.add_string buffer "@keyframes ";

diff --git a/packages/runtime/test/test_styles.ml b/packages/runtime/test/test_styles.ml
@@ -332,17 +332,17 @@ let selector_nested_with_mq_and_declarations =
     [%cx
       {|
       li {
-        list-style-type: none;
+       list-style-type: none;
 
-        ::before {
-          position: absolute;
-          left: -20px;
-          content: "✓";
-        }
+       ::before {
+         position: absolute;
+         left: -20px;
+         content: "✓";
+       }
 
-        @media $(mobile) {
-          position: relative;
-        }
+       @media $(mobile) {
+         position: relative;
+       }
       }
     |}]
   in
@@ -354,6 +354,41 @@ let selector_nested_with_mq_and_declarations =
         position: relative; } }"
        classname classname classname)
 
+let selector_nested_with_mq_and_declarations2 =
+  test "selector_nested_with_mq_and_declarations2" @@ fun () ->
+  let mobile = "(max-width: 767px)" in
+  let classname =
+    [%cx
+      {|
+      .a {
+        color: red;
+        @media $(mobile) {
+          height: 1px;
+          .d {
+            color: green;
+          }
+        }
+        .b {
+          color: blue;
+          @media $(mobile) {
+            height: 2px;
+            .c {
+              color: yellow;
+            }
+          }
+        }
+      }
+    |}]
+  in
+  let css = get_string_style_rules () in
+  assert_string css
+    (Printf.sprintf
+       ".%s .a { color: #FF0000; } .%s .a .b { color: #0000FF; } @media \
+        (max-width: 767px) { .%s .a .b { height: 2px; } .%s .a .b .c { color: \
+        #FFFF00; } } @media (max-width: 767px) { .%s .a { height: 1px; } .%s \
+        .a .d { color: #008000; } }"
+       classname classname classname classname classname classname)
+
 let mq =
   test "mq" @@ fun () ->
   let classname =
@@ -1122,7 +1157,7 @@ let global_with_selector =
    |}];
   let css = get_string_style_rules () in
   assert_string css
-    (Printf.sprintf "html{line-height:1.15;}a{}a:hover{padding:0;}")
+    (Printf.sprintf "html{line-height:1.15;}a:hover{padding:0;}")
 
 let ampersand_everywhere_global =
   test "ampersand_everywhere_global" @@ fun () ->
@@ -1148,7 +1183,7 @@ let ampersand_everywhere_global =
     |}];
   let css = get_string_style_rules () in
   assert_string css
-    ".foo{}.foo[data-foo=bar] .lola{font-size:2px;}.foo .lola \
+    ".foo[data-foo=bar] .lola{font-size:2px;}.foo .lola \
      .foo::placeholder{font-size:3px;}.lola .foo:not(a){font-size:4px;}.foo \
      .lola{font-size:5px;}.lola .foo .foo:focus .foo .foo \
      .lola{font-size:6px;}"
@@ -1198,6 +1233,7 @@ let tests =
       selector_nested_with_pseudo_2;
       selector_nested_with_pseudo_3;
       selector_nested_with_mq_and_declarations;
+      selector_nested_with_mq_and_declarations2;
       selector_nested_interpolation_with_multiple;
       mq_with_selectors;
       mq;