<Code /> component theme "css-variables" incorrectly typed

[Ehesp]

Astro Info

Astro                    v4.2.6
Node                     v20.11.0
System                   macOS (arm64)
Package Manager          unknown
Output                   server
Adapter                  @astrojs/cloudflare
Integrations             @astrojs/tailwind
                         @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

N/A

Describe the Bug

The following code throws a TypeScript error: Type '"css-variables"' is not assignable to type 'BundledTheme | ThemeRegistration | ThemeRegistrationRaw | undefined'.ts(2322)

<Code theme="css-variables" />

This is a valid theme from Shiki, and the outcome is it works as expected (and expects some defined css variables).

What's the expected result?

No TS error.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-uhurkz?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[bluwy]

Ahh we should probably use this type:

astro/packages/markdown/remark/src/types.ts

Line 36 in 6bf102a

export type ThemePresets = BuiltinTheme | 'css-variables';

Here instead:

astro/packages/astro/components/Code.astro

Line 31 in 6bf102a

theme?: BuiltinTheme | ThemeRegistration | ThemeRegistrationRaw;

astro/packages/astro/components/Code.astro

Line 36 in 6bf102a

experimentalThemes?: Record<string, BuiltinTheme | ThemeRegistration | ThemeRegistrationRaw>;

ThemePresets replaces BuiltinTheme