[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"

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.

tests/compiler/test_compiler.py

@@ -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/[email protected]/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/[email protected]/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",
  )