From 0e2b4510a250cb02a05e3e1467ee07c37396f404 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 19 Apr 2023 23:06:33 +0200
Subject: [PATCH] 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
---
 CHANGELOG.md                    | 1 +
 src/lib/defaultExtractor.js     | 2 +-
 tests/default-extractor.test.js | 7 +++++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e8bf3541ef61..d5e06ff13fe7 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js
index cf3218736272..6382ca7cf3dc 100644
--- a/src/lib/defaultExtractor.js
+++ b/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([
diff --git a/tests/default-extractor.test.js b/tests/default-extractor.test.js
index 13652eee38ca..05a19e62653f 100644
--- a/tests/default-extractor.test.js
+++ b/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']`,