Major refactoring

.editorconfig

@@ -9,3 +9,6 @@ indent_style = space
 insert_final_newline = true
 max_line_length = 120
 trim_trailing_whitespace = true
+
+[**.json]
+insert_final_newline = true

esbuild.js

@@ -2,23 +2,38 @@ import dotenv from 'dotenv';
 import { build, context } from 'esbuild';
 import clear from 'esbuild-plugin-clear';
 import { copy } from 'esbuild-plugin-copy';
+import stylePlugin from 'esbuild-style-plugin';
 import sveltePlugin from 'esbuild-svelte';
+import { sveltePreprocess } from 'svelte-preprocess';
 import yargs from 'yargs';
+import path from 'node:path';
 
 const { dev } = yargs(process.argv.slice(2)).argv;
 
 dotenv.config();
 
 const options = {
   bundle: true,
-  entryPoints: ['src/content/main.ts', 'src/popup/main.ts', 'src/widget/main.ts', 'src/worker.ts'],
+  entryPoints: [
+    'src/content/main.ts',
+    'src/panel/main.ts',
+    'src/popup/main.ts',
+    'src/widget/main.ts',
+    'src/devtools.ts',
+    'src/worker.ts',
+  ],
   target: ['esnext'],
   loader: {
     '.png': 'dataurl',
     '.svg': 'text',
   },
   plugins: [
-    sveltePlugin(),
+    sveltePlugin({
+      preprocess: sveltePreprocess(),
+    }),
+    stylePlugin({
+      postcssConfigFile: path.resolve('./postcss.config.js'),
+    }),
     copy({
       assets: [
         {

eslint.config.mjs → eslint.config.js

@@ -15,6 +15,7 @@ export default tslint.config(
       globals: {
         ...globals.browser,
         ...globals.node,
+        chrome: 'readonly',
       },
     },
   },

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "start": "node esbuild.js --dev",
     "build": "node esbuild.js",
-    "check": "pnpm run check:lint && pnpm run check:svelte && pnpm run check:tsc",
+    "check": "concurrently \"pnpm:check:*\"",
     "check:lint": "eslint .",
     "check:svelte": "svelte-check",
     "check:tsc": "tsc --noEmit",
@@ -20,18 +20,25 @@
     "@eslint/js": "^9.5.0",
     "@types/node": "^20.14.8",
     "@types/webextension-polyfill": "^0.10.7",
+    "autoprefixer": "^10.4.19",
+    "concurrently": "^8.2.2",
     "dotenv": "^16.4.5",
     "esbuild": "^0.21.5",
     "esbuild-plugin-clear": "^1.0.1",
     "esbuild-plugin-copy": "^2.1.1",
+    "esbuild-style-plugin": "^1.6.3",
     "esbuild-svelte": "^0.8.1",
     "eslint": "^9.5.0",
     "eslint-plugin-svelte": "^2.40.0",
     "globals": "^15.6.0",
+    "postcss": "^8.4.38",
+    "postcss-import": "^16.1.0",
     "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.5",
     "svelte": "^4.2.18",
     "svelte-check": "^3.8.1",
+    "svelte-preprocess": "^6.0.1",
+    "tailwindcss": "^3.4.4",
     "typescript": "^5.5.2",
     "typescript-eslint": "^7.13.1",
     "yargs": "^17.7.2"
@@ -41,4 +48,4 @@
     "loglevel": "^1.9.1",
     "webextension-polyfill": "^0.12.0"
   }
-}
+}