Merge pull request #33332 from petekp/patch-2

[Theo]: Fix registerTransform generic typing error

types/theo/index.d.ts

@@ -93,10 +93,10 @@ export function registerFormat<T extends string = never>(
     name: Format | T,
     format: FormatResultFn | string
 ): void;
-export function registerTransform<T extends string = never>(
-    name: Transform | T,
-    valueTransforms: ValueTransform[] | T[]
-): void;
+export function registerTransform<
+    T extends string = never,
+    V extends string = never
+>(name: Transform | T, valueTransforms: ValueTransform[] | V[]): void;
 export function registerValueTransform<T extends string = never>(
     name: ValueTransform | T,
     predicate: (prop: Prop) => boolean,

types/theo/theo-tests.ts

@@ -11,8 +11,30 @@ theo.convert({
     }
 });
 
+theo.convertSync({
+    transform: {
+        type: "raw",
+        file: "file",
+        data: "data"
+    },
+    format: {
+        type: "custom-properties.css"
+    }
+});
+
+// Register a provided transform with a provided value transform
+theo.registerTransform("web", ["color/hex"]);
+
+// Register a provided transform with custom value transform
 theo.registerTransform("web", ["relative/pixelValue"]);
 
+// Register a custom transform with custom value transform
+theo.registerTransform("custom", ["relative/pixelValue"]);
+
+// Register a custom transform with provided value transform
+theo.registerTransform("custom", ["color/rgb"]);
+
+// Register custom formatting function for a provided format
 theo.registerFormat(
     "cssmodules.css",
     `{{#each props as |prop|}}
@@ -20,6 +42,7 @@ theo.registerFormat(
     {{/each}}`
 );
 
+// Register a custom value transform
 theo.registerValueTransform(
     "relative/pixelValue",
     prop => prop.get("category") === "sizing",
@@ -28,3 +51,13 @@ theo.registerValueTransform(
         return parseFloat(value.replace(/rem/g, "")) * 16;
     }
 );
+
+// Override a custom value transform
+theo.registerValueTransform(
+    "relative/pixel",
+    prop => prop.get("category") === "sizing",
+    prop => {
+        const value = prop.get("value").toString();
+        return `${parseFloat(value.replace(/rem/g, "")) * 16}px`;
+    }
+);