IntelliSense silently fails when v4 theme color variable references itself using rgb channels

[zsidnam]

What version of VS Code are you using?

v1.99.3

What version of Tailwind CSS IntelliSense are you using?

v0.14.15

What version of Tailwind CSS are you using?

v4.1.4

What package manager are you using?

npm

What operating system are you using?

macOS

Tailwind config

@import 'tailwindcss';

:root {
  --one: #ff0000;
  --two: 255 00 00;
  --color-three: #ff0000;
  --color-four: 255 00 00;
}

@theme inline {
  /* Not self-referencing, not using rgb() ✅ */
  --color-one: var(--one);

  /* Not self-referencing, using rgb() ✅ */
  --color-two: rgb(var(--two));

  /* Self-referencing, not using rgb() ✅ */
  --color-three: var(--color-three);

  /* Self-referencing, using rgb() ❌ */
  /* This silently fails and breaks all IntelliSense. */
  --color-three: rgb(var(--color-three));
  /* Comment 👆 out and Reload VS Code to get IntelliSense working again */
}

VS Code settings

// Paste your VS Code settings in JSON format here

Reproduction URL

This is the bare-bones project created by create-next-app but with globals.css edited to show issue:
https://github.com/zsidnam/tailwind-css-intellisense-issue/blob/main/app/globals.css

Describe your issue

IntelliSense is silently failing when I use Tailwind v4 and define a theme color var that references itself inside the rgb() function. While there is no reason to intentionally do this, this happened on a real project after upgrading from Tailwind v3 to v4 using the official codemod. I had coincidentally been using the "--color-*" prefix for my color variables and had been following the Tailwind v3 recommendation of defining the theme color vars as color channels see here, and the codemod essentially resulted in this:

BEFORE CODEMOD:

/* theme.css */
:root {
  --color-background: 00 00 00;
}

// tailwind.config.ts
const config: Config = {
  theme: {
    extend: {
      colors: {
        background: 'rgb(var(--color-background))'
      }
    }
  }
}

AFTER CODEMOD:

/* theme.css */
:root {
  --color-background: 00 00 00;
}

/* main.css */
@theme inline {
  --color-background: rgb(var(--color-background))
}

This broke all tailwind IntelliSense and took me a long time to find 😞 I didn't see any errors in the "Tailwind CSS: Show Output" logs. If this should be supported, can we fix it? And if not, can we log an error when this happens so it is easier to track down?

[thecrypticace]

oooh that's… interesting. I'm wondering if this is a bug in v4 itself or not. I'll look into it 🤔

[thecrypticace]

I found it btw. It's a bug in the extension (technically the language server) and I've got a fix in #1332

[zsidnam]

@thecrypticace thank you so much for looking into this and coming up with a fix! 🙏 Really appreciate it! This extension is incredible and is what sold me on using Tailwind in my projects.

[thecrypticace]

The fix will go out in the next release (tomorrow, probably)