Merge pull request #445 from lobehub/chore/use-swc

💄 style: Fix Context Menu style

package.json

@@ -65,42 +65,17 @@
       "eslint --fix"
     ]
   },
-  "devDependencies": {
-    "@babel/plugin-syntax-import-assertions": "^7",
-    "@commitlint/cli": "^17",
-    "@lobehub/i18n-cli": "latest",
-    "@lobehub/lint": "latest",
+  "dependencies": {
     "@lobehub/ui": "latest",
-    "@types/lodash-es": "^4",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@types/react-helmet": "^6",
-    "@types/react-tag-input": "^6",
-    "@types/semver": "^7.5.2",
-    "@types/styled-components": "^5",
-    "@vitejs/plugin-react": "^4",
-    "@vitest/coverage-v8": "latest",
     "ahooks": "^3",
     "antd": "^5",
     "antd-style": "latest",
-    "babel-plugin-antd-style": "^1",
-    "babel-plugin-styled-components": "^2",
-    "commitlint": "^17",
-    "concurrently": "^8",
-    "eslint": "^8",
-    "fast-deep-equal": "^3",
-    "husky": "^8",
     "i18next": "^23",
-    "i18next-http-backend": "^2.2.2",
-    "jsdom": "^22",
-    "lint-staged": "^15.0.0",
+    "i18next-http-backend": "^2",
     "lodash-es": "^4",
     "lucide-react": "latest",
     "lucide-static": "latest",
     "polished": "^4",
-    "prettier": "^3",
-    "query-string": "^8",
     "react": "^18",
     "react-dnd": "^16",
     "react-dnd-html5-backend": "^16",
@@ -110,20 +85,42 @@
     "react-layout-kit": "^1",
     "react-rnd": "^10",
     "react-tag-input": "^6",
+    "semver": "^7",
+    "shiki-es": "^0.14",
+    "swr": "^2",
+    "zustand": "^4.4.1",
+    "zustand-utils": "^1.3.1"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^18",
+    "@lobehub/i18n-cli": "latest",
+    "@lobehub/lint": "latest",
+    "@types/lodash-es": "^4",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/react-helmet": "^6",
+    "@types/react-tag-input": "^6",
+    "@types/semver": "^7.5.2",
+    "@vitejs/plugin-react": "^4",
+    "@vitejs/plugin-react-swc": "^3",
+    "@vitest/coverage-v8": "latest",
+    "commitlint": "^18",
+    "eslint": "^8",
+    "fast-deep-equal": "^3",
+    "husky": "^8",
+    "jsdom": "^22",
+    "lint-staged": "^15",
+    "prettier": "^3",
+    "query-string": "^8",
     "remark": "^14",
     "remark-cli": "^11",
     "semantic-release": "^21",
-    "semver": "^7.5.4",
-    "shiki-es": "^0.14",
-    "styled-components": "^6",
     "stylelint": "^15.10",
-    "swr": "^2",
     "terser": "^5",
     "typescript": "^5",
     "vite": "^4",
-    "vitest": "latest",
-    "zustand": "^4.4.1",
-    "zustand-utils": "^1.3.1"
+    "vitest": "latest"
   },
   "peerDependencies": {
     "antd": ">=5",

src/styles/components/container.ts

@@ -1,4 +1,5 @@
 import { Theme, css } from 'antd-style';
+import { readableColor } from 'polished';
 
 export default (token: Theme) => {
   return css`
@@ -48,5 +49,28 @@ export default (token: Theme) => {
       position: sticky;
       top: 80px !important;
     }
+
+    #context-menu {
+      overflow: hidden;
+
+      color: ${token.colorText};
+
+      background: ${token.colorBgElevated} !important;
+      border: 1px solid ${token.colorBorder} !important;
+      border-radius: ${token.borderRadiusLG}px !important;
+      box-shadow: ${token.boxShadow} !important;
+
+      a {
+        padding: 8px;
+        font-weight: 400;
+        color: ${token.colorText};
+
+        &:hover {
+          font-weight: 600;
+          color: ${readableColor(token.colorPrimary)};
+          background: ${token.colorPrimary};
+        }
+      }
+    }
   `;
 };

src/types/global.d.ts

@@ -1,6 +1,5 @@
 import type { LobeCustomStylish, LobeCustomToken } from '@lobehub/ui';
 import 'antd-style';
-import { AntdToken } from 'antd-style/lib/types/theme';
 
 declare module 'antd-style' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -8,7 +7,3 @@ declare module 'antd-style' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   export interface CustomStylish extends LobeCustomStylish {}
 }
-
-declare module 'styled-components' {
-  export interface DefaultTheme extends AntdToken, LobeCustomToken {}
-}

vite.config.ts

@@ -1,4 +1,4 @@
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react-swc';
 import { resolve } from 'node:path';
 import * as process from 'node:process';
 import { defineConfig } from 'vite';
@@ -21,51 +21,13 @@ export default defineConfig({
         entryFileNames: `[name].js`,
       },
     },
-    terserOptions: {
-      compress: {
-        arguments: true,
-        drop_console: true,
-        hoist_funs: true,
-        hoist_props: true,
-        hoist_vars: true,
-        inline: true,
-        keep_fargs: false,
-        keep_fnames: false,
-        keep_infinity: false,
-        loops: true,
-        passes: 3,
-        pure_funcs: [],
-        pure_getters: true,
-        reduce_vars: true,
-        sequences: true,
-        unused: true,
-      },
-      format: {
-        comments: false,
-      },
-    },
   },
   define: {
     'process.env': process.env,
   },
   plugins: [
-    react({
-      babel: {
-        plugins: [
-          '@babel/plugin-syntax-import-assertions',
-          'babel-plugin-antd-style',
-          [
-            'babel-plugin-styled-components',
-            {
-              displayName: !isProduction,
-              minify: isProduction,
-              pure: true,
-              transpileTemplateLiterals: true,
-            },
-          ],
-        ],
-      },
-    }),
+    react(),
+
     !isProduction && {
       configureServer: (server) => {
         server.middlewares.use((_request, res, next) => {
@@ -78,7 +40,7 @@ export default defineConfig({
     },
     !isProduction && {
       configureServer: (server) => {
-        server.middlewares.use(async(_request, res, next): Promise<void> => {
+        server.middlewares.use(async (_request, res, next): Promise<void> => {
           if (
             _request.originalUrl === '/dev' ||
             _request.originalUrl === '/dev?__theme=dark' ||