diff --git a/src/UtilityParser.ts b/src/UtilityParser.ts index fe8d559..bf2192c 100644 --- a/src/UtilityParser.ts +++ b/src/UtilityParser.ts @@ -133,7 +133,7 @@ export default class UtilityParser { } if (this.consumePeeked(`text-`)) { - style = fontSize(this.rest, theme?.fontSize, this.context); + style = fontSize(this.rest, theme, this.context); if (style) return style; style = color(`text`, this.rest, theme?.textColor); diff --git a/src/__tests__/font-size.spec.ts b/src/__tests__/font-size.spec.ts index 39124b5..ac3e9c0 100644 --- a/src/__tests__/font-size.spec.ts +++ b/src/__tests__/font-size.spec.ts @@ -28,6 +28,11 @@ describe(`font size`, () => { expect(tw`text-[50vh]`).toMatchObject({ fontSize: 300 }); }); + test(`line-height shorthand, jared`, () => { + expect(tw`text-sm leading-6`).toMatchObject({ fontSize: 14, lineHeight: 24 }); + expect(tw`text-sm/6`).toMatchObject({ fontSize: 14, lineHeight: 24 }); + }); + test(`font-sizes with relative line-height`, () => { const config: TwConfig = { theme: { diff --git a/src/resolve/font-size.ts b/src/resolve/font-size.ts index e7ce36e..06cfebe 100644 --- a/src/resolve/font-size.ts +++ b/src/resolve/font-size.ts @@ -9,13 +9,26 @@ import { parseNumericValue, unconfiggedStyle, } from '../helpers'; +import resolveLineHeight from './line-height'; export default function fontSize( value: string, - config?: TwTheme['fontSize'], + config?: TwTheme, context: ParseContext = {}, ): StyleIR | null { - const configValue = config?.[value]; + if (value.includes(`/`)) { + const [fontSizeValue = ``, lineHeightValue = ``] = value.split(`/`, 2); + const lh = resolveLineHeight(lineHeightValue, config?.lineHeight); + const fs = fontSize(fontSizeValue, config, context); + if (fs?.kind === `complete` && lh?.kind === `complete`) { + return { + kind: `complete`, + style: { ...fs.style, ...lh.style }, + }; + } + } + + const configValue = config?.fontSize?.[value]; if (!configValue) { return unconfiggedStyle(`fontSize`, value, context); } @@ -25,17 +38,19 @@ export default function fontSize( } let style: Style = {}; - const [fontSize, rest] = configValue; - const fontSizeStyle = getStyle(`fontSize`, fontSize); + const [sizePart, otherProps] = configValue; + const fontSizeStyle = getStyle(`fontSize`, sizePart); if (fontSizeStyle) { style = fontSizeStyle; } - if (typeof rest === `string`) { - return complete(mergeStyle(`lineHeight`, calculateLineHeight(rest, style), style)); + if (typeof otherProps === `string`) { + return complete( + mergeStyle(`lineHeight`, calculateLineHeight(otherProps, style), style), + ); } - const { lineHeight, letterSpacing } = rest; + const { lineHeight, letterSpacing } = otherProps; if (lineHeight) { mergeStyle(`lineHeight`, calculateLineHeight(lineHeight, style), style); }