From b64f2568f4a06637cd1ab5b55606baca3ff53fff Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 18 Oct 2023 13:37:08 +0200
Subject: [PATCH 1/4] prevent automatic var injection for properties that
 accept `<dashed-ident>` for the value

---
 src/lib/generateRules.js |  2 +-
 src/util/dataTypes.js    | 31 ++++++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
index ca38d8c03d10..ff838190bf67 100644
--- a/src/lib/generateRules.js
+++ b/src/lib/generateRules.js
@@ -491,7 +491,7 @@ function extractArbitraryProperty(classCandidate, context) {
     return null
   }
 
-  let normalized = normalize(value)
+  let normalized = normalize(value, { property })
 
   if (!isParsableCssValue(property, normalized)) {
     return null
diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js
index 6f66849d0fab..54989497a450 100644
--- a/src/util/dataTypes.js
+++ b/src/util/dataTypes.js
@@ -11,10 +11,35 @@ function isCSSFunction(value) {
   return IS_CSS_FN.test(value)
 }
 
+// These properties accept a `<dashed-ident>` as one of the values. This means that you can use them
+// as: `timeline-scope: --tl;`
+//
+// Without the `var(--tl)`, in these cases we don't want to normalize the value, and you should add
+// the `var()` yourself.
+//
+// More info:
+// - https://drafts.csswg.org/scroll-animations/#propdef-timeline-scope
+// - https://developer.mozilla.org/en-US/docs/Web/CSS/timeline-scope#dashed-ident
+//
+const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([
+  // Concrete properties
+  'scroll-timeline-name',
+  'timeline-scope',
+  'view-timeline-name',
+
+  // Shorthand properties
+  'scroll-timeline',
+  'animation-timeline',
+  'view-timeline',
+])
+
 // This is not a data type, but rather a function that can normalize the
 // correct values.
-export function normalize(value, isRoot = true) {
-  if (value.startsWith('--')) {
+export function normalize(value, context = null, isRoot = true) {
+  if (
+    (context ? !AUTO_VAR_INJECTION_EXCEPTIONS.has(context.property) : true) &&
+    value.startsWith('--')
+  ) {
     return `var(${value})`
   }
 
@@ -28,7 +53,7 @@ export function normalize(value, isRoot = true) {
           return part
         }
 
-        return normalize(part, false)
+        return normalize(part, context, false)
       })
       .join('')
   }

From 76c0093980189d76a601d3623f59f118aa876e05 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 18 Oct 2023 13:39:21 +0200
Subject: [PATCH 2/4] add test

---
 tests/normalize-data-types.test.js | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/tests/normalize-data-types.test.js b/tests/normalize-data-types.test.js
index f6348f43872e..166cc4828f31 100644
--- a/tests/normalize-data-types.test.js
+++ b/tests/normalize-data-types.test.js
@@ -1,3 +1,4 @@
+import { css, run } from './util/run'
 import { normalize } from '../src/util/dataTypes'
 
 let table = [
@@ -75,3 +76,31 @@ let table = [
 it.each(table)('normalize data: %s', (input, output) => {
   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;
+      }
+    `)
+  })
+})

From 24644dea264d330b641aaef1c64ca24834b7385b Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 18 Oct 2023 14:34:54 +0200
Subject: [PATCH 3/4] add `font-palette`

---
 src/util/dataTypes.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js
index 54989497a450..278681f5a5e7 100644
--- a/src/util/dataTypes.js
+++ b/src/util/dataTypes.js
@@ -26,6 +26,7 @@ const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([
   'scroll-timeline-name',
   'timeline-scope',
   'view-timeline-name',
+  'font-palette',
 
   // Shorthand properties
   'scroll-timeline',

From 365d650613bf4feae50e0d11497332a6a06b4700 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 18 Oct 2023 14:36:00 +0200
Subject: [PATCH 4/4] improve readability

---
 src/util/dataTypes.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js
index 278681f5a5e7..429ee0d8bdff 100644
--- a/src/util/dataTypes.js
+++ b/src/util/dataTypes.js
@@ -37,10 +37,8 @@ const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([
 // This is not a data type, but rather a function that can normalize the
 // correct values.
 export function normalize(value, context = null, isRoot = true) {
-  if (
-    (context ? !AUTO_VAR_INJECTION_EXCEPTIONS.has(context.property) : true) &&
-    value.startsWith('--')
-  ) {
+  let isVarException = context && AUTO_VAR_INJECTION_EXCEPTIONS.has(context.property)
+  if (value.startsWith('--') && !isVarException) {
     return `var(${value})`
   }