Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-10 23:01:26 -05:00
Code Issues Activity

Update to new shiki token names (#11661)

Browse source 
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
This commit is contained in:
Bjorn Lu 2024-08-09 21:52:21 +08:00 • committed by GitHub
parent bbd8bfda92
commit 83a2a64841
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 13 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
.changeset/quick-ads-exercise.md Normal file
View file

@ -0,0 +1,10 @@
---
'@astrojs/markdown-remark': major
---
Renames the following CSS variables theme color token names to better align with the Shiki v1 defaults:
- `--astro-code-color-text` => `--astro-code-foreground`
- `--astro-code-color-background` => `--astro-code-background`
You can perform a global find and replace in your project to migrate to the new token names.

6
packages/astro/test/astro-component-code.test.js
View file

@ -88,12 +88,12 @@ describe('<Code>', () => {
.map((i, f) => (f.attribs ? f.attribs.style : 'no style found'))
.toArray(),
[
'background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;',
'background-color:var(--astro-code-background);color:var(--astro-code-foreground); overflow-x: auto;',
'color:var(--astro-code-token-constant)',
'color:var(--astro-code-token-function)',
'color:var(--astro-code-color-text)',
'color:var(--astro-code-foreground)',
'color:var(--astro-code-token-string-expression)',
'color:var(--astro-code-color-text)',
'color:var(--astro-code-foreground)',
]
);
});

30
packages/markdown/remark/src/shiki.ts
View file

@ -5,7 +5,6 @@ import {
getHighlighter,
isSpecialLang,
} from 'shiki';
import { visit } from 'unist-util-visit';
import type { ShikiConfig } from './types.js';
export interface ShikiHighlighter {
@ -23,16 +22,6 @@ export interface ShikiHighlighter {
): Promise<string>;
}
// TODO: Remove this special replacement in Astro 5
const ASTRO_COLOR_REPLACEMENTS: Record<string, string> = {
'--astro-code-foreground': '--astro-code-color-text',
'--astro-code-background': '--astro-code-color-background',
};
const COLOR_REPLACEMENT_REGEX = new RegExp(
`${Object.keys(ASTRO_COLOR_REPLACEMENTS).join('|')}`,
'g'
);
let _cssVariablesTheme: ReturnType<typeof createCssVariablesTheme>;
const cssVariablesTheme = () =>
_cssVariablesTheme ??
@ -145,21 +134,6 @@ export async function createShikiHighlighter({
return node.children[0] as typeof node;
}
},
root(node) {
if (Object.values(themes).length) {
return;
}
const themeName = typeof theme === 'string' ? theme : theme.name;
if (themeName === 'css-variables') {
// Replace special color tokens to CSS variables
visit(node as any, 'element', (child) => {
if (child.properties?.style) {
child.properties.style = replaceCssVariables(child.properties.style);
}
});
}
},
},
...transformers,
],
@ -171,7 +145,3 @@ export async function createShikiHighlighter({
function normalizePropAsString(value: Properties[string]): string | null {
return Array.isArray(value) ? value.join(' ') : (value as string | null);
}
function replaceCssVariables(str: string) {
return str.replace(COLOR_REPLACEMENT_REGEX, (match) => ASTRO_COLOR_REPLACEMENTS[match] || match);
}