This commit is contained in:
KronosDev-Pro 2025-02-21 16:54:10 -08:00 committed by GitHub
commit 37499daf81
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 155 additions and 12 deletions

View File

@ -19,6 +19,7 @@ from reflex.components.component import (
from reflex.config import environment, get_config
from reflex.state import BaseState
from reflex.style import SYSTEM_COLOR_MODE
from reflex.utils import console, path_ops
from reflex.utils.exec import is_prod_mode
from reflex.utils.imports import ImportVar
from reflex.utils.prerequisites import get_web_dir
@ -190,18 +191,74 @@ def _compile_root_stylesheet(stylesheets: list[str]) -> str:
if get_config().tailwind is not None
else []
)
failed_to_import_sass = False
for stylesheet in stylesheets:
if not utils.is_valid_url(stylesheet):
# check if stylesheet provided exists.
stylesheet_full_path = (
Path.cwd() / constants.Dirs.APP_ASSETS / stylesheet.strip("/")
)
assets_app_path = Path.cwd() / constants.Dirs.APP_ASSETS
stylesheet_full_path = assets_app_path / stylesheet.strip("/")
if not stylesheet_full_path.exists():
raise FileNotFoundError(
f"The stylesheet file {stylesheet_full_path} does not exist."
)
stylesheet = f"../{constants.Dirs.PUBLIC}/{stylesheet.strip('/')}"
if stylesheet_full_path.is_dir():
# NOTE: this can create an infinite loop, for example:
# assets/
# | dir_a/
# | | dir_c/ (symlink to "assets/dir_a")
# | dir_b/
# so to avoid the infinite loop, we don't include symbolic links
stylesheets += [
str(p.relative_to(assets_app_path))
for p in stylesheet_full_path.iterdir()
if not (p.is_symlink() and p.is_dir())
]
continue
if (
stylesheet_full_path.suffix[1:].lower()
in constants.Reflex.STYLESHEETS_SUPPORTED
):
target = (
Path.cwd()
/ constants.Dirs.WEB
/ constants.Dirs.STYLES
/ (stylesheet.rsplit(".", 1)[0].strip("/") + ".css")
)
target.parent.mkdir(parents=True, exist_ok=True)
if stylesheet_full_path.suffix == ".css":
path_ops.cp(src=stylesheet_full_path, dest=target, overwrite=True)
else:
try:
from sass import compile as sass_compile
target.write_text(
data=sass_compile(
filename=str(stylesheet_full_path),
output_style="compressed",
),
encoding="utf8",
)
except ImportError:
failed_to_import_sass = True
else:
raise FileNotFoundError(
f'The stylesheet file "{stylesheet_full_path}" is not a valid file.'
)
stylesheet = f"./{stylesheet.rsplit('.', 1)[0].strip('/')}.css"
sheets.append(stylesheet) if stylesheet not in sheets else None
if failed_to_import_sass:
console.error(
'The `libsass` package is required to compile sass/scss stylesheet files. Run `pip install "libsass>=0.23.0"`.'
)
return templates.STYLE.render(stylesheets=sheets)

View File

@ -88,6 +88,9 @@ class Reflex(SimpleNamespace):
RELEASES_URL = "https://api.github.com/repos/reflex-dev/templates/releases"
# The reflex stylesheet language supported
STYLESHEETS_SUPPORTED = ["css", "sass", "scss"]
class ReflexHostingCLI(SimpleNamespace):
"""Base constants concerning Reflex Hosting CLI."""

View File

