feat: font plugin

apps/expo-router-example/app.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

apps/expo-router-example/app/(tabs)/_layout.tsx

@@ -7,7 +7,6 @@ import { Pressable } from "react-native";
 import Colors from "@/constants/Colors";
 import { useColorScheme } from "@/components/useColorScheme";
 import { useClientOnlyValue } from "@/components/useClientOnlyValue";
-
 // You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
 function TabBarIcon(props: {
   name: React.ComponentProps<typeof FontAwesome>["name"];

apps/expo-router-example/app/(tabs)/index.tsx

@@ -19,6 +19,17 @@ export default function TabOneScreen() {
 
   return (
     <View style={styles.container}>
+      <Text
+        className="font-body"
+        style={
+          {
+            // fontFamily: "SpaceMono",
+            // fontWeight: 900,
+          }
+        }
+      >
+        Go to Tab two
+      </Text>
       <Text style={styles.title}>Tab One</Text>
       <View
         style={styles.separator}
@@ -49,7 +60,7 @@ export default function TabOneScreen() {
           router.push("/(tabs)/two");
         }}
       >
-        <Text>Go to Tab two</Text>
+        <Text className="bg-red-500 font-body">Go to Tab two</Text>
       </Pressable>
     </View>
   );

apps/expo-router-example/app/_layout.tsx

@@ -1,28 +1,32 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
-import { useEffect } from 'react';
-
-import { useColorScheme } from '@/components/useColorScheme';
-
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from "@react-navigation/native";
+import { useFonts } from "expo-font";
+import { Stack } from "expo-router";
+import * as SplashScreen from "expo-splash-screen";
+import { useEffect } from "react";
+
+import { useColorScheme } from "@/components/useColorScheme";
+import "../global.css";
 export {
   // Catch any errors thrown by the Layout component.
   ErrorBoundary,
-} from 'expo-router';
+} from "expo-router";
 
 export const unstable_settings = {
   // Ensure that reloading on `/modal` keeps a back button present.
-  initialRouteName: '(tabs)',
+  initialRouteName: "(tabs)",
 };
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
   const [loaded, error] = useFonts({
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
+    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
     ...FontAwesome.font,
   });
 
@@ -48,10 +52,10 @@ function RootLayoutNav() {
   const colorScheme = useColorScheme();
 
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
+        <Stack.Screen name="modal" options={{ presentation: "modal" }} />
       </Stack>
     </ThemeProvider>
   );

apps/expo-router-example/babel.config.js

@@ -3,7 +3,10 @@ const path = require("path");
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ["babel-preset-expo"],
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
     plugins: [
       [
         "module-resolver",
@@ -12,6 +15,7 @@ module.exports = function (api) {
             "@unitools/link": "@unitools/link-expo",
             "@unitools/router": "@unitools/router-expo",
             "@unitools/image": "@unitools/image-expo",
+            "@unitools/font-plugin": "@unitools/font-plugin-expo",
           },
         },
       ],

apps/expo-router-example/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/expo-router-example/metro.config.js

@@ -2,6 +2,7 @@ const { getDefaultConfig } = require("expo/metro-config");
 const findYarnWorkspaceRoot = require("find-yarn-workspace-root");
 const path = require("path");
 const { withUnitools } = require("@unitools/metro-config");
+const { withNativeWind } = require("nativewind/metro");
 
 // Find the project and workspace directories
 const projectRoot = __dirname;
@@ -21,4 +22,6 @@ config.resolver.nodeModulesPaths = [
 // 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
 config.resolver.disableHierarchicalLookup = true;
 
-module.exports = withUnitools(config);
+module.exports = withNativeWind(withUnitools(config), {
+  input: "./global.css",
+});

apps/expo-router-example/package.json

@@ -23,16 +23,20 @@
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.6",
     "expo-web-browser": "~13.0.3",
+    "nativewind": "^4.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.2",
+    "react-native-reanimated": "^3.12.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
-    "react-native-web": "~0.19.6"
+    "react-native-web": "~0.19.6",
+    "tailwindcss": "^3.4.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@types/react": "~18.2.79",
+    "expo-atlas": "^0.3.0",
     "jest": "^29.2.1",
     "jest-expo": "~51.0.1",
     "react-test-renderer": "18.2.0",

apps/expo-router-example/tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+  // NOTE: Update this to include the paths to all of your component files.
+  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
+  presets: [require("nativewind/preset")],
+  theme: {
+    fontFamily: {
+      body: "Inter_500Medium",
+    },
+    extend: {},
+  },
+  plugins: [require("@unitools/font-plugin/expo")],
+};

apps/expo-router-example/utils/font-plugin-expo.js

@@ -0,0 +1,50 @@
+const plugin = require("tailwindcss/plugin");
+
+function splitFontWeight(fontWeight) {
+  const regex = /^([1-9]00)([a-zA-Z]+)$/;
+  const match = fontWeight.match(regex);
+
+  if (match) {
+    return {
+      numericWeight: match[1],
+      textWeight: match[2],
+    };
+  }
+}
+
+function parseFontString(fontString) {
+  const regex = /^([^_]+)(?:_([^_]+))?(?:_([^_]+))?$/;
+  const match = fontString.match(regex);
+
+  if (match) {
+    let fontConfiguration = {};
+    if (match[1]) {
+      fontConfiguration.fontFamily = match[1].toLowerCase();
+    }
+    if (match[2]) {
+      const splittedFontWeight = splitFontWeight(match[2]);
+      fontConfiguration.fontWeight = splittedFontWeight.numericWeight;
+    }
+    if (match[3]) {
+      fontConfiguration.fontStyle = match[3].toLowerCase();
+    }
+    return fontConfiguration;
+  }
+}
+
+console.log("hahahahahahahahahaha normal");
+
+module.exports = plugin(function ({ matchUtilities, theme, e }) {
+  console.log("hahahahahahahahahaha insdie");
+  matchUtilities(
+    {
+      font: (val) => {
+        const parsedFonts = parseFontString(val);
+        return parsedFonts;
+      },
+    },
+    {
+      values: theme("fontFamily"),
+    }
+  );
+});

apps/expo-router-example/utils/font-plugin-expo.web.js

@@ -0,0 +1,48 @@
+const plugin = require("tailwindcss/plugin");
+
+function splitFontWeight(fontWeight) {
+  const regex = /^([1-9]00)([a-zA-Z]+)$/;
+  const match = fontWeight.match(regex);
+
+  if (match) {
+    return {
+      numericWeight: match[1],
+      textWeight: match[2],
+    };
+  }
+}
+
+function parseFontString(fontString) {
+  const regex = /^([^_]+)(?:_([^_]+))?(?:_([^_]+))?$/;
+  const match = fontString.match(regex);
+
+  if (match) {
+    let fontConfiguration = {};
+    if (match[1]) {
+      fontConfiguration.fontFamily = match[1].toLowerCase();
+    }
+    if (match[2]) {
+      const splittedFontWeight = splitFontWeight(match[2]);
+      fontConfiguration.fontWeight = splittedFontWeight.numericWeight;
+    }
+    if (match[3]) {
+      fontConfiguration.fontStyle = match[3].toLowerCase();
+    }
+    return fontConfiguration;
+  }
+}
+
+module.exports = plugin(function ({ matchUtilities, theme, e }) {
+  matchUtilities(
+    {
+      font: (val) => {
+        const parsedFonts = parseFontString(val);
+
+        return parsedFonts;
+      },
+    },
+    {
+      values: theme("fontFamily"),
+    }
+  );
+});

apps/expo-router-example/utils/font-plugin.js

@@ -0,0 +1,54 @@
+const plugin = require("tailwindcss/plugin");
+
+const fff = plugin(function ({ addUtilities, theme, e }) {
+  const fonts = theme("fontFamily");
+  const ogFontWeight = theme("fontWeight");
+
+  let modifiedFontFamily = {};
+
+  Object.keys(ogFontWeight).forEach((fw) => {
+    let updatedFw = fw;
+
+    if (ogFontWeight[fw] === "400") updatedFw = "regular";
+    modifiedFontFamily[fw] =
+      `${ogFontWeight[fw]}${updatedFw.charAt(0).toUpperCase()}${updatedFw.slice(1)}`;
+  });
+
+  const combinedUtilities = {};
+
+  const fontStyles = {
+    italic: "Italic",
+  };
+
+  Object.entries(fonts).forEach(([fontName, fontValue]) => {
+    const capitalizedFontName =
+      fontValue.charAt(0).toUpperCase() + fontValue.slice(1);
+    const defaultClassName = `.${e(`font-${fontName}`)}`;
+    combinedUtilities[defaultClassName] = {
+      fontFamily: `${capitalizedFontName}_400Regular`,
+    };
+    const italicDefaultClassName = `.${e(`font-${fontName}`)}.${e(`font-${fontStyles["italic"]}`)}`;
+    combinedUtilities[italicDefaultClassName] = {
+      fontFamily: `${capitalizedFontName}_400Regular_Italic`,
+    };
+    Object.entries(modifiedFontFamily).forEach(
+      ([weightValue, weightSuffix]) => {
+        Object.entries(fontStyles).forEach(([styleName, styleSuffix]) => {
+          const className = `.${e(`font-${fontName}`)}.${e(`font-${weightValue}`)}.${e(`font-${styleName}`)}`;
+          combinedUtilities[className] = {
+            fontFamily: `${capitalizedFontName}_${weightSuffix}_${styleSuffix}`,
+          };
+
+          const regularClassName = `.${e(`font-${fontName}`)}.${e(`font-${weightValue}`)}`;
+          combinedUtilities[regularClassName] = {
+            fontFamily: `${capitalizedFontName}_${weightSuffix}`,
+          };
+        });
+      }
+    );
+  });
+
+  addUtilities(combinedUtilities);
+});
+
+export default fff;

apps/web/app/globals.css

@@ -48,3 +48,7 @@ a {
   color: inherit;
   text-decoration: none;
 }
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/web/app/layout.tsx

@@ -1,23 +1,31 @@
-import React = require("react");
+"use client";
+
+import { Inter } from "next/font/google";
+import { useFonts } from "@unitools/fonts-loader";
 import "./globals.css";
-import type { Metadata } from "next";
-// import { Inter } from "next/font/google";
+import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
 
-// const inter = Inter({ subsets: ["latin"] });
+const inter1 = useFonts();
 
-export const metadata: Metadata = {
-  title: "Create Turborepo",
-  description: "Generated by create turbo",
-};
+const inter = Inter({
+  weight: ["100", "500", "600"],
+  subsets: ["latin"],
+  variable: "--inter",
+});
 
+import StyledJsxRegistry from "./registry";
 export default function RootLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}): JSX.Element {
+}>) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className={inter.variable} style={{ display: "flex" }}>
+        <StyledJsxRegistry>
+          <GluestackUIProvider mode="light">{children}</GluestackUIProvider>
+        </StyledJsxRegistry>
+      </body>
     </html>
   );
 }

apps/web/app/page.tsx

@@ -1,15 +1,17 @@
 "use client";
 import Link from "@unitools/link";
 import React from "react";
-import useRouter from "@unitools/router";
+import { useRouter } from "@unitools/router";
 import Image from "@unitools/image";
 import Button from "../components/button";
+import { Text } from "react-native";
 
 const App = () => {
   const router = useRouter();
   const blurhash = "blur";
   return (
     <div>
+      <p className="text-red-500 font-body">Helllo text check</p>
       <Link asChild href="/Second">
         <button> Go to tabs</button>
       </Link>