Allow quotes in arbitrary value blocks (tailwindlabs#4625)

Author: adamwathan

src/jit/lib/expandTailwindAtRules.js

@@ -6,7 +6,7 @@ import cloneNodes from '../../util/cloneNodes'
 let env = sharedState.env
 let contentMatchCache = sharedState.contentMatchCache
 
-const BROAD_MATCH_GLOBAL_REGEXP = /[^<>"'`\s]*[^<>"'`\s:]/g
+const BROAD_MATCH_GLOBAL_REGEXP = /([^<>"'`\s]*\[[^<>\s]+\])|([^<>"'`\s]*[^<>"'`\s:])/g
 const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g
 
 const builtInExtractors = {

tests/jit/arbitrary-values.test.css

@@ -391,6 +391,9 @@
 .duration-\[var\(--app-duration\)\] {
   transition-duration: var(--app-duration);
 }
+.content-\[\'hello\'\] {
+  content: 'hello';
+}
 .content-\[attr\(content-before\)\] {
   content: attr(content-before);
 }

tests/jit/arbitrary-values.test.html

@@ -111,6 +111,7 @@
     <div class="ring-offset-[19rem]"></div>
     <div class="ring-opacity-[var(--ring-opacity)]"></div>
     <div class="delay-[var(--delay)]"></div>
+    <div class="content-['hello']"></div>
     <div class="content-[attr(content-before)]"></div>
   </body>
 </html>