refactor: migrate to panda & cleanup

.gitignore

@@ -1,4 +1,14 @@
+# Node.js dependencies
 node_modules
+
+# Build folder
 dist
+
+# Log files
 *.log
-.env
+
+# Environment files
+.env*
+
+# Styled system
+styled-system

package.json

@@ -4,14 +4,12 @@
     "build:firefox": "webpack --env platform=firefox --mode=production",
     "develop:chrome": "webpack --env platform=chrome --mode=development --watch",
     "develop:firefox": "webpack --env platform=firefox --mode=development --watch",
-    "prepare": "husky install",
+    "prepare": "husky install && panda codegen",
     "test": "tsc --noEmit && eslint --ext=tsx,ts ."
   },
   "dependencies": {
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.10.8",
     "@floating-ui/react": "^0.25.0",
     "@sentry/browser": "^7.61.0",
     "@tabler/icons-react": "^2.30.0",
@@ -27,50 +25,37 @@
     "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/plugin-transform-runtime": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
-    "@emotion/babel-plugin": "^11.10.8",
+    "@csstools/postcss-cascade-layers": "^4.0.4",
+    "@pandacss/dev": "^0.37.2",
     "@seldszar/yael": "^2.2.0",
-    "@types/lodash-es": "^4.17.8",
-    "@types/react": "^18.2.18",
-    "@types/react-dom": "^18.2.7",
-    "@types/webextension-polyfill": "^0.10.1",
+    "@swc/core": "^1.4.16",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^18.2.78",
+    "@types/react-dom": "^18.2.25",
+    "@types/webextension-polyfill": "^0.10.7",
     "@typescript-eslint/eslint-plugin": "^6.2.1",
     "@typescript-eslint/parser": "^6.2.1",
-    "autoprefixer": "^10.4.14",
-    "babel-loader": "^9.1.3",
-    "babel-plugin-macros": "^3.1.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.4.5",
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.1",
     "html-webpack-plugin": "^5.5.3",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
-    "mini-css-extract-plugin": "^2.7.6",
-    "postcss": "^8.4.27",
+    "mini-css-extract-plugin": "^2.9.0",
+    "postcss": "^8.4.38",
     "postcss-loader": "^7.3.3",
-    "prettier": "^3.0.1",
-    "style-loader": "^3.3.3",
-    "tailwindcss": "^3.3.3",
-    "twin.macro": "^3.4.0",
-    "typescript": "^5.1.6",
-    "webpack": "^5.88.2",
+    "prettier": "^3.2.5",
+    "swc-loader": "^0.2.6",
+    "typescript": "^5.4.5",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
-    "webpack-merge": "^5.9.0"
-  },
-  "babelMacros": {
-    "twin": {
-      "preset": "emotion"
-    }
+    "webpack-merge": "^5.10.0"
   },
   "commitlint": {
     "extends": [
@@ -79,8 +64,5 @@
   },
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix"
-  },
-  "browserslist": [
-    "last 2 years"
-  ]
+  }
 }

panda.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, defineGlobalStyles } from "@pandacss/dev";
+
+const globalCss = defineGlobalStyles({
+  "*": {
+    scrollbarColor: "{colors.purple.500} {colors.transparent}",
+    scrollbarWidth: "thin",
+  },
+
+  "::selection": {
+    backgroundColor: "purple.500",
+    color: "white",
+  },
+
+  body: {
+    backgroundColor: { base: "neutral.100", _dark: "neutral.900" },
+    color: { base: "black", _dark: "white" },
+    fontFamily: "sans",
+    fontSize: 14,
+  },
+
+  "#modal-root": {
+    position: "absolute",
+    zIndex: 50,
+  },
+
+  ".os-theme-gumbo": {
+    "--os-handle-bg-active": "{colors.purple.600}",
+    "--os-handle-bg-hover": "{colors.purple.400}",
+    "--os-handle-bg": "{colors.purple.500}",
+    "--os-handle-border-radius": "{radii.full}",
+    "--os-handle-interactive-area-offset": "3px",
+    "--os-padding-axis": "3px",
+    "--os-padding-perpendicular": "3px",
+    "--os-size": "8px",
+
+    "& .os-scrollbar-handle": {
+      opacity: 0.5,
+    },
+
+    _hover: {
+      "--os-size": "10px",
+
+      "& .os-scrollbar-handle": {
+        opacity: 1,
+      },
+    },
+  },
+});
+
+export default defineConfig({
+  globalCss,
+
+  preflight: true,
+
+  outdir: "src/browser/styled-system",
+  outExtension: "js",
+
+  importMap: "",
+
+  jsxFramework: "react",
+  jsxStyleProps: "minimal",
+
+  include: ["src/**/*.{js,jsx,ts,tsx}"],
+
+  theme: {
+    extend: {
+      tokens: {
+        fonts: {
+          sans: {
+            value:
+              "'Noto Sans Display', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+          },
+        },
+      },
+    },
+  },
+});

postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@pandacss/dev/postcss": {},
+    "@csstools/postcss-cascade-layers": {},
   },
 };

