add full support for webpack + css

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"

src/inject/documentload.js

@@ -0,0 +1 @@
+import './documentload.css';

src/inject/iframe.js

@@ -0,0 +1 @@
+import './iframe.css';

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;

src/inject/injected.js

@@ -0,0 +1 @@
+import './injected.css';

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: 'public', to: '.' },
-        { from: 'src/inject', to: 'inject' },
+        { from: 'src/inject/preview', to: 'inject/preview' },
       ],
     }),
   ],