Refactor(exporter-variables-scss): Typography generator function use one object

exporters/variables-scss/package.json

@@ -13,7 +13,7 @@
     "lint": "eslint ./",
     "lint:fix": "yarn lint --fix",
     "test": "npm-run-all lint test:unit:coverage types",
-    "test:unit": "jest || true",
+    "test:unit": "jest",
     "test:unit:watch": "yarn test:unit --watchAll",
     "test:unit:coverage": "yarn test:unit --coverage",
     "types": "true"

exporters/variables-scss/src/config/fileConfig.ts

@@ -3,64 +3,61 @@ import { TokenType } from '@supernovaio/sdk-exporters';
 export type FileData = {
   fileName: string;
   tokenTypes: TokenType[];
-  groupNames: string[];
-  withCssObject?: boolean;
+  groupNames?: string[];
+  excludeGroupNames?: string[] | null;
+  hasStylesObject?: boolean;
   hasParentPrefix?: boolean;
   sortByNumValue?: boolean;
 };
 
 export const nonThemedFilesData: FileData[] = [
   {
-    fileName: '_borders.scss',
+    fileName: 'borders',
     tokenTypes: [TokenType.dimension],
     groupNames: ['Border'],
-    withCssObject: false,
+    hasStylesObject: false,
     sortByNumValue: true,
   },
   {
-    fileName: '_other.scss',
+    fileName: 'other',
     tokenTypes: [TokenType.dimension, TokenType.string],
-    groupNames: ['Grid', 'Container', 'Breakpoint'],
+    excludeGroupNames: ['Border', 'Radius', 'Spacing'],
+    sortByNumValue: true,
   },
   {
-    fileName: '_radii.scss',
+    fileName: 'radii',
     tokenTypes: [TokenType.dimension],
     groupNames: ['Radius'],
     hasParentPrefix: false,
     sortByNumValue: true,
   },
   {
-    fileName: '_spacing.scss',
+    fileName: 'spacing',
     tokenTypes: [TokenType.dimension],
     groupNames: ['Spacing'],
     hasParentPrefix: false,
     sortByNumValue: true,
   },
   {
-    fileName: '_shadows.scss',
+    fileName: 'shadows',
     tokenTypes: [TokenType.shadow],
-    groupNames: [''],
     hasParentPrefix: false,
   },
   {
-    fileName: '_gradients.scss',
+    fileName: 'gradients',
     tokenTypes: [TokenType.gradient],
-    groupNames: [''],
     hasParentPrefix: true,
   },
   {
-    fileName: '_typography.scss',
+    fileName: 'typography',
     tokenTypes: [TokenType.typography],
-    groupNames: [''],
-    withCssObject: true,
     hasParentPrefix: false,
   },
 ];
 
 export const themedFilesData: FileData[] = [
   {
-    fileName: '_colors.scss',
+    fileName: 'colors',
     tokenTypes: [TokenType.color],
-    groupNames: [''],
   },
 ];

exporters/variables-scss/src/config/invariantTokenAliasConfig.ts

@@ -0,0 +1,3 @@
+export const invariantTokenAlias: { [key: string]: string } = {
+  'radius-full': 'full',
+};

exporters/variables-scss/src/formatters/__tests__/stylesFormatter.test.ts

@@ -0,0 +1,37 @@
+import fs from 'fs';
+import path from 'path';
+import { indentAndFormat } from '../stylesFormatter';
+
+const mockedUnformattedCSS = fs.readFileSync(
+  path.join(__dirname, '../../../tests/fixtures/unformattedExample.scss'),
+  'utf-8',
+);
+
+const mockedFormattedCSS = fs.readFileSync(
+  path.join(__dirname, '../../../tests/fixtures/formattedExample.scss'),
+  'utf-8',
+);
+
+const mockedFormattedJS = fs.readFileSync(path.join(__dirname, '../../../tests/fixtures/formattedExample.ts'), 'utf-8');
+
+const mockedUnformattedJS = `export const gridSpacingDesktop = '32px';
+
+export const gridColumns = '12';
+
+export const grids = {
+spacing: {
+desktop: gridSpacingDesktop,
+},
+columns: gridColumns,
+};
+`;
+
+describe('indentAndFormat', () => {
+  it('should correctly indent and format CSS output', () => {
+    expect(indentAndFormat(mockedUnformattedCSS, false)).toBe(mockedFormattedCSS);
+  });
+
+  it('should correctly indent and format JS output', () => {
+    expect(indentAndFormat(mockedUnformattedJS, true)).toBe(mockedFormattedJS);
+  });
+});

