CSS does not refresh for non-active screens when CSS File is changed

[kraanzu]

Have you checked closed issues? https://github.com/Textualize/textual/issues?q=is%3Aissue+is%3Aclosed

Yes

Please give a brief but clear explanation of the issue. If you can, include a complete working example that demonstrates the bug. Check it can run without modifications.

If watch_css is turned on and the CSS file is changed, only the current screen's CSS is refreshed, the non-active screen widgets refresh after the top screen is popped from the stack and there's some activity on the widget such as :hover

from textual.app import App, ComposeResult
from textual.screen import Screen
from textual.widgets import Label


class BaseScreen(Screen):
    def compose(self) -> ComposeResult:
        yield Label("I am the base screen")


class TopScreen(Screen):
    DEFAULT_CSS = """
    TopScreen {
        opacity: 1;
        background: green 0%;
    }
    """


class MyApp(App):
    CSS_PATH = "css_update.tcss"
    SCREENS = {
        "base": BaseScreen(),
        "top": TopScreen(),
    }

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs, watch_css=True)

    async def on_mount(self):
        self.push_screen("base")

        # If this line is commented out then it works!
        self.push_screen("top")


MyApp().run()

update_css.tcss

Label {
  color: red;
}

/* Change the color above */

It will be helpful if you run the following command and paste the results:

textual diagnose

Textual Diagnostics

Versions

Name	Value
Textual	0.46.0
Rich	13.6.0

Python

Name	Value
Version	3.11.6
Implementation	CPython
Compiler	GCC 13.2.1 20230801
Executable	/home/kraanzu/test/venv/bin/python

Operating System

Name	Value
System	Linux
Release	6.6.2-arch1-1
Version	#1 SMP PREEMPT_DYNAMIC Mon, 20 Nov 2023 23:18:21 +0000

Terminal

Name	Value
Terminal Application	WezTerm (20230712-072601-f4abf8fd)
TERM	xterm-256color
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

Name	Value
size	width=144, height=34
legacy_windows	False
min_width	1
max_width	144
is_terminal	True
encoding	utf-8
max_height	34
justify	None
overflow	None
no_wrap	False
highlight	None
markup	None
height	None

Feel free to add screenshots and / or videos. These can be very helpful!

[github-actions]

We found the following entry in the FAQ which you may find helpful:

• No widget called TextLog

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by FAQtory

[kraanzu]

Let's say the css file is this:

Label {
  color: yellow;
}

Label:hover {
  color: red;
}

Then if the color is changed from yellow to green while the TopScreen is still there, it won't change
But if we pop the screen and then hover over the label, it'll turn red and then green if the mouse is removed :D

[kraanzu]

If I override the _on_css_change function in the App class to something like, it works :)

async def _on_css_change(self) -> None:
    await super()._on_css_change()
    self.refresh_css()

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.