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

Add arbitrary value support for vertical-align utilities

Browse Source
This commit is contained in:
Adam Wathan 2021-09-12 16:27:33 -04:00
parent 6816ad66a0
commit 16a910b0f5
3 changed files with 72 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/corePlugins.js
View File

@ -1477,7 +1477,7 @@ export let textAlign = ({ addUtilities }) => {
export let textIndent = createUtilityPlugin('textIndent', [['indent', ['text-indent']]])
export let verticalAlign = ({ addUtilities }) => {
export let verticalAlign = ({ addUtilities, matchUtilities }) => {
addUtilities({
'.align-baseline': { 'vertical-align': 'baseline' },
'.align-top': { 'vertical-align': 'top' },
@ -1488,6 +1488,15 @@ export let verticalAlign = ({ addUtilities }) => {
'.align-sub': { 'vertical-align': 'sub' },
'.align-super': { 'vertical-align': 'super' },
})
matchUtilities(
{
align: (value) => ({
'vertical-align': value,
}),
},
{ values: {}, type: 'any' }
)
}
export let fontFamily = createUtilityPlugin('fontFamily', [['font', ['fontFamily']]], {

3
tests/arbitrary-values.test.css
View File

@ -323,6 +323,9 @@
.indent-\[var\(--indent\)\] {
text-indent: var(--indent);
}
.align-\[10em\] {
vertical-align: 10em;
}
.text-\[2\.23rem\] {
font-size: 2.23rem;
}

84
tests/arbitrary-values.test.html
View File

@ -56,6 +56,7 @@
<div class="skew-x-[3px]"></div>
<div class="skew-y-[3px]"></div>
<div class="indent-[50%] indent-[var(--indent)]"></div>
<div class="align-[10em]"></div>
<div class="text-[2.23rem]"></div>
<div class="text-[length:var(--font-size)]"></div>
<div class="text-[color:var(--color)]"></div>
@ -72,10 +73,20 @@
<div class="mt-[clamp(30px,100px)]"></div>
<div class="rounded-[11px]"></div>
<div
class="rounded-t-[var(--radius)] rounded-r-[var(--radius)] rounded-b-[var(--radius)] rounded-l-[var(--radius)]"
class="
rounded-t-[var(--radius)]
rounded-r-[var(--radius)]
rounded-b-[var(--radius)]
rounded-l-[var(--radius)]
"
></div>
<div
class="rounded-tr-[var(--radius)] rounded-br-[var(--radius)] rounded-bl-[var(--radius)] rounded-tl-[var(--radius)]"
class="
rounded-tr-[var(--radius)]
rounded-br-[var(--radius)]
rounded-bl-[var(--radius)]
rounded-tl-[var(--radius)]
"
></div>
<div class="duration-[var(--app-duration)]"></div>
<div class="p-[var(--app-padding)]"></div>
@ -125,28 +136,51 @@
<div class="accent-[var(--accent-color)]"></div>
<!-- Balancing issues, this is not checking the validity of the actual value, but purely syntax-wise -->
<div class="w-[do-not-generate-this]w-[it-is-invalid-syntax]"></div><!-- INVALID -->
<div class="grid-cols-[[linename],1fr,auto]"></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><!-- VALID -->
<div class="w-[][]"></div><!-- INVALID -->
<div class="w-[)(]"></div><!-- INVALID -->
<div class="w-[}{]"></div><!-- INVALID -->
<div class="w-[][]]"></div><!-- INVALID -->
<div class="w-[)()]"></div><!-- INVALID -->
<div class="w-[}{}]"></div><!-- INVALID -->
<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 -->
<div class="w-[({)}]"></div><!-- INVALID -->
<div class="w-[([)]]"></div><!-- INVALID -->
<div class="w-[[(])]"></div><!-- INVALID -->
<div class="w-[do-not-generate-this]w-[it-is-invalid-syntax]"></div>
<!-- INVALID -->
<div class="grid-cols-[[linename],1fr,auto]"></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>
<!-- VALID -->
<div class="w-[][]"></div>
<!-- INVALID -->
<div class="w-[)(]"></div>
<!-- INVALID -->
<div class="w-[}{]"></div>
<!-- INVALID -->
<div class="w-[][]]"></div>
<!-- INVALID -->
<div class="w-[)()]"></div>
<!-- INVALID -->
<div class="w-[}{}]"></div>
<!-- INVALID -->
<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 -->
<div class="w-[({)}]"></div>
<!-- INVALID -->
<div class="w-[([)]]"></div>
<!-- INVALID -->
<div class="w-[[(])]"></div>
<!-- INVALID -->
</body>
</html>