From 2fb389d0a904d463ec910e29249006f4e9d38592 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Tue, 7 Jul 2020 23:58:51 -0700
Subject: [PATCH] refactor: Use CSS module name for line highlight instead of
 global name

---
 src/components/CodeHighlight.js          |  2 +-
 src/components/CodeHighlight.module.scss | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/CodeHighlight.js b/src/components/CodeHighlight.js
index 41dac49f9..c1265a37a 100644
--- 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
index 8607440ed..256caeeea 100644
--- 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);
-    }
-  }
 }