p00f / nvim-ts-rainbow

Rainbow parentheses for neovim using tree-sitter. Use https://sr.ht/~p00f/nvim-ts-rainbow instead
Apache License 2.0
869 stars 67 forks source link

Avoid highlighting props in TSX and JSX tags #125

Closed Gelio closed 2 years ago

Gelio commented 2 years ago

Hey! Thanks for this awesome plugin!

After being annoyed with https://github.com/p00f/nvim-ts-rainbow/issues/118 for quite some time, I decided to take a stab at fixing it. I believe I arrived at an implementation that fixes the problem and avoids highlighting props in TSX and JSX tags. Only the tag names and the tag delimiters (<, >, </, and />) are highlighted.

As a bonus, I added support for highlighting self-closing elements. They are a separate treesitter node type that should be taken into account when computing the levels as well.

Verification

I've used the following TSX file:

import type { Component } from "solid-js";

import logo from "./logo.svg";
import styles from "./App.module.css";

const App: Component = () => {
  return (
    <div class={styles.App} data-comparison={1 < 2 && 1 > 2}>
      <header class={styles.header}>
        <img src={logo} width={5} class={styles.logo} alt="logo" />
        <div>
          Another <b>Level</b>
        </div>
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <div>
          Another{" "}
          <b>
            level{" "}
            <em>
              With some em{" "}
              <span data-comparison={1 < 2 && 1 > 2}>
                And another one {">"} aabc / abc
              </span>
              <img src="self-closing" />
              <span children={<span>Nested</span>} />
            </em>
          </b>{" "}
          of <b>components</b>
        </div>
        <a
          class={styles.link}
          href="https://github.com/solidjs/solid"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn Solid
        </a>
      </header>
    </div>
  );
};

export default App;

image

I didn't find any problems there at first glance.

Highlighting jsx files (javascriptreact)

During testing I noticed that JSX in jsx files (the ones with the jsx extension) is not highlighted the same way it is in tsx files. I reported https://github.com/p00f/nvim-ts-rainbow/issues/126 as it seems separate from the problem this PR solves

p00f commented 2 years ago

Thanks for the contribution!