@shikijs/core 3.5.0 → 3.6.0

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { CreatedBundledHighlighterOptions, CreateHighlighterFactory, CodeToHastOptions, CodeToTokensOptions, TokensResult, RequireKeys, CodeToTokensBaseOptions, ThemedToken, CodeToTokensWithThemesOptions, ThemedTokenWithVariants, BundledHighlighterOptions, HighlighterGeneric, GrammarState, Awaitable, HighlighterCoreOptions, HighlighterCore, ShikiInternal, ShikiTransformerContextCommon, CodeToHastRenderOptions, ShikiTransformerContextSource, ThemeRegistrationResolved, TokenizeWithThemeOptions, Grammar, ThemeRegistrationAny, ThemeRegistration, ShikiTransformer, MaybeArray, MaybeGetter, PlainTextLanguage, SpecialLanguage, ThemeInput, SpecialTheme, Position, TokenStyles } from '@shikijs/types';
+import { CreatedBundledHighlighterOptions, CreateHighlighterFactory, CodeToHastOptions, CodeToTokensOptions, TokensResult, RequireKeys, CodeToTokensBaseOptions, ThemedToken, CodeToTokensWithThemesOptions, ThemedTokenWithVariants, BundledHighlighterOptions, HighlighterGeneric, GrammarState, Awaitable, HighlighterCoreOptions, HighlighterCore, ShikiInternal, ShikiTransformerContextCommon, CodeToHastRenderOptions, ShikiTransformerContextSource, ThemeRegistrationResolved, TokenizeWithThemeOptions, Grammar, ThemeRegistrationAny, ThemeRegistration, ShikiTransformer, MaybeArray, MaybeGetter, PlainTextLanguage, SpecialLanguage, ThemeInput, SpecialTheme, Position, CodeOptionsMultipleThemes, TokenStyles } from '@shikijs/types';
 export * from '@shikijs/types';
 import { Root, Element } from 'hast';
 import { toHtml } from 'hast-util-to-html';
@@ -254,7 +254,7 @@ declare function splitToken<T extends Pick<ThemedToken, 'content' | 'offset'>>(t
  * Split 2D tokens array by given breakpoints.
  */
 declare function splitTokens<T extends Pick<ThemedToken, 'content' | 'offset'>>(tokens: T[][], breakpoints: number[] | Set<number>): T[][];
-declare function flatTokenVariants(merged: ThemedTokenWithVariants, variantsOrder: string[], cssVariablePrefix: string, defaultColor: string | boolean | 'light-dark()'): ThemedToken;
+declare function flatTokenVariants(merged: ThemedTokenWithVariants, variantsOrder: string[], cssVariablePrefix: string, defaultColor: CodeOptionsMultipleThemes['defaultColor'], colorsRendering?: CodeOptionsMultipleThemes['colorsRendering']): ThemedToken;
 declare function getTokenStyleObject(token: TokenStyles): Record<string, string>;
 declare function stringifyTokenStyle(token: string | Record<string, string>): string;
 

package/dist/index.mjs

@@ -154,7 +154,7 @@ function splitTokens(tokens, breakpoints) {
     });
   });
 }
