Improve automatic var injection

[RobinMalfait]

This PR improves the automatic var injection behaviour.

When using arbitrary properties such as:

<div class="[timeline-scope:--foo]"></div>

Then the compiled CSS will be:

.\[timeline-scope\:--foo\]{
  timeline-scope: var(--foo)
}

However, the timeline-scope property accepts a <dashed-ident> data type, which means that the value should stay as --foo, and not var(--foo).

This PR has an exceptions list for these properties, and won't wrap the variable with var() for properties that accept <dashed-ident>.

More info:

• https://drafts.csswg.org/scroll-animations/#propdef-timeline-scope
• https://developer.mozilla.org/en-US/docs/Web/CSS/timeline-scope#dashed-ident

Fixes: #12205

[RobinMalfait]

@thecrypticace what do you think about this solution?

This only solves it for arbitrary properties, and not when you use it inside of a plugin. Alternatively we can write a Lightning CSS plugin that strips the var() for properties that accept <dashed-ident>. That way all properties regardless where they are coming from will be fixed.

But, not generating them in the first place seems better I think.

Also, it looks like you can't use var(--foo) at all, because if you then define --foo as --tl Chrome devtools don't seem to resolve these correctly, so a Lightning CSS plugin seems doable. However, if it is allowed, then this solution won't work.

Example of what I mean with variables: https://play.tailwindcss.com/Y5fbjtUBHa

[thecrypticace]

I think this is the better route. Creating a lightning CSS plugin to do this I think would be a bad idea. I kinda feel like specifying these values with a var(…) whose value is --thing should work and the fact that it doesn't is probably a bug.

[thecrypticace]

Looks good other than needing to add the font-palette property and cleanup that one if statement.

[thecrypticace]

LGTM. The rollup-sass integration test has become super flaky with timing btw. Need to figure out how to fix that so you can ignore it.

[nnmrts]

@RobinMalfait Can this be extended to transition/transition-property?

[mrcsmcln]

+1 as I'm currently experiencing this issue while transitioning @Property values. Currently using an underscore (e.g., transition-[_--foo].