diff --git a/packages/reflex-components-radix/news/7098.bugfix.md b/packages/reflex-components-radix/news/7098.bugfix.md new file mode 100644 index 00000000000..7229513c9ec --- /dev/null +++ b/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. diff --git a/packages/reflex-components-radix/src/reflex_components_radix/primitives/accordion.py b/packages/reflex-components-radix/src/reflex_components_radix/primitives/accordion.py index d4bad6b3bcb..790784bcd3e 100644 --- a/packages/reflex-components-radix/src/reflex_components_radix/primitives/accordion.py +++ b/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, }, diff --git a/tests/units/components/radix/test_accordion.py b/tests/units/components/radix/test_accordion.py new file mode 100644 index 00000000000..92b08d07fc7 --- /dev/null +++ b/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 + )