fixup! Feat(exporters): Variables exporter export new token structure…

… #DS-1435

exporters/variables-scss/src/content/generators/contentGenerator.ts

@@ -1,7 +1,6 @@
 import { Token, TokenGroup, TokenType } from '@supernovaio/sdk-exporters';
 import { exportConfiguration } from '../../index';
-import { convertTokensToCSS, generateCssObject } from './cssGenerator';
-import { dimensionTokenToCSS } from './dimension';
+import { generateCssFromTokens, generateCssObjectFromTokens } from './cssGenerator';
 
 const addDisclaimer = (content: string): string => {
   if (exportConfiguration.generateDisclaimer) {
@@ -24,23 +23,27 @@ export const createFileWithContent = (
   let cssTokens = '';
   let cssObject = '';
 
+  // iterate over token types and group names to filter tokens
   tokenTypes.forEach((tokenType) => {
     groupNames.forEach((group) => {
       const filteredTokens = tokens.filter(
         (token) => token.tokenType === tokenType && token.origin?.name?.includes(group),
       );
 
-      cssTokens += convertTokensToCSS(filteredTokens, dimensionTokenToCSS, mappedTokens, tokenGroups, withParent);
+      // generate css tokens
+      cssTokens += generateCssFromTokens(filteredTokens, mappedTokens, tokenGroups, withParent);
       cssTokens += '\n\n';
 
-      const tempCssObject = generateCssObject(filteredTokens, mappedTokens, tokenGroups, withParent);
+      // generate css object
+      const tempCssObject = generateCssObjectFromTokens(filteredTokens, mappedTokens, tokenGroups, withParent);
       if (tempCssObject !== null) {
         cssObject += tempCssObject;
       }
     });
   });
 
   let content = withCssObject ? `${cssTokens}${cssObject}` : cssTokens;
+
   // Remove extra blank lines
   content = content.replace(/\n{3,}/g, '\n\n');
 

exporters/variables-scss/src/content/generators/cssGenerator.ts

@@ -1,38 +1,56 @@
-import { DimensionToken, Token, TokenGroup } from '@supernovaio/sdk-exporters';
-import { NamingHelper, StringCase } from '@supernovaio/export-helpers';
+import { DimensionToken, StringToken, Token, TokenGroup, TokenType } from '@supernovaio/sdk-exporters';
+import { CSSHelper, NamingHelper, StringCase } from '@supernovaio/export-helpers';
 import { toPlural } from '../helpers/stringHelper';
 
-type TokenHandler = (
+export const tokenVariableName = (token: Token, tokenGroups: Array<TokenGroup>, withParent: boolean): string => {
+  let parent;
+  if (withParent) {
+    parent = tokenGroups.find((group) => group.id === token.parentGroupId)!;
+  } else {
+    parent = null;
+  }
+
+  return NamingHelper.codeSafeVariableNameForToken(token, StringCase.paramCase, parent, '');
+};
+
+export const tokenToCSSByType = (
   token: Token,
   mappedTokens: Map<string, Token>,
-  tokenGroups: TokenGroup[],
+  tokenGroups: Array<TokenGroup>,
   withParent: boolean,
-) => string | null;
+): string | null => {
+  if (token.tokenType === TokenType.dimension) {
+    const dimensionToken = token as DimensionToken;
+    const name = tokenVariableName(dimensionToken, tokenGroups, withParent);
+    const value = dimensionToken.value?.measure;
+    const unit = CSSHelper.unitToCSS(dimensionToken.value?.unit);
+
+    return `$${name}: ${value}${unit} !default;`;
+  }
 
-export const convertTokensToCSS = (
+  if (token.tokenType === TokenType.string) {
+    const stringToken = token as StringToken;
+    const name = tokenVariableName(stringToken, tokenGroups, withParent);
+    const value = stringToken.value.text;
+
+    return `$${name}: ${value} !default;`;
+  }
+
+  return null;
+};
+
+export const generateCssFromTokens = (
   tokens: Token[],
-  handler: TokenHandler,
   mappedTokens: Map<string, Token>,
   tokenGroups: Array<TokenGroup>,
   withParent: boolean,
 ): string => {
   return tokens
-    .map((token) => handler(token, mappedTokens, tokenGroups, withParent))
+    .map((token) => tokenToCSSByType(token, mappedTokens, tokenGroups, withParent))
     .filter(Boolean)
     .join('\n');
 };
 
-export const tokenVariableName = (token: Token, tokenGroups: Array<TokenGroup>, withParent: boolean): string => {
-  let parent;
-  if (withParent) {
-    parent = tokenGroups.find((group) => group.id === token.parentGroupId)!;
-  } else {
-    parent = null;
-  }
-
-  return NamingHelper.codeSafeVariableNameForToken(token, StringCase.paramCase, parent, '');
-};
-
 const generateObjectContent = (tokens: Array<Token>, tokenGroups: Array<TokenGroup>, withParent: boolean): string => {
   let result = '';
 
@@ -52,7 +70,7 @@ const generateObjectContent = (tokens: Array<Token>, tokenGroups: Array<TokenGro
   return result;
 };
 
-export const generateCssObject = (
+export const generateCssObjectFromTokens = (
   tokens: Array<Token>,
   mappedTokens: Map<string, Token>,
   tokenGroups: Array<TokenGroup>,
@@ -73,6 +91,7 @@ export const generateCssObject = (
   });
 
   let result = '';
+
   // For each key in the map, generate an object and add it to the result string
   originNameMap.forEach((token, objectName) => {
     const objectContent = generateObjectContent(token, tokenGroups, withParent);