Skip to content

Commit ac58a85

Browse files
antfuantfu
committed
fix(shiki): only apply light-dark on colors, close #1036 
1 parent a12f7e7 commit ac58a85

5 files changed

Lines changed: 162 additions & 11 deletions

File tree

‎packages/core/src/utils/_constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export const DEFAULT_COLOR_LIGHT_DARK = 'light-dark()'
2+
export const COLOR_KEYS = ['color', 'background-color']

‎packages/core/src/utils/tokens.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { CodeOptionsMultipleThemes, ThemedToken, ThemedTokenWithVariants, TokenStyles } from '@shikijs/types'
22
import { ShikiError } from '@shikijs/types'
33
import { FontStyle } from '@shikijs/vscode-textmate'
4-
import { DEFAULT_COLOR_LIGHT_DARK } from './_constants'
4+
import { COLOR_KEYS, DEFAULT_COLOR_LIGHT_DARK } from './_constants'
55

66
/**
77
* Split a token into multiple tokens by given offsets.
@@ -98,7 +98,7 @@ export function flatTokenVariants(
9898
for (const key of styleKeys) {
9999
const value = cur[key] || 'inherit'
100100

101-
if (idx === 0 && defaultColor) {
101+
if (idx === 0 && defaultColor && COLOR_KEYS.includes(key)) {
102102
// light-dark()
103103
if (defaultColor === DEFAULT_COLOR_LIGHT_DARK && styles.length > 1) {
104104
const lightIndex = variantsOrder.findIndex(t => t === 'light')
@@ -108,7 +108,6 @@ export function flatTokenVariants(
108108
const lightValue = styles[lightIndex][key] || 'inherit'
109109
const darkValue = styles[darkIndex][key] || 'inherit'
110110
mergedStyles[key] = `light-dark(${lightValue}, ${darkValue})`
111-
112111
if (colorsRendering === 'css-vars')
113112
mergedStyles[varKey(idx, key)] = value
114113
}

‎packages/core/test/__snapshots__/tokens.test.ts.snap‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -422,6 +422,128 @@ exports[`defaultColor light-dark() > defaultColor light-dark() with multiple the
422422
}
423423
`;
424424

425+
exports[`defaultColor light-dark() > with font style > css-vars 1`] = `
426+
{
427+
"bg": "--shiki-light-bg:#282A36;--shiki-dark-bg:#282A36",
428+
"fg": "--shiki-light:#F8F8F2;--shiki-dark:#f6f6f4",
429+
"grammarState": {
430+
"lang": "markdown",
431+
"scopes": [
432+
"meta.paragraph.markdown",
433+
"text.html.markdown",
434+
],
435+
"theme": "dracula",
436+
"themes": [
437+
"dracula",
438+
"dracula-soft",
439+
],
440+
},
441+
"rootStyle": "--shiki-light:#F8F8F2;--shiki-dark:#f6f6f4;--shiki-light-bg:#282A36;--shiki-dark-bg:#282A36",
442+
"themeName": "shiki-themes dracula dracula-soft",
443+
"tokens": [
444+
[
445+
{
446+
"content": "text ",
447+
"explanation": undefined,
448+
"htmlStyle": {
449+
"--shiki-dark": "#F6F6F4",
450+
"--shiki-light": "#F8F8F2",
451+
},
452+
"offset": 0,
453+
},
454+
{
455+
"content": "*italic*",
456+
"explanation": undefined,
457+
"htmlStyle": {
458+
"--shiki-dark": "#E7EE98",
459+
"--shiki-dark-font-style": "italic",
460+
"--shiki-light": "#F1FA8C",
461+
"--shiki-light-font-style": "italic",
462+
},
463+
"offset": 5,
464+
},
465+
{
466+
"content": " ",
467+
"explanation": undefined,
468+
"htmlStyle": {
469+
"--shiki-dark": "#F6F6F4",
470+
"--shiki-light": "#F8F8F2",
471+
},
472+
"offset": 13,
473+
},
474+
{
475+
"content": "**bold**",
476+
"explanation": undefined,
477+
"htmlStyle": {
478+
"--shiki-dark": "#FFB86C",
479+
"--shiki-dark-font-weight": "bold",
480+
"--shiki-light": "#FFB86C",
481+
"--shiki-light-font-weight": "bold",
482+
},
483+
"offset": 14,
484+
},
485+
],
486+
],
487+
}
488+
`;
489+
490+
exports[`defaultColor light-dark() > with font style > light-dark() 1`] = `
491+
{
492+
"bg": "light-dark(#282A36, #282A36);--shiki-light-bg:#282A36",
493+
"fg": "light-dark(#F8F8F2, #f6f6f4);--shiki-light:#F8F8F2",
494+
"grammarState": {
495+
"lang": "markdown",
496+
"scopes": [
497+
"meta.paragraph.markdown",
498+
"text.html.markdown",
499+
],
500+
"theme": "dracula",
501+
"themes": [
502+
"dracula",
503+
"dracula-soft",
504+
],
505+
},
506+
"rootStyle": undefined,
507+
"themeName": "shiki-themes dracula dracula-soft",
508+
"tokens": [
509+
[
510+
{
511+
"content": "text ",
512+
"explanation": undefined,
513+
"htmlStyle": {
514+
"color": "light-dark(#F8F8F2, #F6F6F4)",
515+
},
516+
"offset": 0,
517+
},
518+
{
519+
"content": "*italic*",
520+
"explanation": undefined,
521+
"htmlStyle": {
522+
"color": "light-dark(#F1FA8C, #E7EE98)",
523+
},
524+
"offset": 5,
525+
},
526+
{
527+
"content": " ",
528+
"explanation": undefined,
529+
"htmlStyle": {
530+
"color": "light-dark(#F8F8F2, #F6F6F4)",
531+
},
532+
"offset": 13,
533+
},
534+
{
535+
"content": "**bold**",
536+
"explanation": undefined,
537+
"htmlStyle": {
538+
"color": "light-dark(#FFB86C, #FFB86C)",
539+
},
540+
"offset": 14,
541+
},
542+
],
543+
],
544+
}
545+
`;
546+
425547
exports[`includeExplanation > false 1`] = `
426548
[
427549
[

‎packages/core/test/tokens.test.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,35 @@ describe('defaultColor light-dark()', () => {
5252
expect(caseLightDark).toMatchSnapshot('light-dark()')
5353
})
5454

55+
it('with font style', async () => {
56+
using engine = await createShikiInternal({
57+
themes: [
58+
import('@shikijs/themes/dracula'),
59+
import('@shikijs/themes/dracula-soft'),
60+
],
61+
langs: [
62+
import('@shikijs/langs/markdown'),
63+
],
64+
engine: createJavaScriptRegexEngine(),
65+
})
66+
67+
const code = 'text *italic* **bold**'
68+
const caseCssVars = codeToTokens(engine, code, {
69+
lang: 'md',
70+
themes: { light: 'dracula', dark: 'dracula-soft' },
71+
defaultColor: false,
72+
})
73+
const caseLightDark = codeToTokens(engine, code, {
74+
lang: 'md',
75+
themes: { light: 'dracula', dark: 'dracula-soft' },
76+
defaultColor: 'light-dark()',
77+
colorsRendering: 'none',
78+
})
79+
80+
expect(caseCssVars).toMatchSnapshot('css-vars')
81+
expect(caseLightDark).toMatchSnapshot('light-dark()')
82+
})
83+
5584
it('defaultColor light-dark() with multiple themes', async () => {
5685
using engine = await createShikiInternal({
5786
themes: [

‎packages/types/src/options.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -129,14 +129,14 @@ export interface CodeOptionsMultipleThemes<Themes extends string = string> {
129129
cssVariablePrefix?: string
130130
}
131131

132-
export type CodeOptionsThemes<Themes extends string = string> =
133-
| CodeOptionsSingleTheme<Themes>
134-
| CodeOptionsMultipleThemes<Themes>
135-
136-
export type CodeToHastOptions<Languages extends string = string, Themes extends string = string> =
137-
& CodeToHastOptionsCommon<Languages>
138-
& CodeOptionsThemes<Themes>
139-
& CodeOptionsMeta
132+
export type CodeOptionsThemes<Themes extends string = string>
133+
= | CodeOptionsSingleTheme<Themes>
134+
| CodeOptionsMultipleThemes<Themes>
135+
136+
export type CodeToHastOptions<Languages extends string = string, Themes extends string = string>
137+
= & CodeToHastOptionsCommon<Languages>
138+
& CodeOptionsThemes<Themes>
139+
& CodeOptionsMeta
140140

141141
export interface CodeToHastOptionsCommon<Languages extends string = string>
142142
extends

0 commit comments

Comments
 (0)