From 21b7813b994ce1925bd1780cc6081066d238ba65 Mon Sep 17 00:00:00 2001 From: Masen Furer Date: Tue, 24 Jun 2025 18:19:04 -0700 Subject: [PATCH 1/2] Ensure __reflex_base CSS is declared first --- reflex/.templates/jinja/web/styles/styles.css.jinja2 | 2 ++ 1 file changed, 2 insertions(+) diff --git a/reflex/.templates/jinja/web/styles/styles.css.jinja2 b/reflex/.templates/jinja/web/styles/styles.css.jinja2 index 1600fe55c6f..2376592c7af 100644 --- a/reflex/.templates/jinja/web/styles/styles.css.jinja2 +++ b/reflex/.templates/jinja/web/styles/styles.css.jinja2 @@ -1,3 +1,5 @@ +@layer __reflex_base; + {%- block imports_styles %} {% for sheet_name in stylesheets %} {{- "@import url('" + sheet_name + "'); " }} From 7727f2d3c886bfac7a01e2bcb771a54c6ef817d2 Mon Sep 17 00:00:00 2001 From: Masen Furer Date: Tue, 24 Jun 2025 18:42:13 -0700 Subject: [PATCH 2/2] fixup unit tests --- reflex/.templates/jinja/web/styles/styles.css.jinja2 | 3 +-- tests/units/compiler/test_compiler.py | 7 +++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/reflex/.templates/jinja/web/styles/styles.css.jinja2 b/reflex/.templates/jinja/web/styles/styles.css.jinja2 index 2376592c7af..b98657d5d34 100644 --- a/reflex/.templates/jinja/web/styles/styles.css.jinja2 +++ b/reflex/.templates/jinja/web/styles/styles.css.jinja2 @@ -1,6 +1,5 @@ -@layer __reflex_base; - {%- block imports_styles %} +@layer __reflex_base; {% for sheet_name in stylesheets %} {{- "@import url('" + sheet_name + "'); " }} {% endfor %} diff --git a/tests/units/compiler/test_compiler.py b/tests/units/compiler/test_compiler.py index 070debd9a9e..74f62c4297e 100644 --- a/tests/units/compiler/test_compiler.py +++ b/tests/units/compiler/test_compiler.py @@ -158,6 +158,7 @@ def test_compile_stylesheets(tmp_path: Path, mocker: MockerFixture): / "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('https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple'); \n" @@ -219,6 +220,7 @@ def test_compile_stylesheets_scss_sass(tmp_path: Path, mocker: MockerFixture): / "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" @@ -238,6 +240,7 @@ def test_compile_stylesheets_scss_sass(tmp_path: Path, mocker: MockerFixture): / "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" @@ -285,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")), - "@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'); \n", ) @@ -324,7 +327,7 @@ def test_compile_stylesheets_no_reset(tmp_path: Path, mocker: MockerFixture): / "styles" / (PageNames.STYLESHEET_ROOT + ".css") ), - "@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'); \n", )