@mgcrea/react-native-tailwind 0.12.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgcrea/react-native-tailwind",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Compile-time Tailwind CSS for React Native with zero runtime overhead",
   "author": "Olivier Louvignes <olivier@mgcrea.io> (https://github.com/mgcrea)",
   "homepage": "https://github.com/mgcrea/react-native-tailwind#readme",

package/src/babel/config-loader.test.ts

@@ -120,7 +120,7 @@ describe("config-loader", () => {
       vi.spyOn(fs, "existsSync").mockReturnValue(false);
 
       const result = extractCustomTheme("/project/src/file.ts");
-      expect(result).toEqual({ colors: {}, fontFamily: {} });
+      expect(result).toEqual({ colors: {}, fontFamily: {}, fontSize: {} });
     });
 
     it("should return empty theme when config has no theme", () => {
@@ -134,7 +134,7 @@ describe("config-loader", () => {
       const result = extractCustomTheme("/project/src/file.ts");
 
       // Without actual config loading, this returns empty
-      expect(result).toEqual({ colors: {}, fontFamily: {} });
+      expect(result).toEqual({ colors: {}, fontFamily: {}, fontSize: {} });
     });
 
     it("should extract colors and fontFamily from theme.extend", () => {

package/src/babel/config-loader.ts

@@ -14,9 +14,11 @@ export type TailwindConfig = {
     extend?: {
       colors?: Record<string, string | Record<string, string>>;
       fontFamily?: Record<string, string | string[]>;
+      fontSize?: Record<string, string | number>;
     };
     colors?: Record<string, string | Record<string, string>>;
     fontFamily?: Record<string, string | string[]>;
+    fontSize?: Record<string, string | number>;
   };
 };
 
@@ -89,6 +91,7 @@ export function loadTailwindConfig(configPath: string): TailwindConfig | null {
 export type CustomTheme = {
   colors: Record<string, string>;
   fontFamily: Record<string, string>;
+  fontSize: Record<string, number>;
 };
 
 /**
@@ -100,12 +103,12 @@ export function extractCustomTheme(filename: string): CustomTheme {
   const configPath = findTailwindConfig(projectDir);
 
   if (!configPath) {
-    return { colors: {}, fontFamily: {} };
+    return { colors: {}, fontFamily: {}, fontSize: {} };
   }
 
   const config = loadTailwindConfig(configPath);
   if (!config?.theme) {
-    return { colors: {}, fontFamily: {} };
+    return { colors: {}, fontFamily: {}, fontSize: {} };
   }
 
   // Extract colors
@@ -139,8 +142,40 @@ export function extractCustomTheme(filename: string): CustomTheme {
     }
   }
 
+  // Extract fontSize
+  /* v8 ignore next 5 */
+  if (config.theme.fontSize && !config.theme.extend?.fontSize && process.env.NODE_ENV !== "production") {
+    console.warn(
+      "[react-native-tailwind] Using theme.fontSize will override all default font sizes. " +
+        "Use theme.extend.fontSize to add custom font sizes while keeping defaults.",
+    );
+  }
+  const fontSize = config.theme.extend?.fontSize ?? config.theme.fontSize ?? {};
+
+  // Convert fontSize values to numbers (handle string or number values)
+  const fontSizeResult: Record<string, number> = {};
+  for (const [key, value] of Object.entries(fontSize)) {
+    if (typeof value === "number") {
+      fontSizeResult[key] = value;
+    } else if (typeof value === "string") {
+      // Parse string values like "18px" or "18" to number
+      const parsed = parseFloat(value.replace(/px$/, ""));
+      if (!isNaN(parsed)) {
+        fontSizeResult[key] = parsed;
+      } else {
+        /* v8 ignore next 5 */
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `[react-native-tailwind] Invalid fontSize value for "${key}": ${value}. Expected number or string like "18px".`,
+          );
+        }
+      }
+    }
+  }
+
   return {
     colors: flattenColors(colors),
     fontFamily: fontFamilyResult,
+    fontSize: fontSizeResult,
   };
 }

package/src/babel/plugin.ts

@@ -398,7 +398,7 @@ export default function reactNativeTailwindBabelPlugin(
                 // Track the local name (could be renamed: import { tw as customTw })
                 const localName = spec.local.name;
                 state.twImportNames.add(localName);
-                state.hasTwImport = true;
+                // Don't set hasTwImport yet - only set it when we successfully transform a call
               }
             }
           });
