Supply a Tailwind function to get colors in an "alphable" way.

[crswll]

In order to use custom properties with opacity modifiers your custom property colors need to be defined in less than ideal ways.

:root {
  /*
    We currently need to do this, which is less than ideal for a few reasons:
    1. The editor can't give you a preview color (nor provide a color picker for it).
    2. You can't easily grab it using something like `theme(colors.red.500)`.
    3. It's less readable than a hex color (arguably).
  */
  --primary: 239 68 68;
  --secondary: 34 211 238;
}

I'd like to suggest a function that behaves like theme but will also take any color, so the above would instead look something like:

:root {
  --primary: getAsAlphableForCustomProperties(#ef4444); /* --primary: 239 68 68 */
  --secondary: getAsAlphableForCustomProperties(colors.cyan.500); /* --secondary: 34 211 238 */
}

Yes, I know that function name is very terse and good.

Here's my reasoning and use cases:

I have an idea of how to approach it if you want a PR. This code may not work but I doubt it's super far off to drop in evaluateTailwindFunctions.js functions. If it's on the right track and something yous would want a PR for let me know.

const transformColor = (node, colorOrPath) => {
  let maybeColor = parseColor(colorOrPath)

  // colorOrPath was not a color, let's see if it's a path to a color...
  if (!maybeColor) {
    const { isValid, value, error } = validatePath(config, colorOrPath)

    // Let's see if the value returned by the path is a color...
    maybeColor = isValid ? parseColor(value) : null

    // Not much we can do from here and just returning the color might be strange?
    if (!maybeColor) {
      throw node.error(error)
    }
  }

  const color = { ...maybeColor }

  // Need to get the tests going before fleshing this out more...
  switch (color.mode) {
    case 'rgb':
    case 'hsl':
      return color.color.join(' ')
    default:
      return color.color.join(' ')
  }
}