Inconsistent highlight!

[H4ckint0sh]

I have used this config some time without issues but now I get very strange highlighting with many colors, i also have tested other configurations and I dont have this problem. I have also tested other themes and it seems all of them have the same problem in this config. In the pic below and should be in same color.

System: MacOS Ventura Terminal: Alacritty Neovim: 8.3

[ecosse3]

Could you give some file sample with code that has issues? Make sure to update to the latest Neovim Nightly (0.9.0) or tok yonight theme cause it's introduced support for semantic tokens for highlighting code. It can be the issue. If you don't want to use nightly make sure to use a specific branch of tokyonight color scheme. I don't have this issue.

[H4ckint0sh]

Here is the content of same file in the pic. I did update to HEAD build of Neovim via Brew but that did not fix the problem. Also as I mentioned this is not a problem specifically for tokyonight. It happens even with my own theme which is nor´t updated for semantic highlighting as well as every other theme I tried. (kanagawa, onedarkpro, ...)

/**
 * Button
 */

import Icon from 'components/Boilerplate/Icon';
import { IconNames } from 'components/Boilerplate/Icon/Icon';
import React from 'react';
import { StandardButton, LinkButton } from './Button.styles';
import { ButtonVariant, ButtonColors } from 'pages/sharedModelTypes';

export interface ButtonProps {
    type?: 'submit' | 'button' | 'reset';
    variant?: ButtonVariant;
    color?: ButtonColors;
    fill?: boolean;
    iconName?: IconNames;
    iconColor?: string;
    iconPosition?: number;
    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    className?: any;
    tabIndex?: number;
    children?: any;
    disabled?: boolean;
    to?: string;
    directDownload?: boolean;
    showLinkIcon?: boolean;
}

export type PlayIconProps = {
    hover: boolean;
};

//  size?: 'large' | 'medium' | 'small';

/** A button / link component. */
const Button = React.forwardRef<any, ButtonProps>(
    (
        {
            variant = ButtonVariant.Primary,
            color,
            to,
            fill,
            type = 'button',
            onClick,
            tabIndex,
            children,
            iconName,
            iconColor,
            iconPosition = 0,
            className,
            disabled,
            showLinkIcon,
            directDownload,
            ...propsToTransfer
        },
        ref
    ) => {
        let content;
        if (iconName) {
            if (iconPosition === 0) {
                content = (
                    <>
                        <Icon color={iconColor} size={2} icon={iconName} />
                        {children && <span>{children}</span>}
                    </>
                );
            } else {
                content = (
                    <>
                        {children && <span>{children}</span>}
                        <Icon color={iconColor} size={2} icon={iconName} />
                    </>
                );
            }
        } else {
            content = <span>{children}</span>;
        }

        if (to) {
            return (
                <LinkButton
                    ref={ref}
                    tabIndex={tabIndex}
                    variant={variant}
                    $fill={fill}
                    to={to}
                    $color={color}
                    showLinkIcon={showLinkIcon}
                    download={directDownload}
                    {...propsToTransfer}
                >
                    {content}
                </LinkButton>
            );
        }
        return (
            <StandardButton
                ref={ref}
                className={className}
                onClick={onClick}
                variant={variant}
                $fill={fill}
                $color={color}
                tabIndex={tabIndex}
                disabled={disabled}
                {...propsToTransfer}
            >
                {content}
            </StandardButton>
        );
    }
);

export default Button;

[ecosse3]

@H4ckint0sh I see what's the problem now. The different tag colors are on purpose here and that's the result of mrjones2014/nvim-ts-rainbow plugin and extended_mode option. I may update it for HiPhish/nvim-ts-rainbow2 since it looks like a more updated version, but I would like to keep the extended_mode on. It helps a lot to difference JSX/HTML tags where there are more of them together and nested. You can disable this option and it should fix your issue.

The option is located in lua/plugins/treesitter.lua.

[H4ckint0sh]

@ecosse3 Thank you, that fixed the problem.