Fix <sup><a> from getting wrapped with [ ] (#1928)

* Scope `[ ]` to data-footnote-ref * Stylelint auto-fixes * Create ninety-moles-clap.md Co-authored-by: Actions Auto Build <[email protected]>
primer · Feb 3, 2022 · 0fb6789 · 0fb6789
1 parent 670149d
commit 0fb6789
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 34 deletions.
diff --git a/.changeset/ninety-moles-clap.md b/.changeset/ninety-moles-clap.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Fix `<sup><a>` from getting wrapped with `[ ]`
diff --git a/src/markdown/footnotes.scss b/src/markdown/footnotes.scss
@@ -1,37 +1,49 @@
 // stylelint-disable selector-max-type
 // stylelint-disable selector-max-compound-selectors
 
-.markdown-body .footnotes {
-  font-size: $h6-size;
-  color: var(--color-fg-muted);
-  border-top: $border;
+.markdown-body {
+  [data-footnote-ref] {
+    &::before {
+      content: '[';
+    }
 
-  ol {
-    padding-left: $spacer-3;
+    &::after {
+      content: ']';
+    }
   }
 
-  li {
-    position: relative;
-  }
+  .footnotes {
+    font-size: $h6-size;
+    color: var(--color-fg-muted);
+    border-top: $border;
 
-  li:target::before {
-    position: absolute;
-    top: -$spacer-2;
-    right: -$spacer-2;
-    bottom: -$spacer-2;
-    left: -$spacer-4;
-    pointer-events: none;
-    content: '';
-    // stylelint-disable-next-line primer/borders
-    border: 2px $border-style var(--color-accent-emphasis);
-    border-radius: $border-radius;
-  }
+    ol {
+      padding-left: $spacer-3;
+    }
 
-  li:target {
-    color: var(--color-fg-default);
-  }
+    li {
+      position: relative;
+    }
+
+    li:target::before {
+      position: absolute;
+      top: -$spacer-2;
+      right: -$spacer-2;
+      bottom: -$spacer-2;
+      left: -$spacer-4;
+      pointer-events: none;
+      content: '';
+      // stylelint-disable-next-line primer/borders
+      border: 2px $border-style var(--color-accent-emphasis);
+      border-radius: $border-radius;
+    }
+
+    li:target {
+      color: var(--color-fg-default);
+    }
 
-  .data-footnote-backref g-emoji {
-    font-family: monospace;
+    .data-footnote-backref g-emoji {
+      font-family: monospace;
+    }
   }
 }
diff --git a/src/markdown/markdown-body.scss b/src/markdown/markdown-body.scss
@@ -93,12 +93,4 @@
       margin-bottom: 0;
     }
   }
-
-  sup > a::before {
-    content: '[';
-  }
-
-  sup > a::after {
-    content: ']';
-  }
 }