feat: platform functions

Author: marklawlor

src/compiler/declarations.ts

@@ -1735,7 +1735,7 @@ function parseUnparsed(
           tokenOrValue.value.name = `@${tokenOrValue.value.name}`;
           return unparsedFunction(tokenOrValue, options);
         case "platformColor":
-        case "getPixelSizeForLayoutSize":
+        case "pixelSizeForLayoutSize":
         case "roundToNearestPixel":
         case "pixelScale":
         case "fontScale":
@@ -1747,14 +1747,6 @@ function parseUnparsed(
           return unparsedFunction(tokenOrValue, options);
         case "hairlineWidth":
           return [{}, tokenOrValue.value.name, []];
-        case "platformSelect":
-        case "fontScaleSelect":
-        case "pixelScaleSelect":
-          return parseRNRuntimeSpecificsFunction(
-            tokenOrValue.value.name,
-            tokenOrValue.value.arguments,
-            options,
-          );
         case "calc":
         case "max":
         case "min":
@@ -2580,82 +2572,6 @@ function parseGap(value: GapValue, options: ParserOptions) {
   return parseLength(value.value, options);
 }
 
-function parseRNRuntimeSpecificsFunction(
-  name: string,
-  args: TokenOrValue[],
-  options: ParserOptions,
-): StyleDescriptor {
-  let key: string | undefined;
-  const runtimeArgs: Record<string, StyleDescriptor> = {};
-
-  for (const token of args) {
-    if (!key) {
-      if (
-        token.type === "token" &&
-        (token.value.type === "ident" || token.value.type === "number")
-      ) {
-        key = token.value.value.toString();
-        continue;
-      }
-    } else {
-      if (token.type !== "token") {
-        const value = parseUnparsed(token, options);
-        if (value === undefined) {
-          return;
-        }
-        runtimeArgs[key] = value;
-        key = undefined;
-      } else {
-        switch (token.value.type) {
-          case "string":
-          case "number":
-          case "ident": {
-            if (key) {
-              runtimeArgs[key] = parseUnparsed(token, options);
-              key = undefined;
-              continue;
-            } else {
-              return;
-            }
-          }
-          case "delim":
-          case "comma":
-            continue;
-          case "function":
-          case "at-keyword":
-          case "hash":
-          case "id-hash":
-          case "unquoted-url":
-          case "percentage":
-          case "dimension":
-          case "white-space":
-          case "comment":
-          case "colon":
-          case "semicolon":
-          case "include-match":
-          case "dash-match":
-          case "prefix-match":
-          case "suffix-match":
-          case "substring-match":
-          case "cdo":
-          case "cdc":
-          case "parenthesis-block":
-          case "square-bracket-block":
-          case "curly-bracket-block":
-          case "bad-url":
-          case "bad-string":
-          case "close-parenthesis":
-          case "close-square-bracket":
-          case "close-curly-bracket":
-            return undefined;
-        }
-      }
-    }
-  }
-
-  return [{}, name, Object.entries(runtimeArgs)];
-}
-
 function parseTextAlign(textAlign: TextAlign, options: ParserOptions) {
   const allowed = new Set(["auto", "left", "right", "center", "justify"]);
   if (allowed.has(textAlign)) {

src/runtime/native/styles/platform-functions.ts

@@ -1,4 +1,4 @@
-import { PlatformColor } from "react-native";
+import { PixelRatio, PlatformColor, StyleSheet } from "react-native";
 import type { StyleFunctionResolver } from "./resolve";
 
 export const platformColor: StyleFunctionResolver = (resolveValue, value) => {
@@ -11,3 +11,39 @@ export const platformColor: StyleFunctionResolver = (resolveValue, value) => {
 
   return;
 };
+
+export const hairlineWidth: StyleFunctionResolver = () => {
+  return StyleSheet.hairlineWidth;
+};
+
+export const pixelRatio: StyleFunctionResolver = () => {
+  return PixelRatio.get();
+};
+
+export const fontScale: StyleFunctionResolver = () => {
+  return PixelRatio.getFontScale();
+};
+
+export const pixelSizeForLayoutSize: StyleFunctionResolver = (
+  resolveValue,
+  value,
+) => {
+  const size: unknown = resolveValue(value[2]?.[0]);
+  if (typeof size === "number") {
+    return PixelRatio.getPixelSizeForLayoutSize(size);
+  }
+
+  return;
+};
+
+export const roundToNearestPixel: StyleFunctionResolver = (
+  resolveValue,
+  value,
+) => {
+  const size: unknown = resolveValue(value[2]?.[0]);
+  if (typeof size === "number") {
+    return PixelRatio.roundToNearestPixel(size);
+  }
+
+  return;
+};

src/runtime/native/styles/resolve.ts

@@ -9,7 +9,14 @@ import { type Getter, type VariableContextValue } from "../reactivity";
 import { animation } from "./animation";
 import { calc } from "./calc";
 import { transformKeys } from "./defaults";
-import { platformColor } from "./platform-functions";
+import {
+  fontScale,
+  hairlineWidth,
+  pixelRatio,
+  pixelSizeForLayoutSize,
+  platformColor,
+  roundToNearestPixel,
+} from "./platform-functions";
 import { textShadow } from "./text-shadow";
 import { transform } from "./transform";
 import { em, rem, vh, vw } from "./units";
@@ -34,6 +41,11 @@ const functions: Record<string, StyleFunctionResolver> = {
   vh,
   rem,
   platformColor,
+  hairlineWidth,
+  pixelRatio,
+  fontScale,
+  pixelSizeForLayoutSize,
+  roundToNearestPixel,
   "@textShadow": textShadow,
   "@transform": transform,
   animationName: animation,