From a4d1bdb7fa37583e509d1c3f6fc75dc5fdadb490 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 24 Sep 2021 15:22:23 +0200
Subject: [PATCH] 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-['>']`
---
 src/lib/expandTailwindAtRules.js | 8 ++++----
 tests/arbitrary-values.test.css  | 3 +++
 tests/arbitrary-values.test.html | 1 +
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/lib/expandTailwindAtRules.js b/src/lib/expandTailwindAtRules.js
index c046bea8b..4ed2c5cf2 100644
--- a/src/lib/expandTailwindAtRules.js
+++ b/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
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index 9188a594f..2b81c7820 100644
--- a/tests/arbitrary-values.test.css
+++ b/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;
diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
index 65f93df51..505f96bd8 100644
--- a/tests/arbitrary-values.test.html
+++ b/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>