Skip to content

Commit

Permalink
refactor(tree-wide): optimize and clean up svgs (#693)
Browse files Browse the repository at this point in the history
  • Loading branch information
uncenter authored Mar 23, 2024
1 parent f9e3916 commit 051354a
Show file tree
Hide file tree
Showing 23 changed files with 424 additions and 182 deletions.
10 changes: 7 additions & 3 deletions .stylelintrc.js
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -70,6 +75,7 @@ const config = {
},
],

"selector-type-no-unknown": null,
"function-no-unknown": [
true,
{
Expand Down Expand Up @@ -172,5 +178,3 @@ const config = {
"no-descending-specificity": null,
},
};

module.exports = config;
93 changes: 93 additions & 0 deletions deno.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion scripts/lint/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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() ?? "";
Expand Down Expand Up @@ -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;
Expand Down
88 changes: 88 additions & 0 deletions scripts/lint/stylelint-custom/optimizedSvgs.js
Original file line number Diff line number Diff line change
@@ -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);
14 changes: 11 additions & 3 deletions scripts/lint/stylelint.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion styles/arch-wiki/catppuccin.user.css
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
//archlinux logo
#archnavbarlogo {
@svg: escape(
'<svg xmlns="http://www.w3.org/2000/svg" version="1" width="600" height="126"><path d="M159.568 34.427c-8.89-.014-16.267 1.809-19.12 2.803l-2.937 15.857c-.007.058 14.617-3.9 21.059-3.667 10.665.383 11.646 4.076 11.46 9.06.182.292-2.752-4.503-11.979-4.664-11.64-.2-28.069 4.122-28.046 21.692-.314 19.765 14.764 25.579 25.032 25.686 9.232-.168 13.563-3.496 15.934-5.28 3.115-3.257 6.679-6.532 10.078-10.462-3.216 5.844-6.005 9.884-8.907 12.977v2.611l14.033-2.361.096-38.144c-.143-5.399 3.096-26.057-26.703-26.108zm-2.016 33.21c5.817.08 12.488 2.948 12.497 9.849.03 6.277-7.863 9.651-12.996 9.598-5.135-.053-11.949-4.036-11.979-10.155.099-5.47 6.426-9.432 12.478-9.291zm37.972-29.685l-.095 63.166 16.348-3.15.027-35.814c.004-5.333 7.62-11.564 17.178-11.464 2.028-3.67 5.84-13.05 6.77-15.183-21.351-.051-21.623 6.137-25.336 9.18-.04-5.806-.013-9.292-.013-9.292l-14.879 2.557zm92.002 8.292c-.158-.074-8.526-9.788-25.35-9.864-15.758-.262-33.433 5.847-33.716 32.27.138 23.232 16.979 32.311 33.805 32.488 18.007.187 25.172-11.26 25.602-11.543-2.149-1.863-10.196-9.837-10.196-9.837s-5.027 7.157-14.779 7.248c-9.755.093-18.234-7.54-18.354-18.189-.125-10.65 7.795-16.419 18.427-16.885 9.205-.002 14.516 5.943 14.516 5.943zm20.606-30.399l-15.434 3.628.115 82.277 15.204-2.745.172-38.72c.033-4.06 5.874-10.295 15.626-10.097 9.325.097 11.41 6.215 11.384 6.988l.269 44.824 14.993-2.65.057-47.53c.099-4.574-10.018-14.233-26.28-14.302-7.729.012-12.009 1.762-14.187 3.052-3.726 2.879-7.985 5.637-12.17 9.157 3.869-4.97 7.117-8.407 10.29-10.961l-.04-22.921z" fill="@{text}" fill-rule="evenodd"/><path d="M360.136 17.218l6.962-1.742.33 82.95-7.074 1.204zm18.928 24.757l6.101-2.716.052 59.478-5.892 1.217zm-1.45-21.448l4.92-4.015 4.086 4.547-4.921 4.121zm19.024 20.365l6.962-1.421.033 12.434c.001.534 3.823-13.89 22.258-13.57 17.9.1 20.827 13.957 20.73 17.064l.221 43.725-6.102 1.324-.035-43.189c.07-1.261-2.79-11.927-15.439-11.966-12.646-.037-21.409 9.186-21.393 15.078l.1 38.047-7.07 1.847zm110.954 58.546l-6.962 1.42-.033-12.433c-.001-.534-3.825 13.89-22.258 13.57-17.9-.1-20.827-13.957-20.73-17.064l-.221-43.725 7.397-1.494.114 43.19c.003 1.18 1.416 12.096 14.065 12.135 12.646.037 21.506-7.616 21.569-19.139l-.09-34.076 6.885-1.757zm13.645-59.037l-4.882 3.82 18.717 24.494-19.963 28.3 5.179 3.843 18.766-26.28 19.368 26.902 4.791-3.82-20.757-28.765 16.56-23.262-5.092-4.305-15.085 21.525zM61.88 1.778c-5.385 13.203-8.633 21.839-14.629 34.649 3.676 3.896 8.188 8.434 15.516 13.559-7.878-3.242-13.252-6.497-17.267-9.874-7.673 16.011-19.695 38.818-44.09 82.65 19.174-11.068 34.037-17.893 47.889-20.497a35.103 35.103 0 0 1-.91-8.213l.023-.614c.304-12.284 6.694-21.73 14.264-21.09 7.57.642 13.454 11.126 13.15 23.41-.058 2.312-.319 4.536-.774 6.598 13.701 2.68 28.405 9.487 47.32 20.407-3.73-6.866-7.059-13.056-10.238-18.95-5.007-3.882-10.23-8.933-20.884-14.402 7.323 1.903 12.566 4.099 16.653 6.552C75.58 35.786 72.963 27.79 61.88 1.778z" fill="@{blue}" fill-rule="evenodd"/><path d="M576.771 93.265V80.603h-4.73v-1.695h11.38v1.695h-4.75v12.662h-1.9m8.629 0V78.908h2.859l3.398 10.166c.314.947.542 1.655.686 2.125.163-.522.418-1.29.764-2.301l3.437-9.99h2.556v14.357h-1.831V81.25l-4.172 12.016h-1.714l-4.152-12.222v12.222h-1.832" font-weight="400" font-size="8.441" font-family="DejaVu Sans Mono" fill="@{subtext1}"/><script xmlns="" id="bw-fido2-page-script"/></svg>'
'<svg xmlns="http://www.w3.org/2000/svg" version="1" width="600" height="126"><path d="M159.568 34.427c-8.89-.014-16.267 1.809-19.12 2.803l-2.937 15.857c-.007.058 14.617-3.9 21.059-3.667 10.665.383 11.646 4.076 11.46 9.06.182.292-2.752-4.503-11.979-4.664-11.64-.2-28.069 4.122-28.046 21.692-.314 19.765 14.764 25.579 25.032 25.686 9.232-.168 13.563-3.496 15.934-5.28 3.115-3.257 6.679-6.532 10.078-10.462-3.216 5.844-6.005 9.884-8.907 12.977v2.611l14.033-2.361.096-38.144c-.143-5.399 3.096-26.057-26.703-26.108m-2.016 33.21c5.817.08 12.488 2.948 12.497 9.849.03 6.277-7.863 9.651-12.996 9.598-5.135-.053-11.949-4.036-11.979-10.155.099-5.47 6.426-9.432 12.478-9.291zm37.972-29.685-.095 63.166 16.348-3.15.027-35.814c.004-5.333 7.62-11.564 17.178-11.464 2.028-3.67 5.84-13.05 6.77-15.183-21.351-.051-21.623 6.137-25.336 9.18-.04-5.806-.013-9.292-.013-9.292zm92.002 8.292c-.158-.074-8.526-9.788-25.35-9.864-15.758-.262-33.433 5.847-33.716 32.27.138 23.232 16.979 32.311 33.805 32.488 18.007.187 25.172-11.26 25.602-11.543-2.149-1.863-10.196-9.837-10.196-9.837s-5.027 7.157-14.779 7.248c-9.755.093-18.234-7.54-18.354-18.189-.125-10.65 7.795-16.419 18.427-16.885 9.205-.002 14.516 5.943 14.516 5.943zm20.606-30.399-15.434 3.628.115 82.277 15.204-2.745.172-38.72c.033-4.06 5.874-10.295 15.626-10.097 9.325.097 11.41 6.215 11.384 6.988l.269 44.824 14.993-2.65.057-47.53c.099-4.574-10.018-14.233-26.28-14.302-7.729.012-12.009 1.762-14.187 3.052-3.726 2.879-7.985 5.637-12.17 9.157 3.869-4.97 7.117-8.407 10.29-10.961z" fill="@{text}" fill-rule="evenodd"/><path d="m360.136 17.218 6.962-1.742.33 82.95-7.074 1.204zm18.928 24.757 6.101-2.716.052 59.478-5.892 1.217zm-1.45-21.448 4.92-4.015 4.086 4.547-4.921 4.121zm19.024 20.365 6.962-1.421.033 12.434c.001.534 3.823-13.89 22.258-13.57 17.9.1 20.827 13.957 20.73 17.064l.221 43.725-6.102 1.324-.035-43.189c.07-1.261-2.79-11.927-15.439-11.966-12.646-.037-21.409 9.186-21.393 15.078l.1 38.047-7.07 1.847zm110.954 58.546-6.962 1.42-.033-12.433c-.001-.534-3.825 13.89-22.258 13.57-17.9-.1-20.827-13.957-20.73-17.064l-.221-43.725 7.397-1.494.114 43.19c.003 1.18 1.416 12.096 14.065 12.135 12.646.037 21.506-7.616 21.569-19.139l-.09-34.076 6.885-1.757zm13.645-59.037-4.882 3.82 18.717 24.494-19.963 28.3 5.179 3.843 18.766-26.28 19.368 26.902 4.791-3.82-20.757-28.765 16.56-23.262-5.092-4.305-15.085 21.525zM61.88 1.778c-5.385 13.203-8.633 21.839-14.629 34.649 3.676 3.896 8.188 8.434 15.516 13.559-7.878-3.242-13.252-6.497-17.267-9.874-7.673 16.011-19.695 38.818-44.09 82.65 19.174-11.068 34.037-17.893 47.889-20.497a35 35 0 0 1-.91-8.213l.023-.614c.304-12.284 6.694-21.73 14.264-21.09 7.57.642 13.454 11.126 13.15 23.41-.058 2.312-.319 4.536-.774 6.598 13.701 2.68 28.405 9.487 47.32 20.407-3.73-6.866-7.059-13.056-10.238-18.95-5.007-3.882-10.23-8.933-20.884-14.402 7.323 1.903 12.566 4.099 16.653 6.552C75.58 35.786 72.963 27.79 61.88 1.778" fill="@{blue}" fill-rule="evenodd"/><path d="M576.771 93.265V80.603h-4.73v-1.695h11.38v1.695h-4.75v12.662zm8.629 0V78.908h2.859l3.398 10.166q.47 1.42.686 2.125.245-.784.764-2.301l3.437-9.99h2.556v14.357h-1.831V81.25l-4.172 12.016h-1.714l-4.152-12.222v12.222h-1.832" font-weight="400" font-size="8.441" font-family="DejaVu Sans Mono" fill="@{subtext1}"/></svg>'
);
background: url("data:image/svg+xml,@{svg}") !important;
background-size: 190px 40px !important;
Expand Down
Loading

0 comments on commit 051354a

Please sign in to comment.