Skip to content

Feature: Add data-author attribute to blame gutter for CSS styling #1017

@ajanderson1

Description

@ajanderson1

Feature Request

Add a data-author attribute to the .obs-git-blame-gutter elements containing the commit author name/email. This would enable users to style blame lines differently per author using CSS snippets.

Use Case

When collaborating with others (or with AI assistants like Claude that commit with a distinct author identity), it's helpful to visually distinguish who wrote each line at a glance. Currently, the line authoring feature supports:

  • Age-based color gradient (colorNew/colorOld)
  • Single text color via --obs-git-gutter-text

But there's no way to style lines differently based on who wrote them.

Proposed Solution

When rendering the blame gutter, add a data attribute with the author:

<!-- Current -->
<div class="cm-gutterElement obs-git-blame-gutter">
  <div>Claude  2 days ago</div>
</div>

<!-- Proposed -->
<div class="cm-gutterElement obs-git-blame-gutter" data-author="Claude" data-author-email="[email protected]">
  <div>Claude  2 days ago</div>
</div>

This would allow CSS like:

.obs-git-blame-gutter[data-author*="Claude"] {
    --obs-git-gutter-text: #ff9500;
    background-color: rgba(255, 149, 0, 0.1);
    border-left: 2px solid #ff9500;
}

.obs-git-blame-gutter[data-author*="MyName"] {
    --obs-git-gutter-text: #4a9eff;
    background-color: rgba(74, 158, 255, 0.1);
    border-left: 2px solid #4a9eff;
}

Alternatives Considered

  • CSS text matching: Not possible - CSS cannot select based on text content
  • Custom plugin with MutationObserver: Works but adds overhead and complexity
  • Age-based coloring only: Doesn't distinguish collaborators

Additional Context

The implementation in lineAuthorProvider.ts already has access to the author information when rendering - this would just require passing it through as a data attribute on the DOM element.

Thank you for the excellent plugin!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions