fix: "use px units to fix small font-size in some websites root elements

2024-09-27 08:20:49 +08:00 · 2024-09-27 08:20:49 +08:00 · 1e904f12d7
commit 1e904f12d7
parent c7a3f3f150
8 changed files with 192 additions and 90 deletions
--- a/.postcssrc
+++ b/.postcssrc
@ -1,6 +1,13 @@
 {
  "plugins": {
    "tailwindcss": {},
-    "autoprefixer": {}
+    "autoprefixer": {},
+    "postcss-rem-to-responsive-pixel": {
+      "rootValue": 16,
+      "propList": [
+        "*"
+      ],
+      "transformUnit": "px"
+    }
  }
 }
--- a/package.json
+++ b/package.json
@ -96,8 +96,8 @@
    "@eslint-react/eslint-plugin": "^1.14.2",
    "@eslint/js": "^9.11.1",
    "@types/eslint": "^9.6.1",
-    "@types/eslint__js": "^8.42.3",
    "@types/eslint-plugin-tailwindcss": "^3.17.0",
+    "@types/eslint__js": "^8.42.3",
    "@types/node": "^22.7.2",
    "@types/react": "^18.3.9",
    "@types/react-dom": "^18.3.0",
@ -116,6 +116,7 @@
    "lint-staged": "^15.2.10",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.47",
+    "postcss-rem-to-responsive-pixel": "^6.0.2",
    "prettier": "^3.3.3",
    "rimraf": "^5.0.10",
    "tailwindcss": "^3.4.13",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -58,7 +58,7 @@ importers:
        version: 0.2.17
      '@tailwindcss/typography':
        specifier: ^0.5.15
-        version: 0.5.15(tailwindcss@3.4.13)
+        version: 0.5.15(tailwindcss@3.4.13(ts-node@10.9.2(@types/node@22.7.2)(typescript@5.6.2)))
      '@webext-core/proxy-service':
        specifier: ^1.2.0
        version: 1.2.0(@webext-core/messaging@1.4.0)(webextension-polyfill@0.12.0)
@ -200,7 +200,7 @@ importers:
        version: 5.2.1(@types/eslint@9.6.1)(eslint-config-prettier@9.1.0(eslint@9.11.1(jiti@2.0.0)))(eslint@9.11.1(jiti@2.0.0))(prettier@3.3.3)
      eslint-plugin-tailwindcss:
        specifier: ^3.17.4
-        version: 3.17.4(tailwindcss@3.4.13)
+        version: 3.17.4(tailwindcss@3.4.13(ts-node@10.9.2(@types/node@22.7.2)(typescript@5.6.2)))
      globals:
        specifier: ^15.9.0
        version: 15.9.0
@ -219,6 +219,9 @@ importers:
      postcss:
        specifier: ^8.4.47
        version: 8.4.47
+      postcss-rem-to-responsive-pixel:
+        specifier: ^6.0.2
+        version: 6.0.2
      prettier:
        specifier: ^3.3.3
        version: 3.3.3
@ -227,10 +230,10 @@ importers:
        version: 5.0.10
      tailwindcss:
        specifier: ^3.4.13
-        version: 3.4.13
+        version: 3.4.13(ts-node@10.9.2(@types/node@22.7.2)(typescript@5.6.2))
      tailwindcss-animate:
        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.13)
+        version: 1.0.7(tailwindcss@3.4.13(ts-node@10.9.2(@types/node@22.7.2)(typescript@5.6.2)))
      typescript:
        specifier: ^5.6.2
        version: 5.6.2
@ -444,6 +447,10 @@ packages:
    resolution: {integrity: sha512-DSHae2obMSMkAtTBSOulg5X7/z+rGLxcXQIkg3OmWvY6wifojge5uVMydfhUvs7yQj+V7jNmRZ2Xzl8GJyqRgg==}
    engines: {node: '>=v18'}

