Nesting selectors in a selector list causes a stylesheet error

[davep]

If you have a stylesheet like this:

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

class NestedCSSTokenErrorApp(App[None]):

    CSS = """
    Label {
        &.foo, &.bar {
            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()

the result is:

Error in stylesheet:
 /Users/davep/develop/python/textual-sandbox/nested_css_token_error.py, NestedCSSTokenErrorApp.CSS:3:16
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│   1 │                                                                                                                                               │
│   2 │   Label {                                                                                                                                     │
│ ❱ 3 │   │   &.foo, &.bar {                                                                                                                          │
│   4 │   │   │   border: solid red;                                                                                                                  │
│   5 │   │   }                                                                                                                                       │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
 • Expected selector or { (found '&.bar {').                                                                                                           
 • Did you forget a semicolon at the end of a line? 

This feels like a bug given that it's a slightly different way of writing this:

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

class NestedCSSTokenErrorApp(App[None]):

    CSS = """
    Label {
        &.foo {
            border: solid red;
        }
        &.bar {
            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()

Tagging @willmcgugan for triage.

[willmcgugan]

To whomever picks this up, talk to @willmcgugan if you need pointers on this.

[rodrigogiraoserrao]

@willmcgugan if you had to guess would you say this will involve modifying the tokenizer state machine?

[willmcgugan]

Yes, I think so. If I were to guess, the comma token causes the tokenizer to switch to an Expect that doesn't include the nesting operator.

[rodrigogiraoserrao]

I'll take a stab at this. I wouldn't put it past me to take more than today to fix this if I happen to struggle with understanding how the tokenizer state machine works.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.