Nested TCSS interacts poorly with pseudo-classes in selectors.

[rodrigogiraoserrao]

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

[rodrigogiraoserrao]

See Will's comment showing how the use of & “makes” some cases work.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.