From 1e904f12d791cc030d175cbc35bdee61b8237764 Mon Sep 17 00:00:00 2001 From: molvqingtai Date: Fri, 27 Sep 2024 08:20:49 +0800 Subject: [PATCH] fix: "use px units to fix small font-size in some websites root elements --- .postcssrc | 9 +- package.json | 3 +- pnpm-lock.yaml | 152 ++++++++++++++++++++-- src/app/content/index.tsx | 19 +-- src/app/content/views/AppButton/index.tsx | 81 ++++-------- src/app/content/views/Setup/index.tsx | 6 +- src/assets/styles/tailwind.css | 6 +- wxt.config.ts | 6 +- 8 files changed, 192 insertions(+), 90 deletions(-) diff --git a/.postcssrc b/.postcssrc index 380d676..48b87bf 100644 --- a/.postcssrc +++ b/.postcssrc @@ -1,6 +1,13 @@ { "plugins": { "tailwindcss": {}, - "autoprefixer": {} + "autoprefixer": {}, + "postcss-rem-to-responsive-pixel": { + "rootValue": 16, + "propList": [ + "*" + ], + "transformUnit": "px" + } } } diff --git a/package.json b/package.json index 4d537e3..72c34df 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0fe31ff..9eb3bf8 100644 --- 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: {} diff --git a/src/app/content/index.tsx b/src/app/content/index.tsx index 17b3e09..b0e1205 100644 --- 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('
') container.append(app) const root = createRoot(app) root.render( - // - - - - // + + + + + ) return root }, diff --git a/src/app/content/views/AppButton/index.tsx b/src/app/content/views/AppButton/index.tsx index 5107287..0ec2568 100644 --- a/src/app/content/views/AppButton/index.tsx +++ b/src/app/content/views/AppButton/index.tsx @@ -54,68 +54,35 @@ const AppButton: FC = ({ children, onClick }) => { {menuOpen && ( - - - + + + + - - - + + )} diff --git a/src/app/content/views/Setup/index.tsx b/src/app/content/views/Setup/index.tsx index a7e306a..7097ac0 100644 --- a/src/app/content/views/Setup/index.tsx +++ b/src/app/content/views/Setup/index.tsx @@ -111,9 +111,9 @@ const Setup: FC = () => {
@ diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css index d52e80c..e85f55e 100644 --- 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 diff --git a/wxt.config.ts b/wxt.config.ts index a3e6d62..128e6cf 100644 --- 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()]