[CSS] Descendant type selectors can't have a numeric in their name

[davep]

Consider the following code:

from textual.app        import App, ComposeResult
from textual.containers import Vertical
from textual.widgets    import Header, Footer, Label

class LabelH1( Label ):
    ...

class CSSOddnessApp( App[ None ] ):

    CSS = """
    Vertical LabelH1 {
        background: red;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        yield Vertical(
            Label( "Label" ),
            LabelH1( "LabelH1" ),
        )
        yield Footer()

if __name__ == "__main__":
    CSSOddnessApp().run()

When run we get the following error:

 Error in stylesheet:
 /Users/davep/develop/python/textual-sandbox/css_oddness.py:CSSOddnessApp:1:19
╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ❱ 1 │                                                                                                                                                      │
│   2 │   Vertical LabelH1 {                                                                                                                                 │
│   3 │   │   background: red;                                                                                                                               │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
 • Expected one of 'combinator child', 'comment start', 'declaration set start', 'new selector', 'pseudo class', 'selector', 'selector class', 'selector id',
 'selector universal', or 'whitespace'.
 • Did you forget a semicolon at the end of a line?

The same thing happens with Vertical LabelH1. On the other hand, if I remove the number from the inherited label widget:

from textual.app        import App, ComposeResult
from textual.containers import Vertical
from textual.widgets    import Header, Footer, Label

class LabelHOne( Label ):
    ...

class CSSOddnessApp( App[ None ] ):

    CSS = """
    Vertical LabelHOne {
        background: red;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        yield Vertical(
            Label( "Label" ),
            LabelHOne( "LabelHOne" ),
        )
        yield Footer()

if __name__ == "__main__":
    CSSOddnessApp().run()

this works fine. Likewise, if I retain the name but don't use combination:

from textual.app        import App, ComposeResult
from textual.containers import Vertical
from textual.widgets    import Header, Footer, Label

class LabelH1( Label ):
    ...

class CSSOddnessApp( App[ None ] ):

    CSS = """
    LabelH1 {
        background: red;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        yield Vertical(
            Label( "Label" ),
            LabelH1( "LabelH1" ),
        )
        yield Footer()

if __name__ == "__main__":
    CSSOddnessApp().run()

that also works fine.

I would suspect a variation on #1253.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.