fix styles_template

Author: adhami3310

reflex/compiler/compiler.py

@@ -321,7 +321,7 @@ def _compile_root_stylesheet(stylesheets: list[str], reset_style: bool = True) -
             'The `libsass` package is required to compile sass/scss stylesheet files. Run `pip install "libsass>=0.23.0"`.'
         )
 
-    return templates.STYLE.render(stylesheets=sheets)
+    return templates.styles_template(stylesheets=sheets)
 
 
 def _compile_component(component: Component | StatefulComponent) -> str:

reflex/compiler/templates.py

@@ -756,20 +756,18 @@ def custom_component_template(
 {components_code}"""
 
 
-def _styles_template(**kwargs) -> str:
+def styles_template(stylesheets: list[str]) -> str:
     """Template for styles.css.
 
     Args:
-        **kwargs: Template context variables including stylesheets.
+        stylesheets: List of stylesheets to include.
 
     Returns:
         Rendered styles.css content as string.
     """
-    stylesheets = kwargs.get("stylesheets", [])
-    imports_code = "@layer __reflex_base;\n"
-    for sheet_name in stylesheets:
-        imports_code += f"@import url('{sheet_name}');\n"
-    return imports_code
+    return "@layer __reflex_base;\n" + "\n".join(
+        [f"@import url('{sheet_name}');" for sheet_name in stylesheets]
+    )
 
 
 def _render_hooks(hooks: dict, memo: list | None = None) -> str:
@@ -833,6 +831,3 @@ def render(self, **kwargs) -> str:
 
 # Code to render StatefulComponent to an external file to be shared
 STATEFUL_COMPONENTS = TemplateFunction(_stateful_components_template)
-
-# Code to render the root stylesheet.
-STYLE = TemplateFunction(_styles_template)

tests/units/compiler/test_compiler.py

@@ -164,7 +164,7 @@ def test_compile_stylesheets(tmp_path: Path, mocker: MockerFixture):
         "@import url('https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple');\n"
         "@import url('https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css');\n"
         "@import url('https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css');\n"
-        "@import url('./style.css');\n",
+        "@import url('./style.css');",
     )
 
     assert (project / constants.Dirs.WEB / "styles" / "style.css").read_text() == (
@@ -225,7 +225,7 @@ def test_compile_stylesheets_scss_sass(tmp_path: Path, mocker: MockerFixture):
         "@import url('@radix-ui/themes/styles.css');\n"
         "@import url('./style.css');\n"
         f"@import url('./{Path('preprocess') / Path('styles_a.css')!s}');\n"
-        f"@import url('./{Path('preprocess') / Path('styles_b.css')!s}');\n",
+        f"@import url('./{Path('preprocess') / Path('styles_b.css')!s}');",
     )
 
     stylesheets = [
@@ -245,7 +245,7 @@ def test_compile_stylesheets_scss_sass(tmp_path: Path, mocker: MockerFixture):
         "@import url('@radix-ui/themes/styles.css');\n"
         "@import url('./style.css');\n"
         f"@import url('./{Path('preprocess') / Path('styles_a.css')!s}');\n"
-        f"@import url('./{Path('preprocess') / Path('styles_b.css')!s}');\n",
+        f"@import url('./{Path('preprocess') / Path('styles_b.css')!s}');",
     )
 
     assert (project / constants.Dirs.WEB / "styles" / "style.css").read_text() == (
@@ -288,7 +288,7 @@ def test_compile_stylesheets_exclude_tailwind(tmp_path, mocker: MockerFixture):
 
     assert compiler.compile_root_stylesheet(stylesheets) == (
         str(Path(".web") / "styles" / (PageNames.STYLESHEET_ROOT + ".css")),
-        "@layer __reflex_base;\n@import url('./__reflex_style_reset.css');\n@import url('@radix-ui/themes/styles.css');\n@import url('./style.css');\n",
+        "@layer __reflex_base;\n@import url('./__reflex_style_reset.css');\n@import url('@radix-ui/themes/styles.css');\n@import url('./style.css');",
     )
 
 
@@ -327,7 +327,7 @@ def test_compile_stylesheets_no_reset(tmp_path: Path, mocker: MockerFixture):
             / "styles"
             / (PageNames.STYLESHEET_ROOT + ".css")
         ),
-        "@layer __reflex_base;\n@import url('@radix-ui/themes/styles.css');\n@import url('./style.css');\n",
+        "@layer __reflex_base;\n@import url('@radix-ui/themes/styles.css');\n@import url('./style.css');",
     )