[REF-3004] Use relative path to stylesheet for postcss-import compat (#3435)

* test_tailwind: include custom stylesheet

* [REF-3004] Use relative path to stylesheet for postcss-import compat

postcss-import balls all of the CSS up into a single file, which happens at
compile time. So, replace the `@/` with `../public` so the import paths can be
resolved relative to the `styles` directory.

* test_compiler: fix compile_stylesheets expectations

* Use constants.Dirs.PUBLIC instead of "public"

Author: masenf

integration/test_tailwind.py

@@ -25,6 +25,8 @@ def TailwindApp(
         paragraph_text: Text for the paragraph.
         paragraph_class_name: Tailwind class_name for the paragraph.
     """
+    from pathlib import Path
+
     import reflex as rx
 
     class UnusedState(rx.State):
@@ -35,10 +37,15 @@ def index():
             rx.chakra.text(paragraph_text, class_name=paragraph_class_name),
             rx.el.p(paragraph_text, class_name=paragraph_class_name),
             rx.text(paragraph_text, as_="p", class_name=paragraph_class_name),
+            rx.el.div("Test external stylesheet", class_name="external"),
             id="p-content",
         )
 
-    app = rx.App(style={"font_family": "monospace"})
+    assets = Path(__file__).resolve().parent.parent / "assets"
+    assets.mkdir(exist_ok=True)
+    stylesheet = assets / "test_styles.css"
+    stylesheet.write_text(".external { color: rgba(0, 0, 255, 0.5) }")
+    app = rx.App(style={"font_family": "monospace"}, stylesheets=[stylesheet.name])
     app.add_page(index)
     if tailwind_disabled:
         config = rx.config.get_config()
@@ -107,3 +114,9 @@ def test_tailwind_app(tailwind_app: AppHarness, tailwind_disabled: bool):
         else:
             # expect "text-red-500" from tailwind utility class
             assert p.value_of_css_property("color") in TEXT_RED_500_COLOR
+
+    # Assert external stylesheet is applying rules
+    external = driver.find_elements(By.CLASS_NAME, "external")
+    assert len(external) == 1
+    for ext_div in external:
+        assert ext_div.value_of_css_property("color") == "rgba(0, 0, 255, 0.5)"

reflex/compiler/compiler.py

@@ -169,7 +169,7 @@ def _compile_root_stylesheet(stylesheets: list[str]) -> str:
                 raise FileNotFoundError(
                     f"The stylesheet file {stylesheet_full_path} does not exist."
                 )
-            stylesheet = f"@/{stylesheet.strip('/')}"
+            stylesheet = f"../{constants.Dirs.PUBLIC}/{stylesheet.strip('/')}"
         sheets.append(stylesheet) if stylesheet not in sheets else None
     return templates.STYLE.render(stylesheets=sheets)
 

reflex/constants/base.py

@@ -27,6 +27,8 @@ class Dirs(SimpleNamespace):
     UTILS = "utils"
     # The name of the output static directory.
     STATIC = "_static"
+    # The name of the public html directory served at "/"
+    PUBLIC = "public"
     # The name of the state file.
     STATE_PATH = "/".join([UTILS, "state"])
     # The name of the components file.
@@ -40,7 +42,7 @@ class Dirs(SimpleNamespace):
     # The directory where the utils file is located.
     WEB_UTILS = os.path.join(WEB, UTILS)
     # The directory where the assets are located.
-    WEB_ASSETS = os.path.join(WEB, "public")
+    WEB_ASSETS = os.path.join(WEB, PUBLIC)
     # The env json file.
     ENV_JSON = os.path.join(WEB, "env.json")
     # The reflex json file.

reflex/constants/base.pyi

@@ -135,7 +135,7 @@ def test_compile_stylesheets(tmp_path, mocker):
         f"@import url('./tailwind.css'); \n"
         f"@import url('https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple'); \n"
         f"@import url('https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css'); \n"
-        f"@import url('@/styles.css'); \n"
+        f"@import url('../public/styles.css'); \n"
         f"@import url('https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css'); \n",
     )
 
@@ -166,7 +166,7 @@ def test_compile_stylesheets_exclude_tailwind(tmp_path, mocker):
 
     assert compiler.compile_root_stylesheet(stylesheets) == (
         os.path.join(".web", "styles", "styles.css"),
-        "@import url('@/styles.css'); \n",
+        "@import url('../public/styles.css'); \n",
     )