Fix nested color and highlight style precedence

Author: ma2za

CHANGELOG.md

@@ -13,6 +13,12 @@
   back: `textStyle` becomes a `<span data-color>` with inline `color`,
   `highlight` becomes a `<mark data-color>` with inline `background-color`).
 
+### Fixed
+
+- Nested color and highlight spans override inherited styles of the same type
+  without creating duplicate ProseMirror marks or changing sibling styles.
+  Repeated style properties use the last nonempty declaration.
+
 ## 0.10.0
 
 ### Added

docs/markdown.md

@@ -52,6 +52,10 @@ one span:
 [both]{style="color:#ffffff; background-color:#000000"}
 ```
 
+When a property is repeated, its last nonempty declaration wins. Nested spans
+override the same property on their parent while inheriting other styles.
+Styles on an inner span do not affect its siblings.
+
 A `{...}` block elsewhere (after an image, link, or inline code) is left as
 plain text; the syntax is only recognized immediately after a `[span]`.
 

substack/mdrender.py

@@ -172,20 +172,21 @@ def _style_marks(attrs: Dict) -> List[Dict]:
     Only `color` and `background-color` declarations are recognized; any
     other declaration is ignored rather than rejected, since `{...}` spans
     are also used (via the attrs plugin) for plain CSS-style attributes in
-    general, not just color.
+    general, not just color. The last nonempty declaration for each property
+    wins, so each style contributes at most one mark of its type.
     """
     style = attrs.get("style", "")
-    marks: List[Dict] = []
+    marks: Dict[str, Dict] = {}
     for declaration in style.split(";"):
         prop, _, value = declaration.partition(":")
         prop, value = prop.strip().lower(), value.strip()
         if not value:
             continue
         if prop == "color":
-            marks.append(nodes.text_style_mark(value))
+            marks[MarkType.TEXT_STYLE] = nodes.text_style_mark(value)
         elif prop == "background-color":
-            marks.append(nodes.highlight_mark(value))
-    return marks
+            marks[MarkType.HIGHLIGHT] = nodes.highlight_mark(value)
+    return list(marks.values())
 
 
 def _render_inline(node: SyntaxTreeNode, marks: List[Dict], ctx: Dict) -> List[Dict]:
@@ -206,7 +207,12 @@ def _render_inline(node: SyntaxTreeNode, marks: List[Dict], ctx: Dict) -> List[D
             href = child.attrs.get("href", "")
             out.extend(_render_inline(child, marks + [nodes.link_mark(href)], ctx))
         elif t == "span":
-            out.extend(_render_inline(child, marks + _style_marks(child.attrs), ctx))
+            # Replace inherited styles without mutating the parent/sibling marks.
+            span_marks = {mark["type"]: mark for mark in marks}
+            span_marks.update(
+                (mark["type"], mark) for mark in _style_marks(child.attrs)
+            )
+            out.extend(_render_inline(child, list(span_marks.values()), ctx))
         elif t in ("softbreak", "hardbreak"):
             out.append(nodes.text(" ", marks))
         elif t == "footnote_ref":

tests/substack/test_style_precedence.py

@@ -0,0 +1,120 @@
+"""Style precedence through the public Markdown import and export paths."""
+
+import pytest
+
+from substack.mdexport import document_to_markdown
+from substack.mdrender import markdown_to_doc
+from substack.post import Post
+
+
+def render(markdown):
+    post = Post("T", "", user_id=1)
+    post.from_markdown(markdown)
+    return post.draft_body
+
+
+def marks_for(document, text):
+    node = next(n for n in document["content"][0]["content"] if n["text"] == text)
+    return node.get("marks", [])
+
+
+@pytest.mark.parametrize(
+    ("property_name", "mark_type"),
+    [("color", "textStyle"), ("background-color", "highlight")],
+)
+@pytest.mark.parametrize(
+    "declarations",
+    [
+        "{prop}:red; {prop}:blue",
+        "{prop}:red; {prop}:green; {prop}:blue",
+        "{prop}:red; {prop}:; font-weight:bold; {prop}:blue; {prop}:",
+        "{prop}:red; {prop_upper} : blue",
+    ],
+)
+def test_last_nonempty_style_declaration_wins(property_name, mark_type, declarations):
+    style = declarations.format(prop=property_name, prop_upper=property_name.upper())
+    document = render(f'[x]{{style="{style}"}}')
+    assert marks_for(document, "x") == [{"type": mark_type, "attrs": {"color": "blue"}}]
+
+
+@pytest.mark.parametrize(
+    ("property_name", "mark_type"),
+    [("color", "textStyle"), ("background-color", "highlight")],
+)
+def test_nested_style_overrides_without_leaking_to_siblings(property_name, mark_type):
+    document = render(
+        f'[before [inner]{{style="{property_name}:red"}} after]'
+        f'{{style="{property_name}:blue"}} outside'
+    )
+    for text in ("before ", " after"):
+        assert marks_for(document, text) == [
+            {"type": mark_type, "attrs": {"color": "blue"}}
+        ]
+    assert marks_for(document, "inner") == [
+        {"type": mark_type, "attrs": {"color": "red"}}
+    ]
+    assert marks_for(document, " outside") == []
+
+
+def test_nested_styles_preserve_other_marks_and_round_trip():
+    document = render(
+        "[before [**bold** and [link](https://example.com) and `code`]"
+        '{style="color:green; color:red"} after]'
+        '{style="color:blue; background-color:yellow"}'
+    )
+    expected_styles = {
+        "textStyle": {"color": "red"},
+        "highlight": {"color": "yellow"},
+    }
+    for text, extra_type in (("bold", "strong"), ("link", "link"), ("code", "code")):
+        marks = marks_for(document, text)
+        assert len(marks) == 3
+        assert {
+            m["type"]: m["attrs"] for m in marks if "attrs" in m and m["type"] != "link"
+        } == expected_styles
+        assert any(m["type"] == extra_type for m in marks)
+    assert next(m for m in marks_for(document, "link") if m["type"] == "link")[
+        "attrs"
+    ] == {"href": "https://example.com"}
+
+    markdown, unsupported = document_to_markdown(document)
+    assert unsupported == []
+    assert markdown_to_doc(markdown) == document["content"]
+
+
+def test_three_levels_override_color_and_highlight_independently():
+    document = render(
+        '[outer [middle [inner]{style="color:red"} middle-end]'
+        '{style="background-color:green"} outer-end]'
+        '{style="color:blue; background-color:yellow"}'
+    )
+    for text, color, highlight in (
+        ("outer ", "blue", "yellow"),
+        ("middle ", "blue", "green"),
+        ("inner", "red", "green"),
+        (" middle-end", "blue", "green"),
+        (" outer-end", "blue", "yellow"),
+    ):
+        marks = marks_for(document, text)
+        assert len(marks) == 2
+        assert {m["type"]: m["attrs"]["color"] for m in marks} == {
+            "textStyle": color,
+            "highlight": highlight,
+        }
+
+
+def test_unrecognized_or_empty_inner_styles_keep_inherited_styles():
+    document = render(
+        '[outer [inner]{style="color:; background-color:; font-weight:bold"}]'
+        '{style="color:blue; background-color:yellow"}'
+    )
+    assert document["content"][0]["content"] == [
+        {
+            "type": "text",
+            "text": "outer inner",
+            "marks": [
+                {"type": "textStyle", "attrs": {"color": "blue"}},
+                {"type": "highlight", "attrs": {"color": "yellow"}},
+            ],
+        }
+    ]