fixup! Feat(variables-scss): Formatting color tokens #DS-1461

exporters/variables-scss/src/generators/__tests__/cssGenerator.test.ts

@@ -34,7 +34,7 @@ const dataProvider = [
     token: {
       id: '3',
       name: 'unsupportedToken',
-      tokenType: TokenType.color,
+      tokenType: TokenType.duration,
     } as Token,
     expectedCss: null,
     hasParentPrefix: true,
@@ -53,9 +53,16 @@ describe('cssGenerator', () => {
 
   describe('generateCssFromTokens', () => {
     it('should generate CSS from tokens', () => {
-      const css = generateCssFromTokens(Array.from(exampleMockedTokens.values()), mappedTokens, tokenGroups, true);
+      const css = generateCssFromTokens(
+        Array.from(exampleMockedTokens.values()),
+        mappedTokens,
+        tokenGroups,
+        'Grid',
+        true,
+        false,
+      );
 
-      expect(css).toBe('$grid-spacing-desktop: 32px !default;\n$grid-columns: 12 !default;');
+      expect(css).toBe('$grid-columns: 12 !default;\n\n$grid-spacing-desktop: 32px !default;');
     });
   });
 });

exporters/variables-scss/src/generators/__tests__/fileGenerator.test.ts

@@ -25,6 +25,7 @@ describe('fileGenerator', () => {
       { fileName: '_other.scss', content: mockedExpectedResult },
       { fileName: '_radii.scss', content: emptyFile },
       { fileName: '_spacing.scss', content: emptyFile },
+      { fileName: '_colors.scss', content: emptyFile },
     ]);
   });
 });

exporters/variables-scss/src/helpers/__tests__/colorHelper.test.ts

@@ -0,0 +1,44 @@
+import { canHexBeShortened, normalizeColor, shortHex } from '../colorHelper';
+
+const dataProviderItems = [
+  {
+    originalColor: 'ffffffff',
+    expectedColor: '#fff',
+  },
+  {
+    originalColor: '96969',
+    expectedColor: '#96969',
+  },
+  {
+    originalColor: '835ea1',
+    expectedColor: '#835ea1',
+  },
+  {
+    originalColor: '00000040',
+    expectedColor: '#00000040',
+  },
+];
+
+describe('colorHelper', () => {
+  describe.each(dataProviderItems)('normalizeColor', ({ originalColor, expectedColor }) => {
+    it('should normalize color', () => {
+      expect(normalizeColor(originalColor)).toBe(expectedColor);
+    });
+  });
+
+  describe('canHexBeShortened', () => {
+    it('should return true if hex can be shortened', () => {
+      expect(canHexBeShortened('ffffff')).toBe(true);
+    });
+
+    it('should return false if hex cannot be shortened', () => {
+      expect(canHexBeShortened('00000040')).toBe(false);
+    });
+  });
+
+  describe('shortHex', () => {
+    it('should shorten hex', () => {
+      expect(shortHex('ffffff')).toBe('fff');
+    });
+  });
+});

exporters/variables-scss/src/helpers/__tests__/cssObjectHelper.test.ts

@@ -0,0 +1,53 @@
+import { convertToScss, mergeObjects } from '../cssObjectHelper';
+
+const object1 = {
+  $grids: {
+    spacing: {
+      desktop: '$grid-spacing-desktop',
+      mobile: '$grid-spacing-mobile',
+      tablet: '$grid-spacing-tablet',
+    },
+  },
+};
+
+const object2 = {
+  $grids: { columns: '$grid-columns' },
+};
+
+const mergedObject = {
+  $grids: {
+    spacing: {
+      desktop: '$grid-spacing-desktop',
+      mobile: '$grid-spacing-mobile',
+      tablet: '$grid-spacing-tablet',
+    },
+    columns: '$grid-columns',
+  },
+};
+
+const scssObject = `$grids: (
+spacing: (
+desktop: $grid-spacing-desktop,
+mobile: $grid-spacing-mobile,
+tablet: $grid-spacing-tablet,
+),
+columns: $grid-columns,
+),`;
+
+describe('cssObjectHelper', () => {
+  describe('mergeObjects', () => {
+    it('should merge objects', () => {
+      const result = mergeObjects(object1, object2);
+
+      expect(result).toStrictEqual(mergedObject);
+    });
+  });
+
+  describe('convertToScss', () => {
+    it('should convert object to SCSS', () => {
+      const result = convertToScss(mergedObject);
+
+      expect(result).toBe(scssObject);
+    });
+  });
+});

exporters/variables-scss/src/helpers/__tests__/tokenHelper.test.ts

@@ -1,5 +1,5 @@
 import { Token, TokenGroup } from '@supernovaio/sdk-exporters';
-import { formatTokenName, tokenVariableName } from '../tokenHelper';
+import { addEmptyLineBetweenTokenGroups, formatTokenName, sortTokens, tokenVariableName } from '../tokenHelper';
 import { exampleMockedGroups, exampleMockedTokens } from '../../formatters/__fixtures__/mockedExampleTokens';
 
 const dataProvider = [
@@ -47,4 +47,32 @@ describe('tokenHelper', () => {
       expect(result).toBe('$grid-columns: 12 !default;');
     });
   });
+
+  describe('sortTokens', () => {
+    it('should sort tokens by variable name', () => {
+      const tokens = Array.from(exampleMockedTokens.values());
+      const tokenGroups = exampleMockedGroups;
+      const hasParentPrefix = true;
+      const group = 'Grid';
+      const sortByNumValue = false;
+
+      const result = sortTokens(tokens, tokenGroups, hasParentPrefix, group, sortByNumValue);
+
+      expect(result[0]?.origin?.name).toBe('Grid/Columns');
+      expect(result[1]?.origin?.name).toBe('Grid/spacing/desktop');
+    });
+  });
+
+  describe('addEmptyLineBetweenTokenGroups', () => {
+    it('should add empty line between token groups', () => {
+      const cssTokens = [
+        { css: '$grid-columns: 12 !default;', parentGroupId: '1' },
+        { css: '$grid-spacing-desktop: 32px !default;', parentGroupId: '2' },
+      ];
+
+      const result = addEmptyLineBetweenTokenGroups(cssTokens);
+
+      expect(result).toBe('$grid-columns: 12 !default;\n\n$grid-spacing-desktop: 32px !default;');
+    });
+  });
 });

exporters/variables-scss/src/helpers/colorHelper.ts

@@ -2,11 +2,11 @@ const SHORT_HEX_WITHOUT_ALPHA_LENGTH = 3;
 const SHORT_HEX_WITH_ALPHA_LENGTH = 4;
 const LONG_HEX_WITH_ALPHA_LENGTH = 8;
 
-const canHexBeShortened = (hex: string) => {
+export const canHexBeShortened = (hex: string) => {
   return hex.length % 2 === 0 && hex.split('').every((ch, i, arr) => (i % 2 === 0 ? ch === arr[i + 1] : true));
 };
 
-const shortHex = (hex: string): string => {
+export const shortHex = (hex: string): string => {
   return hex
     .split('')
     .map((char, index) => (index % 2 === 0 ? char : ''))