Fix(exporter-js,exporter-scss): Refactor color normalization to make …

…it actually work #DS-1394

exporters/js/exporter.json

@@ -5,7 +5,7 @@
   "author": "Jan Kryšpín <[email protected]>",
   "organization": "LMC s.r.o.",
   "source_dir": "src",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "usesBrands": true,
   "config": {
     "sources": "sources.json",

exporters/js/src/js/formatters/color.ts

@@ -6,9 +6,5 @@ type ColorShape = {
 };
 
 export function formatColor(color: ColorShape): string {
-  if (color.a < 255) {
-    return `#${color.hex}`;
-  }
-
-  return `#${normalizeColor(color.hex.substring(0, 6))}`;
+  return normalizeColor(color.hex);
 }

exporters/js/src/js/normalizers/__tests__/color.test.js

@@ -3,10 +3,13 @@ import { normalizeColor } from '../color';
 describe('normalizeColor', () => {
   it.each([
     // name, expected
-    ['123456', '123456'],
-    ['fff', 'fff'],
-    ['ffffff', 'fff'],
-    ['ffffff00', 'fff0'],
+    ['123456', '#123456'],
+    ['123', '#123'],
+    ['fff', '#fff'],
+    ['ffffff', '#fff'],
+    ['ffffff00', '#fff0'],
+    ['ffffffff', '#fff'],
+    ['fffffff0', '#fffffff0'],
   ])('should normalize color', (color, expected) => {
     expect(normalizeColor(color)).toBe(expected);
   });

exporters/js/src/js/normalizers/color.ts

@@ -1,32 +1,39 @@
-const COLOR_HEX_LENGTH = {
-  SHORT: 'short',
-  LONG: 'long',
-};
-
-type ColorHexLength = (typeof COLOR_HEX_LENGTH)[keyof typeof COLOR_HEX_LENGTH];
-
-export function normalizeColor(color: string, colorHexLength: ColorHexLength = COLOR_HEX_LENGTH.SHORT): string {
-  const colorParts = color.match(/.{1,2}/g);
-  let shortHex = colorHexLength === COLOR_HEX_LENGTH.SHORT;
-  colorParts &&
-    colorParts.forEach((part) => {
-      if (colorHexLength === COLOR_HEX_LENGTH.SHORT) {
-        shortHex = /^(.)\1+$/.test(part);
-      }
-    });
-
-  if (shortHex) {
-    return `${color.substring(0, 1)}${color.substring(2, 3)}${color.substring(4, 5)}${color.substring(6, 7)}`;
-  }
+const SHORT_HEX_WITHOUT_ALPHA_LENGTH = 3;
+const SHORT_HEX_WITH_ALPHA_LENGTH = 4;
+const LONG_HEX_WITH_ALPHA_LENGTH = 8;
+
+export function normalizeColor(hexCode: string): string {
+  const isShortHex =
+    hexCode.length === SHORT_HEX_WITHOUT_ALPHA_LENGTH || hexCode.length === SHORT_HEX_WITH_ALPHA_LENGTH;
+
+  const canHexBeShortened = (hex: string) =>
+    hex.length % 2 === 0 && hex.split('').every((ch, i, arr) => (i % 2 === 0 ? ch === arr[i + 1] : true));
 
-  if (colorHexLength === COLOR_HEX_LENGTH.LONG && color.length === 3) {
-    // Convert short hex to long hex
-    // @see: https://www.30secondsofcode.org/js/s/extend-hex/
-    return color
+  const shortHex = (hex: string) =>
+    hex
       .split('')
-      .map((x) => x + x)
+      .map((char, index) => (index % 2 === 0 ? char : ''))
       .join('');
+
+  let processedHex: string;
+
+  if (isShortHex) {
+    processedHex = hexCode;
+  } else if (canHexBeShortened(hexCode)) {
+    processedHex = shortHex(hexCode);
+  } else {
+    processedHex = hexCode;
+  }
+
+  // Remove alpha channel if it's 255 aka ff
+  if (processedHex.length === LONG_HEX_WITH_ALPHA_LENGTH && processedHex.endsWith('ff')) {
+    return `#${processedHex.slice(0, -2)}`;
+  }
+
+  // Remove alpha channel if it's 255 aka f (in short form)
+  if (processedHex.length === SHORT_HEX_WITH_ALPHA_LENGTH && processedHex.endsWith('f')) {
+    return `#${processedHex.slice(0, -1)}`;
   }
 
-  return color;
+  return `#${processedHex}`;
 }

exporters/scss/exporter.json

@@ -5,7 +5,7 @@
   "author": "Jan Kryšpín <[email protected]>",
   "organization": "LMC s.r.o.",
   "source_dir": "src",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "usesBrands": true,
   "config": {
     "sources": "sources.json",