fix: hexrgba to work on values containing rgba(#hex, alpha) format (i…

…ssue#230) (#231) Co-authored-by: jorenbroekema <joren.broekema@gmail.com>
tokens-studio · Dec 1, 2023 · e7ecf43 · e7ecf43
1 parent e048d0b
commit e7ecf43
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 6 deletions.
diff --git a/.changeset/beige-actors-greet.md b/.changeset/beige-actors-greet.md
@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+Fixes transform HEXRGBa format when this format is contained within a value, e.g. linear-gradient() or multi-value.
diff --git a/src/css/transformHEXRGBa.ts b/src/css/transformHEXRGBa.ts
@@ -9,16 +9,16 @@ export function transformHEXRGBaForCSS(value: string | undefined): string | unde
   if (value === undefined) {
     return value;
   }
-  const match = /rgba\(\s*(?<hex>#.+?)\s*,\s*?(?<alpha>\d.*?)\)/g.exec(value);
-  if (match && match.groups) {
-    const { hex, alpha } = match.groups;
+
+  const regex = /rgba\(\s*(?<hex>#.+?)\s*,\s*(?<alpha>[\d.]+)\s*\)/g;
+
+  return value.replace(regex, (match, hex, 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 match;
     }
-  }
-  return value;
+  });
 }
diff --git a/test/integration/sd-transforms.test.ts b/test/integration/sd-transforms.test.ts
@@ -61,6 +61,7 @@ describe('sd-transforms smoke tests', () => {
   --sdColorsRed400: #f67474;
   --sdColorsRed500: #f56565;
   --sdColorsRed600: #dd5b5b;
+  --sdColorsGradient: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.00) 45%);
   --sdLineHeightsHeading: 1.1;
   --sdLineHeightsBody: 1.4;
   --sdLetterSpacingDefault: 0;
@@ -105,6 +106,7 @@ describe('sd-transforms smoke tests', () => {
   --sd-colors-red-400: #f67474;
   --sd-colors-red-500: #f56565;
   --sd-colors-red-600: #dd5b5b;
+  --sd-colors-gradient: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.00) 45%);
   --sd-line-heights-heading: 1.1;
   --sd-line-heights-body: 1.4;
   --sd-letter-spacing-default: 0;

diff --git a/test/integration/tokens/sd-transforms.tokens.json b/test/integration/tokens/sd-transforms.tokens.json
@@ -92,6 +92,10 @@
           }
         }
       }
+    },
+    "gradient": {
+      "value": "linear-gradient(180deg, {colors.black} 0%, rgba({colors.black}, 0.00) 45%)",
+      "type": "color"
     }
   },
   "lineHeights": {

diff --git a/test/spec/css/transformHEXRGBa.spec.ts b/test/spec/css/transformHEXRGBa.spec.ts
@@ -24,4 +24,13 @@ describe('transform HEXRGBa', () => {
   it('does not transform if the hex value cannot be interpreted properly', () => {
     expect(transformHEXRGBaForCSS('rgba(#000000abcd, 0.3)')).to.equal('rgba(#000000abcd, 0.3)');
   });
+
+  it('correctly transforms values containing the HEXRGBa pattern', () => {
+    expect(
+      transformHEXRGBaForCSS('linear-gradient(180deg, #000000 0%, rgba(#000000, 0.00) 45%)'),
+    ).to.equal('linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.00) 45%)');
+    expect(transformHEXRGBaForCSS('rgba(#000000, 0.00) rgba(#000000, 1)')).to.equal(
+      'rgba(0, 0, 0, 0.00) rgba(0, 0, 0, 1)',
+    );
+  });
 });