From 9e928ce0bead4a6568739de276b8a4135b0b257e Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 13 Jun 2024 09:19:08 -0400
Subject: [PATCH] Disable automatic `var()` injection for anchor properties
 (#13826)

* Disable automatic `var()` injection for CSS anchor positioning properties

* Update tests

* Update changelog
---
 CHANGELOG.md                       |  4 ++-
 src/util/dataTypes.js              |  6 ++++
 tests/normalize-data-types.test.js | 45 +++++++++++++++++++++++++++++-
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 670daf5fd0d6..b8169a6e2aa6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Disable automatic `var()` injection for anchor properties ([#13826](https://github.com/tailwindlabs/tailwindcss/pull/13826))
 
 ## [3.4.4] - 2024-06-05
 
diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js
index 9984a055eb24..85bdbd2059de 100644
--- a/src/util/dataTypes.js
+++ b/src/util/dataTypes.js
@@ -19,6 +19,7 @@ function isCSSFunction(value) {
 // More info:
 // - https://drafts.csswg.org/scroll-animations/#propdef-timeline-scope
 // - https://developer.mozilla.org/en-US/docs/Web/CSS/timeline-scope#dashed-ident
+// - https://www.w3.org/TR/css-anchor-position-1
 //
 const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([
   // Concrete properties
@@ -26,11 +27,16 @@ const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([
   'timeline-scope',
   'view-timeline-name',
   'font-palette',
+  'anchor-name',
+  'anchor-scope',
+  'position-anchor',
+  'position-try-options',
 
   // Shorthand properties
   'scroll-timeline',
   'animation-timeline',
   'view-timeline',
+  'position-try',
 ])
 
 // This is not a data type, but rather a function that can normalize the
diff --git a/tests/normalize-data-types.test.js b/tests/normalize-data-types.test.js
index 224203ffe14c..ba995f43006f 100644
--- a/tests/normalize-data-types.test.js
+++ b/tests/normalize-data-types.test.js
@@ -112,7 +112,18 @@ it('should not automatically inject the `var()` for properties that accept `<das
       { raw: '[color:--foo]' },
 
       // Automatic var injection is skipped
+      { raw: '[scroll-timeline-name:--foo]' },
       { raw: '[timeline-scope:--foo]' },
+      { raw: '[view-timeline-name:--foo]' },
+      { raw: '[font-palette:--foo]' },
+      { raw: '[anchor-name:--foo]' },
+      { raw: '[anchor-scope:--foo]' },
+      { raw: '[position-anchor:--foo]' },
+      { raw: '[position-try-options:--foo]' },
+      { raw: '[scroll-timeline:--foo]' },
+      { raw: '[animation-timeline:--foo]' },
+      { raw: '[view-timeline:--foo]' },
+      { raw: '[position-try:--foo]' },
     ],
   }
 
@@ -122,13 +133,45 @@ it('should not automatically inject the `var()` for properties that accept `<das
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      .\[anchor-name\:--foo\] {
+        anchor-name: --foo;
+      }
+      .\[anchor-scope\:--foo\] {
+        anchor-scope: --foo;
+      }
+      .\[animation-timeline\:--foo\] {
+        animation-timeline: --foo;
+      }
       .\[color\:--foo\] {
         color: var(--foo);
       }
-
+      .\[font-palette\:--foo\] {
+        font-palette: --foo;
+      }
+      .\[position-anchor\:--foo\] {
+        position-anchor: --foo;
+      }
+      .\[position-try-options\:--foo\] {
+        position-try-options: --foo;
+      }
+      .\[position-try\:--foo\] {
+        position-try: --foo;
+      }
+      .\[scroll-timeline-name\:--foo\] {
+        scroll-timeline-name: --foo;
+      }
+      .\[scroll-timeline\:--foo\] {
+        scroll-timeline: --foo;
+      }
       .\[timeline-scope\:--foo\] {
         timeline-scope: --foo;
       }
+      .\[view-timeline-name\:--foo\] {
+        view-timeline-name: --foo;
+      }
+      .\[view-timeline\:--foo\] {
+        view-timeline: --foo;
+      }
     `)
   })
 })