Disable automatic var() injection for anchor properties (#13826)

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

* Update tests

* Update changelog

Author: thecrypticace

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
 

src/util/dataTypes.js

@@ -19,18 +19,24 @@ 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
   'scroll-timeline-name',
   '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

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;
+      }
     `)
   })
 })