changed how origin is parsed

Author: Pedrozxcv

src/__tests__/transform.spec.ts

@@ -281,7 +281,7 @@ describe(`transform utilities`, () => {
 
   describe(`origin`, () => {
     const cases: Array<
-      [string, Record<'transformOrigin', string | (string | number)[]>]
+      [string, Record<'transformOrigin', string> | Record<string, never>]
     > = [
       [`origin-center`, { transformOrigin: `center` }],
       [`origin-top`, { transformOrigin: `top` }],
@@ -294,12 +294,23 @@ describe(`transform utilities`, () => {
       [`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] }],
+      [`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) => {
@@ -311,13 +322,13 @@ describe(`transform utilities`, () => {
         theme: {
           extend: {
             transformOrigin: {
-              'top-left-1/3-3/4-10': `33% 75% 10px`,
+              custom: `33% 75% 10px`,
             },
           },
         },
       });
 
-      expect(tw.style(`origin-top-left-1/3-3/4-10`)).toMatchObject({
+      expect(tw.style(`origin-custom`)).toMatchObject({
         transformOrigin: `33% 75% 10px`,
       });
     });

src/resolve/transform.ts

@@ -9,9 +9,11 @@ import {
   toStyleVal,
 } from '../helpers';
 
+const originPositions = [`left`, `center`, `right`, `top`, `bottom`];
+
 type Axis = `x` | `y` | `z` | ``;
 type Property = `scale` | `rotate` | `skew` | `translate`;
-type Position = `left` | `center` | `right` | `top` | `bottom`;
+type OriginPosition = (typeof originPositions)[number];
 
 export function scale(
   value: string,
@@ -149,62 +151,62 @@ export function origin(
     return complete({ transformOrigin: configValue });
   }
 
-  if (isArbitraryValue(value)) {
-    const values = value.slice(1, -1).split(`_`);
+  if (!isArbitraryValue(value)) {
+    return null;
+  }
 
-    if (values.length === 0 || values.length > 3) {
-      return null;
-    }
+  const values = value.slice(1, -1).split(`_`);
 
-    // 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] });
-    }
+  if (values.length === 0 || values.length > 3) {
+    return null;
+  }
 
-    // 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,
-    );
+  // the first value must be one of the positions, a percentage or a pixel value
+  const firstOriginValue = parseOriginValue(
+    values[0],
+    originPositions,
+    [Unit.px, Unit.percent],
+    context,
+  );
 
-    if (xOffset === null) {
-      return null;
-    }
+  if (firstOriginValue === 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(
+  const origin = [firstOriginValue];
+
+  if (values.length >= 2) {
+    // the second value must a position different from the first or `center`, a percentage or a pixel value
+    const secondOriginValue = parseOriginValue(
       values[1],
-      [`top`, `center`, `bottom`],
-      [Unit.percent, Unit.px],
+      originPositions.filter(
+        (position) => position === `center` || position !== firstOriginValue,
+      ),
+      [Unit.px, Unit.percent],
       context,
     );
 
-    if (yOffset === null) {
+    if (secondOriginValue === null) {
       return null;
     }
 
-    // with three values, the third value must be a pixel value
-    const zOffset = parseOriginValue(values[2], [], [Unit.px], context);
+    origin.push(secondOriginValue);
+  }
+
+  if (values.length === 3) {
+    // the third value must be a pixel value
+    const thirdOriginValue = parseOriginValue(values[2], [], [Unit.px], context);
 
-    if (zOffset === null && values.length === 3) {
+    if (thirdOriginValue === null) {
       return null;
     }
 
-    return complete({
-      transformOrigin:
-        zOffset === null ? [xOffset, yOffset] : [xOffset, yOffset, zOffset],
-    });
+    origin.push(thirdOriginValue);
   }
 
-  return null;
+  return complete({
+    transformOrigin: origin.join(` `),
+  });
 }
 
 function createStyle(
@@ -237,21 +239,21 @@ function isArbitraryValue(value: string): boolean {
 
 function parseOriginValue(
   value: string | undefined,
-  allowedPositions: Position[],
+  allowedPositions: OriginPosition[],
   allowedUnits: Unit[],
   context: ParseContext = {},
-): string | number | null {
+): string | null {
   if (!value) {
     return null;
   }
 
-  if (allowedPositions.includes(value as any)) {
+  if (allowedPositions.includes(value)) {
     return value;
   }
 
   const parsedValue = parseNumericValue(value, context);
 
   return parsedValue === null || !allowedUnits.includes(parsedValue[1])
     ? null
-    : toStyleVal(parsedValue[0], parsedValue[1], context);
+    : `${parsedValue[0] * (context.isNegative ? -1 : 1)}${parsedValue[1]}`;
 }

src/types.ts

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