Bug: box shadow with color method can be compiled with missing parentheses

[matthewcc]

What version of Tailwind CSS are you using?

3.0.16

What build tool (or framework if it abstracts the build tool) are you using?

just Tailwind

What version of Node.js are you using?

For example: v16.13.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

minimal reproduction: https://github.com/matthewcc/tailwind3-boxshadow-error

Describe your issue

We are using a 3rd party theme switching plugin that can output the following configuration (minimal reproduction doesn't require the plugin):

boxShadow: {
   'lg': 'var(--some-variable-name, 0 35px 60px -15px rgba(0, 0, 0))'
}

This is valid CSS, and Tailwind 2 handled it fine. But how Tailwind compiles box-shadow has been updated in v3, and with the above configuration the new tw-shadow-colored attribute is created missing a closing parentheses:

--tw-shadow-colored: var(--some-variable-name, 0 35px 60px -15px var(--tw-shadow-color);

If we do not use color functions like rgb(...) or hsla(...), it compiles fine. It also compiles fine if we throw in random CSS functions like calc().

The issue seems to only happen when the config value is a CSS var that contains a CSS color method, and only with box-shadow (we tried to recreate this with other theme-able values for Tailwind, but only saw this happen with box-shadow), so it seems to specifically be about how Tailwind is transforming those color functions for box-shadow.

[barrycenter]

Yeah, this is something which has been bugging me for ages. Tailwind internally converts the formats of all colors to color: rgba(...) values which keeps us from being able to specify colors in other systems or use color profiles in CSS Color Module Level 4 colors. I have a discussion at #2218 which illustrates the issue in more depth.

I'd really like to see this get fixed in Tailwind.