@@ -443,6 +443,8 @@ export default function reactNativeTailwindBabelPlugin(
           path.replaceWith(
             t.objectExpression([t.objectProperty(t.identifier("style"), t.objectExpression([]))]),
           );
+          // Mark as successfully transformed (even if empty)
+          state.hasTwImport = true;
           return;
         }
 
@@ -459,6 +461,9 @@ export default function reactNativeTailwindBabelPlugin(
           findComponentScope,
           t,
         );
+
+        // Mark as successfully transformed
+        state.hasTwImport = true;
       },
 
       // Handle twStyle('...') call expressions
@@ -502,6 +507,8 @@ export default function reactNativeTailwindBabelPlugin(
         if (!className) {
           // Replace with undefined
           path.replaceWith(t.identifier("undefined"));
+          // Mark as successfully transformed (even if empty)
+          state.hasTwImport = true;
           return;
         }
 
@@ -518,6 +525,9 @@ export default function reactNativeTailwindBabelPlugin(
           findComponentScope,
           t,
         );
+
+        // Mark as successfully transformed
+        state.hasTwImport = true;
       },
 
       JSXAttribute(path, state) {

package/src/babel/utils/styleInjection.ts

@@ -10,24 +10,44 @@ import type { StyleObject } from "../../types/core.js";
  * Add StyleSheet import to the file or merge with existing react-native import
  */
 export function addStyleSheetImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void {
-  // Check if there's already a react-native import
+  // Check if there's already a value import from react-native
   const body = path.node.body;
-  let reactNativeImport: BabelTypes.ImportDeclaration | null = null;
+  let existingValueImport: BabelTypes.ImportDeclaration | null = null;
 
   for (const statement of body) {
     if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
-      reactNativeImport = statement;
-      break;
+      // Skip type-only imports (they get erased at runtime)
+      if (statement.importKind === "type") {
+        continue;
+      }
+      // Skip namespace imports (import * as RN) - can't add named specifiers to them
+      const hasNamespaceImport = statement.specifiers.some((spec) => t.isImportNamespaceSpecifier(spec));
+      if (hasNamespaceImport) {
+        continue;
+      }
+      existingValueImport = statement;
+      break; // Found a value import, we can stop
     }
   }
 
-  if (reactNativeImport) {
-    // Add StyleSheet to existing react-native import
-    reactNativeImport.specifiers.push(
-      t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")),
+  if (existingValueImport) {
+    // Check if StyleSheet is already imported
+    const hasStyleSheet = existingValueImport.specifiers.some(
+      (spec) =>
+        t.isImportSpecifier(spec) &&
+        spec.imported.type === "Identifier" &&
+        spec.imported.name === "StyleSheet",
     );
+
+    if (!hasStyleSheet) {
+      // Add StyleSheet to existing value import
+      existingValueImport.specifiers.push(
+        t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")),
+      );
+    }
   } else {
-    // Create new react-native import with StyleSheet
+    // No value import exists - create a new one
+    // (Don't merge with type-only or namespace imports)
     const importDeclaration = t.importDeclaration(
       [t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))],
       t.stringLiteral("react-native"),
@@ -40,22 +60,42 @@ export function addStyleSheetImport(path: NodePath<BabelTypes.Program>, t: typeo
  * Add Platform import to the file or merge with existing react-native import
  */
 export function addPlatformImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void {
-  // Check if there's already a react-native import
+  // Check if there's already a value import from react-native
   const body = path.node.body;
-  let reactNativeImport: BabelTypes.ImportDeclaration | null = null;
+  let existingValueImport: BabelTypes.ImportDeclaration | null = null;
 
   for (const statement of body) {
     if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
-      reactNativeImport = statement;
-      break;
+      // Skip type-only imports (they get erased at runtime)
+      if (statement.importKind === "type") {
+        continue;
+      }
+      // Skip namespace imports (import * as RN) - can't add named specifiers to them
+      const hasNamespaceImport = statement.specifiers.some((spec) => t.isImportNamespaceSpecifier(spec));
+      if (hasNamespaceImport) {
+        continue;
+      }
+      existingValueImport = statement;
+      break; // Found a value import, we can stop
     }
   }
 
-  if (reactNativeImport) {
-    // Add Platform to existing react-native import
-    reactNativeImport.specifiers.push(t.importSpecifier(t.identifier("Platform"), t.identifier("Platform")));
+  if (existingValueImport) {
+    // Check if Platform is already imported
+    const hasPlatform = existingValueImport.specifiers.some(
+      (spec) =>
+        t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === "Platform",
+    );
+
+    if (!hasPlatform) {
+      // Add Platform to existing value import
+      existingValueImport.specifiers.push(
+        t.importSpecifier(t.identifier("Platform"), t.identifier("Platform")),
+      );
+    }
   } else {
-    // Create new react-native import with Platform
+    // No value import exists - create a new one
+    // (Don't merge with type-only or namespace imports)
     const importDeclaration = t.importDeclaration(
       [t.importSpecifier(t.identifier("Platform"), t.identifier("Platform"))],
       t.stringLiteral("react-native"),

package/src/parser/index.ts

@@ -20,6 +20,7 @@ import { parseTypography } from "./typography";
 export type CustomTheme = {
   colors?: Record<string, string>;
   fontFamily?: Record<string, string>;
+  fontSize?: Record<string, number>;
 };
 
 /**
@@ -55,7 +56,7 @@ export function parseClass(cls: string, customTheme?: CustomTheme): StyleObject
     parseBorder,
     (cls: string) => parseColor(cls, customTheme?.colors),
     parseLayout,
-    (cls: string) => parseTypography(cls, customTheme?.fontFamily),
+    (cls: string) => parseTypography(cls, customTheme?.fontFamily, customTheme?.fontSize),
     parseSizing,
     parseShadow,
     parseAspectRatio,

package/src/parser/layout.test.ts

@@ -73,6 +73,67 @@ describe("parseLayout - flex grow/shrink utilities", () => {
   it("should parse shrink-0", () => {
     expect(parseLayout("shrink-0")).toEqual({ flexShrink: 0 });
   });
+
+  it("should parse grow with arbitrary values", () => {
+    expect(parseLayout("grow-[1.5]")).toEqual({ flexGrow: 1.5 });
+    expect(parseLayout("grow-[2]")).toEqual({ flexGrow: 2 });
+    expect(parseLayout("grow-[0.5]")).toEqual({ flexGrow: 0.5 });
+    expect(parseLayout("grow-[3]")).toEqual({ flexGrow: 3 });
+    expect(parseLayout("grow-[0]")).toEqual({ flexGrow: 0 });
+  });
+
+  it("should parse shrink with arbitrary values", () => {
+    expect(parseLayout("shrink-[0.5]")).toEqual({ flexShrink: 0.5 });
+    expect(parseLayout("shrink-[2]")).toEqual({ flexShrink: 2 });
+    expect(parseLayout("shrink-[1.5]")).toEqual({ flexShrink: 1.5 });
+    expect(parseLayout("shrink-[3]")).toEqual({ flexShrink: 3 });
+    expect(parseLayout("shrink-[0]")).toEqual({ flexShrink: 0 });
+  });
+
+  it("should parse CSS-style flex-grow aliases", () => {
+    expect(parseLayout("flex-grow")).toEqual({ flexGrow: 1 });
+    expect(parseLayout("flex-grow-0")).toEqual({ flexGrow: 0 });
+  });
+
+  it("should parse CSS-style flex-shrink aliases", () => {
+    expect(parseLayout("flex-shrink")).toEqual({ flexShrink: 1 });
+    expect(parseLayout("flex-shrink-0")).toEqual({ flexShrink: 0 });
+  });
+
+  it("should parse CSS-style flex-grow with arbitrary values", () => {
+    expect(parseLayout("flex-grow-[1.5]")).toEqual({ flexGrow: 1.5 });
+    expect(parseLayout("flex-grow-[2]")).toEqual({ flexGrow: 2 });
+    expect(parseLayout("flex-grow-[0.5]")).toEqual({ flexGrow: 0.5 });
+  });
+
+  it("should parse CSS-style flex-shrink with arbitrary values", () => {
+    expect(parseLayout("flex-shrink-[0.5]")).toEqual({ flexShrink: 0.5 });
+    expect(parseLayout("flex-shrink-[2]")).toEqual({ flexShrink: 2 });
+    expect(parseLayout("flex-shrink-[1.5]")).toEqual({ flexShrink: 1.5 });
+  });
+
+  it("should handle edge case values", () => {
+    expect(parseLayout("grow-[0.1]")).toEqual({ flexGrow: 0.1 });
+    expect(parseLayout("grow-[10]")).toEqual({ flexGrow: 10 });
+    expect(parseLayout("shrink-[0.01]")).toEqual({ flexShrink: 0.01 });
+    expect(parseLayout("shrink-[100]")).toEqual({ flexShrink: 100 });
+  });
+
+  it("should parse Tailwind shorthand decimals (no leading zero)", () => {
+    expect(parseLayout("grow-[.5]")).toEqual({ flexGrow: 0.5 });
+    expect(parseLayout("grow-[.75]")).toEqual({ flexGrow: 0.75 });
+    expect(parseLayout("shrink-[.5]")).toEqual({ flexShrink: 0.5 });
+    expect(parseLayout("shrink-[.25]")).toEqual({ flexShrink: 0.25 });
+    expect(parseLayout("flex-grow-[.5]")).toEqual({ flexGrow: 0.5 });
+    expect(parseLayout("flex-shrink-[.5]")).toEqual({ flexShrink: 0.5 });
+  });
+
+  it("should reject negative values", () => {
+    expect(parseLayout("grow-[-1]")).toBeNull();
+    expect(parseLayout("shrink-[-1]")).toBeNull();
+    expect(parseLayout("flex-grow-[-2]")).toBeNull();
+    expect(parseLayout("flex-shrink-[-0.5]")).toBeNull();
+  });
 });
 
 describe("parseLayout - justify content utilities", () => {

package/src/parser/layout.ts

@@ -60,6 +60,31 @@ function parseArbitraryZIndex(value: string): number | null {
   return null;
 }
 
+/**
+ * Parse arbitrary grow/shrink value: [1.5], [2], [0.5], [.5]
+ * Returns number for valid non-negative values, null otherwise
+ */
+function parseArbitraryGrowShrink(value: string): number | null {
+  // Match: [1.5], [2], [0], [0.5], [.5] (non-negative decimals, optional leading digit)
+  const match = value.match(/^\[(\d+(?:\.\d+)?|\.\d+)\]$/);
+  if (match) {
+    return parseFloat(match[1]);
+  }
+
+  // Warn about invalid formats (negative values, unsupported formats)
+  if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] Invalid arbitrary grow/shrink value: ${value}. Only non-negative numbers are supported (e.g., [1.5], [2], [0.5], [.5]).`,
+      );
+    }
+    return null;
+  }
+
+  return null;
+}
+
 // Display utilities
 const DISPLAY_MAP: Record<string, StyleObject> = {
   flex: { display: "flex" },
@@ -88,12 +113,17 @@ const FLEX_MAP: Record<string, StyleObject> = {
   "flex-none": { flex: 0 },
 };
 
-// Flex grow/shrink utilities
+// Flex grow/shrink utilities (includes CSS-style aliases)
 const GROW_SHRINK_MAP: Record<string, StyleObject> = {
   grow: { flexGrow: 1 },
   "grow-0": { flexGrow: 0 },
   shrink: { flexShrink: 1 },
   "shrink-0": { flexShrink: 0 },
+  // CSS-style aliases
+  "flex-grow": { flexGrow: 1 },
+  "flex-grow-0": { flexGrow: 0 },
+  "flex-shrink": { flexShrink: 1 },
+  "flex-shrink-0": { flexShrink: 0 },
 };
 
 // Justify content utilities
@@ -357,6 +387,30 @@ export function parseLayout(cls: string): StyleObject | null {
     }
   }
 
+  // Flex grow: grow-[1.5], flex-grow-[2], etc. (arbitrary values)
+  if (cls.startsWith("grow-") || cls.startsWith("flex-grow-")) {
+    const prefix = cls.startsWith("flex-grow-") ? "flex-grow-" : "grow-";
+    const growKey = cls.substring(prefix.length);
+
+    // Arbitrary values: grow-[1.5], flex-grow-[2]
+    const arbitraryGrow = parseArbitraryGrowShrink(growKey);
+    if (arbitraryGrow !== null) {
+      return { flexGrow: arbitraryGrow };
+    }
+  }
+
+  // Flex shrink: shrink-[0.5], flex-shrink-[1], etc. (arbitrary values)
+  if (cls.startsWith("shrink-") || cls.startsWith("flex-shrink-")) {
+    const prefix = cls.startsWith("flex-shrink-") ? "flex-shrink-" : "shrink-";
+    const shrinkKey = cls.substring(prefix.length);
+
+    // Arbitrary values: shrink-[0.5], flex-shrink-[1]
+    const arbitraryShrink = parseArbitraryGrowShrink(shrinkKey);
+    if (arbitraryShrink !== null) {
+      return { flexShrink: arbitraryShrink };
+    }
+  }
+
   // Try each lookup table in order
   return (
     DISPLAY_MAP[cls] ??

package/src/parser/typography.test.ts

@@ -39,6 +39,20 @@ describe("parseTypography - font size", () => {
     expect(parseTypography("text-[22]")).toEqual({ fontSize: 22 });
     expect(parseTypography("text-[100px]")).toEqual({ fontSize: 100 });
   });
+
+  it("should parse font size with decimal arbitrary values", () => {
+    expect(parseTypography("text-[13.5px]")).toEqual({ fontSize: 13.5 });
+    expect(parseTypography("text-[13.5]")).toEqual({ fontSize: 13.5 });
+    expect(parseTypography("text-[18.75px]")).toEqual({ fontSize: 18.75 });
+    expect(parseTypography("text-[18.75]")).toEqual({ fontSize: 18.75 });
+    expect(parseTypography("text-[22.5]")).toEqual({ fontSize: 22.5 });
+  });
+
+  it("should parse font size with Tailwind shorthand decimals", () => {
+    expect(parseTypography("text-[.5]")).toEqual({ fontSize: 0.5 });
+    expect(parseTypography("text-[.75px]")).toEqual({ fontSize: 0.75 });
+    expect(parseTypography("text-[.5px]")).toEqual({ fontSize: 0.5 });
+  });
 });
 
 describe("parseTypography - font family", () => {
@@ -136,6 +150,20 @@ describe("parseTypography - line height", () => {
     expect(parseTypography("leading-[30]")).toEqual({ lineHeight: 30 });
     expect(parseTypography("leading-[50px]")).toEqual({ lineHeight: 50 });
   });
+
+  it("should parse line height with decimal arbitrary values", () => {
+    expect(parseTypography("leading-[21.5px]")).toEqual({ lineHeight: 21.5 });
+    expect(parseTypography("leading-[21.5]")).toEqual({ lineHeight: 21.5 });
+    expect(parseTypography("leading-[28.75px]")).toEqual({ lineHeight: 28.75 });
+    expect(parseTypography("leading-[28.75]")).toEqual({ lineHeight: 28.75 });
+    expect(parseTypography("leading-[32.5]")).toEqual({ lineHeight: 32.5 });
+  });
+
+  it("should parse line height with Tailwind shorthand decimals", () => {
+    expect(parseTypography("leading-[.5]")).toEqual({ lineHeight: 0.5 });
+    expect(parseTypography("leading-[.75px]")).toEqual({ lineHeight: 0.75 });
+    expect(parseTypography("leading-[.5px]")).toEqual({ lineHeight: 0.5 });
+  });
 });
 
 describe("parseTypography - letter spacing", () => {
@@ -149,6 +177,80 @@ describe("parseTypography - letter spacing", () => {
     expect(parseTypography("tracking-wider")).toEqual({ letterSpacing: 0.8 });
     expect(parseTypography("tracking-widest")).toEqual({ letterSpacing: 1.6 });
   });
+
+  it("should parse letter spacing with arbitrary values", () => {
+    expect(parseTypography("tracking-[0.5px]")).toEqual({ letterSpacing: 0.5 });
+    expect(parseTypography("tracking-[0.5]")).toEqual({ letterSpacing: 0.5 });
+    expect(parseTypography("tracking-[0.3]")).toEqual({ letterSpacing: 0.3 });
+    expect(parseTypography("tracking-[1.2px]")).toEqual({ letterSpacing: 1.2 });
+    expect(parseTypography("tracking-[2]")).toEqual({ letterSpacing: 2 });
+  });
+
+  it("should parse letter spacing with Tailwind shorthand decimals", () => {
+    expect(parseTypography("tracking-[.5]")).toEqual({ letterSpacing: 0.5 });
+    expect(parseTypography("tracking-[.3px]")).toEqual({ letterSpacing: 0.3 });
+    expect(parseTypography("tracking-[.75]")).toEqual({ letterSpacing: 0.75 });
+  });
+
+  it("should parse negative letter spacing with arbitrary values", () => {
+    expect(parseTypography("tracking-[-0.4px]")).toEqual({ letterSpacing: -0.4 });
+    expect(parseTypography("tracking-[-0.4]")).toEqual({ letterSpacing: -0.4 });
+    expect(parseTypography("tracking-[-0.5]")).toEqual({ letterSpacing: -0.5 });
+    expect(parseTypography("tracking-[-1px]")).toEqual({ letterSpacing: -1 });
+  });
+
+  it("should parse negative letter spacing with shorthand decimals", () => {
+    expect(parseTypography("tracking-[-.4]")).toEqual({ letterSpacing: -0.4 });
+    expect(parseTypography("tracking-[-.5px]")).toEqual({ letterSpacing: -0.5 });
+  });
+
+  it("should handle edge case letter spacing values", () => {
+    expect(parseTypography("tracking-[0]")).toEqual({ letterSpacing: 0 });
+    expect(parseTypography("tracking-[0.1]")).toEqual({ letterSpacing: 0.1 });
+    expect(parseTypography("tracking-[10]")).toEqual({ letterSpacing: 10 });
+  });
+});
+
+describe("parseTypography - custom fontSize", () => {
+  const customFontSize = {
+    tiny: 10,
+    huge: 96,
+    xl: 22, // Override default (default is 20)
+    custom: 17,
+  };
+
+  it("should support custom font sizes", () => {
+    expect(parseTypography("text-tiny", undefined, customFontSize)).toEqual({ fontSize: 10 });
+    expect(parseTypography("text-huge", undefined, customFontSize)).toEqual({ fontSize: 96 });
+    expect(parseTypography("text-custom", undefined, customFontSize)).toEqual({ fontSize: 17 });
+  });
+
+  it("should allow custom fontSize to override preset sizes", () => {
+    expect(parseTypography("text-xl", undefined, customFontSize)).toEqual({ fontSize: 22 });
+  });
+
+  it("should fallback to preset sizes when custom fontSize not found", () => {
+    expect(parseTypography("text-base", undefined, customFontSize)).toEqual({ fontSize: 16 });
+    expect(parseTypography("text-lg", undefined, customFontSize)).toEqual({ fontSize: 18 });
+    expect(parseTypography("text-2xl", undefined, customFontSize)).toEqual({ fontSize: 24 });
+  });
+
+  it("should prefer arbitrary values over custom fontSize", () => {
+    expect(parseTypography("text-[15px]", undefined, customFontSize)).toEqual({ fontSize: 15 });
+    expect(parseTypography("text-[13.5]", undefined, customFontSize)).toEqual({ fontSize: 13.5 });
+  });
+
+  it("should work with both customFontFamily and customFontSize", () => {
+    const customFontFamily = { brand: "MyCustomFont" };
+    expect(parseTypography("text-tiny", customFontFamily, customFontSize)).toEqual({ fontSize: 10 });
+    expect(parseTypography("font-brand", customFontFamily, customFontSize)).toEqual({
+      fontFamily: "MyCustomFont",
+    });
+  });
+
+  it("should return null for unknown custom fontSize keys", () => {
+    expect(parseTypography("text-nonexistent", undefined, customFontSize)).toBeNull();
+  });
 });
 
 describe("parseTypography - edge cases", () => {