Update

__tests__/frameworks/string/convertRgbaToHex.test.ts

@@ -0,0 +1,20 @@
+import { convertRgbaToHex } from '../../../bin/frameworks/string/convertRgbaToHex';
+
+describe('Failure cases', () => {
+  test('It should throw an error if no argument is provided', () => {
+    expect(() => {
+      // @ts-ignore
+      convertRgbaToHex();
+    }).toThrow();
+  });
+});
+
+describe('Success cases', () => {
+  test('It should correctly return a hexadecimal color value from an RGBA color value', () => {
+    expect(convertRgbaToHex('rgba(7,75,114,1)')).toBe('#074b72');
+  });
+
+  test('It should correctly return a hexadecimal color value from an RGB color value, defaulting to alpha 1', () => {
+    expect(convertRgbaToHex('rgba(7,75,114)')).toBe('#074b72');
+  });
+});

bin/entities/FigmagicElement/logic/getTokenMatch.ts

@@ -3,6 +3,7 @@ import { Imports } from '../../../contracts/Imports';
 import { TokenMatch } from '../../../contracts/TokenMatch';
 
 import { normalizeUnits } from '../../../frameworks/string/normalizeUnits';
+import { convertRgbaToHex } from '../../../frameworks/string/convertRgbaToHex';
 
 import { MsgGetTokenMatchNoMatch } from '../../../frameworks/messages/messages';
 import { ErrorGetTokenMatch, ErrorGetTokenMatchNoRemSize } from '../../../frameworks/errors/errors';
@@ -144,7 +145,12 @@ function matchOther(
 
     // Write expected value as-is, since we couldn't match it to a token
     if (!foundMatch) {
-      console.log(`${MsgGetTokenMatchNoMatch} ${property}: ${expectedValue}`);
+      let notFoundMessage = `${MsgGetTokenMatchNoMatch} ${property}: ${expectedValue}`;
+      if (property === 'color' || property === 'background-color')
+        notFoundMessage += ` (HEX: ${convertRgbaToHex(
+          expectedValue as string
+        )}, ${getAlphaInPercent(expectedValue as string)})`;
+      console.log(notFoundMessage);
       css += `${property}: ${expectedValue};\n`;
     }
 
@@ -153,3 +159,9 @@ function matchOther(
     throw new Error(error);
   }
 }
+
+const getAlphaInPercent = (color: string): string => {
+  const SECTIONED = color.split(',');
+  // @ts-ignore
+  return SECTIONED[SECTIONED.length - 1].replace(/ /gi, '').replace(')', '') * 100 + '%';
+};

bin/frameworks/errors/errors.ts

@@ -14,6 +14,9 @@ export const ErrorCleanArrays = ErrorMessage(
 export const ErrorConvertHexToRgba = ErrorMessage(
   'Missing one or more of red, green, blue and alpha in convertHexToRgba()!'
 );
+export const ErrorConvertRgbaToHex = ErrorMessage(
+  'Missing color value (as string, like "rgba(123,123,123,0.05) when calling convertRgbaToHex()!'
+);
 export const ErrorCreateConfiguration = ErrorMessage('No path provided to createConfiguration()!');
 export const ErrorCreateConfigurationNoDefault = ErrorMessage(
   'No default configuration provided to createConfiguration()!'

bin/frameworks/string/convertRgbaToHex.ts

@@ -0,0 +1,25 @@
+import { ErrorConvertRgbaToHex } from '../../frameworks/errors/errors';
+
+// @see https://stackoverflow.com/questions/15898740/how-to-convert-rgba-to-a-transparency-adjusted-hex
+
+export function convertRgbaToHex(color: string): string {
+  if (!color) throw new Error(ErrorConvertRgbaToHex);
+
+  const VALUES: any = color
+    .replace(/rgba?\(/, '')
+    .replace(/\)/, '')
+    .replace(/[\s+]/g, '')
+    .split(',');
+
+  const A: number = parseFloat(VALUES[3] || 1),
+    R = Math.floor(A * parseInt(VALUES[0]) + (1 - A) * 255),
+    G = Math.floor(A * parseInt(VALUES[1]) + (1 - A) * 255),
+    B = Math.floor(A * parseInt(VALUES[2]) + (1 - A) * 255);
+
+  return (
+    '#' +
+    ('0' + R.toString(16)).slice(-2) +
+    ('0' + G.toString(16)).slice(-2) +
+    ('0' + B.toString(16)).slice(-2)
+  );
+}