fix(transformHEXRGBAForCSS): allow whitespacing surrounding the hex c…

…ode (#150)

* fix(transformHEXRGBAForCSS): allow whitespacing surrounding the hex code

* chore(): add changeset

.changeset/olive-cooks-destroy.md

@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+Patches the transformHEXRGBa function to allow for whitespaces surrounding the HEX code. The Tokens Studio plugin automatically adds these whitespaces when working with aliases so this patch removes the need for manually having to remove those whitespaces.

src/css/transformHEXRGBa.ts

@@ -9,7 +9,7 @@ export function transformHEXRGBaForCSS(value: string | undefined): string | unde
   if (value === undefined) {
     return value;
   }
-  const match = /rgba\((?<hex>#.+?),\s*?(?<alpha>\d.*?)\)/g.exec(value);
+  const match = /rgba\(\s*(?<hex>#.+?)\s*,\s*?(?<alpha>\d.*?)\)/g.exec(value);
   if (match && match.groups) {
     const { hex, alpha } = match.groups;
     try {

test/spec/css/transformHEXRGBa.spec.ts

@@ -9,6 +9,10 @@ describe('transform HEXRGBa', () => {
     expect(transformHEXRGBaForCSS('rgba(#ABC123, 0.5)')).to.equal('rgba(171, 193, 35, 0.5)');
   });
 
+  it("transforms Figma's hex code RGBA to actual RGBA format regardless of whitespacing", () => {
+    expect(transformHEXRGBaForCSS('rgba( #ABC123 , 0.5)')).to.equal('rgba(171, 193, 35, 0.5)');
+  });
+
   it('does not transform the color if it doesnt match the regex', () => {
     expect(transformHEXRGBaForCSS('foo')).to.equal('foo');
   });