Support transformOrigin and percentage based values on the translate utility (#356)

Author: Pedrozxcv

package-lock.json

@@ -52,7 +52,6 @@
     "@babel/preset-typescript": "^7.23.3",
     "@types/jest": "^29.5.11",
     "@types/react": "^18.2.55",
-    "@types/react-native": "^0.73.0",
     "@types/react-test-renderer": "^18.0.7",
     "@types/tailwindcss": "^3.1.0",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
@@ -65,7 +64,7 @@
     "metro-react-native-babel-preset": "^0.66.2",
     "prettier": "^3.1.1",
     "react": "^18.2.0",
-    "react-native": "^0.73.4",
+    "react-native": "^0.75.0",
     "react-test-renderer": "^18.2.0",
     "ts-jest": "^29.1.1",
     "typescript": "^5.3.3"

package.json

@@ -1,5 +1,5 @@
 import type { TwConfig } from './tw-config';
-import type { StyleIR, DeviceContext, ParseContext, Platform } from './types';
+import type { StyleIR, DeviceContext, ParseContext, Platform, Version } from './types';
 import type Cache from './cache';
 import fontSize from './resolve/font-size';
 import lineHeight from './resolve/line-height';
@@ -16,7 +16,14 @@ import { widthHeight, size, minMaxWidthHeight } from './resolve/width-height';
 import { letterSpacing } from './resolve/letter-spacing';
 import { opacity } from './resolve/opacity';
 import { shadowOpacity, shadowOffset } from './resolve/shadow';
-import { rotate, scale, skew, transformNone, translate } from './resolve/transform';
+import {
+  origin,
+  rotate,
+  scale,
+  skew,
+  transformNone,
+  translate,
+} from './resolve/transform';
 import pointerEvents from './resolve/pointer-events';
 
 export default class UtilityParser {
@@ -34,8 +41,10 @@ export default class UtilityParser {
     private cache: Cache,
     device: DeviceContext,
     platform: Platform,
+    reactNativeVersion: Version,
   ) {
     this.context.device = device;
+    this.context.reactNativeVersion = reactNativeVersion;
     const parts = input.trim().split(`:`);
     let prefixes: string[] = [];
     if (parts.length === 1) {
@@ -326,6 +335,11 @@ export default class UtilityParser {
       return transformNone();
     }
 
+    if (this.consumePeeked(`origin-`)) {
+      style = origin(this.rest, this.context, theme?.transformOrigin);
+      if (style) return style;
+    }
+
     if (this.consumePeeked(`pointer-events-`)) {
       style = pointerEvents(this.rest);
       if (style) return style;

src/UtilityParser.ts

@@ -6,7 +6,10 @@ import type { TailwindFn } from '../';
 import { create, useDeviceContext, useAppColorScheme } from '../';
 
 jest.mock(`react-native`, () => ({
-  Platform: { OS: `ios` },
+  Platform: {
+    OS: `ios`,
+    constants: { reactNativeVersion: { major: 0, minor: 75, patch: 0 } },
+  },
   useColorScheme: () => `light`,
   useWindowDimensions: () => ({ width: 320, height: 640, fontScale: 1, scale: 2 }),
 }));

src/__tests__/color-scheme.spec.tsx

@@ -3,7 +3,10 @@ import { describe, test, expect } from '@jest/globals';
 import { create } from '../';
 
 jest.mock(`react-native`, () => ({
-  Platform: { OS: `ios` },
+  Platform: {
+    OS: `ios`,
+    constants: { reactNativeVersion: { major: 0, minor: 75, patch: 0 } },
+  },
 }));
 
 describe(`tw.prefixMatch()`, () => {

src/__tests__/prefix-match.spec.ts

@@ -1,3 +1,4 @@
+import rn from 'react-native';
 import { create } from '../';
 
 describe(`transform utilities`, () => {
@@ -207,12 +208,6 @@ describe(`transform utilities`, () => {
         // not configged
         [`translate-x-81`, { transform: [{ translateX: (81 / 4) * 16 }] }],
         [`translate-y-81`, { transform: [{ translateY: (81 / 4) * 16 }] }],
-
-        // unsupported
-        [`translate-x-full`, {}],
-        [`translate-y-full`, {}],
-        [`translate-x-1/2`, {}],
-        [`translate-y-1/2`, {}],
       ];
 
     test.each(cases)(`tw\`%s\` -> %s`, (utility, expected) => {
@@ -246,6 +241,54 @@ describe(`transform utilities`, () => {
         transform: [{ translateY: 16 }],
       });
     });
+
+    test(`translate w/percentage values`, () => {
+      rn.Platform.constants.reactNativeVersion = {
+        major: 0,
+        minor: 75,
+        patch: 0,
+      };
+
+      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%` }],
+      });
+
+      rn.Platform.constants.reactNativeVersion = {
+        major: 0,
+        minor: 74,
+        patch: 0,
+      };
+
+      expect(tw.style(`translate-x-full`)).toMatchObject({});
+      expect(tw.style(`translate-y-full`)).toMatchObject({});
+      expect(tw.style(`translate-x-1/2`)).toMatchObject({});
+      expect(tw.style(`translate-y-1/2`)).toMatchObject({});
+      expect(tw.style(`translate-x-[10%]`)).toMatchObject({});
+      expect(tw.style(`translate-y-[10%]`)).toMatchObject({});
+      expect(tw.style(`translate-x-1/5`)).toMatchObject({});
+      expect(tw.style(`translate-y-1/5`)).toMatchObject({});
+    });
   });
 
   test(`combine multiple transform utilities `, () => {
@@ -276,4 +319,59 @@ describe(`transform utilities`, () => {
       ),
     ).toMatchObject({ transform: [] });
   });
+
+  describe(`origin`, () => {
+    const cases: Array<
+      [string, Record<'transformOrigin', string> | Record<string, never>]
+    > = [
+      [`origin-center`, { transformOrigin: `center` }],
+      [`origin-top`, { transformOrigin: `top` }],
+      [`origin-top-right`, { transformOrigin: `top right` }],
+      [`origin-right`, { transformOrigin: `right` }],
+      [`origin-bottom-right`, { transformOrigin: `bottom right` }],
+      [`origin-bottom`, { transformOrigin: `bottom` }],
+      [`origin-bottom-left`, { transformOrigin: `bottom left` }],
+      [`origin-left`, { transformOrigin: `left` }],
+      [`origin-top-left`, { transformOrigin: `top left` }],
+
+      // arbitrary
+      [`origin-[top]`, { transformOrigin: `top` }],
+      [`origin-[10%]`, { transformOrigin: `10%` }],
+      [`origin-[10px]`, { transformOrigin: `10px` }],
+      [`origin-[left_top]`, { transformOrigin: `left top` }],
+      [`origin-[bottom_right]`, { transformOrigin: `bottom right` }],
+      [`origin-[center_center]`, { transformOrigin: `center center` }],
+      [`origin-[center_10%]`, { transformOrigin: `center 10%` }],
+      [`origin-[10px_center]`, { transformOrigin: `10px center` }],
+      [`origin-[10px_10%]`, { transformOrigin: `10px 10%` }],
+      [`origin-[-10%_20%_10px]`, { transformOrigin: `-10% 20% 10px` }],
+      [`origin-[-10px_-10px_-10px]`, { transformOrigin: `-10px -10px -10px` }],
+      [`origin-[left_top_10px]`, { transformOrigin: `left top 10px` }],
+
+      // invalid
+      [`origin-[left_left]`, {}],
+      [`origin-[top_top]`, {}],
+      [`origin-[top_left_10%]`, {}],
+    ];
+
+    test.each(cases)(`tw\`%s\` -> %s`, (utility, expected) => {
+      expect(tw.style(utility)).toMatchObject(expected);
+    });
+
+    test(`origin w/extended theme`, () => {
+      tw = create({
+        theme: {
+          extend: {
+            transformOrigin: {
+              custom: `33% 75% 10px`,
+            },
+          },
+        },
+      });
+
+      expect(tw.style(`origin-custom`)).toMatchObject({
+        transformOrigin: `33% 75% 10px`,
+      });
+    });
+  });
 });

src/__tests__/transform.spec.ts

@@ -5,7 +5,10 @@ import type { TwConfig } from '../tw-config';
 import { create } from '../';
 
 jest.mock(`react-native`, () => ({
-  Platform: { OS: `ios` },
+  Platform: {
+    OS: `ios`,
+    constants: { reactNativeVersion: { major: 0, minor: 75, patch: 0 } },
+  },
 }));
 
 describe(`tw`, () => {

src/__tests__/tw.spec.ts

@@ -9,6 +9,7 @@ import type {
   StyleIR,
   DeviceContext,
   Platform,
+  Version,
 } from './types';
 import type { TwConfig } from './tw-config';
 import Cache from './cache';
@@ -18,7 +19,11 @@ import { parseInputs } from './parse-inputs';
 import { complete, warn } from './helpers';
 import { getAddedUtilities } from './plugin';
 
-export function create(customConfig: TwConfig, platform: Platform): TailwindFn {
+export function create(
+  customConfig: TwConfig,
+  platform: Platform,
+  reactNativeVersion: Version,
+): TailwindFn {
   const config = resolveConfig(withContent(customConfig) as any) as TwConfig;
   const device: DeviceContext = {};
 
@@ -100,7 +105,14 @@ export function create(customConfig: TwConfig, platform: Platform): TailwindFn {
     for (const utility of utilities) {
       let styleIr = cache.getIr(utility);
       if (!styleIr) {
-        const parser = new UtilityParser(utility, config, cache, device, platform);
+        const parser = new UtilityParser(
+          utility,
+          config,
+          cache,
+          device,
+          platform,
+          reactNativeVersion,
+        );
         styleIr = parser.parse();
       }
 
@@ -184,7 +196,14 @@ export function create(customConfig: TwConfig, platform: Platform): TailwindFn {
     if (cached !== undefined) {
       return cached;
     }
-    const parser = new UtilityParser(`${joined}:flex`, config, cache, device, platform);
+    const parser = new UtilityParser(
+      `${joined}:flex`,
+      config,
+      cache,
+      device,
+      platform,
+      reactNativeVersion,
+    );
     const ir = parser.parse();
     const prefixMatches = ir.kind !== `null`;
     cache.setPrefixMatch(joined, prefixMatches);

src/create.ts

@@ -4,8 +4,9 @@ import type { TwConfig } from './tw-config';
 import plugin from './plugin';
 import rawCreate from './create';
 
-// Apply default config and inject RN Platform
-const create = (twConfig: TwConfig = {}): TailwindFn => rawCreate(twConfig, Platform.OS);
+// Apply default config and inject RN Platform and RN version
+const create = (twConfig: TwConfig = {}): TailwindFn =>
+  rawCreate(twConfig, Platform.OS, Platform.constants.reactNativeVersion);
 
 export type { TailwindFn, TwConfig, RnColorScheme, ClassInput, Style };
 export { useDeviceContext, useAppColorScheme } from './hooks';