fix: alpha percentage values in rgba(hex, alpha) color format (#249)

tokens-studio · Jan 16, 2024 · cfc0c3d · cfc0c3d
1 parent bb45916
commit cfc0c3d
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 11 deletions.
diff --git a/.changeset/old-steaks-move.md b/.changeset/old-steaks-move.md
@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+Fix rgba(hex, alpha) regex to allow percentages, add more tests for different types of alpha values.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "expr-eval-fork": "^2.0.2",
     "is-mergeable-object": "^1.1.1",
     "postcss-calc-ast-parser": "^0.1.4",
-    "style-dictionary": "4.0.0-prerelease.7"
+    "style-dictionary": "4.0.0-prerelease.8"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.0",

diff --git a/src/css/transformHEXRGBa.ts b/src/css/transformHEXRGBa.ts
@@ -10,7 +10,7 @@ export function transformHEXRGBaForCSS(value: string | undefined): string | unde
     return value;
   }
 
-  const regex = /rgba\(\s*(?<hex>#.+?)\s*,\s*(?<alpha>[\d.]+)\s*\)/g;
+  const regex = /rgba\(\s*(?<hex>#.+?)\s*,\s*(?<alpha>\d*(\.\d*|%)*)\s*\)/g;
 
   return value.replace(regex, (match, hex, alpha) => {
     try {

diff --git a/test/integration/sd-transforms.test.ts b/test/integration/sd-transforms.test.ts
@@ -54,7 +54,7 @@ describe('sd-transforms smoke tests', () => {
   --sdColorsBlack: #000000;
   --sdColorsWhite: #ffffff;
   --sdColorsBlue: #0000FF;
-  --sdColorsBlueAlpha: rgba(0, 0, 255, 0.5);
+  --sdColorsBlueAlpha: rgba(0, 0, 255, 50%);
   --sdColorsRed400: #f67474;
   --sdColorsRed500: #f56565;
   --sdColorsRed600: #dd5b5b;
@@ -98,7 +98,7 @@ describe('sd-transforms smoke tests', () => {
   --sd-colors-black: #000000;
   --sd-colors-white: #ffffff;
   --sd-colors-blue: #0000FF;
-  --sd-colors-blue-alpha: rgba(0, 0, 255, 0.5);
+  --sd-colors-blue-alpha: rgba(0, 0, 255, 50%);
   --sd-colors-red-400: #f67474;
   --sd-colors-red-500: #f56565;
   --sd-colors-red-600: #dd5b5b;

diff --git a/test/integration/tokens/sd-transforms.tokens.json b/test/integration/tokens/sd-transforms.tokens.json
@@ -58,7 +58,7 @@
       "type": "color"
     },
     "blue-alpha": {
-      "value": "rgba({colors.blue}, 0.5)",
+      "value": "rgba({colors.blue}, 50%)",
       "type": "color"
     },
     "red": {

diff --git a/test/spec/css/transformHEXRGBa.spec.ts b/test/spec/css/transformHEXRGBa.spec.ts
@@ -7,6 +7,12 @@ runTransformSuite(transformHEXRGBaForCSS as (value: unknown) => unknown);
 describe('transform HEXRGBa', () => {
   it("transforms Figma's hex code RGBA to actual RGBA format", () => {
     expect(transformHEXRGBaForCSS('rgba(#ABC123, 0.5)')).to.equal('rgba(171, 193, 35, 0.5)');
+    expect(transformHEXRGBaForCSS('rgba(#ABC123, 1)')).to.equal('rgba(171, 193, 35, 1)');
+    expect(transformHEXRGBaForCSS('rgba(#ABC123, 50%)')).to.equal('rgba(171, 193, 35, 50%)');
+    expect(transformHEXRGBaForCSS('rgba(#ABC123, 1%)')).to.equal('rgba(171, 193, 35, 1%)');
+    expect(transformHEXRGBaForCSS('rgba(#ABC123, 0.75666)')).to.equal(
+      'rgba(171, 193, 35, 0.75666)',
+    );
   });
 
   it("transforms Figma's hex code RGBA to actual RGBA format regardless of whitespacing", () => {