diff --git a/apps/website/docs/customization/theme.md b/apps/website/docs/customization/theme.md index b882c3a..5e2006b 100644 --- a/apps/website/docs/customization/theme.md +++ b/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()` | `PixelRatio.roundToNearestPixel` | | `getPixelSizeForLayoutSize()` | `PixelRatio.getPixelSizeForLayoutSize` | | `pixelMultipler()` | `PixelRatio.get() * ` | @@ -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 diff --git a/packages/nativewind/__tests__/babel/device-functions/code.tsx b/packages/nativewind/__tests__/babel/device-functions/code.tsx new file mode 100644 index 0000000..1d2272b --- /dev/null +++ b/packages/nativewind/__tests__/babel/device-functions/code.tsx @@ -0,0 +1,9 @@ +import { Text, View } from "react-native"; + +export function Test() { + return ( + + Hello world! + + ); +} diff --git a/packages/nativewind/__tests__/babel/device-functions/options.json b/packages/nativewind/__tests__/babel/device-functions/options.json new file mode 100644 index 0000000..eb1bba6 --- /dev/null +++ b/packages/nativewind/__tests__/babel/device-functions/options.json @@ -0,0 +1,3 @@ +{ + "tailwindConfigPath": "./device-functions/tailwind.config.js" +} diff --git a/packages/nativewind/__tests__/babel/device-functions/output.tsx b/packages/nativewind/__tests__/babel/device-functions/output.tsx new file mode 100644 index 0000000..bcc91d2 --- /dev/null +++ b/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 ( + + + Hello world! + + + ); +} +NativeWindStyleSheet.create({ + styles: { + "text-hairline": { + fontSize: NativeWindStyleSheet.parse("hairlineWidth", ""), + }, + "text-custom": { + fontSize: NativeWindStyleSheet.parse( + "roundToNearestPixel", + NativeWindStyleSheet.parse("hairlineWidth", "") + ), + }, + }, +}); diff --git a/packages/nativewind/__tests__/babel/device-functions/tailwind.config.js b/packages/nativewind/__tests__/babel/device-functions/tailwind.config.js new file mode 100644 index 0000000..d2e7b7b --- /dev/null +++ b/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())", + }, + }, + }, +}; diff --git a/packages/nativewind/__tests__/types.d.ts b/packages/nativewind/__tests__/types.d.ts index aef3f94..2d0a9cf 100644 --- a/packages/nativewind/__tests__/types.d.ts +++ b/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; }; } diff --git a/packages/nativewind/src/style-sheet/style-functions.ts b/packages/nativewind/src/style-sheet/style-functions.ts index f99a98d..68c5a1e 100644 --- a/packages/nativewind/src/style-sheet/style-functions.ts +++ b/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":