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

[JIT] Support CSS Variables in arbitrary calc (#4147)

Browse Source
This commit is contained in:
Nurettin Kaya 2021-04-30 06:00:36 -07:00 committed by Adam Wathan
parent 2db2f60393
commit 7c0e4bce4d
3 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
jit/pluginUtils.js
View File

@ -112,7 +112,10 @@ function asValue(modifier, lookup = {}, { validate = () => true, transform = (v)
}
// add spaces around operators inside calc() that do not follow an operator or (
return transform(value).replace(/(?<=^calc\(.+?)(?<![-+*/(])([-+*/])/g, ' $1 ')
return transform(value).replace(
/(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g,
'$1 $2 '
)
}
function asUnit(modifier, units, lookup = {}) {

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

@ -49,9 +49,18 @@
.w-\[calc\(100\%\+1rem\)\] {
width: calc(100% + 1rem);
}
.w-\[calc\(var\(--10-10px\2c calc\(-20px-\(-30px--40px\)\)\)-50px\)\] {
width: calc(var(--10-10px, calc(-20px - (-30px - -40px))) - 50px);
}
.w-\[var\(--width\)\] {
width: var(--width);
}
.w-\[var\(--width\2c calc\(100\%\+1rem\)\)\] {
width: var(--width, calc(100% + 1rem));
}
.w-\[calc\(100\%\/3-1rem\*2\)\] {
width: calc(100% / 3 - 1rem * 2);
}
.min-w-\[3\.23rem\] {
min-width: 3.23rem;
}

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

@ -16,7 +16,10 @@
<div class="border-[2.5px]"></div>
<div class="w-[3.23rem]"></div>
<div class="w-[calc(100%+1rem)]"></div>
<div class="w-[calc(var(--10-10px,calc(-20px-(-30px--40px)))-50px)]"></div>
<div class="w-[var(--width)]"></div>
<div class="w-[var(--width,calc(100%+1rem))]"></div>
<div class="w-[calc(100%/3-1rem*2)]"></div>
<div class="min-w-[3.23rem]"></div>
<div class="min-w-[calc(100%+1rem)]"></div>
<div class="min-w-[var(--width)]"></div>