textual-dev icon indicating copy to clipboard operation
textual-dev copied to clipboard

Nesting CSS does not work with textual-dev

Open mohammad-sayed-ahmad opened this issue 1 year ago • 3 comments

Hello everyone, I have been recently using the textual-dev cli and I have been facing an extremely peculiar issue. Whenever I try nesting CSS using the & it fails horibbly.

Minimum Reproducible Example:

issue.py

from textual.app import App
from textual.widgets import Static

class BasicWidget(Static):
    def compose(self):
        yield Static("Inside", classes="inside")


class BasicApp(App):
    CSS_PATH = "issue.tcss"
    def compose(self):
        yield BasicWidget()
    

if __name__ == '__main__':
    app = BasicApp()
    app.run()

issue.tcss

BasicWidget {
    background: red;
    width: 40;

    & .inside {
        background: green;
        width: 10;
    }
}

——————————————————————————————————————————————————————————— Commands Tested: python issue.py -> Works normally textual run issue.py --dev -> The following error in stylesheet:

 • Expected one of 'comment line', 'comment start', 'declaration name', 'declaration set end', or 'whitespace'.
 • Did you forget a semicolon at the end of a line?

mohammad-sayed-ahmad avatar Feb 21 '24 20:02 mohammad-sayed-ahmad