From 3a8e95d848e8ab6eed54a4245a3712d26706bee2 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 2 Jan 2023 09:43:07 -0500
Subject: [PATCH] Match arbitrary properties even when followed by square
 bracketed text (#10212)

* Match arbitrary properties even when followed by square bracketed text

* Update changelog
---
 CHANGELOG.md                    |  1 +
 src/lib/defaultExtractor.js     | 10 ++++++++--
 tests/default-extractor.test.js |  8 ++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 922156212cef..758347fabef2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Properly handle subtraction followed by a variable ([#10074](https://github.com/tailwindlabs/tailwindcss/pull/10074))
 - Fix missing `string[]` in the `theme.dropShadow` types ([#10072](https://github.com/tailwindlabs/tailwindcss/pull/10072))
 - Update list of length units ([#10100](https://github.com/tailwindlabs/tailwindcss/pull/10100))
+- Fix not matching arbitrary properties when closely followed by square brackets ([#10212](https://github.com/tailwindlabs/tailwindcss/pull/10212))
 
 ### Changed
 
diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js
index b06c37e9eb52..cf3218736272 100644
--- a/src/lib/defaultExtractor.js
+++ b/src/lib/defaultExtractor.js
@@ -28,8 +28,14 @@ function* buildRegExps(context) {
       : ''
 
   let utility = regex.any([
-    // Arbitrary properties
-    /\[[^\s:'"`]+:[^\s]+\]/,
+    // Arbitrary properties (without square brackets)
+    /\[[^\s:'"`]+:[^\s\[\]]+\]/,
+
+    // Arbitrary properties with balanced square brackets
+    // 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]+?\]/,
 
     // Utilities
     regex.pattern([
diff --git a/tests/default-extractor.test.js b/tests/default-extractor.test.js
index e96b04bbb1f2..13652eee38ca 100644
--- a/tests/default-extractor.test.js
+++ b/tests/default-extractor.test.js
@@ -488,3 +488,11 @@ test('ruby percent string array', () => {
 
   expect(extractions).toContain(`text-[#bada55]`)
 })
+
+test('arbitrary properties followed by square bracketed stuff', () => {
+  let extractions = defaultExtractor(
+    '<div class="h-16 items-end border border-white [display:inherit]">[foo]</div>'
+  )
+
+  expect(extractions).toContain(`[display:inherit]`)
+})