From 693a8da648728a6da38151be3090198421186b49 Mon Sep 17 00:00:00 2001
From: Jonas Pfalzgraf <jolun.swtor@gmail.com>
Date: Sat, 1 Jun 2024 00:57:25 +0200
Subject: [PATCH 1/3] adding vite

---
 package.json                  | 22 +++++++++++-----------
 vite.config.background.js     | 24 ++++++++++++++++++++++++
 vite.config.js                | 29 +++++++++++++++++++++++++++++
 vite.config.settings.js       | 29 +++++++++++++++++++++++++++++
 webpack.config.background.cjs | 28 ----------------------------
 webpack.config.cjs            | 28 ----------------------------
 webpack.config.settings.cjs   | 28 ----------------------------
 7 files changed, 93 insertions(+), 95 deletions(-)
 create mode 100644 vite.config.background.js
 create mode 100644 vite.config.js
 create mode 100644 vite.config.settings.js
 delete mode 100644 webpack.config.background.cjs
 delete mode 100644 webpack.config.cjs
 delete mode 100644 webpack.config.settings.cjs

diff --git a/package.json b/package.json
index a383aac..47f41da 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "deploy-v3": "npm run build-tooling && node ./tools/deploy.js && npm run sync && npm run build-js && npm run build-css && node ./tools/clean.js",
     "deploy-v2": "npm run deploy-v3 && node ./tools/v2.js",
-    "build-js": "webpack --config ./webpack.config.cjs && webpack --config ./webpack.config.settings.cjs && webpack --config ./webpack.config.background.cjs",
+    "build-js": "vite build --config ./vite.config.js && vite build --config ./vite.config.settings.js && vite build --config ./vite.config.background.js",
     "build-css": "sass ./src/sass/:./dist/css/",
     "build-tooling": "tsc --project ./tooling.tsconfig.json",
     "watch-ts": "tsc -w -p tsconfig.json",
@@ -14,14 +14,14 @@
     "sync": "npm run build-tooling && node ./tools/syncConfig.js"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.206",
-    "@types/node": "^18.11.18",
-    "@webcomponents/webcomponentsjs": "^2.7.0",
-    "sass": "^1.39.0",
-    "ts-loader": "^9.4.2",
-    "typescript": "^4.2.4",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1"
+    "@types/chrome": "^0.0.268",
+    "@types/node": "^20.13.0",
+    "@webcomponents/webcomponentsjs": "^2.8.0",
+    "sass": "^1.77.4",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.12",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "browserslist": [
     "> 1%",
@@ -45,7 +45,7 @@
     "url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues"
   },
   "dependencies": {
-    "@webcomponents/custom-elements": "^1.5.1",
-    "bootstrap": "^5.2.3"
+    "@webcomponents/custom-elements": "^1.6.0",
+    "bootstrap": "^5.3.3"
   }
 }
