Losing color preview when using css custom property default value + <alpha-value> as stated on the tailwind docs

[crammag]

What version of Tailwind CSS IntelliSense are you using?

v0.8.7

What version of Tailwind CSS are you using?

v3.1.8

What package manager are you using?
yarn

What operating system are you using?

Linux

Reproduction URL

https://play.tailwindcss.com/

EDIT: adding the config as text, to make it easy to copy:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      // ...
      colors: {
        primary: 'rgb(var(--primary, 66 66 66) / <alpha-value>)'
      }
    },
  },
  plugins: [],
}

check the text-primary and bg-primary on this image:

Describe your issue

When we use the default value for CSS custom properties + "<alpha-value>" as it's stated on the official documentation, we lose the color preview provided by this plugin :(. Is there any way to make it work with both the opacity and the color preview?

[crammag]

In case this helps, I think the problem is on the function getColorFromValue, located in here:

https://github.com/tailwindlabs/tailwindcss-intellisense/blob/master/packages/tailwindcss-language-service/src/util/color.ts#L163

And more precisely, in here, the regexp don't include that option:
https://github.com/tailwindlabs/tailwindcss-intellisense/blob/master/packages/tailwindcss-language-service/src/util/color.ts#L172

[crammag]

Hi again, I sort of patched it up with the following code (at packages/tailwindcss-language-service/src/util/color.ts), maybe it could help :/

And the final result:

It's definitively not the best option, cause we are testing a new regexp just for this use case, but in case is not possible to do it with the current colorRegex, maybe there could be a flag to allow this for the people that needs it?

Thanks,
MA

[crammag]

PD: improved the regex to account for spaces before the defaultValue:

  /rgb\(var[^\r\n,]+,\s*(\d{1,3} \d{1,3} \d{1,3})/

Sorry for the spam, but it was a fun experience troubleshooting this "issue" :)

[bradlc]

Thanks for reporting and investigating @crammag! This will be fixed in the next release 👍