Support CSS variables in arbitrary values

tailwindlabs · Mar 19, 2021 · d628fbc · d628fbc
1 parent 798eb2a
commit d628fbc
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
@@ -17,8 +17,15 @@ function getClassNameFromSelector(selector) {
 // ['ring-offset', 'blue-100']
 // ['ring', 'offset-blue-100']
 function* candidatePermutations(prefix, modifier = '') {
-  let dashIdx = prefix.lastIndexOf('-')
-  if (dashIdx === -1) {
+  let dashIdx
+
+  if (modifier.endsWith(']')) {
+    dashIdx = prefix.lastIndexOf('[') - 1
+  } else {
+    dashIdx = prefix.lastIndexOf('-')
+  }
+
+  if (dashIdx < 0) {
     return
   }
 

diff --git a/tests/08-arbitrary-values.test.css b/tests/08-arbitrary-values.test.css
@@ -82,6 +82,9 @@
 .duration-\[2s\] {
   transition-duration: 2s;
 }
+.duration-\[var\(--app-duration\)\] {
+  transition-duration: var(--app-duration);
+}
 @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/08-arbitrary-values.test.html b/tests/08-arbitrary-values.test.html
@@ -24,5 +24,6 @@
     <div class="text-[2.23rem]"></div>
     <div class="duration-[2s]"></div>
     <div class="mt-[clamp(30px,100px)]"></div>
+    <div class="duration-[var(--app-duration)]"></div>
   </body>
 </html>