1
0

add: some polyfills to support chrome 92+

This commit is contained in:
alikia2x (寒寒) 2025-08-10 19:45:20 +08:00
parent 6d78cbf41b
commit da1146c41a
6 changed files with 86 additions and 23 deletions

View File

@ -71,13 +71,14 @@
"packages/solid": {
"name": "solid",
"dependencies": {
"@m3-components/solid": "0.2.0",
"@m3-components/solid": "0.2.1",
"@solid-primitives/media": "^2.3.3",
"@solidjs/meta": "^0.29.4",
"@solidjs/router": "^0.15.3",
"@solidjs/start": "^1.1.7",
"@tailwindcss/vite": "^4.1.11",
"@types/luxon": "^3.7.1",
"@ungap/has-own": "^0.1.1",
"animejs": "^4.1.2",
"axios": "^1.11.0",
"dotenv": "^16.6.1",
@ -91,6 +92,8 @@
"vinxi": "^0.5.8",
},
"devDependencies": {
"@csstools/postcss-bundler": "^2.0.8",
"@csstools/postcss-cascade-layers": "^5.0.2",
"@tailwindcss/postcss": "^4.1.11",
"drizzle-kit": "^0.31.4",
"postcss": "^8.5.6",
@ -175,6 +178,18 @@
"@colors/colors": ["@colors/colors@1.6.0", "", {}, "sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA=="],
"@csstools/css-parser-algorithms": ["@csstools/css-parser-algorithms@3.0.5", "", { "peerDependencies": { "@csstools/css-tokenizer": "^3.0.4" } }, "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ=="],
"@csstools/css-tokenizer": ["@csstools/css-tokenizer@3.0.4", "", {}, "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw=="],
"@csstools/postcss-bundler": ["@csstools/postcss-bundler@2.0.8", "", { "dependencies": { "@csstools/css-parser-algorithms": "^3.0.5", "@csstools/css-tokenizer": "^3.0.4", "@csstools/postcss-rebase-url": "^2.0.5" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-mk+dWd/Tf1cDga/HDmxty37NBDtf0r8lnXvlOMuByb2mA6UQCuR0TrYUMml6HqJPuajcaZ8yb7OPxnG0lj6NYQ=="],
"@csstools/postcss-cascade-layers": ["@csstools/postcss-cascade-layers@5.0.2", "", { "dependencies": { "@csstools/selector-specificity": "^5.0.0", "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-nWBE08nhO8uWl6kSAeCx4im7QfVko3zLrtgWZY4/bP87zrSPpSyN/3W3TDqz1jJuH+kbKOHXg5rJnK+ZVYcFFg=="],
"@csstools/postcss-rebase-url": ["@csstools/postcss-rebase-url@2.0.5", "", { "dependencies": { "@csstools/css-parser-algorithms": "^3.0.5", "@csstools/css-tokenizer": "^3.0.4" }, "peerDependencies": { "postcss": "^8.4" } }, "sha512-eAXSRCzvNt/Kn8wyW2VyF+C9tiA7IxE71Vn+Garc50uwXD7bsui/XhJfbOHd5CN43tEFt5ebWk2WjdSPNMYmFA=="],
"@csstools/selector-specificity": ["@csstools/selector-specificity@5.0.0", "", { "peerDependencies": { "postcss-selector-parser": "^7.0.0" } }, "sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw=="],
"@cush/relative": ["@cush/relative@1.0.0", "", {}, "sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA=="],
"@cvsa/backend": ["@cvsa/backend@workspace:packages/backend"],
@ -321,7 +336,7 @@
"@koshnic/ratelimit": ["@koshnic/ratelimit@1.0.3", "", { "dependencies": { "@types/chai": "^4.3.9", "@types/mocha": "^10.0.3", "chai": "^4.3.10", "ioredis": "^5.3.2", "mocha": "^10.2.0" } }, "sha512-cfDcSc+I+M4hNM+/4M+lfn8UuTq4OEFKl78ThOcGNaO7g8tWb1vm2qVpV1p1loYao1mqk00NBNwHQu2E/qFq2g=="],
"@m3-components/solid": ["@m3-components/solid@0.2.0", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.3", "animejs": "^4.0.2", "solid-js": "^1.9.5", "tailwind-variants": "^1.0.0" } }, "sha512-kJ2dPUeJlMJFVAUBBkeAbDkVt409LD0aT+hkilnUT5en6IfQCE4EUzk9BPPbYfzMa4B8nutMlfAyRwcYREbJ9A=="],
"@m3-components/solid": ["@m3-components/solid@0.2.1", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.3", "animejs": "^4.0.2", "solid-js": "^1.9.5", "tailwind-variants": "^1.0.0" } }, "sha512-ONpsfkWJxC0hZYqMsxT3PikD8SAT9BI0Ni5AqOh/0AEQAG0OnW85aXmO1QoZ843hqcGJdDFIzhucDsbFV4KPJw=="],
"@mapbox/node-pre-gyp": ["@mapbox/node-pre-gyp@2.0.0", "", { "dependencies": { "consola": "^3.2.3", "detect-libc": "^2.0.0", "https-proxy-agent": "^7.0.5", "node-fetch": "^2.6.7", "nopt": "^8.0.0", "semver": "^7.5.3", "tar": "^7.4.0" }, "bin": { "node-pre-gyp": "bin/node-pre-gyp" } }, "sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg=="],
@ -605,6 +620,8 @@
"@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.34.1", "", { "dependencies": { "@typescript-eslint/types": "8.34.1", "eslint-visitor-keys": "^4.2.1" } }, "sha512-xoh5rJ+tgsRKoXnkBPFRLZ7rjKM0AfVbC68UZ/ECXoDbfggb9RbEySN359acY1vS3qZ0jVTVWzbtfapwm5ztxw=="],
"@ungap/has-own": ["@ungap/has-own@0.1.1", "", {}, "sha512-mGhqpjSO3TM7ciZO2DU/B7XhAA5hTy0FVpnLDNLPZK+EngUUPESTsE98ZG18feNzfyD0DquNAjl/OdHFrPzA9g=="],
"@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
"@vercel/nft": ["@vercel/nft@0.29.4", "", { "dependencies": { "@mapbox/node-pre-gyp": "^2.0.0", "@rollup/pluginutils": "^5.1.3", "acorn": "^8.6.0", "acorn-import-attributes": "^1.9.5", "async-sema": "^3.1.1", "bindings": "^1.4.0", "estree-walker": "2.0.2", "glob": "^10.4.5", "graceful-fs": "^4.2.9", "node-gyp-build": "^4.2.2", "picomatch": "^4.0.2", "resolve-from": "^5.0.0" }, "bin": { "nft": "out/cli.js" } }, "sha512-6lLqMNX3TuycBPABycx7A9F1bHQR7kiQln6abjFbPrf5C/05qHM9M5E4PeTE59c7z8g6vHnx1Ioihb2AQl7BTA=="],
@ -853,6 +870,8 @@
"crossws": ["crossws@0.3.5", "", { "dependencies": { "uncrypto": "^0.1.3" } }, "sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA=="],
"cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
"csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
"data-uri-to-buffer": ["data-uri-to-buffer@4.0.1", "", {}, "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A=="],
@ -1501,6 +1520,8 @@
"postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
"postcss-selector-parser": ["postcss-selector-parser@7.1.0", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA=="],
"postcss-values-parser": ["postcss-values-parser@6.0.2", "", { "dependencies": { "color-name": "^1.1.4", "is-url-superb": "^4.0.0", "quote-unquote": "^1.0.0" }, "peerDependencies": { "postcss": "^8.2.9" } }, "sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw=="],
"postgres": ["postgres@3.4.7", "", {}, "sha512-Jtc2612XINuBjIl/QTWsV5UvE8UHuNblcO3vVADSrKsrc6RqGX6lOW1cEo3CM2v0XG4Nat8nI+YM7/f26VxXLw=="],

View File

@ -7,13 +7,14 @@
"version": "vinxi version"
},
"dependencies": {
"@m3-components/solid": "0.2.0",
"@m3-components/solid": "0.2.1",
"@solid-primitives/media": "^2.3.3",
"@solidjs/meta": "^0.29.4",
"@solidjs/router": "^0.15.3",
"@solidjs/start": "^1.1.7",
"@tailwindcss/vite": "^4.1.11",
"@types/luxon": "^3.7.1",
"@ungap/has-own": "^0.1.1",
"animejs": "^4.1.2",
"axios": "^1.11.0",
"dotenv": "^16.6.1",
@ -30,6 +31,8 @@
"node": ">=22"
},
"devDependencies": {
"@csstools/postcss-bundler": "^2.0.8",
"@csstools/postcss-cascade-layers": "^5.0.2",
"@tailwindcss/postcss": "^4.1.11",
"drizzle-kit": "^0.31.4",
"postcss": "^8.5.6",

View File

@ -1,5 +1,8 @@
export default {
plugins: {
"@tailwindcss/postcss": {}
"@tailwindcss/postcss": {},
// "@csstools/postcss-bundler": {},
// "@csstools/postcss-cascade-layers": {},
// "./src/misc/postcss-calc-keyword-polyfill": {}
}
};

View File

@ -1,3 +1,6 @@
// polyfill
import "@ungap/has-own";
import { MetaProvider } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
@ -13,12 +16,12 @@ export const refreshTab = (path: string) => {
setActiveTab(value);
break;
}
}
};
export default function App() {
onMount(() => {
refreshTab(location.pathname);
window.addEventListener('popstate', (event) => {
window.addEventListener("popstate", (event) => {
refreshTab(location.pathname);
});
});

View File

@ -0,0 +1,36 @@
import { plugin } from 'postcss';
export default plugin('postcss-calc-keyword-polyfill', () => {
const replacements = {
'pi': '3.141592653589793',
'e': '2.718281828459045',
'infinity': '1e308', // A very large number to simulate infinity
'-infinity': '-1e308', // A very small number to simulate -infinity
'nan': '0/0', // Division by zero in calc() results in NaN in modern browsers
};
// Regex to find the keywords, case-insensitive
const keywordRegex = new RegExp(`\\b(-?(${Object.keys(replacements).join('|')}))\\b`, 'gi');
return (root) => {
root.walkDecls(decl => {
// Check if the declaration value contains calc()
if (decl.value.toLowerCase().includes('calc(')) {
decl.value = decl.value.replace(/calc\(([^)]+)\)/ig, (match, expression) => {
const newExpression = expression.replace(keywordRegex, (keyword) => {
const lowerKeyword = keyword.toLowerCase();
if (lowerKeyword in replacements) {
return replacements[lowerKeyword];
}
// Handle cases like -pi and -e
if (lowerKeyword.startsWith('-') && lowerKeyword.substring(1) in replacements) {
return `-${replacements[lowerKeyword.substring(1)]}`
}
return keyword; // Should not happen with the current regex, but as a fallback
});
return `calc(${newExpression})`;
});
}
});
};
});

View File

@ -1,16 +1,9 @@
import { Layout } from "~/components/layout";
import {
Button,
Card,
CardContent,
CardMedia,
ExtendedFAB,
FloatingActionButton,
Typography
} from "@m3-components/solid";
import { Button, Card, CardContent, CardMedia, ExtendedFAB, Typography } from "@m3-components/solid";
import { TabSwitcher } from "~/components/song/TabSwitcher";
import { EditIcon, HomeIcon, MusicIcon } from "~/components/icons";
import { A } from "@solidjs/router";
export default function Info() {
return (
@ -22,14 +15,18 @@ export default function Info() {
>
<nav class="hidden pointer-events-none lg:block xl:pointer-events-auto pt-4">
<div class="inline-flex flex-col gap-2">
<Button variant="outlined" class="gap-1 items-center" size="extra-small">
<HomeIcon class="w-5 h-5 text-xl -translate-y-0.25" />
<span></span>
</Button>
<Button variant="outlined" class="gap-1 items-center" size="extra-small">
<MusicIcon class="w-5 h-5 text-xl" />
<span></span>
</Button>
<A href="/">
<Button variant="outlined" class="gap-1 items-center" size="extra-small">
<HomeIcon class="w-5 h-5 text-xl -translate-y-0.25" />
<span></span>
</Button>
</A>
<A href="/songs">
<Button variant="outlined" class="gap-1 items-center" size="extra-small">
<MusicIcon class="w-5 h-5 text-xl" />
<span></span>
</Button>
</A>
</div>
</nav>
<main>