Merge pull request #68 from tenphi/fix-canonical-func-names

fix(parser): preserve canonical casing for CSS transform function names

Author: tenphi

.changeset/fix-canonical-func-names.md

@@ -0,0 +1,5 @@
+---
+'@tenphi/tasty': patch
+---
+
+Preserve canonical casing for CSS transform function names (e.g. `translateX`, `scaleY`) in parser output instead of lowercasing them.

src/parser/classify.ts

@@ -8,6 +8,7 @@ import {
   RE_RAW_UNIT,
   RE_UNIT_NUM,
   VALUE_KEYWORDS,
+  canonicalFuncName,
 } from './const';
 import { StyleParser } from './parser';
 import type { ParserOptions, ProcessedStyle } from './types';
@@ -352,7 +353,10 @@ export function classify(
     if (COLOR_FUNCS.has(fname)) {
       // Process inner to expand nested colors or units.
       const argProcessed = recurse(inner).output.replace(/,\s+/g, ','); // color funcs expect no spaces after commas
-      return { bucket: Bucket.Color, processed: `${fname}(${argProcessed})` };
+      return {
+        bucket: Bucket.Color,
+        processed: `${canonicalFuncName(fname)}(${argProcessed})`,
+      };
     }
 
     // user function (provided via opts)
@@ -367,7 +371,10 @@ export function classify(
 
     // generic: process inner and rebuild
     const argProcessed = recurse(inner).output;
-    return { bucket: Bucket.Value, processed: `${fname}(${argProcessed})` };
+    return {
+      bucket: Bucket.Value,
+      processed: `${canonicalFuncName(fname)}(${argProcessed})`,
+    };
   }
 
   // 6. Color fallback syntax: (#name, fallback)

src/parser/const.ts

@@ -29,3 +29,21 @@ export const RE_NUMBER = /^[+-]?(?:\d*\.\d+|\d+)$/;
 export const RE_HEX = /^(?:[0-9a-f]{3,4}|[0-9a-f]{6}(?:[0-9a-f]{2})?)$/;
 // Matches raw CSS unit values like "8px", "1rem", "0.5em" - captures number and unit separately
 export const RE_RAW_UNIT = /^([+-]?(?:\d*\.\d+|\d+))([a-z%]+)$/;
+
+const CANONICAL_FUNC_CASE = new Map([
+  ['translatex', 'translateX'],
+  ['translatey', 'translateY'],
+  ['translatez', 'translateZ'],
+  ['scalex', 'scaleX'],
+  ['scaley', 'scaleY'],
+  ['scalez', 'scaleZ'],
+  ['rotatex', 'rotateX'],
+  ['rotatey', 'rotateY'],
+  ['rotatez', 'rotateZ'],
+  ['skewx', 'skewX'],
+  ['skewy', 'skewY'],
+]);
+
+export function canonicalFuncName(lowered: string): string {
+  return CANONICAL_FUNC_CASE.get(lowered) ?? lowered;
+}

src/parser/parser.test.ts

@@ -597,6 +597,35 @@ describe('StyleProcessor', () => {
     ]);
   });
 
+  test('preserves canonical casing for CSS function names', () => {
+    expect(parser.process('translateX(10px)').output).toBe('translateX(10px)');
+    expect(parser.process('translateY(20%)').output).toBe('translateY(20%)');
+    expect(parser.process('translateZ(5px)').output).toBe('translateZ(5px)');
+    expect(parser.process('scaleX(1.5)').output).toBe('scaleX(1.5)');
+    expect(parser.process('scaleY(2)').output).toBe('scaleY(2)');
+    expect(parser.process('scaleZ(0.5)').output).toBe('scaleZ(0.5)');
+    expect(parser.process('rotateX(45deg)').output).toBe('rotateX(45deg)');
+    expect(parser.process('rotateY(90deg)').output).toBe('rotateY(90deg)');
+    expect(parser.process('rotateZ(180deg)').output).toBe('rotateZ(180deg)');
+    expect(parser.process('skewX(10deg)').output).toBe('skewX(10deg)');
+    expect(parser.process('skewY(20deg)').output).toBe('skewY(20deg)');
+  });
+
+  test('lowercase CSS functions remain unaffected', () => {
+    expect(parser.process('calc(100% - 10px)').output).toBe(
+      'calc(100% - 10px)',
+    );
+    expect(parser.process('min(1x, 100px)').output).toBe('min(8px, 100px)');
+    expect(parser.process('clamp(10px, 50%, 200px)').output).toBe(
+      'clamp(10px, 50%, 200px)',
+    );
+  });
+
+  test('canonical casing works inside nested functions', () => {
+    const result = parser.process('drop-shadow(0 0 10px translateX(5px))');
+    expect(result.output).toBe('drop-shadow(0 0 10px translateX(5px))');
+  });
+
   test('provides input property with original unparsed string for each group', () => {
     // Single group
     const result1 = parser.process('1x 2x #purple');