diff --git a/bun.lock b/bun.lock index 543e31e..0f6396b 100644 --- a/bun.lock +++ b/bun.lock @@ -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=="], diff --git a/packages/solid/package.json b/packages/solid/package.json index 14b64dd..0abb76f 100644 --- a/packages/solid/package.json +++ b/packages/solid/package.json @@ -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", diff --git a/packages/solid/postcss.config.mjs b/packages/solid/postcss.config.mjs index 1a99ca0..1d6ee06 100644 --- a/packages/solid/postcss.config.mjs +++ b/packages/solid/postcss.config.mjs @@ -1,5 +1,8 @@ export default { plugins: { - "@tailwindcss/postcss": {} + "@tailwindcss/postcss": {}, + // "@csstools/postcss-bundler": {}, + // "@csstools/postcss-cascade-layers": {}, + // "./src/misc/postcss-calc-keyword-polyfill": {} } }; diff --git a/packages/solid/src/app.tsx b/packages/solid/src/app.tsx index db95fd3..d88e9dd 100644 --- a/packages/solid/src/app.tsx +++ b/packages/solid/src/app.tsx @@ -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); }); }); diff --git a/packages/solid/src/misc/postcss-calc-keyword-polyfill.js b/packages/solid/src/misc/postcss-calc-keyword-polyfill.js new file mode 100644 index 0000000..3cfb791 --- /dev/null +++ b/packages/solid/src/misc/postcss-calc-keyword-polyfill.js @@ -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})`; + }); + } + }); + }; +}); \ No newline at end of file diff --git a/packages/solid/src/routes/song/[id]/info.tsx b/packages/solid/src/routes/song/[id]/info.tsx index 2ca76f1..ca3de65 100644 --- a/packages/solid/src/routes/song/[id]/info.tsx +++ b/packages/solid/src/routes/song/[id]/info.tsx @@ -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() { >