Rename CSS files to TCSS.

Related issue: #3137.

docs/examples/app/question02.py

@@ -1,9 +1,9 @@
 from textual.app import App, ComposeResult
-from textual.widgets import Label, Button
+from textual.widgets import Button, Label
 
 
 class QuestionApp(App[str]):
-    CSS_PATH = "question02.css"
+    CSS_PATH = "question02.tcss"
 
     def compose(self) -> ComposeResult:
         yield Label("Do you love Textual?", id="question")

docs/examples/app/question02.tcss

@@ -1,8 +1,8 @@
 Screen {
     layout: grid;
     grid-size: 2;
-    grid-gutter: 2; 
-    padding: 2;   
+    grid-gutter: 2;
+    padding: 2;
 }
 #question {
     width: 100%;
@@ -10,7 +10,7 @@ Screen {
     column-span: 2;
     content-align: center bottom;
     text-style: bold;
-} 
+}
 
 Button {
     width: 100%;

docs/examples/app/question_title01.py

@@ -3,7 +3,7 @@ from textual.widgets import Button, Header, Label
 
 
 class MyApp(App[str]):
-    CSS_PATH = "question02.css"
+    CSS_PATH = "question02.tcss"
     TITLE = "A Question App"
     SUB_TITLE = "The most important question"
 

docs/examples/app/question_title02.py

@@ -4,7 +4,7 @@ from textual.widgets import Button, Header, Label
 
 
 class MyApp(App[str]):
-    CSS_PATH = "question02.css"
+    CSS_PATH = "question02.tcss"
     TITLE = "A Question App"
     SUB_TITLE = "The most important question"
 

docs/examples/events/dictionary.py

@@ -15,7 +15,7 @@ from textual.widgets import Input, Static
 class DictionaryApp(App):
     """Searches a dictionary API as-you-type."""
 
-    CSS_PATH = "dictionary.css"
+    CSS_PATH = "dictionary.tcss"
 
     def compose(self) -> ComposeResult:
         yield Input(placeholder="Search for a word")

docs/examples/events/dictionary.tcss

@@ -3,21 +3,21 @@ Screen {
 }
 
 Input {
-    dock: top;    
+    dock: top;
     width: 100%;
     height: 1;
     padding: 0 1;
-    margin: 1 1 0 1;    
+    margin: 1 1 0 1;
 }
 
 #results {
-    width: auto;   
+    width: auto;
     min-height: 100%;
 }
 
 #results-container {
     background: $background 50%;
-    overflow: auto;    
-    margin: 1 2;    
+    overflow: auto;
+    margin: 1 2;
     height: 100%;
 }

docs/examples/events/on_decorator01.py

@@ -4,7 +4,7 @@ from textual.widgets import Button
 
 
 class OnDecoratorApp(App):
-    CSS_PATH = "on_decorator.css"
+    CSS_PATH = "on_decorator.tcss"
 
     def compose(self) -> ComposeResult:
         """Three buttons."""

docs/examples/events/on_decorator02.py

@@ -4,7 +4,7 @@ from textual.widgets import Button
 
 
 class OnDecoratorApp(App):
-    CSS_PATH = "on_decorator.css"
+    CSS_PATH = "on_decorator.tcss"
 
     def compose(self) -> ComposeResult:
         """Three buttons."""

docs/examples/guide/actions/actions05.py

@@ -15,7 +15,7 @@ class ColorSwitcher(Static):
 
 
 class ActionsApp(App):
