From 2e5d27b6b63097e96e25819df7a8cdd667c521b3 Mon Sep 17 00:00:00 2001 From: Ven Date: Sun, 25 Dec 2022 20:47:35 +0100 Subject: feat: Proper CSS api & css bundle (#269) Co-authored-by: Vap0r1ze --- src/plugins/shikiCodeblocks/components/Header.tsx | 2 +- src/plugins/shikiCodeblocks/components/Highlighter.tsx | 6 +----- src/plugins/shikiCodeblocks/devicon.css | 1 + src/plugins/shikiCodeblocks/index.ts | 17 +++++++++-------- src/plugins/shikiCodeblocks/shiki.css | 4 +--- src/plugins/shikiCodeblocks/utils/misc.ts | 3 ++- 6 files changed, 15 insertions(+), 18 deletions(-) create mode 100644 src/plugins/shikiCodeblocks/devicon.css (limited to 'src/plugins/shikiCodeblocks') diff --git a/src/plugins/shikiCodeblocks/components/Header.tsx b/src/plugins/shikiCodeblocks/components/Header.tsx index c2db386..320dde9 100644 --- a/src/plugins/shikiCodeblocks/components/Header.tsx +++ b/src/plugins/shikiCodeblocks/components/Header.tsx @@ -33,7 +33,7 @@ export function Header({ langName, useDevIcon, shikiLang }: HeaderProps) {
{useDevIcon !== DeviconSetting.Disabled && shikiLang?.devicon && ( )} {langName} diff --git a/src/plugins/shikiCodeblocks/components/Highlighter.tsx b/src/plugins/shikiCodeblocks/components/Highlighter.tsx index d26cd81..badb3c8 100644 --- a/src/plugins/shikiCodeblocks/components/Highlighter.tsx +++ b/src/plugins/shikiCodeblocks/components/Highlighter.tsx @@ -90,14 +90,10 @@ export const Highlighter = ({ let langName; if (lang) langName = useHljs ? hljs?.getLanguage?.(lang)?.name : shikiLang?.name; - const preClasses = [cl("root")]; - if (!langName) preClasses.push(cl("plain")); - if (isPreview) preClasses.push(cl("preview")); - return (
. */ +import "./shiki.css"; + +import { disableStyle, enableStyle } from "@api/Styles"; import { Devs } from "@utils/constants"; import { parseUrl } from "@utils/misc"; import { wordsFromPascal, wordsToTitle } from "@utils/text"; import definePlugin, { OptionType } from "@utils/types"; import previewExampleText from "~fileContent/previewExample.tsx"; -import cssText from "~fileContent/shiki.css"; import { Settings } from "../../Vencord"; import { shiki } from "./api/shiki"; import { themes } from "./api/themes"; import { createHighlighter } from "./components/Highlighter"; -import { DeviconSetting, HljsSetting, ShikiSettings, StyleSheets } from "./types"; -import { clearStyles, removeStyle, setStyle } from "./utils/createStyle"; +import deviconStyle from "./devicon.css?managed"; +import { DeviconSetting, HljsSetting, ShikiSettings } from "./types"; +import { clearStyles } from "./utils/createStyle"; const themeNames = Object.keys(themes); -const devIconCss = "@import url('https://cdn.jsdelivr.net/gh/devicons/devicon@v2.10.1/devicon.min.css');"; const getSettings = () => Settings.plugins.ShikiCodeblocks as ShikiSettings; @@ -50,9 +52,8 @@ export default definePlugin({ }, ], start: async () => { - setStyle(cssText, StyleSheets.Main); if (getSettings().useDevIcon !== DeviconSetting.Disabled) - setStyle(devIconCss, StyleSheets.DevIcons); + enableStyle(deviconStyle); await shiki.init(getSettings().customTheme || getSettings().theme); }, @@ -135,8 +136,8 @@ export default definePlugin({ }, ], onChange: (newValue: DeviconSetting) => { - if (newValue === DeviconSetting.Disabled) removeStyle(StyleSheets.DevIcons); - else setStyle(devIconCss, StyleSheets.DevIcons); + if (newValue === DeviconSetting.Disabled) disableStyle(deviconStyle); + else enableStyle(deviconStyle); }, }, bgOpacity: { diff --git a/src/plugins/shikiCodeblocks/shiki.css b/src/plugins/shikiCodeblocks/shiki.css index b871d99..d71b673 100644 --- a/src/plugins/shikiCodeblocks/shiki.css +++ b/src/plugins/shikiCodeblocks/shiki.css @@ -1,6 +1,5 @@ .shiki-container { border: 4px; - /* fallback background */ background-color: var(--background-secondary); } @@ -22,8 +21,7 @@ border: none; } -.shiki-root [class^='devicon-'], -.shiki-root [class*=' devicon-'] { +.shiki-devicon { margin-right: 8px; user-select: none; } diff --git a/src/plugins/shikiCodeblocks/utils/misc.ts b/src/plugins/shikiCodeblocks/utils/misc.ts index 1342ff5..fefe938 100644 --- a/src/plugins/shikiCodeblocks/utils/misc.ts +++ b/src/plugins/shikiCodeblocks/utils/misc.ts @@ -16,13 +16,14 @@ * along with this program. If not, see . */ +import { classNameFactory } from "@api/Styles"; import { hljs } from "@webpack/common"; import { resolveLang } from "../api/languages"; import { HighlighterProps } from "../components/Highlighter"; import { HljsSetting, ShikiSettings } from "../types"; -export const cl = (className: string) => `shiki-${className}`; +export const cl = classNameFactory("shiki-"); export const shouldUseHljs = ({ lang, -- cgit