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

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

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

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]`)
+})