Ensure multiple theme(spacing[5]) calls with bracket notation in arbitrary properties work (#11039)

* ensure that last `]` doesn't stop the match

Given this input:
```html
<div class="[width:_calc(theme(spacing[5])_+_theme(spacing[5]))]"></div>
```

Then we would expect the match to be this:
```
[width:_calc(theme(spacing[5])_+_theme(spacing[5]))]
```

However, with the `?`, then it would stop and result in:
```
[width:_calc(theme(spacing[5])_+_theme(spacing[5]
```

Which makes it incomplete because the `))]` are missing at the end.

* update changelog
This commit is contained in:
Robin Malfait 2023-04-19 23:06:33 +02:00 committed by GitHub
parent defdc4b6d1
commit 0e2b4510a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 1 deletions

View File

@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Inherit gradient stop positions when using variants ([#11002](https://github.com/tailwindlabs/tailwindcss/pull/11002))
- Honor default `to` position of gradient when using implicit transparent colors ([#11002](https://github.com/tailwindlabs/tailwindcss/pull/11002))
- Ensure `@tailwindcss/oxide` doesn't leak in the stable engine ([#10988](https://github.com/tailwindlabs/tailwindcss/pull/10988))
- Ensure multiple `theme(spacing[5])` calls with bracket notation in arbitrary properties work ([#11039](https://github.com/tailwindlabs/tailwindcss/pull/11039))
## [3.3.1] - 2023-03-30

View File

@ -35,7 +35,7 @@ function* buildRegExps(context) {
// This is a targeted fix to continue to allow theme()
// with square brackets to work in arbitrary properties
// while fixing a problem with the regex matching too much
/\[[^\s:'"`]+:[^\s]+?\[[^\s]+?\][^\s]+?\]/,
/\[[^\s:'"`]+:[^\s]+?\[[^\s]+\][^\s]+?\]/,
// Utilities
regex.pattern([

View File

@ -41,6 +41,9 @@ const htmlExamples = html`
<div class="[--y:theme(colors.blue.500)]">
<div class="w-[calc(100%-theme('spacing.1'))]">
<div class='w-[calc(100%-theme("spacing.2"))]'>
<div class='w-[calc(100%-theme("spacing[2]"))]'>
<div class='w-[calc(100%-theme(spacing[2]))]'>
<div class='[width:calc(theme(spacing[2])_+_theme(spacing[3])_+_theme(spacing[4]))]'>
<script>
let classes01 = ["text-[10px]"]
@ -146,6 +149,10 @@ const includes = [
`[--y:theme(colors.blue.500)]`,
`w-[calc(100%-theme('spacing.1'))]`,
`w-[calc(100%-theme("spacing.2"))]`,
`w-[calc(100%-theme("spacing.2"))]`,
`w-[calc(100%-theme("spacing[2]"))]`,
`w-[calc(100%-theme(spacing[2]))]`,
`[width:calc(theme(spacing[2])_+_theme(spacing[3])_+_theme(spacing[4]))]`,
`border-[color:var(--color,theme(colors.cyan.500))]`,
`translate-x-[var(--scroll-offset)]`,
`font-[arbitrary,'arbitrary_with_space']`,