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
This commit is contained in:
Robin Malfait
GitHub
parent
6dd4c334c2
commit
f1221b3fce
3 changed files with 71 additions and 23 deletions
|
|
@ -15,6 +15,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
|
||||
- Remove invalid `min-w/h-none` utilities ([#15845](https://github.com/tailwindlabs/tailwindcss/pull/15845))
|
||||
- Ensure CSS variable shorthand uses valid CSS variables ([#15738](https://github.com/tailwindlabs/tailwindcss/pull/15738))
|
||||
- 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))
|
||||
- Ensure font-size utilities with unknown modifier don't generate CSS ([#15921](https://github.com/tailwindlabs/tailwindcss/pull/15921))
|
||||
|
||||
## [4.0.0] - 2025-01-21
|
||||
|
||||
|
|
@ -334,7 +336,7 @@ For a deep-dive into everything that's new, [check out the announcement post](ht
|
|||
- Rename `drop-shadow` to `drop-shadow-sm` and `drop-shadow-sm` to `drop-shadow-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
|
||||
- Rename `rounded` to `rounded-sm` and `rounded-sm` to `rounded-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
|
||||
- Rename `blur` to `blur-sm` and `blur-sm` to `blur-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
|
||||
- Remove fixed line-height theme values and derive `leading-*` utilites from `--spacing-*` scale ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
|
||||
- Remove fixed line-height theme values and derive `leading-*` utilities from `--spacing-*` scale ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
|
||||
- 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))
|
||||
- Remove default `--spacing-*` scale in favor of `--spacing` multiplier ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
|
||||
- Remove `var(…)` fallbacks from theme values in utilities ([#14881](https://github.com/tailwindlabs/tailwindcss/pull/14881))
|
||||
|
|
|
|||
|
|
@ -14927,6 +14927,7 @@ test('text', async () => {
|
|||
--color-red-500: #ef4444;
|
||||
--text-sm: 0.875rem;
|
||||
--text-sm--line-height: 1.25rem;
|
||||
--leading-snug: 1.375;
|
||||
}
|
||||
@tailwind utilities;
|
||||
`,
|
||||
|
|
@ -14962,6 +14963,9 @@ test('text', async () => {
|
|||
// font-size / line-height / letter-spacing / font-weight
|
||||
'text-sm',
|
||||
'text-sm/6',
|
||||
'text-sm/none',
|
||||
'text-[10px]/none',
|
||||
'text-sm/snug',
|
||||
'text-sm/[4px]',
|
||||
'text-[12px]',
|
||||
'text-[12px]/6',
|
||||
|
|
@ -14986,6 +14990,7 @@ test('text', async () => {
|
|||
--color-red-500: #ef4444;
|
||||
--text-sm: .875rem;
|
||||
--text-sm--line-height: 1.25rem;
|
||||
--leading-snug: 1.375;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
|
|
@ -14993,6 +14998,11 @@ test('text', async () => {
|
|||
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||
}
|
||||
|
||||
.text-\\[10px\\]\\/none {
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.text-\\[12px\\]\\/6 {
|
||||
font-size: 12px;
|
||||
line-height: calc(var(--spacing) * 6);
|
||||
|
|
@ -15028,6 +15038,16 @@ test('text', async () => {
|
|||
line-height: 4px;
|
||||
}
|
||||
|
||||
.text-sm\\/none {
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.text-sm\\/snug {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--leading-snug);
|
||||
}
|
||||
|
||||
.text-\\[12px\\] {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
@ -15121,29 +15141,39 @@ test('text', async () => {
|
|||
}"
|
||||
`)
|
||||
expect(
|
||||
await run([
|
||||
'text',
|
||||
// color
|
||||
'-text-red-500',
|
||||
'-text-red-500/50',
|
||||
'-text-red-500/[0.5]',
|
||||
'-text-red-500/[50%]',
|
||||
'-text-current',
|
||||
'-text-current/50',
|
||||
'-text-current/[0.5]',
|
||||
'-text-current/[50%]',
|
||||
'-text-inherit',
|
||||
'-text-transparent',
|
||||
'-text-[#0088cc]',
|
||||
'-text-[#0088cc]/50',
|
||||
'-text-[#0088cc]/[0.5]',
|
||||
'-text-[#0088cc]/[50%]',
|
||||
await compileCss(
|
||||
css`
|
||||
@theme inline reference {
|
||||
--text-sm: 0.875rem;
|
||||
}
|
||||
@tailwind utilities;
|
||||
`,
|
||||
[
|
||||
'text',
|
||||
// color
|
||||
'-text-red-500',
|
||||
'-text-red-500/50',
|
||||
'-text-red-500/[0.5]',
|
||||
'-text-red-500/[50%]',
|
||||
'-text-current',
|
||||
'-text-current/50',
|
||||
'-text-current/[0.5]',
|
||||
'-text-current/[50%]',
|
||||
'-text-inherit',
|
||||
'-text-transparent',
|
||||
'-text-[#0088cc]',
|
||||
'-text-[#0088cc]/50',
|
||||
'-text-[#0088cc]/[0.5]',
|
||||
'-text-[#0088cc]/[50%]',
|
||||
|
||||
// font-size / line-height / letter-spacing / font-weight
|
||||
'-text-sm',
|
||||
'-text-sm/6',
|
||||
'-text-sm/[4px]',
|
||||
]),
|
||||
// font-size / line-height / letter-spacing / font-weight
|
||||
'-text-sm',
|
||||
'-text-sm/6',
|
||||
'text-sm/foo',
|
||||
'-text-sm/[4px]',
|
||||
'text-[10px]/foo',
|
||||
],
|
||||
),
|
||||
).toEqual('')
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -4040,9 +4040,16 @@ export function createUtilities(theme: Theme) {
|
|||
modifier = `calc(${multiplier} * ${candidate.modifier.value})`
|
||||
}
|
||||
|
||||
// Shorthand for `leading-none`
|
||||
if (!modifier && candidate.modifier.value === 'none') {
|
||||
modifier = '1'
|
||||
}
|
||||
|
||||
if (modifier) {
|
||||
return [decl('font-size', value), decl('line-height', modifier)]
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
return [decl('font-size', value)]
|
||||
|
|
@ -4086,6 +4093,15 @@ export function createUtilities(theme: Theme) {
|
|||
modifier = `calc(${multiplier} * ${candidate.modifier.value})`
|
||||
}
|
||||
|
||||
// Shorthand for `leading-none`
|
||||
if (!modifier && candidate.modifier.value === 'none') {
|
||||
modifier = '1'
|
||||
}
|
||||
|
||||
if (!modifier) {
|
||||
return null
|
||||
}
|
||||
|
||||
let declarations = [decl('font-size', fontSize)]
|
||||
modifier && declarations.push(decl('line-height', modifier))
|
||||
return declarations
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue