From 6d9ae82ba341eed7b0e608e3fac2036fe825c958 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 11 Sep 2024 19:23:53 +0200
Subject: [PATCH] =?UTF-8?q?Allow=20`anchor-size(=E2=80=A6)`=20in=20arbitra?=
 =?UTF-8?q?ry=20values=20(#14393)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR fixes an issue where using `anchor-size` in arbitrary values
resulted in the incorrect css.

Input: `w-[calc(anchor-size(width)+8px)]`
Output:
```css
.w-\[calc\(anchor-size\(width\)\+8px\)\] {
  width: calc(anchor - size(width) + 8px);
}
```

This PR fixes that, by generating the correct CSS:
```css
.w-\[calc\(anchor-size\(width\)\+8px\)\] {
  width: calc(anchor-size(width) + 8px);
}
```
---
 src/util/dataTypes.js              | 2 ++
 tests/normalize-data-types.test.js | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js
index e1db13754e45..9447732938cd 100644
--- a/src/util/dataTypes.js
+++ b/src/util/dataTypes.js
@@ -147,6 +147,8 @@ function normalizeMathOperatorSpacing(value) {
     'repeating-radial-gradient',
     'repeating-linear-gradient',
     'repeating-conic-gradient',
+
+    'anchor-size',
   ]
 
   return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
diff --git a/tests/normalize-data-types.test.js b/tests/normalize-data-types.test.js
index ba995f43006f..1c302ec28e68 100644
--- a/tests/normalize-data-types.test.js
+++ b/tests/normalize-data-types.test.js
@@ -96,6 +96,9 @@ let table = [
     '[content-start] calc(100% - 1px) [content-end] minmax(1rem,1fr)',
   ],
 
+  // Prevent formatting functions that are not math functions
+  ['w-[calc(anchor-size(width)+8px)]', 'w-[calc(anchor-size(width) + 8px)]'],
+
   // Misc
   ['color(0_0_0/1.0)', 'color(0 0 0/1.0)'],
   ['color(0_0_0_/_1.0)', 'color(0 0 0 / 1.0)'],