Feat(exporter-tokens): Sort typography tokens and remove unused param…

…eters
lmc-eu · Nov 26, 2024 · 82e715e · 82e715e
1 parent 031061a
commit 82e715e
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 83 deletions.
diff --git a/exporters/tokens/generated/exporter.cjs b/exporters/tokens/generated/exporter.cjs
diff --git a/exporters/tokens/src/config/fileConfig.ts b/exporters/tokens/src/config/fileConfig.ts
@@ -52,7 +52,7 @@ export const nonThemedFilesData: FileData[] = [
   {
     fileName: 'typography',
     tokenTypes: [TokenType.typography],
-    hasParentPrefix: false,
+    hasParentPrefix: true,
   },
 ];
 

diff --git a/exporters/tokens/src/generators/__tests__/mixinGenerator.test.ts b/exporters/tokens/src/generators/__tests__/mixinGenerator.test.ts
@@ -12,15 +12,13 @@ describe('mixinGenerator', () => {
   const dataProvider = [
     {
       tokens: exampleColorsTokens,
-      groupName: '',
       hasParentPrefix: false,
       hasTokenPrefix: true,
       description: 'should generate mixin from tokens',
       expectedStyles: `${SCSS_INDENTATION}--spirit-color-active: #{$active};\n${SCSS_INDENTATION}--spirit-color-primary: #{$primary};`,
     },
     {
       tokens: exampleColorsTokens,
-      groupName: '',
       hasParentPrefix: false,
       hasTokenPrefix: false,
       description: 'should generate mixin with parent prefix and no token prefix',
@@ -30,15 +28,14 @@ describe('mixinGenerator', () => {
 
   it.each(dataProvider)(
     'should correctly generate mixin for $description',
-    ({ tokens, expectedStyles, groupName, hasParentPrefix, hasTokenPrefix }) => {
+    ({ tokens, expectedStyles, hasParentPrefix, hasTokenPrefix }) => {
       const prefixTokens = Array.from(examplePrefixToken.values());
       const tokenPrefix = hasTokenPrefix ? findTokenPrefix(prefixTokens) : '';
 
       const styles = generateMixinFromTokens(
         Array.from(tokens.values()),
         tokenGroups,
         tokenPrefix,
-        groupName,
         hasParentPrefix,
         false,
       );

diff --git a/exporters/tokens/src/generators/__tests__/stylesGenerator.test.ts b/exporters/tokens/src/generators/__tests__/stylesGenerator.test.ts
@@ -158,7 +158,6 @@ describe('stylesGenerator', () => {
     const dataProvider = [
       {
         tokens: exampleDimensionAndStringTokens,
-        groupName: 'Grid',
         hasJsOutput: false,
         hasMixin: false,
         hasParentPrefix: true,
@@ -168,7 +167,6 @@ describe('stylesGenerator', () => {
       },
       {
         tokens: exampleDimensionAndStringTokens,
-        groupName: 'Grid',
         hasJsOutput: true,
         hasMixin: false,
         hasParentPrefix: true,
@@ -178,7 +176,6 @@ describe('stylesGenerator', () => {
       },
       {
         tokens: exampleColorsTokens,
-        groupName: '',
         hasJsOutput: false,
         hasMixin: true,
         hasParentPrefix: false,
@@ -188,7 +185,6 @@ describe('stylesGenerator', () => {
       },
       {
         tokens: exampleColorsTokens,
-        groupName: '',
         hasJsOutput: false,
         hasMixin: false,
         hasParentPrefix: false,
@@ -198,7 +194,6 @@ describe('stylesGenerator', () => {
       },
       {
         tokens: exampleColorsTokens,
-        groupName: '',
         hasJsOutput: true,
         hasMixin: true,
         hasParentPrefix: false,
@@ -208,7 +203,6 @@ describe('stylesGenerator', () => {
       },
       {
         tokens: exampleShadowTokens,
-        groupName: '',
         hasJsOutput: false,
         hasMixin: false,
         hasParentPrefix: false,
@@ -218,7 +212,6 @@ describe('stylesGenerator', () => {
       },
       {
         tokens: exampleShadowTokens,
-        groupName: '',
         hasJsOutput: false,
         hasMixin: false,
         hasParentPrefix: false,
@@ -228,7 +221,6 @@ describe('stylesGenerator', () => {
       },
       {
         tokens: exampleGradientTokens,
-        groupName: '',
         hasJsOutput: false,
         hasMixin: false,
         hasParentPrefix: false,
@@ -239,7 +231,6 @@ describe('stylesGenerator', () => {
       },
       {
         tokens: exampleGradientTokens,
-        groupName: '',
         hasJsOutput: false,
         hasMixin: false,
         hasParentPrefix: false,
@@ -252,15 +243,14 @@ describe('stylesGenerator', () => {
 
     it.each(dataProvider)(
       '$description',
-      ({ tokens, groupName, hasJsOutput, hasMixin, hasParentPrefix, hasTokenPrefix, expectedStyles }) => {
+      ({ tokens, hasJsOutput, hasMixin, hasParentPrefix, hasTokenPrefix, expectedStyles }) => {
         const prefixTokens = Array.from(examplePrefixToken.values());
         const tokenPrefix = hasTokenPrefix ? findTokenPrefix(prefixTokens) : '';
         const styles = generateStylesFromTokens(
           Array.from(tokens.values()),
           mappedTokens,
           tokenGroups,
           tokenPrefix,
-          groupName,
           hasMixin,
           hasParentPrefix,
           false,

diff --git a/exporters/tokens/src/generators/__tests__/stylesObjectGenerator.test.ts b/exporters/tokens/src/generators/__tests__/stylesObjectGenerator.test.ts
@@ -15,7 +15,6 @@ import {
   typographyGroupReducer,
 } from '../stylesObjectGenerator';
 
-const mappedTokens: Map<string, Token> = new Map([]);
 const tokenGroups: Array<TokenGroup> = exampleGroups;
 
 describe('stylesObjectGenerator', () => {
@@ -109,13 +108,7 @@ describe('stylesObjectGenerator', () => {
     ];
 
     it.each(dataProvider)('$description', ({ tokens, expectedStyles, hasJsOutput }) => {
-      const styles = generateStylesObjectFromTokens(
-        Array.from(tokens.values()),
-        mappedTokens,
-        tokenGroups,
-        true,
-        hasJsOutput,
-      );
+      const styles = generateStylesObjectFromTokens(Array.from(tokens.values()), tokenGroups, true, hasJsOutput, false);
 
       expect(styles).toStrictEqual(expectedStyles);
     });

diff --git a/exporters/tokens/src/generators/contentGenerator.ts b/exporters/tokens/src/generators/contentGenerator.ts
@@ -90,13 +90,13 @@ export const generateFileContent = (
   let stylesObject: StylesObjectType = {};
   let styledMixin = '';
   const {
+    excludeGroupNames = null,
     groupNames = [''],
-    hasParentPrefix = true,
-    sortByNumValue = false,
     hasMixin = false,
+    hasParentPrefix = true,
     hasStylesObject = true,
+    sortByNumValue = false,
     tokenTypes,
-    excludeGroupNames = null,
   } = fileData;
 
   // Iterate over token types and groups to filter tokens
@@ -114,7 +114,6 @@ export const generateFileContent = (
           mappedTokens,
           tokenGroups,
           tokenPrefix,
-          group,
           hasMixin,
           hasParentPrefix,
           sortByNumValue,
@@ -129,7 +128,6 @@ export const generateFileContent = (
           filteredTokens,
           tokenGroups,
           tokenPrefix,
-          group,
           hasParentPrefix,
           sortByNumValue,
         );
@@ -138,10 +136,10 @@ export const generateFileContent = (
       // Generate css object and merge it with the existing one
       const groupStylesObject = generateStylesObjectFromTokens(
         filteredTokens,
-        mappedTokens,
         tokenGroups,
         hasParentPrefix,
         hasJsOutput,
+        sortByNumValue,
       );
       stylesObject = deepMergeObjects(stylesObject, groupStylesObject);
     });

diff --git a/exporters/tokens/src/generators/fileGenerator.ts b/exporters/tokens/src/generators/fileGenerator.ts
@@ -162,7 +162,7 @@ export const generateOutputFilesByThemes = async (
   // Generate root themes file
   const rootThemesFileContent = generateThemesRootFile(themes);
   const rootTsThemesFileContent = generateThemesRootFile(themes, true);
-  const rootScssThemesFile = `@forward 'color-tokens';\n`;
+  const rootScssThemesFile = "@forward 'color-tokens';\n";
   const colorTokensFile = generateFiles(
     filteredColorCollections,
     mappedTokens,

diff --git a/exporters/tokens/src/generators/mixinGenerator.ts b/exporters/tokens/src/generators/mixinGenerator.ts
@@ -6,11 +6,10 @@ export const generateMixinFromTokens = (
   tokens: Token[],
   tokenGroups: Array<TokenGroup>,
   tokenPrefix: string,
-  group: string,
   hasParentPrefix: boolean,
   sortByNumValue: boolean,
 ): string => {
-  const sortedTokens = sortTokens(tokens, tokenGroups, hasParentPrefix, group, sortByNumValue);
+  const sortedTokens = sortTokens(tokens, tokenGroups, hasParentPrefix, sortByNumValue);
   const variables = sortedTokens
     .map((token) => {
       const name = tokenVariableName(token, tokenGroups, hasParentPrefix);

diff --git a/exporters/tokens/src/generators/stylesGenerator.ts b/exporters/tokens/src/generators/stylesGenerator.ts
@@ -122,13 +122,12 @@ export const generateStylesFromTokens = (
   mappedTokens: Map<string, Token>,
   tokenGroups: Array<TokenGroup>,
   tokenPrefix: string,
-  group: string,
   hasMixin: boolean,
   hasParentPrefix: boolean,
   sortByNumValue: boolean,
   hasJsOutput: boolean = false,
 ): string => {
-  const sortedTokens = sortTokens(tokens, tokenGroups, hasParentPrefix, group, sortByNumValue);
+  const sortedTokens = sortTokens(tokens, tokenGroups, hasParentPrefix, sortByNumValue);
 
   const cssTokens = sortedTokens.map((token) => ({
     css: tokenToStyleByType(token, mappedTokens, tokenGroups, tokenPrefix, hasMixin, hasParentPrefix, hasJsOutput),

diff --git a/exporters/tokens/src/generators/stylesObjectGenerator.ts b/exporters/tokens/src/generators/stylesObjectGenerator.ts
@@ -1,6 +1,6 @@
 import { Token, TokenGroup, TokenType, TypographyToken } from '@supernovaio/sdk-exporters';
 import { formatTypographyName, getBreakpoint, getTokenAlias, normalizeFirstNamePart } from '../helpers/objectHelper';
-import { tokenVariableName, typographyValue } from '../helpers/tokenHelper';
+import { sortTokens, tokenVariableName, typographyValue } from '../helpers/tokenHelper';
 import { toCamelCase } from '../helpers/stringHelper';
 import { COLOR_JS_SUFFIX, COLOR_KEY, COLOR_SCSS_SUFFIX, TYPOGRAPHY_KEY } from '../constants';
 
@@ -115,12 +115,13 @@ export const createGlobalTypographyObject = (typographyKeys: Array<string>) => {
 // TODO: refactor this function to not use cssObject reference
 export const generateStylesObjectFromTokens = (
   tokens: Array<Token>,
-  mappedTokens: Map<string, Token>,
   tokenGroups: Array<TokenGroup>,
   hasParentPrefix: boolean,
   hasJsOutput: boolean,
+  sortByNumValue: boolean,
 ): StylesObjectType => {
-  const stylesObject = tokens.reduce((stylesObjectAccumulator, token) => {
+  const sortedTokens = sortTokens(tokens, tokenGroups, hasParentPrefix, sortByNumValue);
+  const stylesObject = sortedTokens.reduce((stylesObjectAccumulator, token) => {
     const currentObject = createStylesObjectStructureFromTokenNameParts(
       token,
       tokenGroups,

diff --git a/exporters/tokens/src/helpers/tokenHelper.ts b/exporters/tokens/src/helpers/tokenHelper.ts
@@ -45,7 +45,6 @@ export const sortTokens = (
   tokens: Token[],
   tokenGroups: Array<TokenGroup>,
   hasParentPrefix: boolean,
-  group: string,
   sortByNumValue: boolean,
 ) => {
   const sortedTokens = tokens.sort((a, b) => {