\ No newline at end of file
diff --git a/vite.config.background.js b/vite.config.background.js
new file mode 100644
index 0000000..3f0daf4
--- /dev/null
+++ b/vite.config.background.js
@@ -0,0 +1,24 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+	build: {
+		rollupOptions: {
+			input: resolve(__dirname, "src/background.ts"),
+			output: {
+				entryFileNames: "background.js",
+				dir: resolve(__dirname, "dist/js"),
+			},
+		},
+		sourcemap: true,
+	},
+	plugins: [tsconfigPaths()],
+	resolve: {
+		extensions: [".tsx", ".ts"],
+	},
+	esbuild: {
+		include: /.*\.tsx?$/,
+		exclude: [/node_modules/, /dist/, /src\/app\.ts/, /src\/settings\.ts/],
+	},
+});
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..44d2f87
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,29 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+	build: {
+		rollupOptions: {
+			input: resolve(__dirname, "src/app.ts"),
+			output: {
+				entryFileNames: "app.js",
+				dir: resolve(__dirname, "dist/js"),
+			},
+		},
+		sourcemap: true,
+	},
+	plugins: [tsconfigPaths()],
+	resolve: {
+		extensions: [".tsx", ".ts"],
+	},
+	esbuild: {
+		include: /.*\.tsx?$/,
+		exclude: [
+			/node_modules/,
+			/dist/,
+			/src\/background\.ts/,
+			/src\/settings\.ts/,
+		],
+	},
+});
diff --git a/vite.config.settings.js b/vite.config.settings.js
new file mode 100644
index 0000000..0508763
--- /dev/null
+++ b/vite.config.settings.js
@@ -0,0 +1,29 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+	build: {
+		rollupOptions: {
+			input: resolve(__dirname, "src/settings.ts"),
+			output: {
+				entryFileNames: "settings.js",
+				dir: resolve(__dirname, "dist/js"),
+			},
+		},
+		sourcemap: true,
+	},
+	plugins: [tsconfigPaths()],
+	resolve: {
+		extensions: [".tsx", ".ts"],
+	},
+	esbuild: {
+		include: /.*\.tsx?$/,
+		exclude: [
+			/node_modules/,
+			/dist/,
+			/src\/background\.ts/,
+			/src\/app\.ts/,
+		],
+	},
+});
diff --git a/webpack.config.background.cjs b/webpack.config.background.cjs
deleted file mode 100644
index 7102629..0000000
--- a/webpack.config.background.cjs
+++ /dev/null
@@ -1,28 +0,0 @@
-const path = require('path');
-
-module.exports = {
-	entry: './src/background.ts',
-	mode: 'production',
-	devtool: 'source-map',
-	module: {
-		rules: [
-			{
-				test: /\.tsx?$/,
-				use: 'ts-loader',
-				exclude: [
-					"/node_modules/",
-					"/dist/",
-					"/src/app.ts",
-					"/src/settings.ts"
-				],
-			},
-		],
-	},
-	resolve: {
-		extensions: ['.tsx', '.ts'],
-	},
-	output: {
-		filename: 'background.js',
-		path: path.resolve(__dirname, 'dist/js'),
-	},
-};
diff --git a/webpack.config.cjs b/webpack.config.cjs
deleted file mode 100644
index b7bf57e..0000000
--- a/webpack.config.cjs
+++ /dev/null
@@ -1,28 +0,0 @@
-const path = require('path');
-
-module.exports = {
-	entry: './src/app.ts',
-	mode: 'production',
-	devtool: 'source-map',
-	module: {
-		rules: [
-			{
-				test: /\.tsx?$/,
-				use: 'ts-loader',
-				exclude: [
-					"/node_modules/",
-					"/dist/",
-					"/src/background.ts",
-					"/src/settings.ts"
-				],
-			},
-		],
-	},
-	resolve: {
-		extensions: ['.tsx', '.ts'],
-	},
-	output: {
-		filename: 'app.js',
-		path: path.resolve(__dirname, 'dist/js'),
-	},
-};
diff --git a/webpack.config.settings.cjs b/webpack.config.settings.cjs
deleted file mode 100644
index e8e1821..0000000
--- a/webpack.config.settings.cjs
+++ /dev/null
@@ -1,28 +0,0 @@
-const path = require('path');
-
-module.exports = {
-	entry: './src/settings.ts',
-	mode: 'production',
-	devtool: 'source-map',
-	module: {
-		rules: [
-			{
-				test: /\.tsx?$/,
-				use: 'ts-loader',
-				exclude: [
-					"/node_modules/",
-					"/dist/",
-					"/src/background.ts",
-					"/src/app.ts"
-				],
-			},
-		],
-	},
-	resolve: {
-		extensions: ['.tsx', '.ts'],
-	},
-	output: {
-		filename: 'settings.js',
-		path: path.resolve(__dirname, 'dist/js'),
-	},
-};

From b225218e94183b1e58085176706f7f517f9ae3fe Mon Sep 17 00:00:00 2001
From: Jonas Pfalzgraf <jolun.swtor@gmail.com>
Date: Sat, 1 Jun 2024 02:08:14 +0200
Subject: [PATCH 2/3] working on vite style integration

---
 .gitignore                |  2 +-
 LICENSE                   |  2 +-
 package.json              |  5 +--
 public/manifest.json      | 11 +----
 public/options.html       |  3 +-
 public/popup.html         |  3 +-
 src/app.ts                |  1 +
 src/background.ts         | 13 +++---
 src/settings.ts           |  1 +
 tooling.tsconfig.json     |  3 ++
 tools/clean.ts            |  9 -----
 tools/deploy.ts           | 84 ---------------------------------------
 tools/parse.ts            | 43 ++++++++++++++++++++
 tsconfig.json             |  2 +-
 vite.config.background.js | 24 -----------
 vite.config.js            | 66 ++++++++++++++++++------------
 vite.config.settings.js   | 29 --------------
 17 files changed, 101 insertions(+), 200 deletions(-)
 delete mode 100644 tools/clean.ts
 delete mode 100644 tools/deploy.ts
 create mode 100644 tools/parse.ts
 delete mode 100644 vite.config.background.js
 delete mode 100644 vite.config.settings.js

