Semantic highlighting changes colors of JSX tags

[vasilenka]

Version: 1.42.0-insider
Commit: fd13e44
Date: 2020-01-17T16:30:38.851Z
Electron: 7.1.7
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 19.0.0

Steps to Reproduce:

1. On a fresh-installed of VS code insiders, open a .js or .jsx file.
2. Watch carefully for some syntax colors changing after a few seconds.

Check this link for the demo: https://imgur.com/3CkhTIn
As seen on the demo, the syntax highlight on the <LatestBlog/> and <div> turned to plain color a few seconds after changing Color Theme.

Here's a snippet for testing purpose:

import React from 'react'

import Default from '../layouts/Default/Default'
import SEO from '../utils/seo'
import Intro from '../components/Intro/Intro'
import LatestBlog from '../components/LatestBlog/LatestBlog'

const Homepage = () => {
  return (
    <Default>
      <SEO
        lang="en"
        title="Home"
        author="Ongki Herlambang"
      />
      <Intro />
      <LatestBlog data={edges} />
      <div>
        Hello world!
      </div>
    </Default>
  )
}

export default Homepage

Does this issue occur when all extensions are disabled?: Yes

[IllusionMH]

Look like you need to change language from JavaScript to JavaScript React otherwise < are treated as regular less them operators.

Just add next file association to you User config or only to project using .vscode/settings.json

"files.associations": {
    "*.js": "javascriptreact"
}

[vasilenka]

@IllusionMH thank you, but still not working.

It's working just fine before with the default setup. So, unless there are some breaking changes on the latest update, I don't think we need to add additional settings just to work with JSX.

Also as you can see in my demo, the syntax highlight is working for a few seconds, but then the color changed.

[fmusayev]

Experiencing the same issue with JSX highlight

[bryonsigawin]

Version: 1.42.0-insider
Commit: fd13e44
Date: 2020-01-17T16:30:38.851Z
Electron: 7.1.7
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 18.7.0

Also experiencing the same issue, even with the javascriptreact file association.

[povilasbaranovas]

Experiencing the same issue. Colors unfortunately disappear after few seconds. Same version as above.

[IllusionMH]

/confirmed

After couple of reloads I was able to reproduce it too (even with TS@next) and in TSX files.
Looks like only class components are highlighted (same color as regular class names in other places).

May be related to #86390 ?

[codewithfeeling]

Confirming this issue. Quitting the app and reloading the file fixes it but only for a few seconds. Any saves break the syntax colouring.

[synoptase]

Confirmed. Incidentally, it seems to be working in the Source Control diff tab:

[mjbvz]

Likely caused by semantic highlighting. Try setting "editor.semanticHighlighting.enabled": false to disable it

[IllusionMH]

@mjbvz yes, setting it to false fixes the problem with highlights for me. Both this one and I assume #88997 (removes difference in highlight for classes/functions, however I'm not sure if highlight there were bad).

Are there plans to restore current (non-semantic) highlights for JSX and leave it for other places?

[codewithfeeling]

I can confirm the fix suggested by @mjbvz works (thanks)

[vasilenka]

Yeah, "editor.semanticHighlighting.enabled": false solved the problem. Thank you

[markovicdenis]

Would it be possible to add texmateRules options which override the rules for the semantic scope? At least for JSX/TSX files..

[IllusionMH]

See https://github.com/microsoft/vscode/wiki/Semantic-Highlighting-Overview and will require #86390 to make it for JS/TS.
Haven't grasped yet how to add previous colors without disabling semantic highlight.

[synoptase]

So, is this a bug or a feature? -- Benjamin Grelié

[IllusionMH]

My bet is bug (or not yet implemented part) in the feature.

vscode/extensions/html-language-features/server/src/modes/javascriptSemanticTokens.ts

Lines 101 to 107 in 65ff40c

	export const enum TokenType {
	class, enum, interface, namespace, typeParameter, type, parameter, variable, property, function, member, _
	}
	export const enum TokenModifier {
	declaration, static, async, readonly, _
	}

Doesn't have any types/modifiers to distinguish usage of class/function/variable in regular case or as JSX tag, therefore they are colored by their type, and special styling for JSX is lost.

Since extension might provide custom types/modifiers it will be easy to add jsxtag modifier and apply special styles(matching old) for tokens with this modifier. What do you thins, @aeschli?

[aeschli]

semantic coloring of the JSX tags was unintended. Fix 3c930f9 is in todays i-build.

[IllusionMH]

Thanks, looks better now!

@aeschli is it intended that Fragment in <React.Fragment> is colored differently when semantic coloring applied? Moreover coloring for custom elements with static components leads to very strange results (inverse of <React.Fragment> case)?
Initial highlight

semantic highlight

Version: 1.42.0-insider (user setup)
Commit: c4d53a1
Date: 2020-01-23T05:39:57.148Z
OS: Windows_NT x64 10.0.19546

Repro code

New workspace with only @types/react installed.
TS versions 3.7.5 (built-in) or 3.8.0-dev.20200122

import React from 'react';

const Custom = (props: { children?: any }) => <div></div>;
Custom.Nested1 = (props: { children?: any }) => <span></span>;
Custom.Nested2 = function (props: { children?: any }) { return <span></span>; };

function test() {
	return (
		<React.Fragment>
			<span className="demo">demo</span>
			<Custom>
				<Custom.Nested1></Custom.Nested1>
				<Custom.Nested2></Custom.Nested2>
			</Custom>
		</React.Fragment>
	)
}

[vasilenka]

@aeschli thank you so much

[aeschli]

I just pushed a fix for the qualified JSX names.