From baa8f6528b713b2443a3f6224a42bc5568153d5a Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 26 Aug 2021 13:50:39 +0200
Subject: [PATCH] Ensure nested [] is allowed (#5304)

This will allow us to write something like:

`grid-cols-[[linename],1fr,auto]`
---
 src/jit/lib/generateRules.js         |  5 ++++-
 tests/jit/arbitrary-values.test.css  | 12 ++++++++++++
 tests/jit/arbitrary-values.test.html |  3 ---
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/jit/lib/generateRules.js b/src/jit/lib/generateRules.js
index c510942b1..8089984c8 100644
--- a/src/jit/lib/generateRules.js
+++ b/src/jit/lib/generateRules.js
@@ -17,6 +17,9 @@ function getClassNameFromSelector(selector) {
 // ['ring-offset-blue', '100']
 // ['ring-offset', 'blue-100']
 // ['ring', 'offset-blue-100']
+// Example with dynamic classes:
+// ['grid-cols', '[[linename],1fr,auto]']
+// ['grid', 'cols-[[linename],1fr,auto]']
 function* candidatePermutations(candidate, lastIndex = Infinity) {
   if (lastIndex < 0) {
     return
@@ -25,7 +28,7 @@ function* candidatePermutations(candidate, lastIndex = Infinity) {
   let dashIdx
 
   if (lastIndex === Infinity && candidate.endsWith(']')) {
-    let bracketIdx = candidate.lastIndexOf('[')
+    let bracketIdx = candidate.indexOf('[')
 
     // If character before `[` isn't a dash or a slash, this isn't a dynamic class
     // eg. string[]
diff --git a/tests/jit/arbitrary-values.test.css b/tests/jit/arbitrary-values.test.css
index 2b911158b..ef080df80 100644
--- a/tests/jit/arbitrary-values.test.css
+++ b/tests/jit/arbitrary-values.test.css
@@ -103,12 +103,21 @@
     }
   }
 }
+.w-\[\[\]\] {
+  width: [];
+}
+.w-\[\[\[\]\]\] {
+  width: [[]];
+}
 .w-\[\(\)\] {
   width: ();
 }
 .w-\[\(\(\)\)\] {
   width: (());
 }
+.w-\[\'\]\[\]\'\] {
+  width: '][]';
+}
 .w-\[\'\)\(\)\'\] {
   width: ')()';
 }
@@ -169,6 +178,9 @@
 .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;
 }
+.grid-cols-\[\[linename\]\2c 1fr\2c auto\] {
+  grid-template-columns: [linename] 1fr auto;
+}
 .grid-rows-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
   grid-template-rows: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
 }
diff --git a/tests/jit/arbitrary-values.test.html b/tests/jit/arbitrary-values.test.html
index c7cff0497..61b664be0 100644
--- a/tests/jit/arbitrary-values.test.html
+++ b/tests/jit/arbitrary-values.test.html
@@ -135,9 +135,6 @@
     <div class="w-['][]']"></div><!-- VALID -->
     <div class="w-[')()']"></div><!-- VALID -->
     <div class="w-['}{}']"></div><!-- VALID -->
-    <div class="w-[[']']]"></div><!-- VALID -->
-    <div class="w-[(')')]"></div><!-- VALID -->
-    <div class="w-[{'}'}]"></div><!-- VALID -->
     <div class="w-[{[}]]"></div><!-- INVALID -->
     <div class="w-[[{]}]"></div><!-- INVALID -->
     <div class="w-[{(})]"></div><!-- INVALID -->