Merge pull request #359 from Pedrozxcv/undefined-react-native-version

Fix Platform.constants.reactNativeVersion issue related with react-native-web

Author: jaredh159

src/UtilityParser.ts

@@ -1,5 +1,5 @@
 import type { TwConfig } from './tw-config';
-import type { StyleIR, DeviceContext, ParseContext, Platform, Version } from './types';
+import type { StyleIR, DeviceContext, ParseContext, Version } from './types';
 import type Cache from './cache';
 import fontSize from './resolve/font-size';
 import lineHeight from './resolve/line-height';
@@ -40,7 +40,6 @@ export default class UtilityParser {
     private config: TwConfig = {},
     private cache: Cache,
     device: DeviceContext,
-    platform: Platform,
     reactNativeVersion: Version,
   ) {
     this.context.device = device;
@@ -54,7 +53,7 @@ export default class UtilityParser {
       prefixes = parts;
     }
     this.char = this.string[0];
-    this.parsePrefixes(prefixes, device, platform);
+    this.parsePrefixes(prefixes, device);
   }
 
   public parse(): StyleIR {
@@ -404,11 +403,7 @@ export default class UtilityParser {
     return false;
   }
 
-  private parsePrefixes(
-    prefixes: string[],
-    device: DeviceContext,
-    platform: Platform,
-  ): void {
+  private parsePrefixes(prefixes: string[], device: DeviceContext): void {
     const widthBreakpoints = screens(this.config.theme?.screens);
 
     // loop through the prefixes ONE time, extracting useful info
@@ -429,7 +424,7 @@ export default class UtilityParser {
           this.isNull = true;
         }
       } else if (isPlatform(prefix)) {
-        this.isNull = prefix !== platform;
+        this.isNull = prefix !== device.platform;
       } else if (isOrientation(prefix)) {
         if (!device.windowDimensions) {
           this.isNull = true;

src/__tests__/transform.spec.ts

@@ -1,4 +1,4 @@
-import rn from 'react-native';
+import { Platform } from 'react-native';
 import { create } from '../';
 
 describe(`transform utilities`, () => {
@@ -243,11 +243,9 @@ describe(`transform utilities`, () => {
     });
 
     test(`translate w/percentage values`, () => {
-      rn.Platform.constants.reactNativeVersion = {
-        major: 0,
-        minor: 75,
-        patch: 0,
-      };
+      Platform.OS = `web`;
+      jest.spyOn(Platform, `constants`, `get`).mockReturnValue(undefined as any);
+      tw = create();
 
       expect(tw.style(`translate-x-full`)).toMatchObject({
         transform: [{ translateX: `100%` }],
@@ -274,11 +272,51 @@ describe(`transform utilities`, () => {
         transform: [{ translateY: `20%` }],
       });
 
-      rn.Platform.constants.reactNativeVersion = {
-        major: 0,
-        minor: 74,
-        patch: 0,
-      };
+      Platform.OS = `ios`;
+      jest.spyOn(Platform, `constants`, `get`).mockReturnValue({
+        ...Platform.constants,
+        reactNativeVersion: {
+          major: 0,
+          minor: 75,
+          patch: 0,
+        },
+      });
+      tw = create();
+
+      expect(tw.style(`translate-x-full`)).toMatchObject({
+        transform: [{ translateX: `100%` }],
+      });
+      expect(tw.style(`translate-y-full`)).toMatchObject({
+        transform: [{ translateY: `100%` }],
+      });
+      expect(tw.style(`translate-x-1/2`)).toMatchObject({
+        transform: [{ translateX: `50%` }],
+      });
+      expect(tw.style(`translate-y-1/2`)).toMatchObject({
+        transform: [{ translateY: `50%` }],
+      });
+      expect(tw.style(`translate-x-[10%]`)).toMatchObject({
+        transform: [{ translateX: `10%` }],
+      });
+      expect(tw.style(`translate-y-[10%]`)).toMatchObject({
+        transform: [{ translateY: `10%` }],
+      });
+      expect(tw.style(`translate-x-1/5`)).toMatchObject({
+        transform: [{ translateX: `20%` }],
+      });
+      expect(tw.style(`translate-y-1/5`)).toMatchObject({
+        transform: [{ translateY: `20%` }],
+      });
+
+      jest.spyOn(Platform, `constants`, `get`).mockReturnValue({
+        ...Platform.constants,
+        reactNativeVersion: {
+          major: 0,
+          minor: 74,
+          patch: 0,
+        },
+      });
+      tw = create();
 
       expect(tw.style(`translate-x-full`)).toMatchObject({});
       expect(tw.style(`translate-y-full`)).toMatchObject({});

src/create.ts

@@ -25,7 +25,9 @@ export function create(
   reactNativeVersion: Version,
 ): TailwindFn {
   const config = resolveConfig(withContent(customConfig) as any) as TwConfig;
-  const device: DeviceContext = {};
+  const device: DeviceContext = {
+    platform,
+  };
 
   const pluginUtils = getAddedUtilities(config.plugins);
   const customStringUtils: Record<string, string> = {};
@@ -110,7 +112,6 @@ export function create(
           config,
           cache,
           device,
-          platform,
           reactNativeVersion,
         );
         styleIr = parser.parse();
@@ -201,7 +202,6 @@ export function create(
       config,
       cache,
       device,
-      platform,
       reactNativeVersion,
     );
     const ir = parser.parse();

src/index.ts

@@ -5,8 +5,15 @@ import plugin from './plugin';
 import rawCreate from './create';
 
 // Apply default config and inject RN Platform and RN version
-const create = (twConfig: TwConfig = {}): TailwindFn =>
-  rawCreate(twConfig, Platform.OS, Platform.constants.reactNativeVersion);
+const create = (twConfig: TwConfig = {}): TailwindFn => {
+  return rawCreate(
+    twConfig,
+    Platform.OS,
+    // react-native-web does not expose a constants object
+    // @see https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/Platform/index.js
+    Platform.constants?.reactNativeVersion,
+  );
+};
 
 export type { TailwindFn, TwConfig, RnColorScheme, ClassInput, Style };
 export { useDeviceContext, useAppColorScheme } from './hooks';

src/resolve/transform.ts

@@ -133,9 +133,10 @@ export function translate(
   if (
     styleVal === null ||
     (isString(styleVal) &&
-      context.reactNativeVersion &&
-      context.reactNativeVersion.major === 0 &&
-      context.reactNativeVersion.minor < 75)
+      context.device?.platform !== `web` &&
+      (!context.reactNativeVersion ||
+        (context.reactNativeVersion.major === 0 &&
+          context.reactNativeVersion.minor < 75)))
   ) {
     return null;
   }

src/types.ts

@@ -75,6 +75,7 @@ export interface DeviceContext {
   colorScheme?: 'light' | 'dark' | null;
   fontScale?: number;
   pixelDensity?: 1 | 2;
+  platform?: Platform;
 }
 
 export interface ParseContext {
@@ -232,8 +233,10 @@ export function isObject(value: unknown): value is Record<string, unknown> {
   return typeof value === `object`;
 }
 
-export type Version = {
-  major: number;
-  minor: number;
-  patch: number;
-};
+export type Version =
+  | {
+      major: number;
+      minor: number;
+      patch: number;
+    }
+  | undefined;