textual
textual copied to clipboard
Nested TCSS interacts poorly with pseudo-classes in selectors.
Working on #3969 and #3999 we realised that pseudo-classes in nested selectors aren't correctly handled.
(In short, to the tokenizer, a selector + pseudo-class looks the same as a rule + value in a nested context.)
Examples of CSS that breaks the tokenizer:
from textual.app import App, ComposeResult
from textual.widgets import Label
class NestedCSSTokenErrorApp(App[None]):
CSS = """
Screen {
Label:hover {
border: solid red;
}
}
"""
def compose(self) -> ComposeResult:
yield Label("This is class foo", classes="foo")
yield Label("This is class bar", classes="bar")
if __name__ == "__main__":
NestedCSSTokenErrorApp().run()
from textual.app import App, ComposeResult
from textual.widgets import Label
class NestedCSSTokenErrorApp(App[None]):
CSS = """
Screen {
Label {
&.foo, &.bar:hover {
border: solid red;
}
}
border: solid green;
}
"""
def compose(self) -> ComposeResult:
yield Label("This is class foo", classes="foo")
yield Label("This is class bar", classes="bar")
if __name__ == "__main__":
NestedCSSTokenErrorApp().run()
See Will's comment showing how the use of &
“makes” some cases work.