diff --git a/.gitignore b/.gitignore
index 786253e..7a21a8d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -688,7 +688,7 @@ FodyWeavers.xsd
 dist
 
 tools/syncConfig.js
-tools/deploy.js
+tools/parse.js
 tools/v2.js
 tools/clean.js
 package-lock.json
diff --git a/LICENSE b/LICENSE
index 0404ba7..79f09ef 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Jonas Pfalzgraf
+Copyright (c) 2024 Jonas Pfalzgraf
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/package.json b/package.json
index 47f41da..f3c6f1b 100644
--- a/package.json
+++ b/package.json
@@ -4,10 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "deploy-v3": "npm run build-tooling && node ./tools/deploy.js && npm run sync && npm run build-js && npm run build-css && node ./tools/clean.js",
+    "deploy-v3": "npx rimraf ./dist/ && npm run build-tooling && npm run sync && npm run build && node ./tools/parse.js",
     "deploy-v2": "npm run deploy-v3 && node ./tools/v2.js",
-    "build-js": "vite build --config ./vite.config.js && vite build --config ./vite.config.settings.js && vite build --config ./vite.config.background.js",
-    "build-css": "sass ./src/sass/:./dist/css/",
+    "build": "vite build",
     "build-tooling": "tsc --project ./tooling.tsconfig.json",
     "watch-ts": "tsc -w -p tsconfig.json",
     "watch-sass": "sass --watch ./src/sass/:./dist/css/",
diff --git a/public/manifest.json b/public/manifest.json
index 2f57490..42ee42b 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -21,15 +21,6 @@
     "notifications"
   ],
   "background": {
-    "service_worker": "js/background.js"
-  },
-  "commands": {
-    "_execute_browser_action": {
-      "suggested_key": {
-        "default": "Ctrl+Shift+F",
-        "mac": "MacCtrl+Shift+F"
-      },
-      "description": "Opens popup.html"
-    }
+    "service_worker": "background.js"
   }
 }
\ No newline at end of file
diff --git a/public/options.html b/public/options.html
index 161fb1a..9456208 100644
--- a/public/options.html
+++ b/public/options.html
@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="./favicon.ico">
     <title>{{BET}} Options</title>
-    <link rel="stylesheet" href="css/app.css">
   </head>
   <body>
     <noscript>
@@ -20,7 +19,7 @@
       </div>
     </div>
     <footer>
-      <script type="module" src="./js/settings.js"></script>
+      <script type="module" src="./settings.js"></script>
     </footer>
   </body>
 </html>
diff --git a/public/popup.html b/public/popup.html
index e467626..28cdf54 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="./favicon.ico">
     <title>{{BET}}</title>
-    <link rel="stylesheet" href="css/app.css">
   </head>
   <body>
     <noscript>
@@ -20,7 +19,7 @@
       </div>
     </div>
     <footer>
-      <script type="module" src="./js/app.js"></script>
+      <script type="module" src="./app.js"></script>
     </footer>
   </body>
 </html>
diff --git a/src/app.ts b/src/app.ts
index 3dc1fa6..b1d8653 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,4 +1,5 @@
 import { Session } from "./classes/session"
