Ensure nested [] is allowed (#5304)

This will allow us to write something like: `grid-cols-[[linename],1fr,auto]`
tailwindlabs · Aug 26, 2021 · baa8f65 · baa8f65
1 parent 5f02fe4
commit baa8f65
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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 -->