VSCode color picker breaks in JS/TS files

[larsnystrom]

What version of VS Code are you using?

For example: v1.88.1

What version of Tailwind CSS IntelliSense are you using?

For example: v0.10.5

What version of Tailwind CSS are you using?

For example: v3.1.8

What package manager are you using?

For example: npm

What operating system are you using?

For example: Linux devcontainer, client is running macOS

Tailwind config

VS Code settings

Reproduction URL

Describe your issue

When opening a regular .ts file in my workspace, color hinting with the default VSCode color picker works for a few seconds. Then it stops working. If I disable the Tailwind CSS IntelliSense extension it doesn't stop working, so it probably has to do with the color decorator/picker in this extension. I've tried setting "tailwindCSS.colorDecorators": false but that doesn't change the behavior. The problem is not present in .less files, but it is present in both .ts and .js files.

Here is a file with which I can reproduce this behavior:

export const red = "#ff0033";

export const ChartColors = [
  "rgb(0, 157, 220)",
  "rgb(255, 99, 132)",
  "rgb(255, 159, 64)",
  "rgb(255, 205, 86)",
  "rgb(75, 192, 192)",
  "rgb(153, 102, 255)",
  "rgb(201, 203, 207)",
];

Here is the behavior I'm seeing after reloading the window (color picker disappears 18 seconds in):

Skarminspelning.2024-05-03.kl.08.22.52.mov

[manastunga787]

Same issue i am also facing enabling the extension it hides the color picker and disabling the tailwind vscode extension the color picker is back in .ts or .js file

[isimmons]

It seems VSCode handles this on it's own now? I can see when I do a window reload that first VSCode adds in the color picker and then the extension comes in and kills it.

Not a problem when the extension is disabled but then I get no intellisense or color picker on tailwind classes in views/components.

Same if I leave the extension disabled and just use the setting "tailwindCSS.files.exclude": ["tailwind.config.js"]. It works to let VSCode put in the color picker but then the intellisense and colors in components is gone again.

[AaronPorts]

Guess microsoft/vscode#235389 will fix the issue soon.

[sangrepura]

I also just discovered this bug, and fortunately I can confirm that this is now fixed by setting Default Color Decorators to always

"editor.defaultColorDecorators": "always"

[thecrypticace]

Two things:

1. yeah it looks like the default color decorators setting side-steps this (I think this is properly released now in VSCode 1.97)
2. I looked into this today and I can't figure out how to get VSCode to not remove the color decorators under the auto settings. Even returning null or undefined from the middleware in our extension just doesn't work. It's like if our extension is going to provide them at all it has to for all files which definitely doesn't make sense.

Gonna spend some time on this hopefully next week to at least figure out what's going on and if there's a way I can fix this.