exporters/variables-scss/src/formatters/cssFormatter.ts → exporters/variables-scss/src/formatters/stylesFormatter.ts

@@ -1,4 +1,5 @@
-const INDENTATION = '    ';
+export const SCSS_INDENTATION = '    ';
+export const JS_INDENTATION = '  ';
 
 export const removeExtraBlankLines = (css: string): string => {
   return css.replace(/\n{3,}/g, '\n\n');
@@ -8,20 +9,23 @@ export const formatLinesAtEndOfTheFile = (css: string): string => {
   return css.replace(/\n{2,}$/, '\n');
 };
 
-export const formatCSS = (css: string): string => {
+export const indentAndFormat = (css: string, hasJsOutput: boolean): string => {
+  const INDENTATION = hasJsOutput ? JS_INDENTATION : SCSS_INDENTATION;
   let indentationLevel = 0;
   let formattedCSS = '';
 
   const lines = css.split('\n');
+  const openBracket = hasJsOutput ? '{' : '(';
+  const closeBracket = hasJsOutput ? '}' : ')';
 
   for (const line of lines) {
-    // Check if both '(' and ')' are on the same line
-    if (line.includes('(') && line.includes(')')) {
+    // Check if both openBracket and closeBracket are on the same line
+    if (line.includes(openBracket) && line.includes(closeBracket)) {
       formattedCSS += `${INDENTATION.repeat(indentationLevel)}${line}\n`;
-    } else if (line.includes('(')) {
+    } else if (line.includes(openBracket)) {
       formattedCSS += `${INDENTATION.repeat(indentationLevel)}${line}\n`;
       indentationLevel += 1;
-    } else if (line.includes(')')) {
+    } else if (line.includes(closeBracket)) {
       indentationLevel -= 1;
       formattedCSS += `${INDENTATION.repeat(indentationLevel)}${line}\n`;
     } else {

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

@@ -1,35 +1,40 @@
 import fs from 'fs';
 import path from 'path';
 import { Token, TokenGroup, TokenType } from '@supernovaio/sdk-exporters';
-import { generateFileContent, addDisclaimer, filterTokensByTypeAndGroup } from '../contentGenerator';
 import {
-  exampleMockedGroups,
-  exampleMockedTokens,
-  exampleTypographyMockedTokens,
-} from '../../../tests/fixtures/mockedExampleTokens';
+  generateFileContent,
+  addDisclaimer,
+  filterTokensByTypeAndGroup,
+  generateScssObjectOutput,
+  generateJsObjectOutput,
+  getGroups,
+} from '../contentGenerator';
+import { exampleDimensionAndStringTokens } from '../../../tests/fixtures/exampleDimensionAndStringTokens';
 import { FileData } from '../../config/fileConfig';
+import { exampleTypographyTokens } from '../../../tests/fixtures/exampleTypographyTokens';
+import { exampleGroups } from '../../../tests/fixtures/exampleGroups';
 
 const mockedExpectedResult = fs.readFileSync(
   path.join(__dirname, '../../../tests/fixtures/exampleFileContent.scss'),
   'utf-8',
 );
 const mappedTokens: Map<string, Token> = new Map([]);
-const tokenGroups: Array<TokenGroup> = exampleMockedGroups;
+const tokenGroups: Array<TokenGroup> = exampleGroups;
 
 describe('contentGenerator', () => {
   describe('generateFileContent', () => {
     it('should generate file content', () => {
-      const tokens = Array.from(exampleMockedTokens.values());
+      const tokens = Array.from(exampleDimensionAndStringTokens.values());
       const fileData: FileData = {
         fileName: 'testFile',
         tokenTypes: [TokenType.dimension, TokenType.string],
         groupNames: ['Grid', 'String'],
-        withCssObject: true,
+        hasStylesObject: true,
         hasParentPrefix: true,
         sortByNumValue: false,
       };
 
-      const fileContent = generateFileContent(tokens, mappedTokens, tokenGroups, fileData);
+      const fileContent = generateFileContent(tokens, mappedTokens, tokenGroups, fileData, false);
 
       expect(fileContent).toStrictEqual({ content: mockedExpectedResult });
     });
@@ -63,19 +68,19 @@ describe('contentGenerator', () => {
     const dataTypographyProviderItems = {
       type: TokenType.typography,
       group: 'Heading',
-      tokenIdentifier: 'typographyHeadingRef1',
+      tokenIdentifier: 'typographyRef1',
     };
 
     it.each(dataProviderItems)('should filter $description', ({ type, group, tokenIdentifier }) => {
-      const tokens = Array.from(exampleMockedTokens.values());
-      const expectedTokens = [exampleMockedTokens.get(tokenIdentifier) as Token];
+      const tokens = Array.from(exampleDimensionAndStringTokens.values());
+      const expectedTokens = [exampleDimensionAndStringTokens.get(tokenIdentifier) as Token];
 
       expect(filterTokensByTypeAndGroup(tokens, type, group)).toStrictEqual(expectedTokens);
     });
 
     it(`should filter ${dataTypographyProviderItems.type} token type and ${dataTypographyProviderItems.group} group and exclude tokens with "-Underline"`, () => {
-      const tokens = Array.from(exampleTypographyMockedTokens.values());
-      const expectedTokens = [exampleTypographyMockedTokens.get(dataTypographyProviderItems.tokenIdentifier) as Token];
+      const tokens = Array.from(exampleTypographyTokens.values());
+      const expectedTokens = [exampleTypographyTokens.get(dataTypographyProviderItems.tokenIdentifier) as Token];
 
       const filteredTokens = filterTokensByTypeAndGroup(
         tokens,
@@ -86,4 +91,82 @@ describe('contentGenerator', () => {
       expect(filteredTokens).toStrictEqual(expectedTokens);
     });
   });
+
+  describe('generateScssObjectOutput', () => {
+    it('should generate SCSS object output', () => {
+      const stylesObject = {
+        $grids: { columns: '$grid-columns', spacing: { desktop: '$grid-spacing-desktop' } },
+      };
+      const expectedResult = `$grids: (
+columns: $grid-columns,
+spacing: (
+desktop: $grid-spacing-desktop,
+),
+) !default;\n\n`;
+
+      const scssOutput = generateScssObjectOutput(stylesObject);
+
+      expect(scssOutput).toBe(expectedResult);
+    });
+  });
+
+  describe('generateJsObjectOutput', () => {
+    it('should generate JS object output', () => {
+      const stylesObject = {
+        grids: { columns: 'gridColumns', spacing: { desktop: 'gridSpacingDesktop' } },
+      };
+      const expectedResult = `export const grids = {
+columns: gridColumns,
+spacing: {
+desktop: gridSpacingDesktop,
+},
+};\n\n`;
+
+      const jsOutput = generateJsObjectOutput(stylesObject);
+
+      expect(jsOutput).toBe(expectedResult);
+    });
+  });
+
+  describe('getGroups', () => {
+    it('should return group names', () => {
+      const tokens = Array.from(exampleDimensionAndStringTokens.values());
+      const excludeGroupNames = ['String'];
+      const groupNames = ['Grid'];
+
+      const groups = getGroups(tokens, excludeGroupNames, groupNames);
+
+      expect(groups).toStrictEqual(['Grid']);
+    });
+
+    it('should return group names without excluded group names', () => {
+      const tokens = Array.from(exampleDimensionAndStringTokens.values());
+      const excludeGroupNames = ['String', 'Grid'];
+      const groupNames = ['Grid'];
+
+      const groups = getGroups(tokens, excludeGroupNames, groupNames);
+
+      expect(groups).toStrictEqual([]);
+    });
+
+    it('should return group names with no excluded group names', () => {
+      const tokens = Array.from(exampleDimensionAndStringTokens.values());
+      const excludeGroupNames = null;
+      const groupNames = ['Grid', 'String'];
+
+      const groups = getGroups(tokens, excludeGroupNames, groupNames);
+
+      expect(groups).toStrictEqual(['Grid', 'String']);
+    });
+
+    it('should not return group names', () => {
+      const tokens = Array.from(exampleDimensionAndStringTokens.values());
+      const excludeGroupNames = ['Grid', 'String'];
+      const groupNames = [''];
+
+      const groups = getGroups(tokens, excludeGroupNames, groupNames);
+
+      expect(groups).toStrictEqual([]);
+    });
+  });
 });