build: migrate CSS to SCSS and add sass dependencies

Author: zhensherlock

package.json

@@ -36,6 +36,8 @@
     "mini-css-extract-plugin": "^2.9.2",
     "prettier": "^3.5.3",
     "rimraf": "^6.0.1",
+    "sass": "^1.87.0",
+    "sass-loader": "^16.0.5",
     "terser-webpack-plugin": "^5.3.14",
     "ts-loader": "^9.5.2",
     "typescript": "^5.8.3",

packages/chrome-extension/config/webpack.common.js

@@ -34,8 +34,8 @@ const common = {
       },
       // Help webpack in understanding CSS files imported in .js files
       {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        test: /\.(css|scss|sass)$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
       },
       // Check for images imported in .js files and
       {

packages/chrome-extension/src/popup.css

@@ -0,0 +1,127 @@
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --primary-color: #42b883;
+  --secondary-color: #35495e;
+  --background-color: #f8f8f8;
+  --text-color: #2c3e50;
+  --border-color: #e0e0e0;
+  --success-color: #42b883;
+  --error-color: #ff5252;
+}
+
+html {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
+}
+
+body {
+  width: 300px;
+  color: var(--text-color);
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--background-color);
+  min-height: 200px;
+  overflow: hidden;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background-color: white;
+  color: var(--secondary-color);
+  border-bottom: 1px solid var(--border-color);
+
+  h1 {
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .logo {
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+  }
+}
+
+main {
+  flex: 1;
+  padding: 16px;
+
+  .status-container {
+    padding: 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    line-height: 1.5;
+    background-color: white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    border: 1px solid var(--border-color);
+  }
+
+  .status-success {
+    border-left: 4px solid var(--success-color);
+  }
+
+  .status-error {
+    border-left: 4px solid var(--error-color);
+  }
+
+  .loading {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .version-tag {
+    display: inline-block;
+    padding: 2px 6px;
+    background-color: var(--primary-color);
+    color: white;
+    border-radius: 4px;
+    font-size: 12px;
+    margin-left: 6px;
+  }
+
+  .spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(66, 184, 131, 0.2);
+    border-top-color: var(--primary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+footer {
+  padding: 10px 16px;
+  text-align: center;
+  font-size: 12px;
+  border-top: 1px solid var(--border-color);
+
+  .github-link {
+    color: var(--secondary-color);
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .github-link:hover {
+    text-decoration: underline;
+  }
+}

packages/chrome-extension/src/popup.scss

@@ -1,4 +1,4 @@
-import '@/popup.css';
+import '@/popup.scss';
 
 (function () {
   // Connect to background script
@@ -37,4 +37,14 @@ import '@/popup.css';
       }
     }
   });
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const settingsButton = document.getElementById('openSettings');
+    if (settingsButton) {
+      settingsButton.addEventListener('click', (e) => {
+        e.preventDefault();
+        chrome.runtime.openOptionsPage();
+      });
+    }
+  });
 })();

packages/chrome-extension/src/popup.ts

@@ -34,8 +34,8 @@ const common = {
       },
       // Help webpack in understanding CSS files imported in .js files
       {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        test: /\.(css|scss|sass)$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
       },
       // Check for images imported in .js files and
       {