feat: resiliency against bad usercss

This commit is contained in:
Lewis Crichton 2023-09-08 15:54:25 +01:00
parent 723191ba9b
commit 9a23571b3e
No known key found for this signature in database
5 changed files with 20 additions and 10 deletions

View file

@ -114,7 +114,7 @@ interface UserCSSCardProps {
function UserCSSThemeCard({ theme, enabled, onChange, onDelete }: UserCSSCardProps) { function UserCSSThemeCard({ theme, enabled, onChange, onDelete }: UserCSSCardProps) {
return ( return (
<AddonCard <AddonCard
name={theme.name} name={theme.name ?? "Unknown"}
description={theme.description} description={theme.description}
author={theme.author ?? "Unknown"} author={theme.author ?? "Unknown"}
enabled={enabled} enabled={enabled}

View file

@ -17,6 +17,7 @@
*/ */
import { addSettingsListener, Settings } from "@api/Settings"; import { addSettingsListener, Settings } from "@api/Settings";
import { Toasts } from "@webpack/common";
import { compileUsercss } from "./themes/usercss/compiler"; import { compileUsercss } from "./themes/usercss/compiler";
@ -70,7 +71,18 @@ async function initThemes() {
for (const theme of enabledThemes) if (theme.endsWith(".user.css")) { for (const theme of enabledThemes) if (theme.endsWith(".user.css")) {
// UserCSS goes through a compile step first // UserCSS goes through a compile step first
const css = await compileUsercss(theme); const css = await compileUsercss(theme);
if (!css) continue; // something went wrong during the compile step... if (!css) {
// let's not leave the user in the dark about this and point them to where they can find the error
Toasts.show({
message: `Failed to compile ${theme}, check the console for more info.`,
type: Toasts.Type.FAILURE,
id: Toasts.genId(),
options: {
position: Toasts.Position.BOTTOM
}
});
continue;
}
const blob = new Blob([css], { type: "text/css" }); const blob = new Blob([css], { type: "text/css" });
links.push(URL.createObjectURL(blob)); links.push(URL.createObjectURL(blob));

View file

@ -58,18 +58,16 @@ export async function compileUsercss(fileName: string) {
const themeData = await VencordNative.themes.getThemeData(fileName); const themeData = await VencordNative.themes.getThemeData(fileName);
if (!themeData) return null; if (!themeData) return null;
const { preprocessor: definedPreprocessor, vars } = usercssParse(themeData, fileName);
// UserCSS preprocessor order look like this: // UserCSS preprocessor order look like this:
// - use the preprocessor defined // - use the preprocessor defined
// - if variables are set, `uso` // - if variables are set, `uso`
// - otherwise, `default` // - otherwise, `default`
const usedPreprocessor = definedPreprocessor ?? (Object.keys(vars).length > 0 ? "uso" : "default"); const { vars = {}, preprocessor = Object.keys(vars).length > 0 ? "uso" : "default" } = usercssParse(themeData, fileName);
const preprocessorFn = preprocessors[usedPreprocessor]; const preprocessorFn = preprocessors[preprocessor];
if (!preprocessorFn) { if (!preprocessorFn) {
UserCSSLogger.error("File", fileName, "requires preprocessor", usedPreprocessor, "which isn't known to Vencord"); UserCSSLogger.error("File", fileName, "requires preprocessor", preprocessor, "which isn't known to Vencord");
return null; return null;
} }
@ -82,7 +80,7 @@ export async function compileUsercss(fileName: string) {
try { try {
return await preprocessorFn(themeData, varsToPass); return await preprocessorFn(themeData, varsToPass);
} catch (error) { } catch (error) {
UserCSSLogger.error("File", fileName, "failed to compile with preprocessor", usedPreprocessor, error); UserCSSLogger.error("File", fileName, "failed to compile with preprocessor", preprocessor, error);
return null; return null;
} }
} }

View file

@ -10,7 +10,7 @@ import { parse as originalParse, UserstyleHeader } from "usercss-meta";
const UserCSSLogger = new Logger("UserCSS", "#d2acf5"); const UserCSSLogger = new Logger("UserCSS", "#d2acf5");
export function parse(text: string, fileName: string): UserstyleHeader { export function parse(text: string, fileName: string): UserstyleHeader {
const { metadata, errors } = originalParse(text.replace(/\r/g, "")); var { metadata, errors } = originalParse(text.replace(/\r/g, ""), { allowErrors: true });
if (errors.length) { if (errors.length) {
UserCSSLogger.warn("Parsed", fileName, "with errors:", errors); UserCSSLogger.warn("Parsed", fileName, "with errors:", errors);

View file

@ -102,5 +102,5 @@ declare module "usercss-meta" {
vars: Record<string, UserCSSVariable>; vars: Record<string, UserCSSVariable>;
} }
export function parse(text: string): { metadata: UserstyleHeader; errors: { code: string; args: any; }[] }; export function parse(text: string, options: { allowErrors: boolean; }): { metadata: UserstyleHeader; errors: { code: string; args: any; }[]; };
} }