Allow anchor-size(…) in arbitrary values (#14393)

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);
}
```
This commit is contained in:
Robin Malfait 2024-09-11 19:23:53 +02:00 • committed by GitHub
parent f07dbff2a7
commit 6d9ae82ba3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 5 additions and 0 deletions

View file

@ -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) => {

View file

@ -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)'],