Fix for overlapping tags

Author: willmcgugan

src/textual/markup.py

@@ -5,6 +5,8 @@
 
 from __future__ import annotations
 
+from operator import attrgetter
+
 from textual.css.parse import substitute_references
 from textual.css.tokenizer import UnexpectedEnd
 
@@ -411,8 +413,14 @@ def process_text(template_text: str, /) -> str:
 
     content_text = "".join(text)
     text_length = len(content_text)
-    for position, tag_body, _ in style_stack:
-        spans.append(Span(position, text_length, tag_body))
+    spans.extend(
+        [
+            Span(position, text_length, tag_body)
+            for position, tag_body, _ in reversed(style_stack)
+        ]
+    )
+    spans.reverse()
+    spans.sort(key=attrgetter("start"))
 
     content = Content(
         content_text,

tests/test_markup.py

@@ -35,9 +35,9 @@
             Content(
                 "What is up with you?",
                 spans=[
+                    Span(0, 20, style="b"),
                     Span(0, 10, style="on red"),
                     Span(5, 20, style="i"),
-                    Span(0, 20, style="b"),
                 ],
             ),
         ),
@@ -84,6 +84,58 @@
                 spans=[Span(0, 35, style="#ff0000"), Span(7, 35, style="#ffffff")],
             ),
         ),
+        (
+            "[blue][green][red]R[/red]G[/green]B[/blue]",
+            Content(
+                "RGB",
+                spans=[
+                    Span(0, 3, "blue"),
+                    Span(0, 2, "green"),
+                    Span(0, 1, "red"),
+                ],
+            ),
+        ),
+        (
+            "[red][blue]X[/blue][/red]",
+            Content(
+                "X",
+                spans=[
+                    Span(0, 1, "red"),
+                    Span(0, 1, "blue"),
+                ],
+            ),
+        ),
+        # Non-nested tags
+        (
+            "[red][blue]X[/red][/blue]",
+            Content(
+                "X",
+                spans=[
+                    Span(0, 1, "blue"),
+                    Span(0, 1, "red"),
+                ],
+            ),
+        ),
+        (
+            "[red][blue]X[/red]",
+            Content(
+                "X",
+                spans=[
+                    Span(0, 1, "blue"),
+                    Span(0, 1, "red"),
+                ],
+            ),
+        ),
+        (
+            "[red][blue]X",
+            Content(
+                "X",
+                spans=[
+                    Span(0, 1, "red"),
+                    Span(0, 1, "blue"),
+                ],
+            ),
+        ),
     ],
 )
 def test_to_content(markup: str, content: Content):