wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Include percent sign in font-stretch utilities (#13158)

Browse source 
Include a percent sign in `font-stretch` utilities (e.g. `font-stretch-50%` rather than `font-stretch-50`) to make the meaning of the value clearer.
This commit is contained in:
Kris Braun 2024-03-08 13:32:45 -05:00 • committed by GitHub
parent c550a62be4
commit 5d1e48de14
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 24 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

20
packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
View file

@ -714,16 +714,16 @@ exports[`getClassList 1`] = `
"font-medium",
"font-normal",
"font-semibold",
"font-stretch-100",
"font-stretch-105",
"font-stretch-110",
"font-stretch-125",
"font-stretch-150",
"font-stretch-200",
"font-stretch-50",
"font-stretch-75",
"font-stretch-90",
"font-stretch-95",
"font-stretch-100%",
"font-stretch-105%",
"font-stretch-110%",
"font-stretch-125%",
"font-stretch-150%",
"font-stretch-200%",
"font-stretch-50%",
"font-stretch-75%",
"font-stretch-90%",
"font-stretch-95%",
"font-stretch-condensed",
"font-stretch-expanded",
"font-stretch-extra-condensed",

14
packages/tailwindcss/src/utilities.test.ts
View file

@ -8789,13 +8789,13 @@ test('font-style', () => {
})
test('font-stretch', () => {
expect(run(['font-stretch-ultra-expanded', 'font-stretch-50', 'font-stretch-200']))
expect(run(['font-stretch-ultra-expanded', 'font-stretch-50%', 'font-stretch-200%']))
.toMatchInlineSnapshot(`
".font-stretch-200 {
".font-stretch-200\\% {
font-stretch: 200%;
}
.font-stretch-50 {
.font-stretch-50\\% {
font-stretch: 50%;
}
@ -8804,7 +8804,13 @@ test('font-stretch', () => {
}"
`)
expect(
run(['font-stretch', 'font-stretch-20', 'font-stretch-400', 'font-stretch-potato']),
run([
'font-stretch',
'font-stretch-20%',
'font-stretch-50',
'font-stretch-400%',
'font-stretch-potato',
]),
).toEqual('')
})

7
packages/tailwindcss/src/utilities.ts
View file

@ -2877,17 +2877,18 @@ export function createUtilities(theme: Theme) {
functionalUtility('font-stretch', {
themeKeys: [],
handleBareValue: ({ value }) => {
let num = Number(value)
if (!value.endsWith('%')) return null
let num = Number(value.slice(0, -1))
// Only 50-200% (inclusive) are valid:
// https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch#percentage
if (Number.isNaN(num) || num < 50 || num > 200) return null
return `${value}%`
return value
},
handle: (value) => [decl('font-stretch', value)],
})
suggest('font-stretch', () => [
{
values: ['50', '75', '90', '95', '100', '105', '110', '125', '150', '200'],
values: ['50%', '75%', '90%', '95%', '100%', '105%', '110%', '125%', '150%', '200%'],
},
])