function updateDecorations()

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);
  }