Improve automatic var injection (#12236)

* prevent automatic var injection for properties that accept `<dashed-ident>` for the value

* add test

* add `font-palette`

* improve readability

tests/normalize-data-types.test.js

@@ -1,3 +1,4 @@
+import { css, run } from './util/run'
 import { normalize } from '../src/util/dataTypes'
 import { crosscheck } from './util/run'
 
@@ -78,3 +79,31 @@ crosscheck(() => {
     expect(normalize(input)).toBe(output)
   })
 })
+
+it('should not automatically inject the `var()` for properties that accept `<dashed-ident>` as the value', () => {
+  let config = {
+    content: [
+      // Automatic var injection
+      { raw: '[color:--foo]' },
+
+      // Automatic var injection is skipped
+      { raw: '[timeline-scope:--foo]' },
+    ],
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .\[color\:--foo\] {
+        color: var(--foo);
+      }
+
+      .\[timeline-scope\:--foo\] {
+        timeline-scope: --foo;
+      }
+    `)
+  })
+})