feat: resiliency against bad usercss
This commit is contained in:
parent
723191ba9b
commit
9a23571b3e
|
@ -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}
|
||||||
|
|
|
@ -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));
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
2
src/utils/themes/usercss/usercss-meta.d.ts
vendored
2
src/utils/themes/usercss/usercss-meta.d.ts
vendored
|
@ -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; }[]; };
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue