Fix angle brackets in content (#5585)

* move to real regexes

These regexes are only calculated once so we don't really have a
performance penalty here. However, it's a bit nicer to do it this way
because now you don't have to think about the proper escapes.

/.*/.source will basically take the source of the regex ".*" without
flags and converts it to a string with the proper escapes for you.

Fun fact, this `.source` property has been supported since Chrome,
Firefox and Safari version 1.

* allow for `'>'` in `content-['>']`

Author: RobinMalfait

src/lib/expandTailwindAtRules.js

@@ -7,10 +7,10 @@ let env = sharedState.env
 let contentMatchCache = sharedState.contentMatchCache
 
 const PATTERNS = [
-  "([^<>\"'`\\s]*\\['[^<>\"'`\\s]*'\\])", // `content-['hello']` but not `content-['hello']']`
-  '([^<>"\'`\\s]*\\["[^<>"\'`\\s]*"\\])', // `content-["hello"]` but not `content-["hello"]"]`
-  '([^<>"\'`\\s]*\\[[^<>"\'`\\s]+\\])', // `fill-[#bada55]`
-  '([^<>"\'`\\s]*[^<>"\'`\\s:])', // `px-1.5`, `uppercase` but not `uppercase:`
+  /([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']`
+  /([^<>"'`\s]*\["[^"'`\s]*"\])/.source, // `content-["hello"]` but not `content-["hello"]"]`
+  /([^<>"'`\s]*\[[^"'`\s]+\])/.source, // `fill-[#bada55]`
+  /([^<>"'`\s]*[^"'`\s:])/.source, //  `px-1.5`, `uppercase` but not `uppercase:`].join('|')
 ].join('|')
 const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g')
 const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g

tests/arbitrary-values.test.css

@@ -477,6 +477,9 @@
 .content-\[attr\(content-before\)\] {
   content: attr(content-before);
 }
+.content-\[\'\>\'\] {
+  content: '>';
+}
 @media (min-width: 1024px) {
   .lg\:grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
     grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;

tests/arbitrary-values.test.html

@@ -132,6 +132,7 @@
     <div class="will-change-[top,left] will-change-[var(--will-change)]"></div>
     <div class="content-['hello']"></div>
     <div class="content-[attr(content-before)]"></div>
+    <div class="content-['>']"></div>
     <div class="accent-[#bada55]"></div>
     <div class="accent-[var(--accent-color)]"></div>