[IMPL] - added support for sass and scss stylesheet languages (#4292)

* [IMPL] - added support for sass and scss stylesheet languages

 - better checking of stylesheets to be compiled
 - added support for sass and scss stylesheet languages
 - the stylesheets files are now copied to ".web/styles/" at compile time
 - relock poetry file for libsass deps
 - stylesheet compiler unit tests also check the contents of the file

* fix f-string bug

* make "libsass" an optional dependency

* remove libsass of deps list

* revert peotry relock

* fix test caused by optional "libsass" deps

* improving `_compile_root_stylesheet` function and add folder stylesheets unit test

* fix the copy files in assets to public folder

* remove useless f-string

* little general improvement

* fix f-string

* remove useless path search

* remove unused var & import

* [IMPL] - added support for sass and scss stylesheet languages

 - better checking of stylesheets to be compiled
 - added support for sass and scss stylesheet languages
 - the stylesheets files are now copied to ".web/styles/" at compile time
 - relock poetry file for libsass deps
 - stylesheet compiler unit tests also check the contents of the file

* fix f-string bug

* make "libsass" an optional dependency

* remove libsass of deps list

* fix test caused by optional "libsass" deps

* improving `_compile_root_stylesheet` function and add folder stylesheets unit test

* fix the copy files in assets to public folder

* remove useless f-string

* little general improvement

* fix f-string

* remove useless path search

* remove unused var & import

---------

Co-authored-by: Khaleel Al-Adhami <khaleel.aladhami@gmail.com>

reflex/compiler/compiler.py

@@ -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)
 
 

reflex/constants/base.py

@@ -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."""

reflex/utils/build.py

@@ -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).

reflex/utils/path_ops.py

@@ -42,13 +42,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.
@@ -60,7 +66,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

tests/units/compiler/test_compiler.py

@@ -105,7 +105,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:
@@ -118,7 +118,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 = [
@@ -133,10 +135,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.
@@ -164,7 +238,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",
     )