feat: font family

nativewind · Aug 6, 2023 · 5c91a35 · 5c91a35
1 parent 7822159
commit 5c91a35
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 19 deletions.
diff --git a/packages/nativewind/src/__tests__/typography.tsx b/packages/nativewind/src/__tests__/typography.tsx
@@ -3,8 +3,12 @@ import { invalidProperty, invalidValue, style, testCases } from "../test-utils";
 
 afterEach(() => resetStyles());
 
-describe.skip("Typography - Font Family", () => {
-  testCases();
+describe("Typography - Font Family", () => {
+  testCases(
+    ["font-sans", style({ fontFamily: "system font" })],
+    ["font-serif", style({ fontFamily: "Georgia" })],
+    ["font-mono", style({ fontFamily: "Courier New" })],
+  );
 });
 
 describe("Typography - Font Size", () => {

diff --git a/packages/nativewind/src/tailwind/native.ts b/packages/nativewind/src/tailwind/native.ts
@@ -3,7 +3,7 @@ import plugin from "tailwindcss/plugin";
 
 import { darkModeAtRule } from "./dark-mode";
 import { ContentConfig, PluginUtils } from "tailwindcss/types/config";
-import { hairlineWidth } from "./functions";
+import { hairlineWidth, platformSelect } from "./functions";
 import { color } from "./color";
 import { verify } from "./verify";
 import { translateX, translateY } from "./translate";
@@ -13,6 +13,11 @@ export default function nativewindPreset() {
     content: [],
     theme: {
       extend: {
+        fontFamily: {
+          sans: platformSelect({ android: "san-serif", ios: "'system font'" }),
+          serif: platformSelect({ android: "serif", ios: "Georgia" }),
+          mono: platformSelect({ android: "mono", ios: "'Courier New'" }),
+        },
         translateX: ({ theme }: PluginUtils) => ({
           ...theme("spacing"),
           "1/2": "50cw",

diff --git a/packages/nativewind/src/test-utils.tsx b/packages/nativewind/src/test-utils.tsx
@@ -35,7 +35,6 @@ export async function renderTailwind<T extends { className: string }>(
     ...options
   }: RenderTailwindOptions = {},
 ): Promise<ReturnType<typeof render>> {
-  console.log(require("./tailwind").preset);
   let { css: output } = await postcss([
     tailwind({
       theme: {},

diff --git a/packages/react-native-css-interop/src/__tests__/react-native-components.tsx b/packages/react-native-css-interop/src/__tests__/react-native-components.tsx
@@ -32,7 +32,7 @@ test("Component types", () => {
   [
     <Modal className="bg-black" presentationClassName="bg-black" />,
     <Pressable className="bg-black" />,
-    <StatusBar barClassName="bg-black" />,
+    <StatusBar className="bg-black" />,
     <Text className="bg-black" />,
     <View className="bg-black" />,
     <ImageBackground

diff --git a/packages/react-native-css-interop/src/css-to-rn/parseDeclaration.ts b/packages/react-native-css-interop/src/css-to-rn/parseDeclaration.ts
@@ -2133,12 +2133,7 @@ function parseVerticalAlign(
 }
 
 function parseFontFamily(fontFamily: FontFamily[]) {
-  const nativeFont = fontFamily.find((f) => f.startsWith("react-native"));
-
-  if (nativeFont) {
-    return nativeFont.replace("react-native", "");
-  }
-
+  // React Native only allows one font family - better hope this is the right one :)
   return fontFamily[0];
 }
 
@@ -2284,6 +2279,8 @@ function parseRNRuntimeSpecificsFunction(
         key = undefined;
       } else {
         switch (token.value.type) {
+          case "string":
+          case "number":
           case "ident": {
             if (key) {
               runtimeArgs[key] = parseUnparsed(token, options);
@@ -2295,8 +2292,6 @@ function parseRNRuntimeSpecificsFunction(
           case "delim":
           case "comma":
             continue;
-          case "string":
-          case "number":
           case "function":
           case "at-keyword":
           case "hash":

diff --git a/v4-TODO.md b/v4-TODO.md
@@ -4,20 +4,16 @@ nativewind
 
 - [ ] elevation
 - [ ] responsive design tests
-- [ ] svgs
+- [ ] svg tests
 
 react-native-css-interop
 
-- [ ] font family
 - [ ] shadows
 - [ ] complete tests
 - [ ] refactor groups to be separate from container context
 
-doctor
-
-- [ ] implement
-
 docs
 
 - [ ] everything
+- [ ] troubleshooting
 - [ ] compiler
diff --git a/v4-release-DRAFT.md b/v4-release-DRAFT.md
@@ -64,6 +64,36 @@ The `divide-` and `spacing-` utilities will be unavailable at the launch of v4 a
 
 The StyleSheet exported from NativeWind now extends `StyleSheet` from React Native and can be used a drop in replacement.
 
+### New `fontFamily` defaults
+
+NativeWind v4 adds new defaults for the font family class names. You can override these defaults in your `tailwind.config.js`. We
+
+```jsx
+import { platformSelect } from "nativewind/plugin"
+
+module.exports = {
+  theme: {
+    fontFamily: {
+      sans: platformSelect({
+        android: 'san-serif',
+        ios: 'system font',
+        web: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
+      }),
+      serif: platformSelect({
+        android: 'serif',
+        ios: 'Georgia'
+        web: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif'
+      }),
+      mono: platformSelect({
+        android: 'mono',
+        ios: 'Courier New'
+        web: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+      }),
+    }
+  }
+}
+```
+
 ### Miscellaneous Updates
 
 - Theme functions such as `hairlineWidth` and `platformSelect` are now exported from `nativewind/preset`