Support CSS variables in arbitrary values

Author: adamwathan

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
   }
 

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;

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>