Rainbow Matching Pairs for JavaScript's styled-components Library

[LSleutsky]

Describe the bug

The color pairs seem completely randomized and do not follow any kind of scheme or flow when being used with the styled-components library. For example, defining style rules using styled-components, you can do something like this:

background: ${({ destructuredProp }) => destructuredProp ? `red` : `blue`}

And when declaring rules like this, each { } and ( ) are different colors, and do not match the corresponding opening-closing pairs, at all.

I don't suppose there is some kind of config or hack around this issue?

Steps to reproduce

Simple declare a styled-components rule with using props and destructuring to set some kind of CSS rule, and observe each of the brackets/parentheses not matching.

import styled from 'styled-components';

const Panel = styled.main`
  color: ${({ destructuredColorProp }) => destructuredColorProp ? `black` : `grey`};
  margin: ${props => props.marginProp && `20px`};
`;

In the above snippet, both the brackets/parentheses for color and margin do not match pairs whatsoever. Each {, }, (, ) are all different colors. In the color rule, for example, the opening { following the $ is the same color as the first opening (, but the closing pairs do not match the opening ones, but the closing } and ) are the same color as one another.

Here is a image snippet of my live code:

You can see what I mean about the opening and closing pairs not matching each other.

Expected behavior

For the opening and closing brackets/parentheses color pairs to match each other, and not randomize.

Screenshots

See attached screenshot above.

[p00f]

Yikes, that is bad. What happens if you revert to https://github.com/p00f/nvim-ts-rainbow/commit/1ec3f880585c644ddd50a51502c59f4e36f03e62 ?

[p00f]

The filetype is javascript right? Playground says there is a syntax error in that snippet

[LSleutsky]

Hey, thanks for the quick reply!

So reverting back to the commit you mentioned did not change anything. As far as the playground you're referring to saying there's a syntax error, maybe it's not reading the external library correctly?

I can assure you there are no syntax errors in that code, the same structure is used thousands of times in the app I work on.

Do you think if I define a list of colors to use in the rainbow config, that would help? Like limiting to 4 colors or so? It's not ideal, but I'll give that a try soon and see if it helps.

Unless you might have any other ideas?

[p00f]

https://github.com/p00f/nvim-ts-rainbow#colours

[LSleutsky]

Ok cool, thanks! I'll give that a try and see what I can come up with there. Thanks for the help! Feel free to close this issue if needed.