Inconsistent treatment of overlapping markup and TCSS

[rodrigogiraoserrao]

I created this issue to track the issue found and explained in #3415 (comment) in its generality.

As it stands, we treat markup and TCSS in inconsistent ways, as we can see below.
The label widget and the label of the checkbox have the same markup and the same TCSS and yet they look different:

It's also arguable whether any of the two options are the correct one.

Code for the app above

from textual.app import App
from textual.widgets import Checkbox, Label


class CheckboxApp(App):
    CSS = """
    Checkbox > .toggle--label, Label {
        color: white;
        text-opacity: 50%;
    }
    """

    def compose(self):
        yield Checkbox("[red bold]This is just[/] some text.")
        yield Label("[red bold]This is just[/] some text.")


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

[willmcgugan]

The toggle widget gives the tcss priority. Alas when you get to that level, you need to take care to apply styles in the correct order.

Going to attempt a fix for the toggle button, but there may be similar issues in other widgets.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.