+  '@cspotcode/source-map-support@0.8.1':
+    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+    engines: {node: '>=12'}
+
  '@devicefarmer/adbkit-logcat@2.1.3':
    resolution: {integrity: sha512-yeaGFjNBc/6+svbDeul1tNHtNChw6h8pSHAt5D+JsedUrMTN7tla7B15WLDyekxsuS2XlZHRxpuC6m92wiwCNw==}
    engines: {node: '>= 4'}
@ -1061,6 +1068,9 @@ packages:
  '@jridgewell/trace-mapping@0.3.25':
    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}

+  '@jridgewell/trace-mapping@0.3.9':
+    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
+
  '@leichtgewicht/base64-codec@1.0.0':
    resolution: {integrity: sha512-0cgP4lRBzh3F4tlpTfs7F+PJyBN8j5yUC9KrQFWp/bREswgzZVHE8T1rNyRDWgvALwwpPtnJDQfqWUmxI33Epg==}

@ -1827,6 +1837,18 @@ packages:
  '@thaunknown/simple-peer@10.0.10':
    resolution: {integrity: sha512-RtoYQChP5clkbh+crUhv0LD/fdzgNO/Ah/SBdcSqla6xY6GK50ukNhq39H4vzAKoYqvDu01Hc+JSD9DxCdoBOw==}

+  '@tsconfig/node10@1.0.11':
+    resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
+
+  '@tsconfig/node12@1.0.11':
+    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
+
+  '@tsconfig/node14@1.0.3':
+    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
+
+  '@tsconfig/node16@1.0.4':
+    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
+
  '@types/babel__core@7.20.5':
    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}

@ -2170,6 +2192,10 @@ packages:
    peerDependencies:
      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0

+  acorn-walk@8.3.4:
+    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
+    engines: {node: '>=0.4.0'}
+
  acorn@8.12.1:
    resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
    engines: {node: '>=0.4.0'}
@ -2223,6 +2249,9 @@ packages:
    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
    engines: {node: '>= 8'}

+  arg@4.1.3:
+    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
+
  arg@5.0.2:
    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}

@ -2639,6 +2668,9 @@ packages:
      typescript:
        optional: true

+  create-require@1.1.1:
+    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
+
  cross-env@7.0.3:
    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
@ -2820,6 +2852,10 @@ packages:
  didyoumean@1.2.2:
    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}

+  diff@4.0.2:
+    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
+    engines: {node: '>=0.3.1'}
+
  dlv@1.1.3:
    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}

@ -4818,6 +4854,10 @@ packages:
    peerDependencies:
      postcss: ^8.2.14

+  postcss-rem-to-responsive-pixel@6.0.2:
+    resolution: {integrity: sha512-Qseol4vPNC+WJIzwU7AWXGc7pjcw+7c2YRh6bwpwz/4akmtL9Zu/mZ87yeaiGuqQaBgQy45266uxIBQY+BMUfQ==}
+    engines: {node: '>=16.6.0'}
+
  postcss-selector-parser@6.0.10:
    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
    engines: {node: '>=4'}
@ -5608,6 +5648,20 @@ packages:
  ts-interface-checker@0.1.13:
    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}

+  ts-node@10.9.2:
+    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+
  ts-pattern@5.3.1:
    resolution: {integrity: sha512-1RUMKa8jYQdNfmnK4jyzBK3/PS/tnjcZ1CW0v1vWDeYe5RBklc/nquw03MEoB66hVBm4BnlCfmOqDVxHyT1DpA==}

@ -5881,6 +5935,9 @@ packages:
    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
    hasBin: true

+  v8-compile-cache-lib@3.0.1:
+    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+
  valibot@0.42.1:
    resolution: {integrity: sha512-3keXV29Ar5b//Hqi4MbSdV7lfVp6zuYLZuA9V1PvQUsXqogr+u5lvLPLk3A4f74VUXDnf/JfWMN6sB+koJ/FFw==}
    peerDependencies:
@ -6124,6 +6181,10 @@ packages:
  yauzl@2.10.0:
    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}

