test: add tests for device function compilation

apps/website/docs/customization/theme.md

@@ -44,7 +44,6 @@ React Native provides a number of utilities for creating styles based upon the d
 | Function                              | React Native equivalent                |
 | ------------------------------------- | -------------------------------------- |
 | `hairlineWidth()`                     | `StyleSheet.hairlinewidth`             |
-| `round()`                             | `Math.round`                           |
 | `roundToNearestPixel(<number>)`       | `PixelRatio.roundToNearestPixel`       |
 | `getPixelSizeForLayoutSize(<number>)` | `PixelRatio.getPixelSizeForLayoutSize` |
 | `pixelMultipler(<number>)`            | `PixelRatio.get() * <value>`           |
@@ -70,7 +69,7 @@ There are no quotes between the brackets in theme functions
 Theme functions can be combined to create complex theme values
 
 ```js
-const myFontSize = `roundToNearestPixel(fontScaleMultipler(${myFontSize}))`;
+const myFontSize = `roundToNearestPixel(fontScaleMultipler(16))`;
 
 // compiles to
 

packages/nativewind/__tests__/babel/device-functions/code.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from "react-native";
+
+export function Test() {
+  return (
+    <View>
+      <Text className="text-hairline text-custom">Hello world!</Text>
+    </View>
+  );
+}

packages/nativewind/__tests__/babel/device-functions/options.json

@@ -0,0 +1,3 @@
+{
+  "tailwindConfigPath": "./device-functions/tailwind.config.js"
+}

packages/nativewind/__tests__/babel/device-functions/output.tsx

@@ -0,0 +1,25 @@
+import { NativeWindStyleSheet } from "nativewind";
+import { StyledComponent } from "nativewind";
+import { Text, View } from "react-native";
+export function Test() {
+  return (
+    <View>
+      <StyledComponent className="text-hairline text-custom" component={Text}>
+        Hello world!
+      </StyledComponent>
+    </View>
+  );
+}
+NativeWindStyleSheet.create({
+  styles: {
+    "text-hairline": {
+      fontSize: NativeWindStyleSheet.parse("hairlineWidth", ""),
+    },
+    "text-custom": {
+      fontSize: NativeWindStyleSheet.parse(
+        "roundToNearestPixel",
+        NativeWindStyleSheet.parse("hairlineWidth", "")
+      ),
+    },
+  },
+});

packages/nativewind/__tests__/babel/device-functions/tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  content: [`${__dirname}/code.{js,ts,jsx,tsx}`],
+  theme: {
+    extend: {
+      fontSize: {
+        hairline: "hairlineWidth()",
+        custom: "roundToNearestPixel(hairlineWidth())",
+      },
+    },
+  },
+};

packages/nativewind/__tests__/types.d.ts

@@ -7,6 +7,6 @@ declare module "nativewind" {
   export const NWRuntimeParser: (...arg: any[]) => any;
   export const NativeWindStyleSheet: {
     create: (obj: any) => void;
-    parse: (key: string, value: string) => void;
+    parse: (key: string, value: unknown) => void;
   };
 }

packages/nativewind/src/style-sheet/style-functions.ts

@@ -20,6 +20,8 @@ export function parseStyleFunction(
   switch (functionString) {
     case "hairlineWidth":
       return StyleSheet.hairlineWidth;
+    case "round":
+      return parseFloat(value, Math.round);
     case "roundToNearestPixel":
       return parseFloat(value, PixelRatio.roundToNearestPixel);
     case "getPixelSizeForLayoutSize":