fix: hex rgba regex matcher lazy, catch and warn colorjs error (#135)

.changeset/smart-pandas-dress.md

@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+Fix hex rgba regex matcher to be lazier about some character matching, warn for errors from colorjs.io hex parsing.

src/css/transformHEXRGBa.ts

@@ -9,11 +9,16 @@ export function transformHEXRGBaForCSS(value: string | undefined): string | unde
   if (value === undefined) {
     return value;
   }
-  const match = /rgba\((?<hex>#.+),\s*(?<alpha>.+)\)/g.exec(value);
+  const match = /rgba\((?<hex>#.+?),\s*?(?<alpha>\d.*?)\)/g.exec(value);
   if (match && match.groups) {
     const { hex, alpha } = match.groups;
-    const [r, g, b] = parseToRgba(hex);
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    try {
+      const [r, g, b] = parseToRgba(hex);
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    } catch (e) {
+      console.warn(`Tried parsing "${hex}" as a hex value, but failed.`);
+      return value;
+    }
   }
   return value;
 }

test/spec/css/transformHEXRGBa.spec.ts

@@ -16,4 +16,8 @@ describe('transform HEXRGBa', () => {
   it("does not transform if it's already rgba() format", () => {
     expect(transformHEXRGBaForCSS('rgba(0,0,0,1)')).to.equal('rgba(0,0,0,1)');
   });
+
+  it('does not transform if the hex value cannot be interpreted properly', () => {
+    expect(transformHEXRGBaForCSS('rgba(#000000abcd, 0.3)')).to.equal('rgba(#000000abcd, 0.3)');
+  });
 });