From 3627847d97ad859fde034edadbc67f863befa4c9 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 12 Jun 2024 09:56:59 -0400 Subject: [PATCH 1/3] Disable automatic `var()` injection for CSS anchor positioning properties --- src/util/dataTypes.js | 6 ++++++ 1 file changed, 6 insertions(+) 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 From eb5ee9279d92fb6da681a87588d7a07184d54d5f Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 12 Jun 2024 15:23:44 -0400 Subject: [PATCH 2/3] Update tests --- tests/normalize-data-types.test.js | 45 +++++++++++++++++++++++++++++- 1 file changed, 44 insertions(+), 1 deletion(-) 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 ` { 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; + } `) }) }) From cb789e2cf319b52d0cda035d33c5004b0ca289e7 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 12 Jun 2024 15:24:50 -0400 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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