Improve jsx interpolation candidate matching (#6593)

* ensure that strangely used jsx with interpolation gets detected

Co-authored-by: Luke Warlow <[email protected]>
Co-authored-by: Jordan Pittman <[email protected]>

* update changelog

Co-authored-by: Luke Warlow <[email protected]>
Co-authored-by: Jordan Pittman <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve circular dependency detection when using `@apply` ([#6588](https://github.com/tailwindlabs/tailwindcss/pull/6588))
 - Only generate variants for non-`user` layers ([#6589](https://github.com/tailwindlabs/tailwindcss/pull/6589))
 - Properly extract classes with arbitrary values in arrays and classes followed by escaped quotes ([#6590](https://github.com/tailwindlabs/tailwindcss/pull/6590))
+- Improve jsx interpolation candidate matching ([#6593](https://github.com/tailwindlabs/tailwindcss/pull/6593))
 
 ## [3.0.6] - 2021-12-16
 

src/lib/defaultExtractor.js

@@ -17,7 +17,7 @@ const PATTERNS = [
 ].join('|')
 
 const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g')
-const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g
+const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g
 
 /**
  * @param {string} content

tests/default-extractor.test.js

@@ -1,7 +1,9 @@
 import { html } from './util/run'
 import { defaultExtractor } from '../src/lib/defaultExtractor'
 
-const input = html`
+let jsxExample = "<div className={`overflow-scroll${conditionIsOpen ? '' : ' hidden'}`}></div>"
+const input =
+  html`
   <div class="font-['some_font',sans-serif]"></div>
   <div class='font-["some_font",sans-serif]'></div>
   <div class="bg-[url('...')]"></div>
@@ -44,7 +46,7 @@ const input = html`
       uppercase:true
     }
   </script>
-`
+` + jsxExample
 
 const includes = [
   `font-['some_font',sans-serif]`,
@@ -84,6 +86,7 @@ const includes = [
   `lg:text-[24px]`,
   `content-['>']`,
   `hover:test`,
+  `overflow-scroll`,
 ]
 
 const excludes = [