feat: Change colors properties TSX file.

[krausediego]

Problem description

• Difference in colors of properties and tags in .js to .tsx files

Proposed solution

• Removed the declaration of .tsx files, to have a greater contrast in the ownership of JSX tags.

Evidence with PR's suggestion.

Full discussion here.

• Same colors #1

[wellwelwel]

Thanks, @krausediego!

Based on your example in #1 (comment), the appropriate approach is for .js and .ts files to also support colors for JSX tags and its properties (className, for example), rather than removing support for .jsx and tsx.

Ideally, they should be displayed in the same colors as your first example:

[krausediego]

Maybe I expressed myself badly in the issue, but the idea was to leave it the same as the PR print, with greater contrast from the tag to the properties.

Do you still think my argument makes sense?

[wellwelwel]

I can take a closer look tomorrow, debugging the properties. But, in theory, I suppose it's something like (or a similar approach):

• punctuation.definition.tag.begin.jsx -> punctuation.definition.tag.begin.js
• punctuation.definition.tag.begin.tsx -> punctuation.definition.tag.begin.ts

Glad you chose a project I like so much for your first contribution to open source 🤝

[wellwelwel]

Maybe I expressed myself badly in the issue, but the idea was to leave it the same as the PR print, with greater contrast from the tag to the properties.

The purple colors are reserved for keywords, such as functions, if conditions, return, etc. Properties such as className are equivalent to object's fields in JSX syntax.

Check out this playground from Babel of how it compiles from JSX syntax to JavaScript syntax.

[wellwelwel]

@krausediego, are you interested in continuing this PR? I tried that today. To support JSX sintax in .js files, we can just duplicate all .jsx$ scopes to .js$.

For example, we can search for all .jsx end scopes, then:

• GIF Image.

Note

I understand the contrast point, but it would require a critical breaking change in the design philosophy (by changing all properties to purple as they were keywords and show them all in the same as if they were equivalent).

This would also require changing the structure for all languages.