+  yn@3.1.1:
+    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
+    engines: {node: '>=6'}
+
  yocto-queue@0.1.0:
    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
    engines: {node: '>=10'}
@ -6436,6 +6497,11 @@ snapshots:
      '@types/conventional-commits-parser': 5.0.0
      chalk: 5.3.0

+  '@cspotcode/source-map-support@0.8.1':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+    optional: true
+
  '@devicefarmer/adbkit-logcat@2.1.3': {}

  '@devicefarmer/adbkit-monkey@1.2.1': {}
@ -7126,6 +7192,12 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.0

+  '@jridgewell/trace-mapping@0.3.9':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+    optional: true
+
  '@leichtgewicht/base64-codec@1.0.0': {}

  '@leichtgewicht/dns-packet@6.0.3':
@ -7983,13 +8055,13 @@ snapshots:
    dependencies:
      defer-to-connect: 2.0.1

-  '@tailwindcss/typography@0.5.15(tailwindcss@3.4.13)':
+  '@tailwindcss/typography@0.5.15(tailwindcss@3.4.13(ts-node@10.9.2(@types/node@22.7.2)(typescript@5.6.2)))':
    dependencies:
      lodash.castarray: 4.4.0
      lodash.isplainobject: 4.0.6
      lodash.merge: 4.6.2
      postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.13
+      tailwindcss: 3.4.13(ts-node@10.9.2(@types/node@22.7.2)(typescript@5.6.2))

  '@thaunknown/simple-peer@10.0.10':
    dependencies:
@ -8001,6 +8073,18 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@tsconfig/node10@1.0.11':
+    optional: true
+
+  '@tsconfig/node12@1.0.11':
+    optional: true
+
+  '@tsconfig/node14@1.0.3':
+    optional: true
+
+  '@tsconfig/node16@1.0.4':
+    optional: true
+
  '@types/babel__core@7.20.5':
    dependencies:
      '@babel/parser': 7.25.6
@ -8443,6 +8527,11 @@ snapshots:
    dependencies:
      acorn: 8.12.1

+  acorn-walk@8.3.4:
+    dependencies:
+      acorn: 8.12.1
+    optional: true
+
  acorn@8.12.1: {}

  adm-zip@0.5.16: {}
@ -8492,6 +8581,9 @@ snapshots:
      normalize-path: 3.0.0
      picomatch: 2.3.1

+  arg@4.1.3:
+    optional: true
+
  arg@5.0.2: {}

  argparse@2.0.1: {}
@ -8942,6 +9034,9 @@ snapshots:
    optionalDependencies:
      typescript: 5.6.2

+  create-require@1.1.1:
+    optional: true
+
  cross-env@7.0.3:
    dependencies:
      cross-spawn: 7.0.3
@ -9115,6 +9210,9 @@ snapshots:

  didyoumean@1.2.2: {}

+  diff@4.0.2:
+    optional: true
+
  dlv@1.1.3: {}

  dns-packet@5.6.1:
@ -9476,11 +9574,11 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  eslint-plugin-tailwindcss@3.17.4(tailwindcss@3.4.13):
+  eslint-plugin-tailwindcss@3.17.4(tailwindcss@3.4.13(ts-node@10.9.2(@types/node@22.7.2)(typescript@5.6.2))):
    dependencies:
      fast-glob: 3.3.2
      postcss: 8.4.47
-      tailwindcss: 3.4.13
+      tailwindcss: 3.4.13(ts-node@10.9.2(@types/node@22.7.2)(typescript@5.6.2))

  eslint-scope@8.0.2:
    dependencies:
@ -11561,18 +11659,21 @@ snapshots:
      camelcase-css: 2.0.1
      postcss: 8.4.47

