Merge pull request #4040 from Textualize/improve-nested-tcss

Allow lists of nested selectors and allow styles after nested CSS blocks

Author: rodrigogiraoserrao

CHANGELOG.md

@@ -19,6 +19,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Breaking change: Renamed `TextArea.tab_behaviour` to `TextArea.tab_behavior` https://github.com/Textualize/textual/pull/4124
 - `TextArea.theme` now defaults to `"css"` instead of None, and is no longer optional https://github.com/Textualize/textual/pull/4157
 
+### Fixed
+
+- Improve support for selector lists in nested TCSS https://github.com/Textualize/textual/issues/3969
+- Improve support for rule declarations after nested TCSS rule sets https://github.com/Textualize/textual/issues/3999
+
 ## [0.50.1] - 2024-02-09
 
 ### Fixed

src/textual/css/tokenize.py

@@ -64,6 +64,7 @@
     whitespace=r"\s+",
     comment_start=COMMENT_START,
     comment_line=COMMENT_LINE,
+    declaration_name=r"[a-zA-Z_\-]+\:",
     selector_start_id=r"\#" + IDENTIFIER,
     selector_start_class=r"\." + IDENTIFIER,
     selector_start_universal=r"\*",
@@ -105,6 +106,7 @@
     new_selector=r",",
     declaration_set_start=r"\{",
     declaration_set_end=r"\}",
+    nested=r"\&",
 ).expect_eof(True)
 
 # A rule declaration e.g. "text: red;"

tests/css/test_nested_css.py

@@ -44,6 +44,53 @@ async def test_nest_app():
         assert app.query_one("#foo .paul").styles.background == Color.parse("blue")
 
 
+class ListOfNestedSelectorsApp(App[None]):
+    CSS = """
+    Label {
+        &.foo, &.bar {
+            background: red;
+        }
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        yield Label("one", classes="foo")
+        yield Label("two", classes="bar")
+        yield Label("three", classes="heh")
+
+
+async def test_lists_of_selectors_in_nested_css() -> None:
+    """Regression test for https://github.com/Textualize/textual/issues/3969."""
+    app = ListOfNestedSelectorsApp()
+    red = Color.parse("red")
+    async with app.run_test():
+        assert app.query_one(".foo").styles.background == red
+        assert app.query_one(".bar").styles.background == red
+        assert app.query_one(".heh").styles.background != red
+
+
+class DeclarationAfterNestedApp(App[None]):
+    CSS = """
+    Screen {
+        Label {
+            background: red;
+        }
+        background: green;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        yield Label("one")
+
+
+async def test_rule_declaration_after_nested() -> None:
+    """Regression test for https://github.com/Textualize/textual/issues/3999."""
+    app = DeclarationAfterNestedApp()
+    async with app.run_test():
+        assert app.screen.styles.background == Color.parse("green")
+        assert app.query_one(Label).styles.background == Color.parse("red")
+
+
 @pytest.mark.parametrize(
     ("css", "exception"),
     [