CSS: Padding ignored when CamelCase is used - pattern matching issue

[dundeemt]

Have you checked closed issues? https://github.com/Textualize/textual/issues?q=is%3Aissue+is%3Aclosed
Yes

Please give a brief but clear explanation of the issue. If you can, include a complete working example that demonstrates the bug. Check it can run without modifications.
There appears to be a name-sensitivity matching issue with CSS, specifically "padding" Using the stopwatch04.py from the tutorial. If you modify the App and Widget names from "Stopwatch" to "StopWatch" the CSS padding element between StopWatch widgets are ignored. Here is the diff you can apply to stopwatch04.py to display this issue.

diff --git a/docs/examples/tutorial/stopwatch04.py b/docs/examples/tutorial/stopwatch04.py
index 2394fd20c..5e32b2890 100644
--- a/docs/examples/tutorial/stopwatch04.py
+++ b/docs/examples/tutorial/stopwatch04.py
@@ -7,7 +7,7 @@ class TimeDisplay(Static):
"""A widget to display elapsed time."""

-class Stopwatch(Static):
+class StopWatch(Static):
"""A stopwatch widget."""

 def on_button_pressed(self, event: Button.Pressed) -> None:

@@ -25,7 +25,7 @@ class Stopwatch(Static):
yield TimeDisplay("00:00:00.00")

-class StopwatchApp(App):
+class StopWatchApp(App):
"""A Textual app to manage stopwatches."""

 CSS_PATH = "stopwatch04.css"

@@ -35,7 +35,7 @@ class StopwatchApp(App):
"""Create child widgets for the app."""
yield Header()
yield Footer()

•    yield Container(Stopwatch(), Stopwatch(), Stopwatch())
  

•    yield Container(StopWatch(), StopWatch(), StopWatch())
  

  def action_toggle_dark(self) -> None:
  """An action to toggle dark mode."""
  @@ -43,5 +43,5 @@ class StopwatchApp(App):

if name == "main":

• app = StopwatchApp()

• app = StopWatchApp()
  app.run()

It will be helpful if you run the following command and paste the results:

textual diagnose

Textual Diagnostics

Versions

Name	Value
Textual	0.19.1
Rich	13.3.3

Python

Name	Value
Version	3.8.10
Implementation	CPython
Compiler	GCC 9.4.0
Executable	/home/jlh/projects/txtlz/bin/python3

Operating System

Name	Value
System	Linux
Release	5.4.0-146-generic
Version	#163-Ubuntu SMP Fri Mar 17 18:26:02 UTC 2023

Terminal

Name	Value
Terminal Application	Unknown
TERM	xterm-256color
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

Name	Value
size	width=197, height=43
legacy_windows	False
min_width	1
max_width	197
is_terminal	True
encoding	utf-8
max_height	43
justify	None
overflow	None
no_wrap	False
highlight	None
markup	None
height	None

Feel free to add screenshots and / or videos. These can be very helpful!

[davep]

This is what we'd expect to happen. You're matching on a type and types in Python are case-sensitive. StopWatch and Stopwatch are two different Python classes.

Consider this example:

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

class ThisIsATest( Label ):
    pass

class ThisisaTest( Label ):
    pass

class Thisisatest( Label ):
    pass

class CSSCaseExampleApp( App[ None ] ):

    CSS = """
    ThisIsATest {
        border: round red;
    }

    ThisisaTest {
        border: round green;
    }

    Thisisatest {
        border: round blue;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        with Vertical():
            yield ThisIsATest( "This is one class" )
            yield ThisisaTest( "This is another class" )
            yield Thisisatest( "And this is another still" )
        yield Footer()

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

[dundeemt]

Ok, so the issue is that the CSS specified Stopwatch -- thanks - my bad.
I had been hand coding along with the tutorial, but I just copied and pasted the CSS which specifies Stopwatch, while I had camelcased the App and Widget as StopWatch so of course that created the no-match.

I'm closing this issue - Thank you for your patience.