support lineheight shorthand with font-size

jaredh159 · Jun 18, 2024 · 8c22ba1 · 8c22ba1
1 parent 516d19c
commit 8c22ba1
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
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, 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
@@ -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);
   }