refactor: Use CSS module name for line highlight instead of global name

newrelic · Jul 8, 2020 · 2fb389d · 2fb389d
1 parent 8b47d85
commit 2fb389d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/src/components/CodeHighlight.js b/src/components/CodeHighlight.js
@@ -40,7 +40,7 @@ const CodeHighlight = ({
                     line,
                     key: idx,
                     className: cx({
-                      'line-highlight': highlightedLines.has(idx + 1),
+                      [styles.highlightLine]: highlightedLines.has(idx + 1),
                     }),
                   })}
                 >

diff --git a/src/components/CodeHighlight.module.scss b/src/components/CodeHighlight.module.scss
@@ -43,6 +43,14 @@
   white-space: pre-wrap;
 }
 
+.highlightLine {
+  background: var(--color-nord-2);
+
+  :global(.light-mode) & {
+    background: var(--color-nord-5);
+  }
+}
+
 :global {
   .namespace {
     opacity: 0.7;
@@ -111,12 +119,4 @@
       cursor: help;
     }
   }
-
-  .line-highlight {
-    background: var(--color-nord-2);
-
-    :global(.light-mode) & {
-      background: var(--color-nord-5);
-    }
-  }
 }