From 051354a2e9ecb1583fa49a90d2197135a1d13d1c Mon Sep 17 00:00:00 2001 From: uncenter <47499684+uncenter@users.noreply.github.com> Date: Fri, 22 Mar 2024 23:01:02 -0400 Subject: [PATCH] refactor(tree-wide): optimize and clean up svgs (#693) --- .stylelintrc.js | 10 +- deno.lock | 93 ++++++++ scripts/lint/main.ts | 5 +- .../lint/stylelint-custom/optimizedSvgs.js | 88 +++++++ scripts/lint/stylelint.ts | 14 +- styles/arch-wiki/catppuccin.user.css | 2 +- styles/chatgpt/catppuccin.user.css | 8 +- styles/duckduckgo/catppuccin.user.css | 14 +- styles/formative/catppuccin.user.css | 18 +- styles/google-photos/catppuccin.user.css | 26 +-- styles/google/catppuccin.user.css | 10 +- styles/hacker-news/catppuccin.user.css | 2 +- styles/invidious/catppuccin.user.css | 2 +- styles/lichess/.stylelintrc.json | 11 - styles/lichess/catppuccin.user.css | 12 +- styles/mastodon/catppuccin.user.css | 2 +- styles/minesweeper/catppuccin.user.css | 40 ++-- styles/nextjs/catppuccin.user.css | 4 +- styles/npm/catppuccin.user.css | 2 +- styles/pypi/catppuccin.user.css | 6 +- styles/stylus/catppuccin.user.css | 15 +- styles/wikipedia/catppuccin.user.css | 220 +++++++++++------- styles/youtube/catppuccin.user.css | 2 +- 23 files changed, 424 insertions(+), 182 deletions(-) create mode 100644 scripts/lint/stylelint-custom/optimizedSvgs.js delete mode 100644 styles/lichess/.stylelintrc.json diff --git a/.stylelintrc.js b/.stylelintrc.js index 6b8ae400bd..00cf9991f8 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -1,10 +1,15 @@ +// @ts-check + /** * @type {import('npm:stylelint').Config} */ -const config = { +export default { extends: "stylelint-config-standard", + plugins: ["./scripts/lint/stylelint-custom/optimizedSvgs.js"], customSyntax: "postcss-less", rules: { + "catppuccin/optimized-svgs": true, + "selector-class-pattern": null, "custom-property-pattern": null, "selector-id-pattern": null, @@ -70,6 +75,7 @@ const config = { }, ], + "selector-type-no-unknown": null, "function-no-unknown": [ true, { @@ -172,5 +178,3 @@ const config = { "no-descending-specificity": null, }, }; - -module.exports = config; diff --git a/deno.lock b/deno.lock index f6d5507cde..2b64f67b6f 100644 --- a/deno.lock +++ b/deno.lock @@ -10,10 +10,12 @@ "npm:json-schema-to-typescript": "npm:json-schema-to-typescript@13.1.2_glob@7.2.3", "npm:less@4.2.0": "npm:less@4.2.0", "npm:postcss-less": "npm:postcss-less@6.0.0_postcss@8.4.35", + "npm:postcss-value-parser": "npm:postcss-value-parser@4.2.0", "npm:prettier@3.2.4": "npm:prettier@3.2.4", "npm:stylelint": "npm:stylelint@16.2.1_@csstools+css-tokenizer@2.2.3_@csstools+css-parser-algorithms@2.6.0__@csstools+css-tokenizer@2.2.3_postcss-selector-parser@6.0.15_postcss@8.4.35", "npm:stylelint-config-recommended": "npm:stylelint-config-recommended@14.0.0_stylelint@16.2.1__@csstools+css-tokenizer@2.2.3__@csstools+css-parser-algorithms@2.6.0___@csstools+css-tokenizer@2.2.3__postcss-selector-parser@6.0.15__postcss@8.4.35", "npm:stylelint-config-standard": "npm:stylelint-config-standard@36.0.0_stylelint@16.2.1__@csstools+css-tokenizer@2.2.3__@csstools+css-parser-algorithms@2.6.0___@csstools+css-tokenizer@2.2.3__postcss-selector-parser@6.0.15__postcss@8.4.35", + "npm:svgo": "npm:svgo@3.2.0", "npm:usercss-meta@0.12.0": "npm:usercss-meta@0.12.0" }, "npm": { @@ -210,6 +212,10 @@ "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", "dependencies": {} }, + "@trysound/sax@0.2.0": { + "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", + "dependencies": {} + }, "@types/glob@7.2.0": { "integrity": "sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==", "dependencies": { @@ -302,6 +308,10 @@ "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==", "dependencies": {} }, + "boolbase@1.0.0": { + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", + "dependencies": {} + }, "brace-expansion@1.1.11": { "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dependencies": { @@ -371,6 +381,10 @@ "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", "dependencies": {} }, + "commander@7.2.0": { + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "dependencies": {} + }, "concat-map@0.0.1": { "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dependencies": {} @@ -402,6 +416,23 @@ "integrity": "sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==", "dependencies": {} }, + "css-select@5.1.0": { + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "dependencies": { + "boolbase": "boolbase@1.0.0", + "css-what": "css-what@6.1.0", + "domhandler": "domhandler@5.0.3", + "domutils": "domutils@3.1.0", + "nth-check": "nth-check@2.1.1" + } + }, + "css-tree@2.2.1": { + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "dependencies": { + "mdn-data": "mdn-data@2.0.28", + "source-map-js": "source-map-js@1.0.2" + } + }, "css-tree@2.3.1": { "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", "dependencies": { @@ -409,10 +440,20 @@ "source-map-js": "source-map-js@1.0.2" } }, + "css-what@6.1.0": { + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", + "dependencies": {} + }, "cssesc@3.0.0": { "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "dependencies": {} }, + "csso@5.0.5": { + "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "dependencies": { + "css-tree": "css-tree@2.2.1" + } + }, "d@1.0.1": { "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==", "dependencies": { @@ -436,6 +477,32 @@ "path-type": "path-type@4.0.0" } }, + "dom-serializer@2.0.0": { + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "dependencies": { + "domelementtype": "domelementtype@2.3.0", + "domhandler": "domhandler@5.0.3", + "entities": "entities@4.5.0" + } + }, + "domelementtype@2.3.0": { + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "dependencies": {} + }, + "domhandler@5.0.3": { + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "dependencies": { + "domelementtype": "domelementtype@2.3.0" + } + }, + "domutils@3.1.0": { + "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "dependencies": { + "dom-serializer": "dom-serializer@2.0.0", + "domelementtype": "domelementtype@2.3.0", + "domhandler": "domhandler@5.0.3" + } + }, "eastasianwidth@0.2.0": { "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", "dependencies": {} @@ -448,6 +515,10 @@ "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", "dependencies": {} }, + "entities@4.5.0": { + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dependencies": {} + }, "env-paths@2.2.1": { "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==", "dependencies": {} @@ -863,6 +934,10 @@ "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==", "dependencies": {} }, + "mdn-data@2.0.28": { + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", + "dependencies": {} + }, "mdn-data@2.0.30": { "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", "dependencies": {} @@ -958,6 +1033,12 @@ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "dependencies": {} }, + "nth-check@2.1.1": { + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "dependencies": { + "boolbase": "boolbase@1.0.0" + } + }, "object-assign@4.1.1": { "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", "dependencies": {} @@ -1254,6 +1335,18 @@ "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", "dependencies": {} }, + "svgo@3.2.0": { + "integrity": "sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==", + "dependencies": { + "@trysound/sax": "@trysound/sax@0.2.0", + "commander": "commander@7.2.0", + "css-select": "css-select@5.1.0", + "css-tree": "css-tree@2.3.1", + "css-what": "css-what@6.1.0", + "csso": "csso@5.0.5", + "picocolors": "picocolors@1.0.0" + } + }, "table@6.8.1": { "integrity": "sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==", "dependencies": { diff --git a/scripts/lint/main.ts b/scripts/lint/main.ts index 88c8935d98..f009fbe857 100755 --- a/scripts/lint/main.ts +++ b/scripts/lint/main.ts @@ -11,6 +11,7 @@ import { log } from "@/lint/logger.ts"; import { verifyMetadata } from "@/lint/metadata.ts"; import { lint } from "@/lint/stylelint.ts"; import { getUserstylesData } from "@/utils.ts"; +import stylelintConfig from "../../.stylelintrc.js"; const flags = parseFlags(Deno.args, { boolean: ["fix"] }); const subDir = flags._[0]?.toString() ?? ""; @@ -54,7 +55,9 @@ for await (const entry of stylesheets) { ); // Lint with Stylelint. - await lint(entry, content, flags.fix).catch(() => failed = true); + await lint(entry, content, flags.fix, stylelintConfig).catch(() => + failed = true + ); } if (await checkForMissingFiles() === false) failed = true; diff --git a/scripts/lint/stylelint-custom/optimizedSvgs.js b/scripts/lint/stylelint-custom/optimizedSvgs.js new file mode 100644 index 0000000000..b7ff66aef1 --- /dev/null +++ b/scripts/lint/stylelint-custom/optimizedSvgs.js @@ -0,0 +1,88 @@ +import stylelint from "npm:stylelint"; +import valueParser from "npm:postcss-value-parser"; +import { optimize } from "npm:svgo"; + +const { + createPlugin, + utils: { report, ruleMessages, validateOptions }, +} = stylelint; + +const ruleName = "catppuccin/optimized-svgs"; + +const meta = { + fixable: true, +}; + +const messages = ruleMessages(ruleName, { + rejected: () => `Unoptimized SVG detected`, +}); + +/** @type {import('npm:stylelint').Rule} */ +const ruleFunction = (primary, _secondary, context) => { + return (root, result) => { + const validOptions = validateOptions(result, ruleName, { + actual: primary, + possible: [true], + }); + + if (!validOptions) return; + + root.walkRules((rule) => { + for (const node of rule.nodes) { + if (node.type === "rule") { + for (const subnode of node.nodes) { + if (subnode.type === "atrule" && subnode.name === "svg") { + const parsed = valueParser(subnode.value); + + if ( + parsed.nodes.length === 1 && + parsed.nodes[0].type === "function" && + parsed.nodes[0].value === "escape" && + parsed.nodes[0].nodes.length === 1 && + parsed.nodes[0].nodes[0].type === "string" + ) { + const svg = parsed.nodes[0].nodes[0].value; + const optimized = optimize(svg, { + multipass: true, + plugins: [ + "cleanupAttrs", + "cleanupIds", + "collapseGroups", + "convertPathData", + "convertTransform", + "convertStyleToAttrs", + "mergePaths", + "removeComments", + "removeUselessDefs", + "removeScriptElement" + ], + }).data; + + if (optimized !== svg) { + if (context.fix) { + parsed.nodes[0].nodes[0].quote = "'"; + parsed.nodes[0].nodes[0].value = optimized; + subnode.value = parsed.toString(); + } else { + report({ + result, + ruleName, + message: messages.rejected(), + node: subnode, + }); + } + } + } + } + } + } + } + }); + }; +}; + +ruleFunction.ruleName = ruleName; +ruleFunction.messages = messages; +ruleFunction.meta = meta; + +export default createPlugin(ruleName, ruleFunction); diff --git a/scripts/lint/stylelint.ts b/scripts/lint/stylelint.ts index 18f8e394a9..ac200df3e0 100644 --- a/scripts/lint/stylelint.ts +++ b/scripts/lint/stylelint.ts @@ -10,9 +10,17 @@ import "npm:stylelint-config-recommended"; import { REPO_ROOT } from "@/deps.ts"; import { log } from "@/lint/logger.ts"; -export const lint = (entry: WalkEntry, content: string, fix: boolean) => - stylelint.lint({ files: entry.path, fix }) - .then(({ results }) => { +export const lint = ( + entry: WalkEntry, + content: string, + fix: boolean, + config: stylelint.Config, +) => + stylelint.lint({ code: content, config, fix }) + .then(({ results, code }) => { + if (code) { + Deno.writeTextFileSync(entry.path, code); + } results.map((result) => { result.warnings.map((warning) => { // Some cleanup for fancier logging - dims the rule name. diff --git a/styles/arch-wiki/catppuccin.user.css b/styles/arch-wiki/catppuccin.user.css index eb1ecb27b3..c8d1b42e5f 100644 --- a/styles/arch-wiki/catppuccin.user.css +++ b/styles/arch-wiki/catppuccin.user.css @@ -106,7 +106,7 @@ //archlinux logo #archnavbarlogo { @svg: escape( - '' + '' ); background: url("data:image/svg+xml,@{svg}") !important; background-size: 190px 40px !important; diff --git a/styles/chatgpt/catppuccin.user.css b/styles/chatgpt/catppuccin.user.css index d20d4fa1c0..99989df84f 100644 --- a/styles/chatgpt/catppuccin.user.css +++ b/styles/chatgpt/catppuccin.user.css @@ -220,7 +220,7 @@ select { @svg: escape( - "" + '' ); background-image: url("data:image/svg+xml;@{svg}"); } @@ -1026,19 +1026,19 @@ .c7e427425[data-provider^="google"] { @svg: escape( - "" + '' ); background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); } .c7e427425[data-provider^="windowslive"] { @svg: escape( - "" + '' ); background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); } .c7e427425[data-provider^="apple"] { @svg: escape( - "" + '' ); background-image: url("data:image/svg+xml;charset=utf-8,@{svg}"); } diff --git a/styles/duckduckgo/catppuccin.user.css b/styles/duckduckgo/catppuccin.user.css index c12d9086df..f36761f216 100644 --- a/styles/duckduckgo/catppuccin.user.css +++ b/styles/duckduckgo/catppuccin.user.css @@ -326,7 +326,7 @@ .module__detail__precip-label__icon, .module__items-precip-label__icon { @svg: escape( - '' + '' ); height: 0 !important; width: 0 !important; @@ -728,21 +728,21 @@ .review__rating-stars, .place-list-item__rating__image { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}"); } //ddg icon .header__logo, .js-logo-ddg { @svg: escape( - ' ' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } .yhccgqM_FdvJ79N6Jm6c { @svg: escape( - ' ' + '' ); height: 0 !important; width: 0 !important; @@ -754,7 +754,7 @@ //duckduckgo search too long icon .logo_homepage { @svg: escape( - ' ' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -762,7 +762,7 @@ // search glass icon .related-searches__item-text::before { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -771,7 +771,7 @@ .header_headerLeft__gTUAg, .header_logoImg__PFezv { @svg: escape( - '' + '' ); height: 0 !important; width: 0 !important; diff --git a/styles/formative/catppuccin.user.css b/styles/formative/catppuccin.user.css index 55c33fbfc9..918ae52d37 100644 --- a/styles/formative/catppuccin.user.css +++ b/styles/formative/catppuccin.user.css @@ -467,22 +467,22 @@ background: @surface1 !important; img { &[src*="flashcard-preview"] { - @escaped: escape( - '' + @svg: escape( + '' ); - content: url("data:image/svg+xml,@{escaped}"); + content: url("data:image/svg+xml,@{svg}"); } &[src*="match-preview"] { - @escaped: escape( - '' + @svg: escape( + '' ); - content: url("data:image/svg+xml,@{escaped}"); + content: url("data:image/svg+xml,@{svg}"); } &[src*="quiz-preview"] { - @escaped: escape( - '' + @svg: escape( + '' ); - content: url("data:image/svg+xml,@{escaped}"); + content: url("data:image/svg+xml,@{svg}"); } } } diff --git a/styles/google-photos/catppuccin.user.css b/styles/google-photos/catppuccin.user.css index 557caa0c14..cceabed5b6 100644 --- a/styles/google-photos/catppuccin.user.css +++ b/styles/google-photos/catppuccin.user.css @@ -317,7 +317,7 @@ .BZXMjd.mPxwXe .oXxEid { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -327,7 +327,7 @@ .UDKXKd, .uuRyud { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -336,13 +336,13 @@ .ASbIvd { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; & when (@lookup =latte) { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -352,13 +352,13 @@ .Od6mvf { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; & when (@lookup =latte) { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -367,7 +367,7 @@ // sharing .MmE0qc { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -375,7 +375,7 @@ // favorites image .ryy2Zd { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -383,7 +383,7 @@ //album image .AAF8rf { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -392,7 +392,7 @@ .ZgMovb { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -401,7 +401,7 @@ .bR1LEf { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -409,7 +409,7 @@ // sharing buddy icon .PfAiBf { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -418,7 +418,7 @@ .nlmbYc { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } diff --git a/styles/google/catppuccin.user.css b/styles/google/catppuccin.user.css index 55dca45fb1..7411ae525e 100644 --- a/styles/google/catppuccin.user.css +++ b/styles/google/catppuccin.user.css @@ -545,13 +545,15 @@ } .jfN4p, .lnXdpd:not([src^="/logos/doodles/"]) { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}"); } .aXBZVd { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .zgAlFc { diff --git a/styles/hacker-news/catppuccin.user.css b/styles/hacker-news/catppuccin.user.css index bb6d34eae0..c7ee9caaa9 100644 --- a/styles/hacker-news/catppuccin.user.css +++ b/styles/hacker-news/catppuccin.user.css @@ -218,7 +218,7 @@ /* Replace vote arrow with svg arrow and mask */ .votearrow { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}"); } diff --git a/styles/invidious/catppuccin.user.css b/styles/invidious/catppuccin.user.css index 3ca52484d8..f3bab06d44 100644 --- a/styles/invidious/catppuccin.user.css +++ b/styles/invidious/catppuccin.user.css @@ -287,7 +287,7 @@ cursor: pointer; &:checked { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}"); } diff --git a/styles/lichess/.stylelintrc.json b/styles/lichess/.stylelintrc.json deleted file mode 100644 index 393eaba68b..0000000000 --- a/styles/lichess/.stylelintrc.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "../../.stylelintrc.js", - "rules": { - "selector-type-no-unknown": [ - true, - { - "ignore": ["signal", "index", "fill"] - } - ] - } -} diff --git a/styles/lichess/catppuccin.user.css b/styles/lichess/catppuccin.user.css index 2b29a7633c..a006d472db 100644 --- a/styles/lichess/catppuccin.user.css +++ b/styles/lichess/catppuccin.user.css @@ -276,7 +276,7 @@ /* Chess Game */ .brown .is2d cg-board { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -311,7 +311,7 @@ .is2d .knight { #piece(@f, @s) { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -325,7 +325,7 @@ .is2d .rook { #piece(@f, @s) { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -339,7 +339,7 @@ .is2d .king { #piece(@f, @s) { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } @@ -353,13 +353,13 @@ .is2d .queen { &.black { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } &.white { @svg: escape( - '' + '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } diff --git a/styles/mastodon/catppuccin.user.css b/styles/mastodon/catppuccin.user.css index c320846d6e..255cccb4cc 100644 --- a/styles/mastodon/catppuccin.user.css +++ b/styles/mastodon/catppuccin.user.css @@ -530,7 +530,7 @@ domain("wetdry.world") { .simple_form select { @svg: escape( - '' + '' ); background: @mantle url("data:image/svg+xml,@{svg}") no-repeat right 8px center/auto 16px; diff --git a/styles/minesweeper/catppuccin.user.css b/styles/minesweeper/catppuccin.user.css index 06ef57ba82..61a6f15c42 100644 --- a/styles/minesweeper/catppuccin.user.css +++ b/styles/minesweeper/catppuccin.user.css @@ -429,51 +429,59 @@ } .brand-logo { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}"); } .exp-icon { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}"); } .coin-icon { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}"); } .diff-icon { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}"); filter: none; } .arena-icon { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}"); } .event-item-icon.icon-filter { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}"); } .quest-icon { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}"); } .arena-coin-icon.icon-filter { - @svg-raw: ' '; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}"); } } diff --git a/styles/nextjs/catppuccin.user.css b/styles/nextjs/catppuccin.user.css index 6761e3e26f..ff6795bc61 100644 --- a/styles/nextjs/catppuccin.user.css +++ b/styles/nextjs/catppuccin.user.css @@ -246,7 +246,7 @@ img[alt="GitHub Logo"] { @svg: escape( - '' + '' ); height: 0 !important; width: 0 !important; @@ -256,7 +256,7 @@ } img[alt="X Logo"] { @svg: escape( - '' + '' ); height: 0 !important; width: 0 !important; diff --git a/styles/npm/catppuccin.user.css b/styles/npm/catppuccin.user.css index ff14250988..72023c5918 100644 --- a/styles/npm/catppuccin.user.css +++ b/styles/npm/catppuccin.user.css @@ -526,7 +526,7 @@ padding-top: 16px; padding-left: 12px; @svg: escape( - '' + '' ); background: url("data:image/svg+xml,@{svg}") no-repeat; } diff --git a/styles/pypi/catppuccin.user.css b/styles/pypi/catppuccin.user.css index 7b9750e28c..838e243c76 100644 --- a/styles/pypi/catppuccin.user.css +++ b/styles/pypi/catppuccin.user.css @@ -929,7 +929,7 @@ .site-header__logo img { @svg: escape( - '' + '' ); height: 0 !important; @@ -942,7 +942,7 @@ .about-pypi__logo img { @svg: escape( - '' + '' ); height: 0 !important; @@ -969,7 +969,7 @@ .release__node[src*="blue"] { @svg: escape( - '' + '' ); height: 0 !important; diff --git a/styles/stylus/catppuccin.user.css b/styles/stylus/catppuccin.user.css index 6950aa4cec..be44238c5f 100644 --- a/styles/stylus/catppuccin.user.css +++ b/styles/stylus/catppuccin.user.css @@ -94,21 +94,24 @@ } #message-box-title::before { @fade_color: fade(@accent-color, 67%); - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } [src="moz-extension://8fc71d5e-96b2-44a4-8d6f-ead6ff4d3c56/images/icon/16.png"], img[src="/images/icon/128.png"] { @fade_color: fade(@accent-color, 67%); - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}"); } #message-box.danger #message-box-title::before { @fade_color: fade(@red, 67%); - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background: url("data:image/svg+xml,@{svg}") !important; } #message-box.danger #message-box-close-icon i { diff --git a/styles/wikipedia/catppuccin.user.css b/styles/wikipedia/catppuccin.user.css index a31ca8fd73..52e419f7df 100644 --- a/styles/wikipedia/catppuccin.user.css +++ b/styles/wikipedia/catppuccin.user.css @@ -993,33 +993,38 @@ } .sprite { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,@{svg}"); } .mw-logo-wordmark { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}"); } .mw-logo-tagline { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-menu { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-ellipsis { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}"); } @@ -1027,241 +1032,280 @@ .vector-dropdown .vector-dropdown-label:not(.cdx-button--icon-only)::after, .vector-icon.mw-ui-icon-wikimedia-expand { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}") !important; } .cdx-checkbox__input:checked:not(:indeterminate) + .cdx-checkbox__icon::before { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}") !important; } .vector-page-titlebar .mw-portlet-lang .vector-dropdown-label.cdx-button--action-progressive.cdx-button--weight-quiet::after { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}") !important; } .vector-dropdown .vector-dropdown-label:not(.cdx-button--icon-only)::after { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background: url("data:image/svg+xml,@{svg}") !important; } .vector-icon.mw-ui-icon-wikimedia-language-progressive { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}") !important; } .vector-icon.mw-ui-icon-wikimedia-language { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}") !important; } .mw-parser-output a.external[class="external text"][rel="nofollow"] { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}") !important; } #mw-indicator-mw-helplink a { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}") !important; } [alt="Edit this at Wikidata"] { - @svg-raw: ' '; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}") !important; } .cdx-search-input .cdx-text-input__icon.cdx-text-input__start-icon { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}") !important; } .vector-icon.mw-ui-icon-wikimedia-listBullet { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}") !important; } ul { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); list-style-image: url("data:image/svg+xml,@{svg}"); } .oo-ui-icon-volumeUp, .mw-ui-icon-volumeUp::before { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-fullScreen { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .fancycaptcha-reload { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .popups-icon--settings { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-userAvatar { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-watchlist { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-tray { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-bell { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-user-menu-logged-in .vector-dropdown-label::after { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-star { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-userTalk { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-sandbox { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-settings { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .oo-ui-image-progressive.oo-ui-icon-settings { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-labFlask { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .mw-ui-icon-vector-gadget-pt-darkmode { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .client-dark-mode .mw-ui-icon-vector-gadget-pt-darkmode { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-userContributions { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-logOut { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .uls-search-label, .vector-icon.mw-ui-icon-wikimedia-search { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .mw-ui-icon-vector-gadget-pt-darkmode-sticky-header { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .cdx-message .cdx-message__icon { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-edit { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-history { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-speechBubbles { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .vector-icon.mw-ui-icon-wikimedia-editLock { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); background-image: url("data:image/svg+xml,@{svg}"); } .branding-box > a:nth-child(1) > span:nth-child(1) > img:nth-child(1) { - @svg-raw: ''; - @svg: escape(@svg-raw); + @svg: escape( + '' + ); content: url("data:image/svg+xml,@{svg}"); } } diff --git a/styles/youtube/catppuccin.user.css b/styles/youtube/catppuccin.user.css index 5efd4ee049..00e9d4dd10 100644 --- a/styles/youtube/catppuccin.user.css +++ b/styles/youtube/catppuccin.user.css @@ -592,7 +592,7 @@ .sbpqs_a::before, .sbqs_c::before { @svg: escape( - '' + '' ); content: url("data:image/svg+xml,@{svg}"); background: none;