-  postcss-load-config@4.0.2(postcss@8.4.47):
+  postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@22.7.2)(typescript@5.6.2)):
    dependencies:
      lilconfig: 3.1.2
      yaml: 2.5.1
    optionalDependencies:
      postcss: 8.4.47
+      ts-node: 10.9.2(@types/node@22.7.2)(typescript@5.6.2)

  postcss-nested@6.2.0(postcss@8.4.47):
    dependencies:
      postcss: 8.4.47
      postcss-selector-parser: 6.1.2

+  postcss-rem-to-responsive-pixel@6.0.2: {}
+
  postcss-selector-parser@6.0.10:
    dependencies:
      cssesc: 3.0.0
@ -12368,11 +12469,11 @@ snapshots:

  tailwind-merge@2.5.2: {}

-  tailwindcss-animate@1.0.7(tailwindcss@3.4.13):
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.13(ts-node@10.9.2(@types/node@22.7.2)(typescript@5.6.2))):
    dependencies:
-      tailwindcss: 3.4.13
+      tailwindcss: 3.4.13(ts-node@10.9.2(@types/node@22.7.2)(typescript@5.6.2))

-  tailwindcss@3.4.13:
+  tailwindcss@3.4.13(ts-node@10.9.2(@types/node@22.7.2)(typescript@5.6.2)):
    dependencies:
      '@alloc/quick-lru': 5.2.0
      arg: 5.0.2
@ -12391,7 +12492,7 @@ snapshots:
      postcss: 8.4.47
      postcss-import: 15.1.0(postcss@8.4.47)
      postcss-js: 4.0.1(postcss@8.4.47)
-      postcss-load-config: 4.0.2(postcss@8.4.47)
+      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@22.7.2)(typescript@5.6.2))
      postcss-nested: 6.2.0(postcss@8.4.47)
      postcss-selector-parser: 6.1.2
      resolve: 1.22.8
@ -12503,6 +12604,25 @@ snapshots:

  ts-interface-checker@0.1.13: {}

+  ts-node@10.9.2(@types/node@22.7.2)(typescript@5.6.2):
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.11
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 22.7.2
+      acorn: 8.12.1
+      acorn-walk: 8.3.4
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 5.6.2
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    optional: true
+
  ts-pattern@5.3.1: {}

  tslib@2.7.0: {}
@ -12778,6 +12898,9 @@ snapshots:

  uuid@9.0.1: {}

+  v8-compile-cache-lib@3.0.1:
+    optional: true
+
  valibot@0.42.1(typescript@5.6.2):
    optionalDependencies:
      typescript: 5.6.2
@ -13114,6 +13237,9 @@ snapshots:
      buffer-crc32: 0.2.13
      fd-slicer: 1.1.0

+  yn@3.1.1:
+    optional: true
+
  yocto-queue@0.1.0: {}

  yocto-queue@1.1.1: {}