+import "./sass/app.sass"
 
 class App {
 
diff --git a/src/background.ts b/src/background.ts
index 197f02f..4941b1c 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -1,12 +1,9 @@
 class Background {
+	constructor() {
+		this.main();
+	}
 
-    constructor() {
-        this.main();
-    }
-
-    async main(): Promise<void> {
-
-    }
+	async main(): Promise<void> {}
 }
 
-new Background();
\ No newline at end of file
+new Background();
diff --git a/src/settings.ts b/src/settings.ts
index 24d6bb8..10065b7 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -1,5 +1,6 @@
 import { Session } from "./classes/session";
 import { BasicButton } from "./components/button";
+import "./sass/app.sass";
 
 class Settings {
 
diff --git a/tooling.tsconfig.json b/tooling.tsconfig.json
index 84ac8bc..72730da 100644
--- a/tooling.tsconfig.json
+++ b/tooling.tsconfig.json
@@ -1,6 +1,9 @@
 {
     "compilerOptions": {
         "target": "ESNext",
+        "lib": [
+            "ESNext"
+        ],
         "module": "ESNext",
         "outDir": "./tools/",
         "rootDir": "./tools/",
diff --git a/tools/clean.ts b/tools/clean.ts
deleted file mode 100644
index caba573..0000000
--- a/tools/clean.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as fs from "fs";
-
-function removeExport(file: string) {
-	let content = fs.readFileSync(file, "utf8");
-	content = content.replace("export {};", "");
-	fs.writeFileSync(file, content);
-}
-
-removeExport("./dist/js/background.js");
diff --git a/tools/deploy.ts b/tools/deploy.ts
deleted file mode 100644
index a12bf54..0000000
--- a/tools/deploy.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-const appConfig = JSON.parse(fs.readFileSync('./app.config.json', 'utf8'));
-const DEPLOY_ENTRY = "./public/";
-const DEPLOY_TARGET = "./dist/";
-
-function deleteFolderRecursive(path: string) {
-  if (fs.existsSync(path)) {
-    fs.readdirSync(path).forEach(function (file: string) {
-      const curPath = path + "/" + file;
-      if (fs.lstatSync(curPath).isDirectory()) {
-        deleteFolderRecursive(curPath);
-      } else {
-        fs.unlinkSync(curPath);
-      }
-    });
-    fs.rmdirSync(path);
-  }
-}
-
-function findHtmlFilesRecursive(source: string): string[] {
-  let files: string[] = [];
-  const dir = fs.readdirSync(source);
-  dir.forEach(function (file: string) {
-    const sourceFile = path.join(source, file);
-    const stat = fs.lstatSync(sourceFile);
-    if (stat.isDirectory()) {
-      files = files.concat(findHtmlFilesRecursive(sourceFile));
-    } else {
-      if (path.extname(sourceFile) == '.html') {
-        files.push(sourceFile);
-      }
-    }
-  });
-  return files;
-}
-
-function replaceKeywordsInHtmlFile(file: string) {
-  let content = fs.readFileSync(file, 'utf8');
-  const pairs = appConfig.htmlTemplatePairs;
-  pairs.forEach(function (pair: object) {
-    // @ts-ignore
-    content = content.replaceAll(pair.key, pair.value);
-  });
-  file = file.replace("public\\", DEPLOY_TARGET);
-  fs.writeFileSync(file, content);
-}
-
-function buildHtmlFiles(source: string) {
-  const files = findHtmlFilesRecursive(source);
-  files.forEach(function (file: string) {
-    replaceKeywordsInHtmlFile(file);
-  });
-}
-
-function mkdirSync(path: string) {
-  try {
-    fs.mkdirSync(path);
-  } catch (e: any) {
-    if (e.code != 'EEXIST') throw e;
-  }
-}
-
-function copyFiles(source: string, target: string) {
-  const files = fs.readdirSync(source);
-  files.forEach(function (file: string) {
-    const sourceFile = path.join(source, file);
-    const targetFile = path.join(target, file);
-    const stat = fs.lstatSync(sourceFile);
-    if (stat.isDirectory()) {
-      mkdirSync(targetFile);
-      copyFiles(sourceFile, targetFile);
-    } else {
-      fs.writeFileSync(targetFile, fs.readFileSync(sourceFile));
-    }
-  });
-}
-
-deleteFolderRecursive(DEPLOY_TARGET);
-mkdirSync(DEPLOY_TARGET);
-copyFiles(DEPLOY_ENTRY, DEPLOY_TARGET);
-buildHtmlFiles(DEPLOY_ENTRY);
-
-console.log("Deployed to " + DEPLOY_TARGET);
\ No newline at end of file
diff --git a/tools/parse.ts b/tools/parse.ts
new file mode 100644
index 0000000..cbca746
--- /dev/null
+++ b/tools/parse.ts
@@ -0,0 +1,43 @@
+import * as fs from 'fs';
+import * as path from 'path';
+const appConfig = JSON.parse(fs.readFileSync('./app.config.json', 'utf8'));
+const DEPLOY_TARGET = "./dist/";
+
+function findHtmlFilesRecursive(source: string): string[] {
+  let files: string[] = [];
+  const dir = fs.readdirSync(source);
+  dir.forEach(function (file: string) {
+    const sourceFile = path.join(source, file);
+    const stat = fs.lstatSync(sourceFile);
+    if (stat.isDirectory()) {
+      files = files.concat(findHtmlFilesRecursive(sourceFile));
+    } else {
+      if (path.extname(sourceFile) == '.html') {
+        files.push(sourceFile);
+      }
+    }
+  });
+  return files;
+}
+
+function replaceKeywordsInHtmlFile(file: string) {
+  let content = fs.readFileSync(file, 'utf8');
+  const pairs: { key: string, value: string }[] = appConfig.htmlTemplatePairs;
+  pairs.forEach(function (pair: { key: string, value: string }) {
+    //@ts-ignore
+    content = content.replaceAll(pair.key, pair.value);
+  });
+  file = file.replace("public\\", DEPLOY_TARGET);
+  fs.writeFileSync(file, content);
+}
+
+function buildHtmlFiles(source: string) {
+  const files = findHtmlFilesRecursive(source);
+  files.forEach(function (file: string) {
+    replaceKeywordsInHtmlFile(file);
+  });
+}
+
+buildHtmlFiles(DEPLOY_TARGET);
+
+console.log("Parsed Files: ", findHtmlFilesRecursive(DEPLOY_TARGET));
diff --git a/tsconfig.json b/tsconfig.json
index 3e8038b..83b9bb7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,7 @@
         // "incremental": true,                         /* Enable incremental compilation */
         "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
         "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
-        // "lib": ["ESNext"],                                   /* Specify library files to be included in the compilation. */
+        "lib": ["ESNext"],                                   /* Specify library files to be included in the compilation. */
         // "allowJs": true,                             /* Allow javascript files to be compiled. */
         // "checkJs": true,                             /* Report errors in .js files. */
         // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
diff --git a/vite.config.background.js b/vite.config.background.js
deleted file mode 100644
index 3f0daf4..0000000
--- a/vite.config.background.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { defineConfig } from "vite";
-import { resolve } from "path";
-import tsconfigPaths from "vite-tsconfig-paths";
-
-export default defineConfig({
-	build: {
-		rollupOptions: {
-			input: resolve(__dirname, "src/background.ts"),
-			output: {
-				entryFileNames: "background.js",
-				dir: resolve(__dirname, "dist/js"),
-			},
-		},
-		sourcemap: true,
-	},
-	plugins: [tsconfigPaths()],
-	resolve: {
-		extensions: [".tsx", ".ts"],
-	},
-	esbuild: {
-		include: /.*\.tsx?$/,
-		exclude: [/node_modules/, /dist/, /src\/app\.ts/, /src\/settings\.ts/],
-	},
-});
diff --git a/vite.config.js b/vite.config.js
index 44d2f87..fb93c29 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,29 +1,43 @@
-import { defineConfig } from "vite";
-import { resolve } from "path";
-import tsconfigPaths from "vite-tsconfig-paths";
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-	build: {
-		rollupOptions: {
-			input: resolve(__dirname, "src/app.ts"),
-			output: {
-				entryFileNames: "app.js",
-				dir: resolve(__dirname, "dist/js"),
-			},
-		},
-		sourcemap: true,
-	},
-	plugins: [tsconfigPaths()],
-	resolve: {
-		extensions: [".tsx", ".ts"],
-	},
-	esbuild: {
-		include: /.*\.tsx?$/,
-		exclude: [
-			/node_modules/,
-			/dist/,
-			/src\/background\.ts/,
-			/src\/settings\.ts/,
-		],
-	},
+  build: {
+    rollupOptions: {
+      input: {
+        app: resolve(__dirname, 'src/app.ts'),
+        settings: resolve(__dirname, 'src/settings.ts'),
+        background: resolve(__dirname, 'src/background.ts'),
+      },
+      output: {
+        entryFileNames: '[name].js',
+        dir: resolve(__dirname, 'dist'),
+      },
+    },
+    sourcemap: true,
+  },
+  plugins: [
+    tsconfigPaths(),
+  ],
+  resolve: {
+    extensions: ['.tsx', '.ts', '.scss', '.sass'],
+  },
+  css: {
+    preprocessorOptions: {
+      sass: {
+        additionalData: `@import "@/src/sass/app.sass"`, // optional
+      },
+    },
+  },
+  esbuild: {
+    include: /.*\.tsx?$/,
+    exclude: [
+      /node_modules/,
+      /dist/,
+    //   /src\/background\.ts/,
+    //   /src\/settings\.ts/,
+    //   /src\/app\.ts/,
+    ],
+  },
 });
diff --git a/vite.config.settings.js b/vite.config.settings.js
deleted file mode 100644
index 0508763..0000000
--- a/vite.config.settings.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { defineConfig } from "vite";
-import { resolve } from "path";
-import tsconfigPaths from "vite-tsconfig-paths";
-
-export default defineConfig({
-	build: {
-		rollupOptions: {
-			input: resolve(__dirname, "src/settings.ts"),
-			output: {
-				entryFileNames: "settings.js",
-				dir: resolve(__dirname, "dist/js"),
-			},
-		},
-		sourcemap: true,
-	},
-	plugins: [tsconfigPaths()],
-	resolve: {
-		extensions: [".tsx", ".ts"],
-	},
-	esbuild: {
-		include: /.*\.tsx?$/,
-		exclude: [
-			/node_modules/,
-			/dist/,
-			/src\/background\.ts/,
-			/src\/app\.ts/,
-		],
-	},
-});

From 977ce6719fb78856a0585d3fb1364a6cd24b1de0 Mon Sep 17 00:00:00 2001
From: Jonas Pfalzgraf <jolun.swtor@gmail.com>
Date: Sat, 1 Jun 2024 03:34:53 +0200
Subject: [PATCH 3/3] integrading new css build

---
 package.json   |  2 --
 tools/parse.ts | 87 +++++++++++++++++++++++++++++++++-----------------
 tsconfig.json  |  2 +-
 vite.config.js | 43 -------------------------
 vite.config.ts | 28 ++++++++++++++++
 5 files changed, 87 insertions(+), 75 deletions(-)
 delete mode 100644 vite.config.js
 create mode 100644 vite.config.ts

diff --git a/package.json b/package.json
index f3c6f1b..e7065de 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,6 @@
     "@types/node": "^20.13.0",
     "@webcomponents/webcomponentsjs": "^2.8.0",
     "sass": "^1.77.4",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.4.5",
     "vite": "^5.2.12",
     "vite-tsconfig-paths": "^4.3.2"
   },
diff --git a/tools/parse.ts b/tools/parse.ts
index cbca746..f717693 100644
--- a/tools/parse.ts
+++ b/tools/parse.ts
@@ -1,43 +1,72 @@
-import * as fs from 'fs';
-import * as path from 'path';
-const appConfig = JSON.parse(fs.readFileSync('./app.config.json', 'utf8'));
+import * as fs from "fs";
+import * as path from "path";
+const appConfig = JSON.parse(fs.readFileSync("./app.config.json", "utf8"));
 const DEPLOY_TARGET = "./dist/";
 
+function findCssFileNames(source: string): string[] {
+	let files: string[] = [];
+	const dir = fs.readdirSync(source);
+	dir.forEach(function (file: string) {
+		const sourceFile = path.join(source, file);
+		const stat = fs.lstatSync(sourceFile);
+		if (stat.isDirectory()) {
+			files = files.concat(findCssFileNames(sourceFile));
+		} else {
+			if (path.extname(sourceFile) == ".css") {
+				files.push(file);
+			}
+		}
+	});
+	return files;
+}
+
 function findHtmlFilesRecursive(source: string): string[] {
-  let files: string[] = [];
-  const dir = fs.readdirSync(source);
-  dir.forEach(function (file: string) {
-    const sourceFile = path.join(source, file);
-    const stat = fs.lstatSync(sourceFile);
-    if (stat.isDirectory()) {
-      files = files.concat(findHtmlFilesRecursive(sourceFile));
-    } else {
-      if (path.extname(sourceFile) == '.html') {
-        files.push(sourceFile);
-      }
-    }
-  });
-  return files;
+	let files: string[] = [];
+	const dir = fs.readdirSync(source);
+	dir.forEach(function (file: string) {
+		const sourceFile = path.join(source, file);
+		const stat = fs.lstatSync(sourceFile);
+		if (stat.isDirectory()) {
+			files = files.concat(findHtmlFilesRecursive(sourceFile));
+		} else {
+			if (path.extname(sourceFile) == ".html") {
+				files.push(sourceFile);
+			}
+		}
+	});
+	return files;
 }
 
 function replaceKeywordsInHtmlFile(file: string) {
-  let content = fs.readFileSync(file, 'utf8');
-  const pairs: { key: string, value: string }[] = appConfig.htmlTemplatePairs;
-  pairs.forEach(function (pair: { key: string, value: string }) {
-    //@ts-ignore
-    content = content.replaceAll(pair.key, pair.value);
-  });
-  file = file.replace("public\\", DEPLOY_TARGET);
-  fs.writeFileSync(file, content);
+	let content = fs.readFileSync(file, "utf8");
+	const pairs: { key: string; value: string }[] = appConfig.htmlTemplatePairs;
+	pairs.forEach(function (pair: { key: string; value: string }) {
+		//@ts-ignore
+		content = content.replaceAll(pair.key, pair.value);
+	});
+	file = file.replace("public\\", DEPLOY_TARGET);
+	fs.writeFileSync(file, content);
 }
 
 function buildHtmlFiles(source: string) {
-  const files = findHtmlFilesRecursive(source);
-  files.forEach(function (file: string) {
-    replaceKeywordsInHtmlFile(file);
-  });
+	const files = findHtmlFilesRecursive(source);
+	files.forEach(function (file: string) {
+		replaceKeywordsInHtmlFile(file);
+	});
 }
 
+findCssFileNames(DEPLOY_TARGET).forEach((file: string) => {
+	const files = findHtmlFilesRecursive(DEPLOY_TARGET);
+	files.forEach(function (htmlFile: string) {
+		let content = fs.readFileSync(htmlFile, "utf8");
+		content = content.replace(
+			"</head>",
+			`<link rel="stylesheet" href="./assets/${file}">\n</head>`
+		);
+		fs.writeFileSync(htmlFile, content);
+	});
+});
+
 buildHtmlFiles(DEPLOY_TARGET);
 
 console.log("Parsed Files: ", findHtmlFilesRecursive(DEPLOY_TARGET));
diff --git a/tsconfig.json b/tsconfig.json
index 83b9bb7..a691321 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,7 @@
         // "incremental": true,                         /* Enable incremental compilation */
         "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */,
         "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
-        "lib": ["ESNext"],                                   /* Specify library files to be included in the compilation. */
+        "lib": ["ESNext", "DOM"],                                   /* Specify library files to be included in the compilation. */
         // "allowJs": true,                             /* Allow javascript files to be compiled. */
         // "checkJs": true,                             /* Report errors in .js files. */
         // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
diff --git a/vite.config.js b/vite.config.js
deleted file mode 100644
index fb93c29..0000000
--- a/vite.config.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { defineConfig } from 'vite';
-import { resolve } from 'path';
-import tsconfigPaths from 'vite-tsconfig-paths';
-
-export default defineConfig({
-  build: {
-    rollupOptions: {
-      input: {
-        app: resolve(__dirname, 'src/app.ts'),
-        settings: resolve(__dirname, 'src/settings.ts'),
-        background: resolve(__dirname, 'src/background.ts'),
-      },
-      output: {
-        entryFileNames: '[name].js',
-        dir: resolve(__dirname, 'dist'),
-      },
-    },
-    sourcemap: true,
-  },
-  plugins: [
-    tsconfigPaths(),
-  ],
-  resolve: {
-    extensions: ['.tsx', '.ts', '.scss', '.sass'],
-  },
-  css: {
-    preprocessorOptions: {
-      sass: {
-        additionalData: `@import "@/src/sass/app.sass"`, // optional
-      },
-    },
-  },
-  esbuild: {
-    include: /.*\.tsx?$/,
-    exclude: [
-      /node_modules/,
-      /dist/,
-    //   /src\/background\.ts/,
-    //   /src\/settings\.ts/,
-    //   /src\/app\.ts/,
-    ],
-  },
-});
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..afb89cb
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,28 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+	build: {
+		rollupOptions: {
+			input: {
+				app: resolve(__dirname, "src/app.ts"),
+				settings: resolve(__dirname, "src/settings.ts"),
+				background: resolve(__dirname, "src/background.ts"),
+			},
+			output: {
+				entryFileNames: "[name].js",
+				dir: resolve(__dirname, "dist"),
+			},
+		},
+		sourcemap: true,
+	},
+	plugins: [tsconfigPaths()],
+	resolve: {
+		extensions: [".tsx", ".ts", ".scss", ".sass"],
+	},
+	esbuild: {
+		include: /.*\.tsx?$/,
+		exclude: [/node_modules/, /dist/],
+	},
+});