diff --git a/src/webpage/utils/cssMagic.ts b/src/webpage/utils/cssMagic.ts new file mode 100644 index 0000000..512d586 --- /dev/null +++ b/src/webpage/utils/cssMagic.ts @@ -0,0 +1,114 @@ +export function unnest(str: string, check = true) { + if (check && CSS.supports("selector(&)")) { + //no need to unnest if it's supported lol + return str; + } + let specificity: string[] = []; + let buildStr = str.split("\n"); + const rules: string[] = []; + let last = false; + let prop = false; + let conbuild = ""; + let ani = 0; + function append(str: string, line = rules.length - 1) { + let build = specificity[line] || ""; + build += str; + specificity[line] = build; + } + for (const uline of buildStr) { + const line = uline + .trim() + .split("//")[0] + .replace(/\/\*.*\*\//gm, "") + .trim(); + if (ani) { + conbuild += "\n" + uline; + if (line.includes("{")) { + ani++; + } + if (line.includes("}")) { + ani--; + } + if (!ani) { + append(conbuild, 1); + console.log(conbuild); + conbuild = ""; + } + + continue; + } + if (prop) { + conbuild += line + "\n"; + + if (line.endsWith(";")) { + append(conbuild); + prop = false; + conbuild = ""; + } + continue; + } + if (line.endsWith(",")) { + conbuild += line; + console.log(conbuild, line); + } else if (line.endsWith("{") && line.startsWith("@keyframes")) { + conbuild = uline; + ani++; + } else if (line.endsWith("{")) { + let rule = conbuild + line.slice(0, line.length - 1).trim(); + conbuild = ""; + if (rule.startsWith("&")) { + rule = rule.slice(1, line.length); + } else { + rule = " " + rule; + } + if (last) append("}\n"); + rules.push(rule); + + last = true; + append(rules.join("") + "{\n"); + } else if (line === "}") { + if (last) append("}\n"); + rules.pop(); + + if (rules.length) { + append(rules.join("") + "{\n"); + } else { + last = false; + } + } else if (line.includes(":")) { + if (line.endsWith(";")) { + append(line); + } else { + console.warn(line); + prop = true; + conbuild = ""; + conbuild += line + "\n"; + } + } + } + if (last) alert("huh"); + console.log(specificity); + return specificity.join("\n"); +} +export function fix() { + if (!CSS.supports("selector(&)")) { + fetch("/style.css") + .then((_) => _.text()) + .then((txt) => { + const link = Array.from(document.getElementsByTagName("link")).find((_) => + _.href.endsWith("/style.css"), + ); + if (!link) { + alert("link not found"); + return; + } + const css = unnest(txt); + console.log(css); + + const style = document.createElement("style"); + style.textContent = css; + link.after(style); + link.remove(); + }); + } +} diff --git a/src/webpage/utils/utils.ts b/src/webpage/utils/utils.ts index 4befdee..d792f6f 100644 --- a/src/webpage/utils/utils.ts +++ b/src/webpage/utils/utils.ts @@ -1,6 +1,8 @@ import {I18n} from "../i18n.js"; import {MarkDown} from "../markdown.js"; import {Dialog} from "../settings.js"; +import {fix} from "./cssMagic.js"; +fix(); let instances: | { name: string;