Merge pull request #854 from Textualize/styles-css-property-fixes-updates

Fix issues with `Styles.css`, update "Grid" styles doc page

docs/examples/styles/grid.css

@@ -0,0 +1,20 @@
+Screen {
+    layout: grid;
+    grid-size: 3 4;
+    grid-rows: 1fr;
+    grid-columns: 1fr;
+    grid-gutter: 1;
+}
+
+Static {
+    color: auto;
+    background: lightblue;
+    height: 100%;
+    padding: 1 2;
+}
+
+#static1 {
+    tint: magenta 40%;
+    row-span: 3;
+    column-span: 2;
+}

docs/examples/styles/grid.py

@@ -0,0 +1,18 @@
+from textual.app import App
+from textual.widgets import Static
+
+
+class GridApp(App):
+    def compose(self):
+        yield Static("Grid cell 1\n\nrow-span: 3;\ncolumn-span: 2;", id="static1")
+        yield Static("Grid cell 2", id="static2")
+        yield Static("Grid cell 3", id="static3")
+        yield Static("Grid cell 4", id="static4")
+        yield Static("Grid cell 5", id="static5")
+        yield Static("Grid cell 6", id="static6")
+        yield Static("Grid cell 7", id="static7")
+
+
+app = GridApp(css_path="grid.css")
+if __name__ == "__main__":
+    app.run()

docs/styles/grid.md

@@ -1,4 +1,4 @@
-# Grid properties
+# Grid
 
 There are a number of properties relating to the Textual `grid` layout.
 
