Hash native CSS3 variables (in recipes)

[yumin-chen]

Description

It'd be nice to be able to hash native CSS3 variables declared in recipes, such as: var(--color-a1)

{
  variants: {
    colorScheme: {
      blue: {
        "--color-a1":  "token(colors.blue.600)",
        "--color-a2":  "token(colors.blue.700)",
        "--color-a3":  "token(colors.blue.500)",
        ....
     }
  },
  look: { 
    solid: { bg: "var(--color-a1)", color: "var(--color-a3)" },
    subtle: { bg: "var(--color-a1)", color: "var(--color-a2)" },
  }
}

Problem Statement/Justification

Hashing CSS variables can help obfuscate the output code to client side (if needed), similar to what we have done with other Tokens.

Proposed Solution or API

We already have a hash in config, but it doesn't support hashing of native CSS3 variables. I'd like to propose using the same config flag and it further hashes all CSS variables.

Alternatives

No response

Additional Information

No response