Improve RegEx parser, reduce possibilities as the key for arbitrary p…

…roperties (#12121)

* optimize handling of RegEx parser results

Previous:
- Copy `results`, for every subsequent result of other `patterns`
- Loop over results to filter out `undefined` values
- Loop over results to map to `clipAtBalancedParens`

Current:
- For each candidate, push the `clipAtBalancedParens(candidate)` into
  the `results`

This way we are not copying existing results, and we are also avoiding
additional loops over the entire array to filter out `undefined` values
and map to `clipAtBalancedParens`.

* do not allow `]` in the first part of arbitrary properties

```
[foo:bar]
 ─┬─
  └── This part cannot contain `]`
```

This is also a very targeted fix for when the arbitrary properties seem
to match a large piece of text, but shouldn't

* add real world tests for parsing candidate strings

* sync package-lock.json

* update changelog

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update types to work with `Node16` module resolution ([#12097](https://github.com/tailwindlabs/tailwindcss/pull/12097))
 - Don’t crash when important and parent selectors are equal in `@apply` ([#12112](https://github.com/tailwindlabs/tailwindcss/pull/12112))
 - Eliminate irrelevant rules when applying variants ([#12113](https://github.com/tailwindlabs/tailwindcss/pull/12113))
+- Improve RegEx parser, reduce possibilities as the key for arbitrary properties ([#12121](https://github.com/tailwindlabs/tailwindcss/pull/12121))
 
 ### Added
 

src/lib/defaultExtractor.js

@@ -11,10 +11,12 @@ export function defaultExtractor(context) {
     let results = []
 
     for (let pattern of patterns) {
-      results = [...results, ...(content.match(pattern) ?? [])]
+      for (let result of content.match(pattern) ?? []) {
+        results.push(clipAtBalancedParens(result))
+      }
     }
 
-    return results.filter((v) => v !== undefined).map(clipAtBalancedParens)
+    return results
   }
 }
 
@@ -33,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/parse-candidate-strings.test.js

@@ -438,4 +438,25 @@ describe.each([
       expect(extractions).not.toContain(`bold`)
     })
   })
+
+  describe('real world', () => {
+    it.each([
+      [
+        'const myCVAComponent = cva([],{defaultVariants:{size:"md"},variants:{size:{sm:["p-1"],md:["p-1.5"],lg:["p-2"],xl:["p-2.5"]}}});',
+      ],
+      [
+        'const myCVAComponent = cva([],{defaultVariants:{size:"md"}, variants:{size:{sm:["p-1"],md:["p-1.5"],lg:["p-2"],xl:["p-2.5"]}}});',
+      ],
+      [
+        'const myCVAComponent = cva("",{defaultVariants:{size:"md"},variants:{size:{sm:["p-1"],md:["p-1.5"],lg:["p-2"],xl:["p-2.5"]}}});',
+      ],
+    ])('should work for issue #12109 (%#)', async (content) => {
+      let extractions = parse(content)
+
+      expect(extractions).toContain('p-1')
+      expect(extractions).toContain('p-1.5')
+      expect(extractions).toContain('p-2')
+      expect(extractions).toContain('p-2.5')
+    })
+  })
 })