{"record":{"id":"59f2a6738108bc7e","repo":"reflex-dev/reflex","slug":"stylesheet-file-name-cannot-be-pagenames-stylesh","errorCode":null,"errorMessage":"Stylesheet file name cannot be '{PageNames.STYLESHEET_ROOT}': {stylesheet_full_path}","messagePattern":"Stylesheet file name cannot be '(.+?)': (.+?)","errorType":"exception","errorClass":"ValueError","httpStatus":null,"severity":"error","filePath":"reflex/compiler/compiler.py","lineNumber":318,"sourceCode":"        raise ValueError(msg)\n    if not stylesheet_full_path.absolute().is_relative_to(assets_app_path.absolute()):\n        msg = f\"Cannot include stylesheets from outside the assets directory: {stylesheet_full_path}\"\n        raise FileNotFoundError(msg)\n    if not stylesheet_full_path.name:\n        msg = f\"Stylesheet file name cannot be empty: {stylesheet_full_path}\"\n        raise ValueError(msg)\n    if (\n        len(\n            stylesheet_full_path\n            .absolute()\n            .relative_to(assets_app_path.absolute())\n            .parts\n        )\n        == 1\n        and stylesheet_full_path.stem == PageNames.STYLESHEET_ROOT\n    ):\n        msg = f\"Stylesheet file name cannot be '{PageNames.STYLESHEET_ROOT}': {stylesheet_full_path}\"\n        raise ValueError(msg)\n\n\ndef _compile_root_stylesheet(\n    stylesheets: list[str],\n    reset_style: bool = True,\n    plugins: Sequence[Plugin] | None = None,\n) -> str:\n    \"\"\"Compile the root stylesheet.\n\n    Args:\n        stylesheets: The stylesheets to include in the root stylesheet.\n        reset_style: Whether to include CSS reset for margin and padding.\n        plugins: The effective plugins for the active compile.\n\n    Returns:\n        The compiled root stylesheet.\n\n    Raises:","sourceCodeStart":300,"sourceCodeEnd":336,"githubUrl":"https://github.com/reflex-dev/reflex/blob/45b8ed5ab735f8a56bbb09a42384f030eb0208e7/reflex/compiler/compiler.py#L300-L336","documentation":"The root stylesheet is compiled to a file named styles.css (PageNames.STYLESHEET_ROOT). A user stylesheet with the same stem at the top level of assets would collide with / overwrite the generated root stylesheet, so Reflex rejects it.","triggerScenarios":"Having a file named styles.css (same stem) directly in the assets root and referencing it via rx.App(add_styles=[\"/styles.css\"]). The check fires only when the path is exactly one part under assets_app_path and its stem equals styles.","commonSituations":"Naming your global CSS file styles.css and importing it manually in add_styles while it would already be handled/overwritten by the compiled root stylesheet; following generic CSS tutorials that suggest styles.css.","solutions":["Rename your file (e.g. global.css or theme.css) and update add_styles","Alternatively place it in a subdirectory (e.g. /styles/styles.css) — though renaming is cleaner","Remove the manual entry if the styles are already covered by the compiled root stylesheet"],"exampleFix":"# before\napp = rx.App(add_styles=[\"/styles.css\"])\n# after\napp = rx.App(add_styles=[\"/global.css\"])  # after renaming assets/styles.css","handlingStrategy":"validation","validationCode":"from pathlib import Path\n\nFORBIDDEN = \"styles\"\nadd_styles = [s for s in style_list\n              if Path(s).stem != FORBIDDEN or len(Path(s).parts) > 2]","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Don't name your top-level asset stylesheet styles.css — that name is reserved for the compiled root stylesheet","Prefer names like global.css or theme.css","After renaming, update add_styles accordingly"],"tags":["reflex","stylesheets","name-collision","compilation"],"backgroundTag":"filename-collision","analyzedSha":"45b8ed5ab735f8a56bbb09a42384f030eb0208e7","analyzedAt":"2026-08-28T19:25:27.644Z","schemaVersion":2},"datasetVersion":"2026-08-28T21:17:43.275Z"}