remove keyframes as template string and inline it (#5541)

* remove keyframes as template string and inline it

* remove one extra guy

* ah

* woops

* precommit again

* bump vite

Author: adhami3310

pyi_hashes.json

@@ -45,7 +45,7 @@
   "reflex/components/plotly/plotly.pyi": "1de86aa6881e59d4053206e62e3039c3",
   "reflex/components/radix/__init__.pyi": "5d8e3579912473e563676bfc71f29191",
   "reflex/components/radix/primitives/__init__.pyi": "68fcf93acb9a40d94561d375a3a5fdb1",
-  "reflex/components/radix/primitives/accordion.pyi": "2df705ef76706119731b410165a0bdcd",
+  "reflex/components/radix/primitives/accordion.pyi": "126758bb92f4d06853ea5a73cc193c77",
   "reflex/components/radix/primitives/base.pyi": "bde318c8eb87aa3f63bd827493675da3",
   "reflex/components/radix/primitives/drawer.pyi": "5ef31326d1f76956fd8eaafbc661f1a2",
   "reflex/components/radix/primitives/form.pyi": "2461e70c7a114381bb7d1f609747cbeb",

reflex/components/core/banner.py

@@ -268,7 +268,9 @@ def create(cls, *children, **props) -> Icon:
         Returns:
             The icon component with default props applied.
         """
-        pulse_var = Var(_js_expr="pulse")
+        pulse_var = Var(r"keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })").to(
+            str
+        )
         return super().create(
             "wifi_off",
             color=props.pop("color", "crimson"),
@@ -289,18 +291,6 @@ def add_imports(self) -> dict[str, str | ImportVar | list[str | ImportVar]]:
         """
         return {"@emotion/react": [ImportVar(tag="keyframes")]}
 
-    def _get_custom_code(self) -> str | None:
-        return """
-const pulse = keyframes`
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-`
-"""
-
 
 class ConnectionPulser(Div):
     """A connection pulser component."""

reflex/components/radix/primitives/accordion.py

@@ -431,6 +431,14 @@ def create(cls, *children, **props) -> Component:
         return super().create(tag="chevron_down", class_name=cls_name, **props)
 
 
+SLIDE_DOWN = Var(
+    r'keyframes({ from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" } })'
+)
+SLIDE_UP = Var(
+    r'keyframes({ from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 } })'
+)
+
+
 class AccordionContent(AccordionComponent):
     """An accordion component."""
 
@@ -464,44 +472,17 @@ def create(cls, *children, **props) -> Component:
 
         return super().create(*children, class_name=cls_name, **props)
 
-    def add_custom_code(self) -> list[str]:
-        """Add custom code to the component.
-
-        Returns:
-            The custom code of the component.
-        """
-        return [
-            """
-const slideDown = keyframes`
-from {
-  height: 0;
-}
-to {
-  height: var(--radix-accordion-content-height);
-}
-`
-const slideUp = keyframes`
-from {
-  height: var(--radix-accordion-content-height);
-}
-to {
-  height: 0;
-}
-`
-"""
-        ]
-
     def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        slide_down = Var("slideDown").to(str) + Var.create(
+        slide_down = SLIDE_DOWN.to(str) + Var.create(
             " var(--animation-duration) var(--animation-easing)",
         )
 
-        slide_up = Var("slideUp").to(str) + Var.create(
+        slide_up = SLIDE_UP.to(str) + Var.create(
             " var(--animation-duration) var(--animation-easing)",
         )
 

reflex/constants/installer.py

@@ -143,7 +143,7 @@ def DEPENDENCIES(cls) -> dict[str, str]:
         "postcss-import": "16.1.1",
         "@react-router/dev": _react_router_version,
         "@react-router/fs-routes": _react_router_version,
-        "rolldown-vite": "7.0.3",
+        "rolldown-vite": "7.0.5",
     }
     OVERRIDES = {
         # This should always match the `react` version in DEPENDENCIES for recharts compatibility.