Skip to content

Commit f1221b3

Browse files
RobinMalfaitRobinMalfait
authored
Ensure font-size utilities with none modifier works e.g.: text-sm/none (#15921)
This PR fixes an issue where classes such as `text-sm/none` don't work as expected. The reason for this is that `leading-none` is the only hardcoded leading utility and is not coming from the `@theme`. This means that `text-sm/none` tries to do a lookup for `none` but it won't resolve. This PR fixes that by allowing `none` as a modifier. While working on this, I noticed that `text-sm/none` _did_ generate CSS: ```css .text-sm\/none { font-size: var(--text-sm); } ``` Notice that the `line-height` is missing. This means that any modifier that can't be resolved doesn't get the `line-height` set, but it _will_ generate CSS. In this case, no CSS should have been generated. Otherwise, all of these generate CSS which will only bloat your CSS and won't work as expected. E.g.: `text-sm/foo`, `text-sm/bar`, and `text-sm/baz`: ```css .text-sm\/bar { font-size: var(--text-sm); } .text-sm\/baz { font-size: var(--text-sm); } .text-sm\/foo { font-size: var(--text-sm); } ``` Fixes: #15911
1 parent 6dd4c33 commit f1221b3

File tree

3 files changed

+72
-24
lines changed

3 files changed

+72
-24
lines changed

‎CHANGELOG.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1515

1616
- Remove invalid `min-w/h-none` utilities ([#15845](https://github.com/tailwindlabs/tailwindcss/pull/15845))
1717
- Ensure CSS variable shorthand uses valid CSS variables ([#15738](https://github.com/tailwindlabs/tailwindcss/pull/15738))
18+
- Ensure font-size utilities with `none` modifier have a line-height set e.g.: `text-sm/none` ([#15921](https://github.com/tailwindlabs/tailwindcss/pull/15921))
19+
- Ensure font-size utilities with unknown modifier don't generate CSS ([#15921](https://github.com/tailwindlabs/tailwindcss/pull/15921))
1820

1921
## [4.0.0] - 2025-01-21
2022

@@ -334,7 +336,7 @@ For a deep-dive into everything that's new, [check out the announcement post](ht
334336
- Rename `drop-shadow` to `drop-shadow-sm` and `drop-shadow-sm` to `drop-shadow-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
335337
- Rename `rounded` to `rounded-sm` and `rounded-sm` to `rounded-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
336338
- Rename `blur` to `blur-sm` and `blur-sm` to `blur-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
337-
- Remove fixed line-height theme values and derive `leading-*` utilites from `--spacing-*` scale ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
339+
- Remove fixed line-height theme values and derive `leading-*` utilities from `--spacing-*` scale ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
338340
- Remove `--transition-timing-function-linear` from the default theme in favor of a static `ease-linear` utility ([#14880](https://github.com/tailwindlabs/tailwindcss/pull/14880))
339341
- Remove default `--spacing-*` scale in favor of `--spacing` multiplier ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
340342
- Remove `var(…)` fallbacks from theme values in utilities ([#14881](https://github.com/tailwindlabs/tailwindcss/pull/14881))

‎packages/tailwindcss/src/utilities.test.ts

Lines changed: 53 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -14927,6 +14927,7 @@ test('text', async () => {
1492714927
--color-red-500: #ef4444;
1492814928
--text-sm: 0.875rem;
1492914929
--text-sm--line-height: 1.25rem;
14930+
--leading-snug: 1.375;
1493014931
}
1493114932
@tailwind utilities;
1493214933
`,
@@ -14962,6 +14963,9 @@ test('text', async () => {
1496214963
// font-size / line-height / letter-spacing / font-weight
1496314964
'text-sm',
1496414965
'text-sm/6',
14966+
'text-sm/none',
14967+
'text-[10px]/none',
14968+
'text-sm/snug',
1496514969
'text-sm/[4px]',
1496614970
'text-[12px]',
1496714971
'text-[12px]/6',
@@ -14986,13 +14990,19 @@ test('text', async () => {
1498614990
--color-red-500: #ef4444;
1498714991
--text-sm: .875rem;
1498814992
--text-sm--line-height: 1.25rem;
14993+
--leading-snug: 1.375;
1498914994
}
1499014995
1499114996
.text-sm {
1499214997
font-size: var(--text-sm);
1499314998
line-height: var(--tw-leading, var(--text-sm--line-height));
1499414999
}
1499515000
15001+
.text-\\[10px\\]\\/none {
15002+
font-size: 10px;
15003+
line-height: 1;
15004+
}
15005+
1499615006
.text-\\[12px\\]\\/6 {
1499715007
font-size: 12px;
1499815008
line-height: calc(var(--spacing) * 6);
@@ -15028,6 +15038,16 @@ test('text', async () => {
1502815038
line-height: 4px;
1502915039
}
1503015040
15041+
.text-sm\\/none {
15042+
font-size: var(--text-sm);
15043+
line-height: 1;
15044+
}
15045+
15046+
.text-sm\\/snug {
15047+
font-size: var(--text-sm);
15048+
line-height: var(--leading-snug);
15049+
}
15050+
1503115051
.text-\\[12px\\] {
1503215052
font-size: 12px;
1503315053
}
@@ -15121,29 +15141,39 @@ test('text', async () => {
1512115141
}"
1512215142
`)
1512315143
expect(
15124-
await run([
15125-
'text',
15126-
// color
15127-
'-text-red-500',
15128-
'-text-red-500/50',
15129-
'-text-red-500/[0.5]',
15130-
'-text-red-500/[50%]',
15131-
'-text-current',
15132-
'-text-current/50',
15133-
'-text-current/[0.5]',
15134-
'-text-current/[50%]',
15135-
'-text-inherit',
15136-
'-text-transparent',
15137-
'-text-[#0088cc]',
15138-
'-text-[#0088cc]/50',
15139-
'-text-[#0088cc]/[0.5]',
15140-
'-text-[#0088cc]/[50%]',
15141-
15142-
// font-size / line-height / letter-spacing / font-weight
15143-
'-text-sm',
15144-
'-text-sm/6',
15145-
'-text-sm/[4px]',
15146-
]),
15144+
await compileCss(
15145+
css`
15146+
@theme inline reference {
15147+
--text-sm: 0.875rem;
15148+
}
15149+
@tailwind utilities;
15150+
`,
15151+
[
15152+
'text',
15153+
// color
15154+
'-text-red-500',
15155+
'-text-red-500/50',
15156+
'-text-red-500/[0.5]',
15157+
'-text-red-500/[50%]',
15158+
'-text-current',
15159+
'-text-current/50',
15160+
'-text-current/[0.5]',
15161+
'-text-current/[50%]',
15162+
'-text-inherit',
15163+
'-text-transparent',
15164+
'-text-[#0088cc]',
15165+
'-text-[#0088cc]/50',
15166+
'-text-[#0088cc]/[0.5]',
15167+
'-text-[#0088cc]/[50%]',
15168+
15169+
// font-size / line-height / letter-spacing / font-weight
15170+
'-text-sm',
15171+
'-text-sm/6',
15172+
'text-sm/foo',
15173+
'-text-sm/[4px]',
15174+
'text-[10px]/foo',
15175+
],
15176+
),
1514715177
).toEqual('')
1514815178
})
1514915179

‎packages/tailwindcss/src/utilities.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4040,9 +4040,16 @@ export function createUtilities(theme: Theme) {
40404040
modifier = `calc(${multiplier} * ${candidate.modifier.value})`
40414041
}
40424042

4043+
// Shorthand for `leading-none`
4044+
if (!modifier && candidate.modifier.value === 'none') {
4045+
modifier = '1'
4046+
}
4047+
40434048
if (modifier) {
40444049
return [decl('font-size', value), decl('line-height', modifier)]
40454050
}
4051+
4052+
return null
40464053
}
40474054

40484055
return [decl('font-size', value)]
@@ -4086,6 +4093,15 @@ export function createUtilities(theme: Theme) {
40864093
modifier = `calc(${multiplier} * ${candidate.modifier.value})`
40874094
}
40884095

4096+
// Shorthand for `leading-none`
4097+
if (!modifier && candidate.modifier.value === 'none') {
4098+
modifier = '1'
4099+
}
4100+
4101+
if (!modifier) {
4102+
return null
4103+
}
4104+
40894105
let declarations = [decl('font-size', fontSize)]
40904106
modifier && declarations.push(decl('line-height', modifier))
40914107
return declarations

0 commit comments

Comments
 (0)