-function flatTokenVariants(merged, variantsOrder, cssVariablePrefix, defaultColor) {
+function flatTokenVariants(merged, variantsOrder, cssVariablePrefix, defaultColor, colorsRendering = "css-vars") {
   const token = {
     content: merged.content,
     explanation: merged.explanation,
@@ -163,6 +163,10 @@ function flatTokenVariants(merged, variantsOrder, cssVariablePrefix, defaultColo
   const styles = variantsOrder.map((t) => getTokenStyleObject(merged.variants[t]));
   const styleKeys = new Set(styles.flatMap((t) => Object.keys(t)));
   const mergedStyles = {};
+  const varKey = (idx, key) => {
+    const keyName = key === "color" ? "" : key === "background-color" ? "-bg" : `-${key}`;
+    return cssVariablePrefix + variantsOrder[idx] + (key === "color" ? "" : keyName);
+  };
   styles.forEach((cur, idx) => {
     for (const key of styleKeys) {
       const value = cur[key] || "inherit";
@@ -175,16 +179,14 @@ function flatTokenVariants(merged, variantsOrder, cssVariablePrefix, defaultColo
           const lightValue = styles[lightIndex][key] || "inherit";
           const darkValue = styles[darkIndex][key] || "inherit";
           mergedStyles[key] = `light-dark(${lightValue}, ${darkValue})`;
-          const keyName = key === "color" ? "" : key === "background-color" ? "-bg" : `-${key}`;
-          const varKey = cssVariablePrefix + variantsOrder[idx] + (key === "color" ? "" : keyName);
-          mergedStyles[varKey] = value;
+          if (colorsRendering === "css-vars")
+            mergedStyles[varKey(idx, key)] = value;
         } else {
           mergedStyles[key] = value;
         }
       } else {
-        const keyName = key === "color" ? "" : key === "background-color" ? "-bg" : `-${key}`;
-        const varKey = cssVariablePrefix + variantsOrder[idx] + (key === "color" ? "" : keyName);
-        mergedStyles[varKey] = value;
+        if (colorsRendering === "css-vars")
+          mergedStyles[varKey(idx, key)] = value;
       }
     }
   });
@@ -1116,7 +1118,8 @@ function codeToTokens(internal, code, options) {
   if ("themes" in options) {
     const {
       defaultColor = "light",
-      cssVariablePrefix = "--shiki-"
+      cssVariablePrefix = "--shiki-",
+      colorsRendering = "css-vars"
     } = options;
     const themes = Object.entries(options.themes).filter((i) => i[1]).map((i) => ({ color: i[0], theme: i[1] })).sort((a, b) => a.color === defaultColor ? -1 : b.color === defaultColor ? 1 : 0);
     if (themes.length === 0)
@@ -1131,12 +1134,12 @@ function codeToTokens(internal, code, options) {
       throw new ShikiError$1(`\`themes\` option must contain the defaultColor key \`${defaultColor}\``);
     const themeRegs = themes.map((t) => internal.getTheme(t.theme));
     const themesOrder = themes.map((t) => t.color);
-    tokens = themeTokens.map((line) => line.map((token) => flatTokenVariants(token, themesOrder, cssVariablePrefix, defaultColor)));
+    tokens = themeTokens.map((line) => line.map((token) => flatTokenVariants(token, themesOrder, cssVariablePrefix, defaultColor, colorsRendering)));
     if (grammarState)
       setLastGrammarStateToMap(tokens, grammarState);
     const themeColorReplacements = themes.map((t) => resolveColorReplacements(t.theme, options));
-    fg = mapThemeColors(themes, themeRegs, themeColorReplacements, cssVariablePrefix, defaultColor, "fg");
-    bg = mapThemeColors(themes, themeRegs, themeColorReplacements, cssVariablePrefix, defaultColor, "bg");
+    fg = mapThemeColors(themes, themeRegs, themeColorReplacements, cssVariablePrefix, defaultColor, "fg", colorsRendering);
+    bg = mapThemeColors(themes, themeRegs, themeColorReplacements, cssVariablePrefix, defaultColor, "bg", colorsRendering);
     themeName = `shiki-themes ${themeRegs.map((t) => t.name).join(" ")}`;
     rootStyle = defaultColor ? void 0 : [fg, bg].join(";");
   } else if ("theme" in options) {
@@ -1163,7 +1166,7 @@ function codeToTokens(internal, code, options) {
     grammarState
   };
 }
-function mapThemeColors(themes, themeRegs, themeColorReplacements, cssVariablePrefix, defaultColor, property) {
+function mapThemeColors(themes, themeRegs, themeColorReplacements, cssVariablePrefix, defaultColor, property, colorsRendering) {
   return themes.map((t, idx) => {
     const value = applyColorReplacements(themeRegs[idx][property], themeColorReplacements[idx]) || "inherit";
     const cssVar = `${cssVariablePrefix + t.color}${property === "bg" ? "-bg" : ""}:${value}`;
@@ -1179,8 +1182,11 @@ function mapThemeColors(themes, themeRegs, themeColorReplacements, cssVariablePr
       }
       return value;
     }
-    return cssVar;
-  }).join(";");
+    if (colorsRendering === "css-vars") {
+      return cssVar;
+    }
+    return null;
+  }).filter((i) => !!i).join(";");
 }
 
 function codeToHast(internal, code, options, transformerContext = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shikijs/core",
   "type": "module",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Core of Shiki",
   "author": "Pine Wu <octref@gmail.com>; Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "@shikijs/vscode-textmate": "^10.0.2",
     "@types/hast": "^3.0.4",
     "hast-util-to-html": "^9.0.5",
-    "@shikijs/types": "3.5.0"
+    "@shikijs/types": "3.6.0"
   },
   "scripts": {
     "build": "unbuild",