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

Author: RobinMalfait

CHANGELOG.md

@@ -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
 

src/lib/defaultExtractor.js

@@ -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([

tests/default-extractor.test.js

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