archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Ensure nested [] is allowed (#5304)

Browse Source 
This will allow us to write something like:

`grid-cols-[[linename],1fr,auto]`
This commit is contained in:
Robin Malfait 2021-08-26 13:50:39 +02:00 committed by GitHub
parent 5f02fe4811
commit baa8f6528b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/jit/lib/generateRules.js
View File

@ -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[]

12
tests/jit/arbitrary-values.test.css
View File

@ -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;
}

3
tests/jit/arbitrary-values.test.html
View File

@ -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 -->