@@ -16,12 +16,39 @@ For an in-depth look at the grid layout, visit the grid [guide](../guide/layout.
 ## Syntax
 
 ```sass
-grid-size: <INTEGER> [<INTEGER>];  /* columns first, then rows */
-grid-rows: <SCALAR> ...;
-grid-columns: <SCALAR> ...;
+grid-size: <INTEGER> [<INTEGER>];
+/* columns first, then rows */
+grid-rows: <SCALAR> . . .;
+grid-columns: <SCALAR> . . .;
 grid-gutter: <SCALAR>;
 row-span: <INTEGER>;
 column-span: <INTEGER>;
 ```
 
 ## Example
+
+The example below shows all the properties above in action.
+The `grid-size: 3 4;` declaration sets the grid to 3 columns and 4 rows.
+The first cell of the grid, tinted magenta, shows a cell spanning multiple rows and columns.
+The spacing between grid cells is because of the `grid-gutter` declaration.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/grid.py"}
+    ```
+
+=== "grid.py"
+
+    ```python
+    --8<-- "docs/examples/styles/grid.py"
+    ```
+
+=== "grid.css"
+
+    ```sass
+    --8<-- "docs/examples/styles/grid.css"
+    ```
+
+!!! warning
+
+    The properties listed on this page will only work when the layout is `grid`.

sandbox/darren/just_a_box.css

@@ -1,10 +1,12 @@
 Screen {
     align: center middle;
     background: darkslategrey;
+    overflow: auto auto;
 }
 
 #box1 {
     background: darkmagenta;
     width: auto;
+    opacity: 0.5;
     padding: 4 8;
 }

sandbox/darren/just_a_box.py

@@ -24,6 +24,10 @@ class JustABox(App):
         box = self.query_one("#box1")
         self.animator.animate(box.styles, "opacity", value=0.0, duration=1)
 
+    def key_d(self):
+        print(self.screen.styles.get_rules())
+        print(self.screen.styles.css)
+
 
 app = JustABox(watch_css=True, css_path="../darren/just_a_box.css")
 

src/textual/css/styles.py

@@ -67,6 +67,7 @@ else:
     from typing_extensions import TypedDict
 
 if TYPE_CHECKING:
+    from .._animator import Animation
     from .._layout import Layout
     from ..dom import DOMNode
 
@@ -765,29 +766,57 @@ class Styles(StylesBase):
             append_declaration("background", self.background.hex)
         if has_rule("text_style"):
             append_declaration("text-style", str(get_rule("text_style")))
+        if has_rule("tint"):
+            append_declaration("tint", self.tint.css)
 
-        if has_rule("overflow-x"):
+        if has_rule("overflow_x"):
             append_declaration("overflow-x", self.overflow_x)
-        if has_rule("overflow-y"):
+        if has_rule("overflow_y"):
             append_declaration("overflow-y", self.overflow_y)
-        if has_rule("scrollbar-gutter"):
+
+        if has_rule("scrollbar_color"):
+            append_declaration("scrollbar-color", self.scrollbar_color.css)
+        if has_rule("scrollbar_color_hover"):
+            append_declaration("scrollbar-color-hover", self.scrollbar_color_hover.css)
+        if has_rule("scrollbar_color_active"):
+            append_declaration(
+                "scrollbar-color-active", self.scrollbar_color_active.css
+            )
+
+        if has_rule("scrollbar_corner_color"):
+            append_declaration(
+                "scrollbar-corner-color", self.scrollbar_corner_color.css
+            )
+
+        if has_rule("scrollbar_background"):
+            append_declaration("scrollbar-background", self.scrollbar_background.css)
+        if has_rule("scrollbar_background_hover"):
+            append_declaration(
+                "scrollbar-background-hover", self.scrollbar_background_hover.css
+            )
+        if has_rule("scrollbar_background_active"):
+            append_declaration(
+                "scrollbar-background-active", self.scrollbar_background_active.css
+            )
+
+        if has_rule("scrollbar_gutter"):
             append_declaration("scrollbar-gutter", self.scrollbar_gutter)
-        if has_rule("scrollbar-size"):
+        if has_rule("scrollbar_size"):
             append_declaration(
                 "scrollbar-size",
                 f"{self.scrollbar_size_horizontal} {self.scrollbar_size_vertical}",
             )
         else:
-            if has_rule("scrollbar-size-horizontal"):
+            if has_rule("scrollbar_size_horizontal"):
                 append_declaration(
                     "scrollbar-size-horizontal", str(self.scrollbar_size_horizontal)
                 )
-            if has_rule("scrollbar-size-vertical"):
+            if has_rule("scrollbar_size_vertical"):
                 append_declaration(
                     "scrollbar-size-vertical", str(self.scrollbar_size_vertical)
                 )
 
-        if has_rule("box-sizing"):
+        if has_rule("box_sizing"):
             append_declaration("box-sizing", self.box_sizing)
         if has_rule("width"):
             append_declaration("width", str(self.width))
@@ -830,31 +859,56 @@ class Styles(StylesBase):
             )
         elif has_rule("content_align_vertical"):
             append_declaration("content-align-vertical", self.content_align_vertical)
-        elif has_rule("grid_columns"):
+
+        if has_rule("text_align"):
+            append_declaration("text-align", self.text_align)
+
+        if has_rule("opacity"):
+            append_declaration("opacity", str(self.opacity))
+        if has_rule("text_opacity"):
+            append_declaration("text-opacity", str(self.text_opacity))
+
+        if has_rule("grid_columns"):
             append_declaration(
                 "grid-columns",
                 " ".join(str(scalar) for scalar in self.grid_columns or ()),
             )
-        elif has_rule("grid_rows"):
+        if has_rule("grid_rows"):
             append_declaration(
                 "grid-rows",
                 " ".join(str(scalar) for scalar in self.grid_rows or ()),
             )
-        elif has_rule("grid_size_columns"):
+        if has_rule("grid_size_columns"):
             append_declaration("grid-size-columns", str(self.grid_size_columns))
-        elif has_rule("grid_size_rows"):
+        if has_rule("grid_size_rows"):
             append_declaration("grid-size-rows", str(self.grid_size_rows))
-        elif has_rule("grid_gutter_horizontal"):
+
+        if has_rule("grid_gutter_horizontal"):
             append_declaration(
                 "grid-gutter-horizontal", str(self.grid_gutter_horizontal)
             )
-        elif has_rule("grid_gutter_vertical"):
+        if has_rule("grid_gutter_vertical"):
             append_declaration("grid-gutter-vertical", str(self.grid_gutter_vertical))
-        elif has_rule("row_span"):
+
+        if has_rule("row_span"):
             append_declaration("row-span", str(self.row_span))
-        elif has_rule("column_span"):
+        if has_rule("column_span"):
             append_declaration("column-span", str(self.column_span))
 
+        if has_rule("link_color"):
+            append_declaration("link-color", self.link_color.css)
+        if has_rule("link_background"):
+            append_declaration("link-background", self.link_background.css)
+        if has_rule("link_style"):
+            append_declaration("link-style", str(self.link_style))
+
+        if has_rule("hover_color"):
+            append_declaration("hover-color", self.hover_color.css)
+        if has_rule("hover_background"):
+            append_declaration("hover-background", self.hover_background.css)
+        if has_rule("hover_style"):
+            append_declaration("hover-style", str(self.hover_style))
+
         lines.sort()
         return lines
 

tests/css/test_styles.py

@@ -123,6 +123,18 @@ def test_get_opacity_default():
     assert styles.text_opacity == 1.0
 
 
+def test_styles_css_property():
+    css = "opacity: 50%; text-opacity: 20%; background: green; color: red; tint: dodgerblue 20%;"
+    styles = Styles().parse(css, path="")
+    assert styles.css == (
+        "background: #008000;\n"
+        "color: #FF0000;\n"
+        "opacity: 0.5;\n"
+        "text-opacity: 0.2;\n"
+        "tint: rgba(30,144,255,0.2);"
+    )
+
+
 @pytest.mark.parametrize(
     "set_value, expected",
     [