Update CSS file extensions to SCSS

src/inject/documentload.css

@@ -1,18 +0,0 @@
-/* // This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-
-// You should have received a copy of the GNU General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>. */
-
-html {
-  background: #161616 !important;
-  background-color: #161616;
-  font-family: Rubik, Roboto !important;
-}

src/inject/documentload.js

@@ -1 +1 @@
-import './documentload.css';
+import './documentload.scss';

src/inject/documentload.scss

@@ -0,0 +1,5 @@
+html {
+  background: #161616 !important;
+  background-color: #161616;
+  font-family: Rubik, Roboto !important;
+}

src/inject/iframe.css

@@ -1,73 +0,0 @@
-/* // This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-
-// You should have received a copy of the GNU General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>. */
-
-html,
-p,
-div,
-span {
-  color: white !important;
-  text-shadow:
-    1px 1px 2px #161616,
-    0 0 1em #161616;
-}
-
-body {
-  background-color: transparent !important;
-}
-
-blockquote.forward > .preamble {
-  color: rgba(255, 255, 255, 0.7) !important;
-}
-
-blockquote.forward > .preamble > .date > .value,
-blockquote.forward > .preamble > .sender > .value {
-  color: rgba(255, 255, 255, 0.7) !important;
-}
-blockquote.forward > .preamble > .date > .label,
-blockquote.forward > .preamble > .sender > .label {
-  color: rgba(255, 255, 255, 0.7) !important;
-}
-table th {
-  background-color: #161616;
-}
-
-/* .cke_panel_listItem {
-
-} */
-
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  transition: 1s;
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 10rem !important;
-}
-
-::-webkit-scrollbar-corner {
-  background: none;
-}
-
-.forward {
-  border-radius: 1rem;
-}
-
-.preamble {
-  border-top-left-radius: 1rem;
-  border-top-right-radius: 1rem;
-}

src/inject/iframe.js

@@ -1 +1 @@
-import './iframe.css';
+import './iframe.scss';

src/inject/iframe.scss

@@ -0,0 +1,51 @@
+html, p, div, span {
+  color: white !important;
+  text-shadow: 1px 1px 2px #161616, 0 0 1em #161616;
+}
+
+body {
+  background-color: transparent !important;
+}
+
+blockquote.forward > .preamble {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+blockquote.forward > .preamble > .date > .value, blockquote.forward > .preamble > .sender > .value {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+blockquote.forward > .preamble > .date > .label, blockquote.forward > .preamble > .sender > .label {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+table th {
+  background-color: #161616;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  transition: 1s;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10rem !important;
+}
+
+::-webkit-scrollbar-corner {
+  background: none;
+}
+
+.forward {
+  border-radius: 1rem;
+}
+
+.preamble {
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}

webpack.config.js

@@ -18,9 +18,9 @@ export default {
   entry: {
     SEQTA: './src/SEQTA.js',
     background: './src/background.js',
-    'inject/documentload': './src/inject/documentload.css', // Entry for CSS
+    'inject/documentload': './src/inject/documentload.scss',
-    'inject/iframe': './src/inject/iframe.css', // Entry for CSS
+    'inject/iframe': './src/inject/iframe.scss',
-    'inject/injected': './src/inject/injected.scss', // Entry for CSS
+    'inject/injected': './src/inject/injected.scss',
   },
   output: {
     filename: (pathData) => {