fix: use last-wins semantics for duplicate transform types

When the same transform type appears multiple times (e.g., rotate-45 rotate-90),
the last value now wins, matching Tailwind CSS behavior.

- Different transform types are still combined into one array
- Same transform type replaces the previous value
- Add tests for last-wins behavior

Author: mgcrea

src/parser/transforms.test.ts

@@ -455,4 +455,26 @@ describe("parseClassName - multiple transforms", () => {
       transform: [{ rotate: "37deg" }, { scale: 0.2 }, { translateX: 50 }],
     });
   });
+
+  // "Last wins" behavior for same transform type (Tailwind parity)
+  it("should use last value for duplicate rotate (Tailwind parity)", () => {
+    const result = parseClassName("rotate-45 rotate-90");
+    expect(result).toEqual({
+      transform: [{ rotate: "90deg" }],
+    });
+  });
+
+  it("should use last value for duplicate scale (Tailwind parity)", () => {
+    const result = parseClassName("scale-50 scale-110");
+    expect(result).toEqual({
+      transform: [{ scale: 1.1 }],
+    });
+  });
+
+  it("should preserve different types while replacing duplicates", () => {
+    const result = parseClassName("rotate-45 scale-110 rotate-90");
+    expect(result).toEqual({
+      transform: [{ rotate: "90deg" }, { scale: 1.1 }],
+    });
+  });
 });

src/utils/mergeStyles.test.ts

@@ -24,8 +24,8 @@ describe("mergeStyles", () => {
     });
   });
 