--- a/src/app/content/index.tsx
+++ b/src/app/content/index.tsx
@ -17,29 +17,32 @@ import { ToastImpl } from '@/domain/impls/Toast'

 export default defineContentScript({
  cssInjectionMode: 'ui',
-  matches: ['*://*.example.com/*', '*://*.v2ex.com/*'],
+  runAt: 'document_end',
+  matches: ['https://*/*'],
  async main(ctx) {
    const store = Remesh.store({
      externs: [IndexDBStorageImpl, BrowserSyncStorageImpl, PeerRoomImpl, ToastImpl],
-      inspectors: !__DEV__ ? [RemeshLogger()] : []
+      inspectors: __DEV__ ? [RemeshLogger()] : []
    })

    const ui = await createShadowRootUi(ctx, {
      name: __NAME__,
      position: 'inline',
      anchor: 'body',
-      mode: __DEV__ ? 'open' : 'closed',
+      append: 'last',
+      mode: 'closed',
      onMount: (container) => {
+        // container.style.visibility = 'visible'
        const app = createElement('<div id="app"></div>')
        container.append(app)

        const root = createRoot(app)
        root.render(
-          // <React.StrictMode>
+          <React.StrictMode>
            <RemeshRoot store={store}>
              <App />
            </RemeshRoot>
-          // </React.StrictMode>
+          </React.StrictMode>
        )
        return root
      },
--- a/src/app/content/views/AppButton/index.tsx
+++ b/src/app/content/views/AppButton/index.tsx
@ -54,32 +54,9 @@ const AppButton: FC<AppButtonProps> = ({ children, onClick }) => {
        {menuOpen && (
          <motion.div
            className="grid gap-y-3"
-            initial="hidden"
-            animate="visible"
-            exit="exit"
-            variants={{
-              hidden: {},
-              visible: {
-                transition: {
-                  staggerChildren: 0.1,
-                  staggerDirection: -1
-                }
-              },
-              exit: {
-                transition: {
-                  staggerChildren: 0.1,
-                  staggerDirection: 1
-                }
-              }
-            }}
-          >
-            <motion.div
-              className="leading-none"
-              variants={{
-                hidden: { opacity: 0, y: 12 },
-                visible: { opacity: 1, y: 0 },
-                exit: { opacity: 0, y: 12 }
-              }}
+            initial={{ opacity: 0, y: 12 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 12 }}
            transition={{ duration: 0.1 }}
          >
            <Button
@ -98,16 +75,7 @@ const AppButton: FC<AppButtonProps> = ({ children, onClick }) => {
                <SunIcon size={20} />
              </div>
            </Button>
-            </motion.div>

-            <motion.div
-              variants={{
-                hidden: { opacity: 0, y: 12 },
-                visible: { opacity: 1, y: 0 },
-                exit: { opacity: 0, y: 12 }
-              }}
-              transition={{ duration: 0.1 }}
-            >
            <Button
              onClick={handleOpenOptionsPage}
              variant="outline"
@ -116,7 +84,6 @@ const AppButton: FC<AppButtonProps> = ({ children, onClick }) => {
              <SettingsIcon size={20} />
            </Button>
          </motion.div>
-          </motion.div>
        )}
      </AnimatePresence>
      <Button
--- a/src/app/content/views/Setup/index.tsx
+++ b/src/app/content/views/Setup/index.tsx
@ -111,9 +111,9 @@ const Setup: FC = () => {
        <div className="flex" key={userInfo?.name}>
          <motion.div
            className="text-2xl font-bold text-primary"
-            initial={{ x: -10, opacity: 0 }} // 初始向左位移 10 像素
-            animate={{ x: 0, opacity: 1 }} // 动画结束时回到原位
-            transition={{ duration: 0.5 }} // 过渡效果持续时间
+            initial={{ x: -10, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            transition={{ duration: 0.5 }}
          >
            @
          </motion.div>
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@ -75,11 +75,11 @@
  }
  :host,
  :root {
-    @apply bg-background text-foreground;
+    @apply !bg-background !text-foreground !text-base !visible;

    /* Disabled inherit */
-    all: initial;
-    direction: ltr;
+    all: initial !important;
+    direction: ltr !important;
  }
  /**
   * Fix: scroll area dispay: table
--- a/wxt.config.ts
+++ b/wxt.config.ts
@ -3,8 +3,6 @@ import { defineConfig } from 'wxt'
 import react from '@vitejs/plugin-react'
 import { name } from './package.json'

-const isDev = process.env.NODE_ENV === 'development'
-
 export default defineConfig({
  srcDir: path.resolve('src'),
  imports: false,
@ -20,9 +18,9 @@ export default defineConfig({
      }
    }
  },
-  vite: () => ({
+  vite: (env) => ({
    define: {
-      __DEV__: isDev,
+      __DEV__: env.mode === 'development',
      __NAME__: JSON.stringify(name)
    },
    plugins: [react()]