added support for percentage values in translate and for transformOrigin

Author: Pedrozxcv

package-lock.json

@@ -46,13 +46,12 @@
     "tailwindcss": ">=2.0.0 <4.0.0"
   },
   "peerDependencies": {
-    "react-native": ">=0.62.2"
+    "react-native": ">=0.75.0"
   },
   "devDependencies": {
     "@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

@@ -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';
 
 export default class UtilityParser {
   private position = 0;
@@ -325,6 +332,11 @@ export default class UtilityParser {
       return transformNone();
     }
 
+    if (this.consumePeeked(`origin-`)) {
+      style = origin(this.rest, this.context, theme?.transformOrigin);
+      if (style) return style;
+    }
+
     h.warn(`\`${this.rest}\` unknown or invalid utility`);
     return null;
   }

src/UtilityParser.ts

@@ -199,20 +199,22 @@ describe(`transform utilities`, () => {
         [`-translate-y-px`, { transform: [{ translateY: -1 }] }],
         [`-translate-x-0.5`, { transform: [{ translateX: -2 }] }],
         [`-translate-y-0.5`, { transform: [{ translateY: -2 }] }],
+        [`translate-x-full`, { transform: [{ translateX: `100%` }] }],
+        [`translate-y-full`, { transform: [{ translateY: `100%` }] }],
+        [`translate-x-1/2`, { transform: [{ translateX: `50%` }] }],
+        [`translate-y-1/2`, { transform: [{ translateY: `50%` }] }],
 
         // arbitrary
         [`translate-x-[17rem]`, { transform: [{ translateX: 272 }] }],
         [`translate-y-[17rem]`, { transform: [{ translateY: 272 }] }],
+        [`translate-x-[10%]`, { transform: [{ translateX: `10%` }] }],
+        [`translate-y-[10%]`, { transform: [{ translateY: `10%` }] }],
 
         // 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`, {}],
+        [`translate-x-1/5`, { transform: [{ translateX: `20%` }] }],
+        [`translate-y-1/5`, { transform: [{ translateY: `20%` }] }],
       ];
 
     test.each(cases)(`tw\`%s\` -> %s`, (utility, expected) => {
@@ -276,4 +278,48 @@ describe(`transform utilities`, () => {
       ),
     ).toMatchObject({ transform: [] });
   });
+
+  describe(`origin`, () => {
+    const cases: Array<
+      [string, Record<'transformOrigin', string | (string | number)[]>]
+    > = [
+      [`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: [10] }],
+      [`origin-[left_top]`, { transformOrigin: [`left`, `top`] }],
+      [`origin-[-10%_20%_10px]`, { transformOrigin: [`-10%`, `20%`, 10] }],
+      [`origin-[-10px_-10px_-10px]`, { transformOrigin: [-10, -10, -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: {
+              'top-left-1/3-3/4-10': `33% 75% 10px`,
+            },
+          },
+        },
+      });
+
+      expect(tw.style(`origin-top-left-1/3-3/4-10`)).toMatchObject({
+        transformOrigin: `33% 75% 10px`,
+      });
+    });
+  });
 });

src/__tests__/transform.spec.ts

@@ -1,7 +1,8 @@
 import type { TwTheme } from '../tw-config';
 import type { DependentStyle, ParseContext, Style, StyleIR } from '../types';
-import { isString, Unit } from '../types';
+import { Unit } from '../types';
 import {
+  complete,
   parseNumericValue,
   parseStyleVal,
   parseUnconfigged,
@@ -10,6 +11,7 @@ import {
 
 type Axis = `x` | `y` | `z` | ``;
 type Property = `scale` | `rotate` | `skew` | `translate`;
+type Position = `left` | `center` | `right` | `top` | `bottom`;
 
 export function scale(
   value: string,
@@ -124,13 +126,7 @@ export function translate(
     ? parseStyleVal(configValue, context)
     : parseUnconfigged(value, context);
 
-  // support for percentage values in translate was only added in RN 0.75
-  // source: https://reactnative.dev/blog/2024/08/12/release-0.75#percentage-values-in-translation
-  // since the support of this package starts at RN 0.62.2
-  // we need to filter out percentages which are non-numeric values
-  return styleVal === null || isString(styleVal)
-    ? null
-    : createStyle(styleVal, `translate`, translateAxis);
+  return styleVal === null ? null : createStyle(styleVal, `translate`, translateAxis);
 }
 
 export function transformNone(): StyleIR {
@@ -142,6 +138,75 @@ export function transformNone(): StyleIR {
   };
 }
 
+export function origin(
+  value: string,
+  context: ParseContext = {},
+  config?: TwTheme['transformOrigin'],
+): StyleIR | null {
+  const configValue = config?.[value];
+
+  if (configValue) {
+    return complete({ transformOrigin: configValue });
+  }
+
+  if (isArbitraryValue(value)) {
+    const values = value.slice(1, -1).split(`_`);
+
+    if (values.length === 0 || values.length > 3) {
+      return null;
+    }
+
+    // with a single value, the value must be one of the positions, a percentage or a pixel value
+    if (values.length === 1) {
+      const parsedValue = parseOriginValue(
+        values[0],
+        [`left`, `center`, `right`, `top`, `bottom`],
+        [Unit.percent, Unit.px],
+        context,
+      );
+      return parsedValue === null ? null : complete({ transformOrigin: [parsedValue] });
+    }
+
+    // with two or three values, the first value must be 'left' / 'center' / 'right', a percentage or a pixel value
+    const xOffset = parseOriginValue(
+      values[0],
+      [`left`, `center`, `right`],
+      [Unit.percent, Unit.px],
+      context,
+    );
+
+    if (xOffset === null) {
+      return null;
+    }
+
+    // with two or three values, the second value must be 'top' / 'center' / 'bottom', a percentage or a pixel value
+    const yOffset = parseOriginValue(
+      values[1],
+      [`top`, `center`, `bottom`],
+      [Unit.percent, Unit.px],
+      context,
+    );
+
+    if (yOffset === null) {
+      return null;
+    }
+
+    // with three values, the third value must be a pixel value
+    const zOffset = parseOriginValue(values[2], [], [Unit.px], context);
+
+    if (zOffset === null && values.length === 3) {
+      return null;
+    }
+
+    return complete({
+      transformOrigin:
+        zOffset === null ? [xOffset, yOffset] : [xOffset, yOffset, zOffset],
+    });
+  }
+
+  return null;
+}
+
 function createStyle(
   styleVal: string | number,
   property: Property,
@@ -166,6 +231,27 @@ function createStyle(
   };
 }
 
-function isArbitraryValue(value: string): boolean {
+export function isArbitraryValue(value: string): boolean {
   return value.startsWith(`[`) && value.endsWith(`]`);
 }
+
+function parseOriginValue(
+  value: string | undefined,
+  allowedPositions: Position[],
+  allowedUnits: Unit[],
+  context: ParseContext = {},
+): string | number | null {
+  if (!value) {
+    return null;
+  }
+
+  if (allowedPositions.includes(value as any)) {
+    return value;
+  }
+
+  const parsedValue = parseNumericValue(value, context);
+
+  return parsedValue === null || !allowedUnits.includes(parsedValue[1])
+    ? null
+    : toStyleVal(parsedValue[0], parsedValue[1], context);
+}

src/resolve/transform.ts

@@ -46,6 +46,7 @@ export interface TwTheme {
   rotate?: Record<string, string>;
   skew?: Record<string, string>;
   translate?: Record<string, string>;
+  transformOrigin?: Record<string, string>;
   extend?: Omit<TwTheme, 'extend'>;
 }
 

src/tw-config.ts

@@ -108,7 +108,14 @@ export type Direction =
   | 'BottomRight';
 
 export type Style = {
-  [key: string]: string[] | string | number | boolean | Style | Style[];
+  [key: string]:
+    | string[]
+    | (string | number)[]
+    | string
+    | number
+    | boolean
+    | Style
+    | Style[];
 };
 
 export enum ConfigType {