-  describe("transform array merging", () => {
-    it("should concatenate transform arrays", () => {
+  describe("transform array merging - different types combined", () => {
+    it("should combine different transform types", () => {
       const target = { transform: [{ rotate: "45deg" }] };
       const source = { transform: [{ scale: 1.1 }] };
       expect(mergeStyles(target, source)).toEqual({
@@ -59,6 +59,48 @@ describe("mergeStyles", () => {
     });
   });
 
+  describe("transform array merging - same type last wins (Tailwind parity)", () => {
+    it("should replace same transform type with last value", () => {
+      const target = { transform: [{ rotate: "45deg" }] };
+      const source = { transform: [{ rotate: "90deg" }] };
+      expect(mergeStyles(target, source)).toEqual({
+        transform: [{ rotate: "90deg" }],
+      });
+    });
+
+    it("should replace same scale type with last value", () => {
+      const target = { transform: [{ scale: 0.5 }] };
+      const source = { transform: [{ scale: 1.1 }] };
+      expect(mergeStyles(target, source)).toEqual({
+        transform: [{ scale: 1.1 }],
+      });
+    });
+
+    it("should preserve order when replacing - rotate stays in position", () => {
+      const target = { transform: [{ rotate: "45deg" }, { scale: 1.1 }] };
+      const source = { transform: [{ rotate: "90deg" }] };
+      expect(mergeStyles(target, source)).toEqual({
+        transform: [{ rotate: "90deg" }, { scale: 1.1 }],
+      });
+    });
+
+    it("should handle mixed: replace same types, add new types", () => {
+      const target = { transform: [{ rotate: "45deg" }, { scale: 0.5 }] };
+      const source = { transform: [{ scale: 1.1 }, { translateX: 10 }] };
+      expect(mergeStyles(target, source)).toEqual({
+        transform: [{ rotate: "45deg" }, { scale: 1.1 }, { translateX: 10 }],
+      });
+    });
+
+    it("should handle scaleX and scaleY as different types", () => {
+      const target = { transform: [{ scaleX: 0.5 }] };
+      const source = { transform: [{ scaleY: 1.5 }] };
+      expect(mergeStyles(target, source)).toEqual({
+        transform: [{ scaleX: 0.5 }, { scaleY: 1.5 }],
+      });
+    });
+  });
+
   describe("mixed properties", () => {
     it("should handle mix of standard and transform properties", () => {
       const target = { margin: 4, transform: [{ rotate: "45deg" }] };

src/utils/mergeStyles.ts

@@ -1,17 +1,56 @@
 /**
  * Smart merge utility for StyleObject values
- * Handles array properties (like transform) by concatenating instead of overwriting
+ * Handles transform arrays with "last wins" semantics for same transform types
  */
 
-import type { StyleObject } from "../types/core";
+import type { StyleObject, TransformStyle } from "../types/core";
 
 /**
- * Properties that should be merged as arrays (concatenated) rather than overwritten
+ * Get the transform type key from a transform object
+ * e.g., { rotate: '45deg' } -> 'rotate', { scale: 1.1 } -> 'scale'
  */
-const ARRAY_MERGE_PROPERTIES = new Set<string>(["transform"]);
+function getTransformType(transform: TransformStyle): string {
+  return Object.keys(transform)[0];
+}
 
 /**
- * Merge two StyleObject instances, handling array properties specially
+ * Merge transform arrays with "last wins" semantics for duplicate transform types.
+ * Different transform types are combined, but if the same type appears twice,
+ * the later one replaces the earlier one (matching Tailwind CSS behavior).
+ *
+ * @example
+ * // Different types are combined
+ * mergeTransforms([{ rotate: '45deg' }], [{ scale: 1.1 }])
+ * // => [{ rotate: '45deg' }, { scale: 1.1 }]
+ *
+ * @example
+ * // Same type: last wins
+ * mergeTransforms([{ rotate: '45deg' }], [{ rotate: '90deg' }])
+ * // => [{ rotate: '90deg' }]
+ */
+function mergeTransforms(target: TransformStyle[], source: TransformStyle[]): TransformStyle[] {
+  // Build result by processing target first, then source
+  // For each source transform, replace any existing transform of the same type
+  const result: TransformStyle[] = [...target];
+
+  for (const sourceTransform of source) {
+    const sourceType = getTransformType(sourceTransform);
+    const existingIndex = result.findIndex((t) => getTransformType(t) === sourceType);
+
+    if (existingIndex !== -1) {
+      // Replace existing transform of same type (last wins)
+      result[existingIndex] = sourceTransform;
+    } else {
+      // Add new transform type
+      result.push(sourceTransform);
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Merge two StyleObject instances, handling transform arrays specially
  *
  * @param target - The target object to merge into (mutated)
  * @param source - The source object to merge from
@@ -23,30 +62,38 @@ const ARRAY_MERGE_PROPERTIES = new Set<string>(["transform"]);
  * // => { margin: 4, padding: 8 }
  *
  * @example
- * // Array properties (transform) are concatenated
+ * // Different transform types are combined
  * mergeStyles(
  *   { transform: [{ rotate: '45deg' }] },
  *   { transform: [{ scale: 1.1 }] }
  * )
  * // => { transform: [{ rotate: '45deg' }, { scale: 1.1 }] }
+ *
+ * @example
+ * // Same transform type: last wins (Tailwind parity)
+ * mergeStyles(
+ *   { transform: [{ rotate: '45deg' }] },
+ *   { transform: [{ rotate: '90deg' }] }
+ * )
+ * // => { transform: [{ rotate: '90deg' }] }
  */
 export function mergeStyles(target: StyleObject, source: StyleObject): StyleObject {
   for (const key in source) {
     if (Object.prototype.hasOwnProperty.call(source, key)) {
       const sourceValue = source[key];
 
-      // Handle array merge properties (like transform)
-      if (ARRAY_MERGE_PROPERTIES.has(key) && Array.isArray(sourceValue)) {
+      // Handle transform arrays specially
+      if (key === "transform" && Array.isArray(sourceValue)) {
         const targetValue = target[key];
         if (Array.isArray(targetValue)) {
-          // Concatenate arrays
-          (target as Record<string, unknown>)[key] = [...targetValue, ...sourceValue];
+          // Merge transforms with "last wins" for same types
+          target.transform = mergeTransforms(targetValue, sourceValue);
         } else {
           // No existing array, just assign
           target[key] = sourceValue;
         }
       } else {
-        // Standard Object.assign behavior for non-array properties
+        // Standard Object.assign behavior for non-transform properties
         target[key] = sourceValue;
       }
     }