From 9af73f0598fe7a11d71f52a7f4ae8626f95acf80 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Fri, 17 Jan 2025 03:25:30 +0400
Subject: [PATCH] Replaced `@import` with `@use` on popup stylesheets

---
 src/styles/injectable/base-styles.scss | 40 ++++++++++++++++++++++
 src/styles/popup.scss                  | 47 +++-----------------------
 2 files changed, 44 insertions(+), 43 deletions(-)
 create mode 100644 src/styles/injectable/base-styles.scss

diff --git a/src/styles/injectable/base-styles.scss b/src/styles/injectable/base-styles.scss
new file mode 100644
index 0000000..db49eb9
--- /dev/null
+++ b/src/styles/injectable/base-styles.scss
@@ -0,0 +1,40 @@
+@use '../colors';
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+body {
+  width: 320px;
+
+  // Hacky class which is added by the JavaScript indicating that page was (probably) opened in the tab
+  &.is-in-tab {
+    width: 100%;
+    max-width: 640px;
+    margin: 0 auto;
+  }
+}
+
+html, body {
+  background-color: colors.$background;
+  color: colors.$text;
+  font-size: 16px;
+  font-family: verdana, arial, helvetica, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: colors.$link;
+  text-decoration: none;
+
+  &:hover, &:focus {
+    color: colors.$link-hover;
+  }
+}
diff --git a/src/styles/popup.scss b/src/styles/popup.scss
index 89b2e09..110bbda 100644
--- a/src/styles/popup.scss
+++ b/src/styles/popup.scss
@@ -1,44 +1,5 @@
 @use 'colors';
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  text-decoration: none;
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-}
-
-body {
-  width: 320px;
-
-  // Hacky class which is added by the JavaScript indicating that page was (probably) opened in the tab
-  &.is-in-tab {
-    width: 100%;
-    max-width: 640px;
-    margin: 0 auto;
-  }
-}
-
-html, body {
-  background-color: colors.$background;
-  color: colors.$text;
-  font-size: 16px;
-  font-family: verdana, arial, helvetica, sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-a {
-  color: colors.$link;
-  text-decoration: none;
-
-  &:hover, &:focus {
-    color: colors.$link-hover;
-  }
-}
-
-@import "injectable/input";
-@import "injectable/tag";
-@import "injectable/icons";
+@use 'injectable/base-styles';
+@use 'injectable/input';
+@use 'injectable/tag';
+@use 'injectable/icons';