-    CSS_PATH = "actions05.css"
+    CSS_PATH = "actions05.tcss"
     BINDINGS = [
         ("r", "set_background('red')", "Red"),
         ("g", "set_background('green')", "Green"),

docs/examples/guide/dom4.py

@@ -1,12 +1,12 @@
 from textual.app import App, ComposeResult
 from textual.containers import Container, Horizontal
-from textual.widgets import Header, Footer, Static, Button
+from textual.widgets import Button, Footer, Header, Static
 
 QUESTION = "Do you want to learn about Textual CSS?"
 
 
 class ExampleApp(App):
-    CSS_PATH = "dom4.css"
+    CSS_PATH = "dom4.tcss"
 
     def compose(self) -> ComposeResult:
         yield Header()

docs/examples/guide/dom4.tcss

@@ -27,5 +27,3 @@ Button {
     height: auto;
     dock: bottom;
 }
-
-

docs/examples/guide/input/binding01.py

@@ -8,7 +8,7 @@ class Bar(Static):
 
 
 class BindingApp(App):
-    CSS_PATH = "binding01.css"
+    CSS_PATH = "binding01.tcss"
     BINDINGS = [
         ("r", "add_bar('red')", "Add Red"),
         ("g", "add_bar('green')", "Add Green"),

docs/examples/guide/input/binding01.tcss

@@ -1,5 +1,5 @@
 Bar {
-    height: 5;    
+    height: 5;
     content-align: center middle;
     text-style: bold;
     margin: 1 2;

docs/examples/guide/input/key03.py

@@ -11,7 +11,7 @@ class KeyLogger(RichLog):
 class InputApp(App):
     """App to display key events."""
 
-    CSS_PATH = "key03.css"
+    CSS_PATH = "key03.tcss"
 
     def compose(self) -> ComposeResult:
         yield KeyLogger()

docs/examples/guide/input/key03.tcss

@@ -4,7 +4,7 @@ Screen {
     grid-columns: 1fr;
 }
 
-KeyLogger {  
+KeyLogger {
     border: blank;
 }
 

docs/examples/guide/input/mouse01.py

@@ -18,7 +18,7 @@ class Ball(Static):
 
 
 class MouseApp(App):
-    CSS_PATH = "mouse01.css"
+    CSS_PATH = "mouse01.tcss"
 
     def compose(self) -> ComposeResult:
         yield RichLog()

docs/examples/guide/layout/combining_layouts.py

@@ -4,7 +4,7 @@ from textual.widgets import Header, Static
 
 
 class CombiningLayoutsExample(App):
-    CSS_PATH = "combining_layouts.css"
+    CSS_PATH = "combining_layouts.tcss"
 
     def compose(self) -> ComposeResult:
         yield Header()

docs/examples/guide/layout/dock_layout1_sidebar.py

@@ -10,7 +10,7 @@ Docked widgets will not scroll out of view, making them ideal for sticky headers
 
 
 class DockLayoutExample(App):
-    CSS_PATH = "dock_layout1_sidebar.css"
+    CSS_PATH = "dock_layout1_sidebar.tcss"
 
     def compose(self) -> ComposeResult:
         yield Static("Sidebar", id="sidebar")

docs/examples/guide/layout/dock_layout2_sidebar.py

@@ -10,7 +10,7 @@ Docked widgets will not scroll out of view, making them ideal for sticky headers
 
 
 class DockLayoutExample(App):
-    CSS_PATH = "dock_layout2_sidebar.css"
+    CSS_PATH = "dock_layout2_sidebar.tcss"
 
     def compose(self) -> ComposeResult:
         yield Static("Sidebar2", id="another-sidebar")

docs/examples/guide/layout/dock_layout3_sidebar_header.py

@@ -10,7 +10,7 @@ Docked widgets will not scroll out of view, making them ideal for sticky headers
 
 
 class DockLayoutExample(App):
-    CSS_PATH = "dock_layout3_sidebar_header.css"
+    CSS_PATH = "dock_layout3_sidebar_header.tcss"
 
     def compose(self) -> ComposeResult:
         yield Header(id="header")

docs/examples/guide/layout/grid_layout1.py

@@ -3,7 +3,7 @@ from textual.widgets import Static
 
 
 class GridLayoutExample(App):
-    CSS_PATH = "grid_layout1.css"
+    CSS_PATH = "grid_layout1.tcss"
 
     def compose(self) -> ComposeResult:
         yield Static("One", classes="box")

docs/examples/guide/layout/grid_layout2.py

@@ -3,7 +3,7 @@ from textual.widgets import Static
 
 
 class GridLayoutExample(App):
-    CSS_PATH = "grid_layout2.css"
+    CSS_PATH = "grid_layout2.tcss"
 
     def compose(self) -> ComposeResult:
         yield Static("One", classes="box")

docs/examples/guide/layout/grid_layout3_row_col_adjust.py

@@ -3,7 +3,7 @@ from textual.widgets import Static
 
 
 class GridLayoutExample(App):
-    CSS_PATH = "grid_layout3_row_col_adjust.css"
+    CSS_PATH = "grid_layout3_row_col_adjust.tcss"
 
     def compose(self) -> ComposeResult:
         yield Static("One", classes="box")

docs/examples/guide/layout/grid_layout4_row_col_adjust.py

@@ -3,7 +3,7 @@ from textual.widgets import Static
 
 
 class GridLayoutExample(App):
-    CSS_PATH = "grid_layout4_row_col_adjust.css"
+    CSS_PATH = "grid_layout4_row_col_adjust.tcss"
 
     def compose(self) -> ComposeResult:
         yield Static("One", classes="box")

docs/examples/guide/layout/grid_layout5_col_span.py

@@ -3,7 +3,7 @@ from textual.widgets import Static
 
 
 class GridLayoutExample(App):
-    CSS_PATH = "grid_layout5_col_span.css"
+    CSS_PATH = "grid_layout5_col_span.tcss"
 
     def compose(self) -> ComposeResult:
         yield Static("One", classes="box")

docs/examples/guide/layout/grid_layout6_row_span.py

@@ -3,7 +3,7 @@ from textual.widgets import Static
 
 
 class GridLayoutExample(App):
-    CSS_PATH = "grid_layout6_row_span.css"
+    CSS_PATH = "grid_layout6_row_span.tcss"
 
     def compose(self) -> ComposeResult:
         yield Static("One", classes="box")

docs/examples/guide/layout/grid_layout7_gutter.py

@@ -3,7 +3,7 @@ from textual.widgets import Static
 
 
 class GridLayoutExample(App):
-    CSS_PATH = "grid_layout7_gutter.css"
+    CSS_PATH = "grid_layout7_gutter.tcss"
 
     def compose(self) -> ComposeResult:
         yield Static("One", classes="box")

docs/examples/guide/layout/grid_layout_auto.py

@@ -3,7 +3,7 @@ from textual.widgets import Static
 
 
 class GridLayoutExample(App):
-    CSS_PATH = "grid_layout_auto.css"
+    CSS_PATH = "grid_layout_auto.tcss"
 
     def compose(self) -> ComposeResult:
         yield Static("First column", classes="box")

docs/examples/guide/layout/horizontal_layout.py

@@ -3,7 +3,7 @@ from textual.widgets import Static
 
 
 class HorizontalLayoutExample(App):
-    CSS_PATH = "horizontal_layout.css"
+    CSS_PATH = "horizontal_layout.tcss"
 
     def compose(self) -> ComposeResult:
         yield Static("One", classes="box")

docs/examples/guide/layout/horizontal_layout_overflow.py

@@ -3,7 +3,7 @@ from textual.widgets import Static
 
 
 class HorizontalLayoutExample(App):
-    CSS_PATH = "horizontal_layout_overflow.css"
+    CSS_PATH = "horizontal_layout_overflow.tcss"
 
     def compose(self) -> ComposeResult:
         yield Static("One", classes="box")

docs/examples/guide/layout/layers.py

@@ -3,7 +3,7 @@ from textual.widgets import Static
 
 
 class LayersExample(App):
-    CSS_PATH = "layers.css"
+    CSS_PATH = "layers.tcss"
 
     def compose(self) -> ComposeResult:
         yield Static("box1 (layer = above)", id="box1")

docs/examples/guide/layout/utility_containers.py

@@ -4,7 +4,7 @@ from textual.widgets import Static
 
 
 class UtilityContainersExample(App):
-    CSS_PATH = "utility_containers.css"
+    CSS_PATH = "utility_containers.tcss"
 
     def compose(self) -> ComposeResult:
         yield Horizontal(

docs/examples/guide/layout/utility_containers_using_with.py

@@ -4,7 +4,7 @@ from textual.widgets import Static
 
 
 class UtilityContainersExample(App):
-    CSS_PATH = "utility_containers.css"
+    CSS_PATH = "utility_containers.tcss"
 
     def compose(self) -> ComposeResult:
         with Horizontal():

docs/examples/guide/layout/vertical_layout.py

@@ -3,7 +3,7 @@ from textual.widgets import Static
 
 
 class VerticalLayoutExample(App):
-    CSS_PATH = "vertical_layout.css"
+    CSS_PATH = "vertical_layout.tcss"
 
     def compose(self) -> ComposeResult:
         yield Static("One", classes="box")

docs/examples/guide/layout/vertical_layout_scrolled.py

@@ -3,7 +3,7 @@ from textual.widgets import Static
 
 
 class VerticalLayoutScrolledExample(App):
-    CSS_PATH = "vertical_layout_scrolled.css"
+    CSS_PATH = "vertical_layout_scrolled.tcss"
 
     def compose(self) -> ComposeResult:
         yield Static("One", classes="box")

docs/examples/guide/reactivity/computed01.py

@@ -6,7 +6,7 @@ from textual.widgets import Input, Static
 
 
 class ComputedApp(App):
-    CSS_PATH = "computed01.css"
+    CSS_PATH = "computed01.tcss"
 
     red = reactive(0)
     green = reactive(0)

docs/examples/guide/reactivity/refresh01.py

@@ -14,7 +14,7 @@ class Name(Widget):
 
 
 class WatchApp(App):
-    CSS_PATH = "refresh01.css"
+    CSS_PATH = "refresh01.tcss"
 
     def compose(self) -> ComposeResult:
         yield Input(placeholder="Enter your name")

docs/examples/guide/reactivity/refresh02.py

@@ -14,7 +14,7 @@ class Name(Widget):
 
 
 class WatchApp(App):
-    CSS_PATH = "refresh02.css"
+    CSS_PATH = "refresh02.tcss"
 
     def compose(self) -> ComposeResult:
         yield Input(placeholder="Enter your name")

docs/examples/guide/reactivity/validate01.py

@@ -5,7 +5,7 @@ from textual.widgets import Button, RichLog
 
 
 class ValidateApp(App):
-    CSS_PATH = "validate01.css"
+    CSS_PATH = "validate01.tcss"
 
     count = reactive(0)
 

docs/examples/guide/reactivity/watch01.py

@@ -6,7 +6,7 @@ from textual.widgets import Input, Static
 
 
 class WatchApp(App):
-    CSS_PATH = "watch01.css"
+    CSS_PATH = "watch01.tcss"
 
     color = reactive(Color.parse("transparent"))  # (1)!
 

docs/examples/guide/reactivity/watch01.tcss

@@ -15,7 +15,7 @@ Input {
     border: wide $secondary;
 }
 
-#new {        
+#new {
     height: 100%;
     border: wide $secondary;
 }

docs/examples/guide/screens/modal01.py

@@ -33,7 +33,7 @@ class QuitScreen(Screen):
 class ModalApp(App):
     """An app with a modal dialog."""
 
-    CSS_PATH = "modal01.css"
+    CSS_PATH = "modal01.tcss"
     BINDINGS = [("q", "request_quit", "Quit")]
 
     def compose(self) -> ComposeResult:

docs/examples/guide/screens/modal02.py

@@ -33,7 +33,7 @@ class QuitScreen(ModalScreen):
 class ModalApp(App):
     """An app with a modal dialog."""
 
-    CSS_PATH = "modal01.css"
+    CSS_PATH = "modal01.tcss"
     BINDINGS = [("q", "request_quit", "Quit")]
 
     def compose(self) -> ComposeResult:

docs/examples/guide/screens/modal03.py

@@ -33,7 +33,7 @@ class QuitScreen(ModalScreen[bool]):  # (1)!
 class ModalApp(App):
     """An app with a modal dialog."""
 
-    CSS_PATH = "modal01.css"
+    CSS_PATH = "modal01.tcss"
     BINDINGS = [("q", "request_quit", "Quit")]
 
     def compose(self) -> ComposeResult:

docs/examples/guide/screens/screen01.py

@@ -2,7 +2,6 @@ from textual.app import App, ComposeResult
 from textual.screen import Screen
 from textual.widgets import Static
 
-
 ERROR_TEXT = """
 An error has occurred. To continue:
 
@@ -25,7 +24,7 @@ class BSOD(Screen):
 
 
 class BSODApp(App):
-    CSS_PATH = "screen01.css"
+    CSS_PATH = "screen01.tcss"
     SCREENS = {"bsod": BSOD()}
     BINDINGS = [("b", "push_screen('bsod')", "BSOD")]
 

docs/examples/guide/screens/screen01.tcss

@@ -5,7 +5,7 @@ BSOD {
 }
 
 BSOD>Static {
-    width: 70;    
+    width: 70;
 }
 
 #title {

docs/examples/guide/screens/screen02.py

@@ -2,7 +2,6 @@ from textual.app import App, ComposeResult
 from textual.screen import Screen
 from textual.widgets import Static
 
-
 ERROR_TEXT = """
 An error has occurred. To continue:
 
@@ -25,7 +24,7 @@ class BSOD(Screen):
 
 
 class BSODApp(App):
-    CSS_PATH = "screen02.css"
+    CSS_PATH = "screen02.tcss"
     BINDINGS = [("b", "push_screen('bsod')", "BSOD")]
 
     def on_mount(self) -> None:

docs/examples/guide/screens/screen02.tcss

@@ -5,7 +5,7 @@ BSOD {
 }
 
 BSOD>Static {
-    width: 70;    
+    width: 70;
 }
 
 #title {

docs/examples/guide/widgets/fizzbuzz01.py

@@ -19,7 +19,7 @@ class FizzBuzz(Static):
 
 
 class FizzBuzzApp(App):
-    CSS_PATH = "fizzbuzz01.css"
+    CSS_PATH = "fizzbuzz01.tcss"
 
     def compose(self) -> ComposeResult:
         yield FizzBuzz()

docs/examples/guide/widgets/fizzbuzz01.tcss

@@ -6,5 +6,5 @@ FizzBuzz {
     width: auto;
     height: auto;
     background: $primary;
-    color: $text;    
+    color: $text;
 }

docs/examples/guide/widgets/fizzbuzz02.py

@@ -24,7 +24,7 @@ class FizzBuzz(Static):
 
 
 class FizzBuzzApp(App):
-    CSS_PATH = "fizzbuzz02.css"
+    CSS_PATH = "fizzbuzz02.tcss"
 
     def compose(self) -> ComposeResult:
         yield FizzBuzz()

docs/examples/guide/widgets/fizzbuzz02.tcss

@@ -5,6 +5,6 @@ Screen {
 FizzBuzz {
     width: auto;
     height: auto;
-    background: $primary;    
+    background: $primary;
     color: $text;
 }

docs/examples/guide/widgets/hello02.py

@@ -10,7 +10,7 @@ class Hello(Widget):
 
 
 class CustomApp(App):
-    CSS_PATH = "hello02.css"
+    CSS_PATH = "hello02.tcss"
 
     def compose(self) -> ComposeResult:
         yield Hello()

docs/examples/guide/widgets/hello03.py

@@ -3,7 +3,6 @@ from itertools import cycle
 from textual.app import App, ComposeResult
 from textual.widgets import Static
 
-
 hellos = cycle(
     [
         "Hola",
@@ -37,7 +36,7 @@ class Hello(Static):
 
 
 class CustomApp(App):
-    CSS_PATH = "hello03.css"
+    CSS_PATH = "hello03.tcss"
 
     def compose(self) -> ComposeResult:
         yield Hello()

docs/examples/guide/widgets/hello04.py

@@ -3,7 +3,6 @@ from itertools import cycle
 from textual.app import App, ComposeResult
 from textual.widgets import Static
 
-
 hellos = cycle(
     [
         "Hola",
@@ -48,7 +47,7 @@ class Hello(Static):
 
 
 class CustomApp(App):
-    CSS_PATH = "hello04.css"
+    CSS_PATH = "hello04.tcss"
 
     def compose(self) -> ComposeResult:
         yield Hello()

docs/examples/guide/widgets/hello05.py

@@ -3,7 +3,6 @@ from itertools import cycle
 from textual.app import App, ComposeResult
 from textual.widgets import Static
 
-
 hellos = cycle(
     [
         "Hola",
@@ -34,7 +33,7 @@ class Hello(Static):
 
 
 class CustomApp(App):
-    CSS_PATH = "hello05.css"
+    CSS_PATH = "hello05.tcss"
 
     def compose(self) -> ComposeResult:
         yield Hello()

docs/examples/guide/widgets/hello06.py

@@ -36,7 +36,7 @@ class Hello(Static):
 
 
 class CustomApp(App):
-    CSS_PATH = "hello05.css"
+    CSS_PATH = "hello05.tcss"
 
     def compose(self) -> ComposeResult:
         yield Hello()

docs/examples/guide/workers/weather01.py

@@ -9,7 +9,7 @@ from textual.widgets import Input, Static
 class WeatherApp(App):
     """App to display the current weather."""
 
-    CSS_PATH = "weather.css"
+    CSS_PATH = "weather.tcss"
 
     def compose(self) -> ComposeResult:
         yield Input(placeholder="Enter a City")

docs/examples/guide/workers/weather02.py

@@ -9,7 +9,7 @@ from textual.widgets import Input, Static
 class WeatherApp(App):
     """App to display the current weather."""
 
-    CSS_PATH = "weather.css"
+    CSS_PATH = "weather.tcss"
 
     def compose(self) -> ComposeResult:
         yield Input(placeholder="Enter a City")

docs/examples/guide/workers/weather03.py

@@ -10,7 +10,7 @@ from textual.widgets import Input, Static
 class WeatherApp(App):
     """App to display the current weather."""
 
-    CSS_PATH = "weather.css"
+    CSS_PATH = "weather.tcss"
 
     def compose(self) -> ComposeResult:
         yield Input(placeholder="Enter a City")

docs/examples/guide/workers/weather04.py

@@ -11,7 +11,7 @@ from textual.worker import Worker
 class WeatherApp(App):
     """App to display the current weather."""
 
-    CSS_PATH = "weather.css"
+    CSS_PATH = "weather.tcss"
 
     def compose(self) -> ComposeResult:
         yield Input(placeholder="Enter a City")

docs/examples/guide/workers/weather05.py

@@ -12,7 +12,7 @@ from textual.worker import Worker, get_current_worker
 class WeatherApp(App):
     """App to display the current weather."""
 
-    CSS_PATH = "weather.css"
+    CSS_PATH = "weather.tcss"
 
     def compose(self) -> ComposeResult:
         yield Input(placeholder="Enter a City")

docs/examples/how-to/layout.py

@@ -58,7 +58,7 @@ class TweetScreen(Screen):
 
 
 class LayoutApp(App):
-    CSS_PATH = "layout.css"
+    CSS_PATH = "layout.tcss"
 
     def on_ready(self) -> None:
         self.push_screen(TweetScreen())

docs/examples/styles/align.py

@@ -8,4 +8,4 @@ class AlignApp(App):
         yield Label("Take note, browsers.", classes="box")
 
 
-app = AlignApp(css_path="align.css")
+app = AlignApp(css_path="align.tcss")

docs/examples/styles/align_all.py

@@ -6,7 +6,7 @@ from textual.widgets import Label
 class AlignAllApp(App):
     """App that illustrates all alignments."""
 
-    CSS_PATH = "align_all.css"
+    CSS_PATH = "align_all.tcss"
 
     def compose(self) -> ComposeResult:
         yield Container(Label("left top"), id="left-top")