in packages/baseweb-vscode-extension/ext-src/coloring.ts [89:186]
function updateDecorations() {
if (!activeEditor) {
return;
}
// Unset all memoized decorations
// and clear the lists of decorations for every decoration type
undecorate(activeEditor);
// Handle theme props other than colors
// Clear the lists of decorations
// and unset all decorations
themePropsDecorationList = [];
activeEditor.setDecorations(emptyDecorationType, themePropsDecorationList);
const workspaceConfig = vscode.workspace.getConfiguration('baseweb');
// Get the coloring enabled/disabled setting
const isColoringOn = workspaceConfig.get('theme.coloring.enabled');
// If the coloring feature is set to false exit
if (!isColoringOn) {
return;
}
// Get the Theme choice setting
const themeMode = workspaceConfig.get('theme.coloring.source');
// Use the theme according to the current setting
const theme = themeMode === 'Light' ? LightTheme : DarkTheme;
// Get the coloring style setting
const coloringStyle: string = workspaceConfig.get('theme.coloring.style') || '';
// RegExp for finding `colors.[THEME_PROP]`
const regEx = /(^|\W)(colors\.)(\w+)/gm;
// Get the current active document's text
const text = activeEditor.document.getText();
let match;
// Find matches to decorate accordingly
while ((match = regEx.exec(text))) {
// @ts-ignore
const themeColorVal: string | undefined = theme.colors[match[3]];
// Do not decorate if the found color key is not present in the theme object
if (!themeColorVal) {
continue;
}
// It should never get to here if `!themeColorVal`
// but adding a default `transparent` to satisfy types
const colorVal: string = isAcceptedColorValue(themeColorVal) ? themeColorVal : 'transparent';
// Start position excluding the `colors.` part
const startPos = activeEditor.document.positionAt(
match.index + match[1].length + match[2].length
);
// End position of the match
const endPos = activeEditor.document.positionAt(match.index + match[0].length);
// Create decoration for the current match position
const decoration = {
range: new vscode.Range(startPos, endPos),
hoverMessage: `${colorVal} | ${themeMode}Theme`,
};
// Create and memoize a decoration type for the found color value
// or pull a memoized decoration type if not the first match
// for the color value and current coloring style setting
const memoizedDecorationType = getMemoizedDecorationType(coloringStyle, colorVal);
// Add the decoration for the current match to the list
memoizedDecorationType.decorations.push(decoration);
}
// Apply all memoized decorations
decorate(activeEditor);
// Handle theme props other than colors
// List of theme props we show hints for
const themeProps = ['animation', 'borders', 'breakpoints', 'lighting', 'sizing', 'typography'];
for (let i = 0; i < themeProps.length; i++) {
const regEx = new RegExp(`(\^|\\W)(${themeProps[i]}\\.)(\\w+)`, 'gm');
// Find matches to decorate accordingly
while ((match = regEx.exec(text))) {
// @ts-ignore
const themePropVal: any = theme[themeProps[i]][match[3]];
// Do not decorate if the found prop key is not present in the theme object
if (!themePropVal) {
continue;
}
// Start position excluding the `sizing.` part
const startPos = activeEditor.document.positionAt(
match.index + match[1].length + match[2].length
);
// End position of the match
const endPos = activeEditor.document.positionAt(match.index + match[0].length);
// Create decoration for the current match position
const decoration = {
range: new vscode.Range(startPos, endPos),
hoverMessage: `${JSON.stringify(themePropVal)} | ${themeMode}Theme`,
};
// Add the decoration for the current match to the list
themePropsDecorationList.push(decoration);
}
}
// Apply all decorations
activeEditor.setDecorations(emptyDecorationType, themePropsDecorationList);
}