Diff syntax highlighting doesn't work with css variables theme

[Samy Pessé]

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

When using the CSS variables theme (createCssVariablesTheme) with the diff language; the highlighting is not properly done and all spans are highlighted with --shiki-foreground.

Reproduction

Run the following code:

import { codeToHtml, createCssVariablesTheme } from 'shiki'

const code = '+ Hello\n- World\nRandom';
const html = await codeToHtml(code, {
  lang: 'diff',
  theme: createCssVariablesTheme()
})

console.log(html)

And observe the results being:

<pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0"><code><span class="line"><span style="color:var(--shiki-foreground)">+ Hello</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">- World</span></span>
<span class="line"><span style="color:var(--shiki-foreground)">Random</span></span></code></pre>

While if it's run with theme: 'vitesse-dark', the result is:

<pre class="shiki vitesse-dark" style="background-color:#121212;color:#dbd7caee" tabindex="0"><code><span class="line"><span style="color:#85E89D">+ Hello</span></span>
<span class="line"><span style="color:#FDAEB7">- World</span></span>
<span class="line"><span style="color:#DBD7CAEE">Random</span></span></code></pre>

I'll investigate more into the shiki codebase to understand the differences between the 2.

Reproduction

See code

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests