diff --git a/changelog.md b/changelog.md index 39b47f0..bbc7231 100644 --- a/changelog.md +++ b/changelog.md @@ -6,6 +6,12 @@ on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project ad [comment]: # 'Section Titles: Added/Fixed/Changed/Removed' +## [4.3.0] - 2024-06-18 + +- added support for line-height shorthand with font-size (eg. `text-sm/6`) + [(#282)](https://github.com/jaredh159/tailwind-react-native-classnames/issues/292) and + [(#293)](https://github.com/jaredh159/tailwind-react-native-classnames/pull/293) + ## [4.2.0] - 2024-03-22 ### Added 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..7a68454 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`, () => { + 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/__tests__/prefix-match.spec.ts b/src/__tests__/prefix-match.spec.ts index 6199045..5672eb2 100644 --- a/src/__tests__/prefix-match.spec.ts +++ b/src/__tests__/prefix-match.spec.ts @@ -25,6 +25,14 @@ describe(`tw.prefixMatch()`, () => { tw = create(); expect(tw.prefixMatch(`ios`)).toBe(false); expect(tw.prefixMatch(`android`)).toBe(true); + expect(tw`web:self-center`).toEqual({}); + expect(tw`not-valid-util`).toEqual({}); + rn.Platform.OS = `web`; + tw = create(); + expect(tw.prefixMatch(`ios`)).toBe(false); + expect(tw.prefixMatch(`android`)).toBe(false); + expect(tw.prefixMatch(`web`)).toBe(true); + expect(tw`web:self-center`).toEqual({ alignSelf: `center` }); }); test(`breakpoint prefixes`, () => { 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); }