Merge pull request #293 from jaredh159/issue-292

jaredh159 · Jun 18, 2024 · 8a23c64 · 8a23c64
2 parents 516d19c + 3bcfce3
commit 8a23c64
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);
   }