src/browser/assets/styles/base.css

@@ -0,0 +1,3 @@
+@layer reset, base, tokens, recipes, utilities;
+
+@import url("overlayscrollbars/overlayscrollbars.css");

src/browser/assets/styles/popup.css

@@ -0,0 +1,4 @@
+#app-root {
+  height: 600px;
+  width: 420px;
+}

src/browser/components/Accordion.tsx

@@ -1,49 +1,68 @@
 import { IconChevronRight } from "@tabler/icons-react";
 import { ReactNode } from "react";
 import { useToggle } from "react-use";
-import tw, { styled } from "twin.macro";
 
-interface WrapperProps {
-  isOpen?: boolean;
-}
-
-const Icon = styled(IconChevronRight)`
-  ${tw`transition`}
-`;
-
-const Title = styled.div`
-  ${tw`flex-1 font-medium text-sm truncate uppercase`}
-`;
-
-const HeaderInner = styled.div`
-  ${tw`cursor-pointer flex flex-1 gap-1 items-center`}
-`;
-
-const HeaderAside = styled.div`
-  ${tw`flex-none invisible`}
-`;
-
-const Header = styled.div`
-  ${tw`flex gap-1 items-center px-4 py-2 text-neutral-600 dark:text-neutral-400`}
-
-  :hover {
-    ${HeaderAside} {
-      ${tw`visible`}
-    }
-
-    ${HeaderInner} {
-      ${tw`text-black dark:text-white`}
-    }
-  }
-`;
-
-const Inner = styled.div``;
-
-const Wrapper = styled.div<WrapperProps>`
-  ${Icon} {
-    ${(props) => props.isOpen && tw`rotate-90`}
-  }
-`;
+import { styled } from "../styled-system/jsx";
+
+const Icon = styled(IconChevronRight, {
+  base: {
+    transition: "common",
+  },
+
+  variants: {
+    isOpen: {
+      true: {
+        rotate: "90deg",
+      },
+    },
+  },
+
+  defaultVariants: {
+    isOpen: false,
+  },
+});
+
+const Title = styled("div", {
+  base: {
+    flex: 1,
+    fontSize: "sm",
+    fontWeight: "medium",
+    textTransform: "uppercase",
+    truncate: true,
+  },
+});
+
+const HeaderInner = styled("div", {
+  base: {
+    alignItems: "center",
+    cursor: "pointer",
+    display: "flex",
+    flex: 1,
+    gap: 1,
+
+    _groupHover: {
+      color: { base: "black", _dark: "white" },
+    },
+  },
+});
+
+const HeaderAside = styled("div", {
+  base: {
+    flex: "none",
+    visibility: { base: "hidden", _groupHover: "visible" },
+  },
+});
+
+const Header = styled("div", {
+  base: {
+    alignItems: "center",
+    color: { base: "neutral.600", _dark: "neutral.400" },
+    display: "flex",
+    gap: 1,
+    px: 4,
+    py: 2,
+  },
+});
 
 export interface AccordionProps {
   children?: ReactNode;
@@ -56,18 +75,18 @@ function Accordion(props: AccordionProps) {
   const [isOpen, toggleOpen] = useToggle(true);
 
   return (
-    <Wrapper className={props.className} isOpen={isOpen}>
-      <Header>
+    <div className={props.className}>
+      <Header className="group">
         <HeaderInner onClick={() => toggleOpen()}>
-          <Icon size="1rem" />
+          <Icon size="1rem" isOpen={isOpen} />
           <Title>{props.title}</Title>
         </HeaderInner>
 
         {props.aside && <HeaderAside>{props.aside}</HeaderAside>}
       </Header>
 
-      {isOpen && <Inner>{props.children}</Inner>}
-    </Wrapper>
+      {isOpen && <div>{props.children}</div>}
+    </div>
   );
 }