fix: avoid Emotion SSR warning in Radix accordion

packages/reflex-components-radix/news/7098.bugfix.md

@@ -0,0 +1 @@
+Avoid Emotion's unsafe `:first-child` SSR warning for Radix Accordion items in development mode.

packages/reflex-components-radix/src/reflex_components_radix/primitives/accordion.py

@@ -278,7 +278,7 @@ def add_style(self) -> dict[str, Any] | None:
             "width": "100%",
             "margin_top": "1px",
             "border_top": divider_style,
-            "&:first-child": {
+            "&:first-of-type": {
                 "margin_top": 0,
                 "border_top": 0,
                 "border_top_left_radius": "var(--radius-4)",
@@ -292,7 +292,7 @@ def add_style(self) -> dict[str, Any] | None:
                 "position": "relative",
                 "z_index": 1,
             },
-            _inherited_variant_selector("ghost", "&:first-child"): {
+            _inherited_variant_selector("ghost", "&:first-of-type"): {
                 "border_radius": 0,
                 "border_top": divider_style,
             },

tests/units/components/radix/test_accordion.py

@@ -0,0 +1,16 @@
+"""Tests for Radix Accordion components."""
+
+from reflex_components_radix.primitives.accordion import AccordionItem
+
+
+def test_accordion_item_uses_ssr_safe_first_item_selector() -> None:
+    """Use Emotion-safe selectors for the first accordion item."""
+    style = AccordionItem.create().add_style()
+
+    assert style is not None
+    assert "&:first-of-type" in style
+    assert not any(":first-child" in selector for selector in style)
+    assert any(
+        "data-variant='ghost'" in selector and ":first-of-type" in selector
+        for selector in style
+    )