microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
164.46k stars 29.36k forks source link

[Bug] CSS ID selectors that look like colors have a decorator #187717

Open chrisknmojo opened 1 year ago

chrisknmojo commented 1 year ago

Type: Bug

  1. Create a new JavaScript file
  2. Add the line document.querySelector('#add-button')
  3. Notice the #add part is considered to be a color and a Color Decorator is prefixed to it.

Notes:

VS Code version: Code 1.80.0 (Universal) (660393deaaa6d1996740ff4880f1bad43768c814, 2023-07-04T13:39:33.766Z) OS version: Darwin arm64 22.5.0 Modes:

System Info |Item|Value| |---|---| |CPUs|Apple M1 Max (10 x 24)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: enabled| |Load (avg)|7, 6, 10| |Memory (System)|64.00GB (4.20GB free)| |Process Argv|--crash-reporter-id ec6bd5c7-e866-492e-b281-be2e580b181a| |Screen Reader|no| |VM|0%|
Extensions (23) Extension|Author (truncated)|Version ---|---|--- better-comments|aar|3.0.2 simple-markdown-coverter|Adi|0.0.1 linehighlightbookmarkvscode|bal|1.0.2 vscode-intelephense-client|bme|1.9.5 visubezier|chr|1.6.0 postcss|css|1.0.9 gitlens|eam|14.0.1 vscode-html-css|ecm|1.13.1 vscode-great-icons|emm|2.1.93 prettier-vscode|esb|9.19.0 auto-close-tag|for|0.5.14 auto-rename-tag|for|0.1.10 better-nunjucks|gin|0.2.4 todo-tree|Gru|0.0.226 svg|joc|1.5.3 implicit-parentheses|Jor|1.1.0 vscode-gutter-preview|kis|0.30.0 php-docblocker|nei|2.7.0 indent-rainbow|ode|8.3.1 synthwave-vscode|Rob|0.1.15 vscode-javascript-booster|sbu|14.0.1 highlight-matching-tag|vin|0.11.0 fig|wit|0.0.7
A/B Experiments ``` vsliv368:30146709 vsreu685:30147344 python383:30185418 vspor879:30202332 vspor708:30202333 vspor363:30204092 vslsvsres303:30308271 vserr242cf:30382550 pythontb:30283811 vsjup518:30340749 pythonptprofiler:30281270 vsdfh931:30280409 vshan820:30294714 vstes263:30335439 vscod805cf:30301675 binariesv615:30325510 bridge0708:30335490 bridge0723:30353136 vsaa593cf:30376535 pythonvs932:30410667 py29gd2263:30784847 vsclangdc:30486549 c4g48928:30535728 dsvsc012:30540252 pynewext54:30695312 azure-dev_surveyone:30548225 3biah626:30602489 pyind779:30671433 89544117:30613380 pythonsymbol12:30671437 2i9eh265:30646982 showlangstatbar:30737416 vsctsb:30748421 pythonms35:30701012 03d35959:30757346 pythonfmttext:30731395 pythoncmvfstrcf:30756944 fixshowwlkth:30771522 hideindicator:30785051 pythongtdpath:30769146 i26e3531:30780429 pythonnosmt12:30779714 pythonidxpt:30784022 pythonnoceb:30776495 e537b577:30786199 ```
ArturoDent commented 1 year ago

I see this as well in Stable and Insiders.

Apparently because #add of #add-button is a valid hex number.

@aiday-mar

aiday-mar commented 1 year ago

Hi, thank you for filing the issue. Can you check if you have editor.defaultColorDecorators enabled in your settings. You may be seeing these color decorators in JavaScript due to this setting.

chrisknmojo commented 1 year ago

@aiday-mar Hello and thank you for taking a look at this! Ah, yes, I do have "editor.defaultColorDecorators": true in my settings. I believe I had enabled this in an attempt to display decorators in my JSON files for color tokens, but to no effect. For now, as a workaround, I can disable this option.