Ampersand not resolved correctly on global (#532)

* fix: ampersand not resolved correctly on global * chore: create new test for ampersand global
davesnx · Dec 24, 2024 · 08feeab · 08feeab
1 parent 6743ac9
commit 08feeab
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/packages/runtime/native/CSS.ml b/packages/runtime/native/CSS.ml
@@ -275,11 +275,7 @@ let resolve_selectors rules =
           match prefix with
           | None -> current_selector
           | Some prefix ->
-            (* child starts with &, join them without space *)
-            if starts_with_ampersand current_selector then
-              prefix ^ remove_first_ampersand current_selector
-              (* child starts with dot, join them without space *)
-            else if contains_ampersand current_selector then
+            if contains_ampersand current_selector then
               (* reemplazar el ampersand del current_selector, con el padre *)
               replace_ampersand ~by:prefix current_selector
             else if starts_with_double_dot current_selector then

diff --git a/packages/runtime/test/test_styles.ml b/packages/runtime/test/test_styles.ml
@@ -1050,6 +1050,34 @@ let global_with_selector =
   assert_string css
     (Printf.sprintf "html{line-height:1.15;}a{}a:hover{padding:0;}")
 
+let ampersand_everywhere_global =
+  test "ampersand_everywhere_global" @@ fun () ->
+    [%global
+      {|
+      .foo {
+        &[data-foo=bar] .lola {
+          font-size: 2px;
+        }
+        & .lola &::placeholder {
+          font-size: 3px;
+        }
+        .lola &:not(a) {
+          font-size: 4px;
+        }
+        .lola {
+          font-size: 5px;
+        }
+        .lola & &:focus & & .lola {
+          font-size: 6px;
+        }
+      }
+    |}];
+  let css = get_string_style_rules () in
+  assert_string css
+       ".foo{}.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;}"
+
 let tests =
   ( "CSS",
     [
@@ -1107,4 +1135,5 @@ let tests =
       mq_inside_selector_with_declarations;
       mq_and_selectors_2;
       global_with_selector;
+      ampersand_everywhere_global;
     ] )