Support font-weight in font-size utilities (#8763)
* Support font-weight in font-size utilities * WIP update tests * Update changelog Co-authored-by: Jordan Pittman <jordan@cryptica.me>
This commit is contained in:
parent
1318cb6064
commit
6729524185
4 changed files with 35 additions and 1 deletions
|
|
@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
- Fix usage of special-character prefixes ([#8772](https://github.com/tailwindlabs/tailwindcss/pull/8772))
|
||||
- Don’t prefix selectors in arbitrary variants ([#8773](https://github.com/tailwindlabs/tailwindcss/pull/8773))
|
||||
- Add support for alpha values in safe list ([#8774](https://github.com/tailwindlabs/tailwindcss/pull/8774))
|
||||
- Support default `font-weight`s in font size utilities ([#8763](https://github.com/tailwindlabs/tailwindcss/pull/8763))
|
||||
|
||||
## [3.1.4] - 2022-06-21
|
||||
|
||||
|
|
|
|||
|
|
@ -1613,7 +1613,7 @@ export let corePlugins = {
|
|||
{
|
||||
text: (value) => {
|
||||
let [fontSize, options] = Array.isArray(value) ? value : [value]
|
||||
let { lineHeight, letterSpacing } = isPlainObject(options)
|
||||
let { lineHeight, letterSpacing, fontWeight } = isPlainObject(options)
|
||||
? options
|
||||
: { lineHeight: options }
|
||||
|
||||
|
|
@ -1621,6 +1621,7 @@ export let corePlugins = {
|
|||
'font-size': fontSize,
|
||||
...(lineHeight === undefined ? {} : { 'line-height': lineHeight }),
|
||||
...(letterSpacing === undefined ? {} : { 'letter-spacing': letterSpacing }),
|
||||
...(fontWeight === undefined ? {} : { 'font-weight': fontWeight }),
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -88,3 +88,34 @@ test('font-size utilities can include a default line-height and letter-spacing',
|
|||
`)
|
||||
})
|
||||
})
|
||||
|
||||
test('font-size utilities can include a font-weight', () => {
|
||||
let config = {
|
||||
content: [{ raw: html`<div class="text-md text-sm text-lg"></div>` }],
|
||||
theme: {
|
||||
fontSize: {
|
||||
sm: '12px',
|
||||
md: ['16px', { lineHeight: '24px', fontWeight: 500 }],
|
||||
lg: ['20px', { lineHeight: '28px', fontWeight: 'bold' }],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
expect(result.css).toMatchCss(css`
|
||||
.text-md {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.text-sm {
|
||||
font-size: 12px;
|
||||
}
|
||||
.text-lg {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
1
types/config.d.ts
vendored
1
types/config.d.ts
vendored
|
|
@ -164,6 +164,7 @@ interface ThemeConfig {
|
|||
configuration: Partial<{
|
||||
lineHeight: string
|
||||
letterSpacing: string
|
||||
fontWeight: string | number
|
||||
}>
|
||||
]
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue