[IntelliSense] Compatibility with editor.defaultColorDecorators setting

[olets]

 

Update: now a VS Code feature request which you can thumbsup if you're so inspired microsoft/vscode#182214

Update 2: If you'd like to see the VS Code team work on this, give microsoft/vscode#182214 a thumbs up. If it does not receive 20 thumbs up by July 22, it will be closed.

Update 3: The above issue received enough thumbs ups to make it into their backlog.

 

What version of Tailwind CSS IntelliSense are you using?

0.9.11

What version of Tailwind CSS are you using?

3.3.1

What package manager are you using?

npm

What operating system are you using?

macOS

Tailwind config

Lmk if this is really needed. Minimal config for reproduction:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [/* fill me in */],
  theme: {
    extend: {
      colors: {
        example: '#ff0000',
      }
    }
  },
}

VS Code settings

Lmk if this is really needed.

Reproduction URL

Lmk if you have a recommended way of creating cloud reproductions for this plugin.

Describe your issue

VS Code 1.78 (April 2023) adds inline color decorators

It is also now possible to visualize inline color decorators for CSS-formatted colors in all file types. To display these decorators, enable the Editor: Default Color Decorators (editor.defaultColorDecorators) setting.

(source: https://code.visualstudio.com/updates/v1_78#_standalone-color-picker)

When editor.defaultColorDecorators is set to `true:

• Without Tailwind CSS Intellisense enabled, color decorators appear. Screenshot example of the Tailwind config file (but the bug is not limited to this one file):
  
• Without Tailwind CSS Intellisense enabled, color decorators appear in the Tailwind config file only until Tailwind CSS Intellisense loads, at which point they disappear.

[gyurielf]

I ran into this as well.
It breaks the html class colors previews too.

UPDATE
The color previews appears, but after 5-8 minutes, and the disappers randomly. (I made a single html boilerplate file for it)

[GBrachetta]

If it helps, I had installed the extension json-color-token. Uninstalling it brought back the color previews in Tailwind classes.

[starball5]

Similar past issues with colour decorations not appearing: tailwindlabs/tailwindcss-intellisense#728, tailwindlabs/tailwindcss-intellisense#750. Though this issue seems instead to have to do with changes made in VS Code 1.78 (see https://code.visualstudio.com/updates/v1_78#_standalone-color-picker)

Potentially related on Stack Overflow:

• Why I can't see the color preview box in VS Code?
• VScode doesnt show square with color using Tailwind

Both those users in the above linked questions are using version 0.9.11 of this extension with VS Code 1.78.0.

[bradlc]

Not really sure what to do here 🤔 As far as I can tell there's no way to have extension-provided colour decorators in addition to the new "default colour decorators" in the same document. That's just how this new VS Code feature works unfortunately. As soon as any extension provides colour decorators for a document the "default" decorators are disabled. I'm going to convert this to a discussion because I don't consider this a bug with the extension, but if anyone has any ideas for improving the colour decorator behaviour please let me know!

[olets]

• Thanks. I've opened a VS Code feature request show defaultColorDecorators in documents decorated by extensions microsoft/vscode#182214

[olets]

The request has been accepted into the backlog 🎉

[starball5]

The default value of editor.defaultColorDecorators is false. @olets did you set it to true? Because if you didn't, then the value should be false, and @bradlc's previous comment might not be going in the right direction.

[olets]

This is when true. Updated the description to clarify

[seccentral]

Repeated testing with and without VSCode custom user settings (nuked the json file) are reproducible as detailed below
Environment:

Click to expand

vscode 1.78.2
Tailwind CSS Intellisense v0.9.11
pnpm 8.5.1
node v20.1.0
Astro 2.4.1
Nextjs 13.4.4

Color Boxes Work on NextJS:

Click to expand

(Accept all prompts, just go for defaults everywhere)

pnpm create create-next-app@latest nextjscolors
cd nextjscolors
code . 

Results in this:

Color Boxes Fail on Astro:

Click to expand

(Accept all prompts, just go for defaults everywhere)

pnpm create astro@latest astrocolors
cd astrocolors
pnpm astro add tailwind
code .

Results in this :

Color boxes Fail on tailwind vanilla:

Click to expand

I even did a standalone tailwind install, Still the same issue:

There is clearly something happening in one environment that is missing in the other. Same results with npm.

Whatever next is doing or (not) doing seems to work. Hope this helps someone get to the bottom of this, I'm still new at this and don't really know where to start debugging (except isolating environments like i've done above)