tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
82.01k stars 4.15k forks source link

breaks `editor.defaultColorDecorators` in VS Code 1.78 #11211

Closed olets closed 1 year ago

olets commented 1 year ago

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)

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):

tailwind config screenshot showing a red color decorator next to the color value ff0000

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 commented 1 year ago

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

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

starball5 commented 1 year ago

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:

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

bradlc commented 1 year ago

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!