@ -231,11 +231,10 @@ def setup_frontend(
"""
# Create the assets dir if it doesn't exist.
path_ops.mkdir(constants.Dirs.APP_ASSETS)
# Copy asset files to public folder.
path_ops.cp(
src=str(root / constants.Dirs.APP_ASSETS),
dest=str(root / prerequisites.get_web_dir() / constants.Dirs.PUBLIC),
ignore=tuple(f"*.{ext}" for ext in constants.Reflex.STYLESHEETS_SUPPORTED),
)
# Set the environment variables in client (env.json).

View File

@ -43,13 +43,19 @@ def rm(path: str | Path):
path.unlink()
def cp(src: str | Path, dest: str | Path, overwrite: bool = True) -> bool:
def cp(
src: str | Path,
dest: str | Path,
overwrite: bool = True,
ignore: tuple[str, ...] | None = None,
) -> bool:
"""Copy a file or directory.
Args:
src: The path to the file or directory.
dest: The path to the destination.
overwrite: Whether to overwrite the destination.
ignore: Ignoring files and directories that match one of the glob-style patterns provided
Returns:
Whether the copy was successful.
@ -61,7 +67,11 @@ def cp(src: str | Path, dest: str | Path, overwrite: bool = True) -> bool:
return False
if src.is_dir():
rm(dest)
shutil.copytree(src, dest)
shutil.copytree(
src,
dest,
ignore=shutil.ignore_patterns(*ignore) if ignore is not None else ignore,
)
else:
shutil.copyfile(src, dest)
return True

View File

@ -106,7 +106,7 @@ def test_compile_imports(import_dict: ParsedImportDict, test_dicts: list[dict]):
assert sorted(import_dict["rest"]) == test_dict["rest"] # pyright: ignore [reportArgumentType]
def test_compile_stylesheets(tmp_path, mocker):
def test_compile_stylesheets(tmp_path: Path, mocker):
"""Test that stylesheets compile correctly.
Args:
@ -119,7 +119,9 @@ def test_compile_stylesheets(tmp_path, mocker):
assets_dir = project / "assets"
assets_dir.mkdir()
(assets_dir / "styles.css").touch()
(assets_dir / "styles.css").write_text(
"button.rt-Button {\n\tborder-radius:unset !important;\n}"
)
mocker.patch("reflex.compiler.compiler.Path.cwd", return_value=project)
stylesheets = [
@ -134,10 +136,82 @@ def test_compile_stylesheets(tmp_path, mocker):
"@import url('./tailwind.css'); \n"
"@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('../public/styles.css'); \n"
"@import url('./styles.css'); \n"
"@import url('https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css'); \n",
)
assert (project / ".web" / "styles" / "styles.css").read_text() == (
assets_dir / "styles.css"
).read_text()
def test_compile_stylesheets_scss_sass(tmp_path: Path, mocker):
try:
import sass # noqa: F401
except ImportError:
pytest.skip(
'The `libsass` package is required to compile sass/scss stylesheet files. Run `pip install "libsass>=0.23.0"`.'
)
project = tmp_path / "test_project"
project.mkdir()
assets_dir = project / "assets"
assets_dir.mkdir()
assets_preprocess_dir = assets_dir / "preprocess"
assets_preprocess_dir.mkdir()
(assets_dir / "styles.css").write_text(
"button.rt-Button {\n\tborder-radius:unset !important;\n}"
)
(assets_preprocess_dir / "styles_a.sass").write_text(
"button.rt-Button\n\tborder-radius:unset !important"
)
(assets_preprocess_dir / "styles_b.scss").write_text(
"button.rt-Button {\n\tborder-radius:unset !important;\n}"
)
mocker.patch("reflex.compiler.compiler.Path.cwd", return_value=project)
stylesheets = [
"/styles.css",
"/preprocess/styles_a.sass",
"/preprocess/styles_b.scss",
]
assert compiler.compile_root_stylesheet(stylesheets) == (
str(Path(".web") / "styles" / "styles.css"),
"@import url('./tailwind.css'); \n"
"@import url('./styles.css'); \n"
"@import url('./preprocess/styles_a.css'); \n"
"@import url('./preprocess/styles_b.css'); \n",
)
stylesheets = [
"/styles.css",
"/preprocess", # this is a folder containing "styles_a.sass" and "styles_b.scss"
]
assert compiler.compile_root_stylesheet(stylesheets) == (
str(Path(".web") / "styles" / "styles.css"),
"@import url('./tailwind.css'); \n"
"@import url('./styles.css'); \n"
"@import url('./preprocess/styles_b.css'); \n"
"@import url('./preprocess/styles_a.css'); \n",
)
assert (project / ".web" / "styles" / "styles.css").read_text() == (
assets_dir / "styles.css"
).read_text()
expected_result = "button.rt-Button{border-radius:unset !important}\n"
assert (
project / ".web" / "styles" / "preprocess" / "styles_a.css"
).read_text() == expected_result
assert (
project / ".web" / "styles" / "preprocess" / "styles_b.css"
).read_text() == expected_result
def test_compile_stylesheets_exclude_tailwind(tmp_path, mocker):
"""Test that Tailwind is excluded if tailwind config is explicitly set to None.
@ -165,7 +239,7 @@ def test_compile_stylesheets_exclude_tailwind(tmp_path, mocker):
assert compiler.compile_root_stylesheet(stylesheets) == (
str(Path(".web") / "styles" / "styles.css"),
"@import url('../public/styles.css'); \n",
"@import url('./styles.css'); \n",
)