Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VSCode color picker breaks in JS/TS files #961

Open
larsnystrom opened this issue May 3, 2024 · 5 comments
Open

VSCode color picker breaks in JS/TS files #961

larsnystrom opened this issue May 3, 2024 · 5 comments
Assignees

Comments

@larsnystrom
Copy link

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
Copy link

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
Copy link

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
Copy link

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

@sangrepura
Copy link

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
Copy link
Contributor

thecrypticace commented Feb 12, 2025

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.

@thecrypticace thecrypticace self-assigned this Feb 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants