From 08f0c16a6ce493a11b6f4ca9deee5291e061884c Mon Sep 17 00:00:00 2001
From: Seth Burkart <SethBurkart7@gmail.com>
Date: Sun, 13 Aug 2023 19:07:24 +1000
Subject: [PATCH] add full support for webpack + css

---
 package.json               |  3 +++
 src/inject/documentload.js |  1 +
 src/inject/iframe.js       |  1 +
 src/inject/injected.css    | 15 ++++++++++++++-
 src/inject/injected.js     |  1 +
 webpack.config.js          | 26 +++++++++++++++++++++-----
 6 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 src/inject/documentload.js
 create mode 100644 src/inject/iframe.js
 create mode 100644 src/inject/injected.js

diff --git a/package.json b/package.json
index b8e20fb5..4b8dc4c3 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,9 @@
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "file-loader": "^6.2.0",
+    "mini-css-extract-plugin": "^2.7.6",
+    "sass": "^1.65.1",
+    "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"
diff --git a/src/inject/documentload.js b/src/inject/documentload.js
new file mode 100644
index 00000000..4fe8aeb4
--- /dev/null
+++ b/src/inject/documentload.js
@@ -0,0 +1 @@
+import './documentload.css';
\ No newline at end of file
diff --git a/src/inject/iframe.js b/src/inject/iframe.js
new file mode 100644
index 00000000..f034ef05
--- /dev/null
+++ b/src/inject/iframe.js
@@ -0,0 +1 @@
+import './iframe.css';
\ No newline at end of file
diff --git a/src/inject/injected.css b/src/inject/injected.css
index dc8ae440..9d848cfe 100644
--- a/src/inject/injected.css
+++ b/src/inject/injected.css
@@ -8,6 +8,19 @@
 // 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/>. */
+@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,600');
+/* // 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/>. */
 @import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,600');
@@ -1243,7 +1256,7 @@ body {
   content: "";
   width: 14px;
   height: 12px;
-  background-image: url(/icons/betterseqta-light-outline.png);
+  background-image: url("../../public/icons/betterseqta-light-outline.png");
   display: inline-block;
   background-size: 18px 18px;
   color: #fff;
diff --git a/src/inject/injected.js b/src/inject/injected.js
new file mode 100644
index 00000000..7710d4f4
--- /dev/null
+++ b/src/inject/injected.js
@@ -0,0 +1 @@
+import './injected.css';
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 46464c53..697464fa 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,26 +1,36 @@
 const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
   performance: {
     hints: false,
     maxEntrypointSize: 512000,
-    maxAssetSize: 512000
+    maxAssetSize: 512000,
   },
   devtool: 'cheap-module-source-map',
   entry: {
     'SEQTA': './src/SEQTA.js',
     'background': './src/background.js',
+    'inject-documentload': './src/inject/documentload.css', // Entry for CSS
+    'inject-iframe': './src/inject/iframe.css',            // Entry for CSS
+    'inject-injected': './src/inject/injected.css',        // Entry for CSS
   },
   output: {
-    filename: '[name].js',
+    filename: (pathData) => {
+      const name = pathData.chunk.name.replace('inject-', '');
+      return name.includes('inject') ? `inject/${name}.js` : `${name}.js`;
+    },
     path: path.resolve(__dirname, 'build'),
   },
   module: {
     rules: [
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+        ],
         include: path.resolve(__dirname, 'src'),
       },
       {
@@ -33,10 +43,16 @@ module.exports = {
     ],
   },
   plugins: [
+    new MiniCssExtractPlugin({
+      filename: (pathData) => {
+        const name = pathData.chunk.name.replace('inject-', '');
+        return name.includes('inject') ? `inject/${name}.css` : `inject/${name}.css`;
+      },
+    }),
     new CopyWebpackPlugin({
       patterns: [
-        { from: 'public', to: '.' }, // Copies everything from the public folder to the root level of build
-        { from: 'src/inject', to: 'inject' },
+        { from: 'public', to: '.' },
+        { from: 'src/inject/preview', to: 'inject/preview' },
       ],
     }),
   ],