@shikijs/core 3.4.2 → 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): 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

@@ -117,6 +117,8 @@ function guessEmbeddedLanguages(code, _lang, highlighter) {
   return Array.from(langs).filter((l) => l && bundle[l]);
 }
 
+const DEFAULT_COLOR_LIGHT_DARK = "light-dark()";
+
 function splitToken(token, offsets) {
   let lastOffset = 0;
   const tokens = [];
@@ -152,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,
@@ -161,15 +163,30 @@ 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";
       if (idx === 0 && defaultColor) {
-        mergedStyles[key] = value;
+        if (defaultColor === DEFAULT_COLOR_LIGHT_DARK && styles.length > 1) {
+          const lightIndex = variantsOrder.findIndex((t) => t === "light");
+          const darkIndex = variantsOrder.findIndex((t) => t === "dark");
+          if (lightIndex === -1 || darkIndex === -1)
+            throw new ShikiError$1('When using `defaultColor: "light-dark()"`, you must provide both `light` and `dark` themes');
+          const lightValue = styles[lightIndex][key] || "inherit";
+          const darkValue = styles[darkIndex][key] || "inherit";
+          mergedStyles[key] = `light-dark(${lightValue}, ${darkValue})`;
+          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;
       }
     }
   });
@@ -1101,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)
@@ -1112,16 +1130,16 @@ function codeToTokens(internal, code, options) {
       options
     );
     grammarState = getLastGrammarStateFromMap(themeTokens);
-    if (defaultColor && !themes.find((t) => t.color === defaultColor))
+    if (defaultColor && DEFAULT_COLOR_LIGHT_DARK !== defaultColor && !themes.find((t) => t.color === defaultColor))
       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 = themes.map((t, idx) => (idx === 0 && defaultColor ? "" : `${cssVariablePrefix + t.color}:`) + (applyColorReplacements(themeRegs[idx].fg, themeColorReplacements[idx]) || "inherit")).join(";");
-    bg = themes.map((t, idx) => (idx === 0 && defaultColor ? "" : `${cssVariablePrefix + t.color}-bg:`) + (applyColorReplacements(themeRegs[idx].bg, themeColorReplacements[idx]) || "inherit")).join(";");
+    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) {
@@ -1148,6 +1166,28 @@ function codeToTokens(internal, code, options) {
     grammarState
   };
 }
+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}`;
+    if (idx === 0 && defaultColor) {
+      if (defaultColor === DEFAULT_COLOR_LIGHT_DARK && themes.length > 1) {
+        const lightIndex = themes.findIndex((t2) => t2.color === "light");
+        const darkIndex = themes.findIndex((t2) => t2.color === "dark");
+        if (lightIndex === -1 || darkIndex === -1)
+          throw new ShikiError$1('When using `defaultColor: "light-dark()"`, you must provide both `light` and `dark` themes');
+        const lightValue = applyColorReplacements(themeRegs[lightIndex][property], themeColorReplacements[lightIndex]) || "inherit";
+        const darkValue = applyColorReplacements(themeRegs[darkIndex][property], themeColorReplacements[darkIndex]) || "inherit";
+        return `light-dark(${lightValue}, ${darkValue});${cssVar}`;
+      }
+      return value;
+    }
+    if (colorsRendering === "css-vars") {
+      return cssVar;
+    }
+    return null;
+  }).filter((i) => !!i).join(";");
+}
 
 function codeToHast(internal, code, options, transformerContext = {
   meta: {},
@@ -1395,8 +1435,8 @@ function mergeAdjacentStyledTokens(tokens) {
         continue;
       }
       const prevToken = newLine[newLine.length - 1];
-      const prevStyle = prevToken.htmlStyle || stringifyTokenStyle(getTokenStyleObject(prevToken));
-      const currentStyle = token.htmlStyle || stringifyTokenStyle(getTokenStyleObject(token));
+      const prevStyle = stringifyTokenStyle(prevToken.htmlStyle || getTokenStyleObject(prevToken));
+      const currentStyle = stringifyTokenStyle(token.htmlStyle || getTokenStyleObject(token));
       const isPrevDecorated = prevToken.fontStyle && (prevToken.fontStyle & FontStyle.Underline || prevToken.fontStyle & FontStyle.Strikethrough);
       const isDecorated = token.fontStyle && (token.fontStyle & FontStyle.Underline || token.fontStyle & FontStyle.Strikethrough);
       if (!isPrevDecorated && !isDecorated && prevStyle === currentStyle) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shikijs/core",
   "type": "module",
-  "version": "3.4.2",
+  "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.4.2"
+    "@shikijs/types": "3.6.0"
   },
   "scripts": {
     "build": "unbuild",