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

lmc-eu · Sep 10, 2024 · 36b2095 · 36b2095
1 parent fabf49b
commit 36b2095
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 11 deletions.
diff --git a/exporters/variables-scss/generated/exporter.cjs b/exporters/variables-scss/generated/exporter.cjs
diff --git a/exporters/variables-scss/src/generators/contentGenerator.ts b/exporters/variables-scss/src/generators/contentGenerator.ts
@@ -2,7 +2,7 @@ import { Token, TokenGroup, TokenType } from '@supernovaio/sdk-exporters';
 import { generateCssFromTokens } from './cssGenerator';
 import { CssObjectType, generateCssObjectFromTokens } from './cssObjectGenerator';
 import { formatCSS } from '../formatters/cssFormatter';
-import { convertToScss, mergeObjects } from '../helpers/cssObjectHelper';
+import { convertToScss, deepMergeObjects } from '../helpers/cssObjectHelper';
 
 // Add disclaimer to the top of the content
 export const addDisclaimer = (content: string): string => {
@@ -13,6 +13,7 @@ export const filterTokensByTypeAndGroup = (tokens: Token[], type: TokenType, gro
   return tokens.filter((token) => token.tokenType === type && token.origin?.name?.includes(group));
 };
 
+// TODO: refactor to use fileData instead of destructuring
 export const generateFileContent = (
   tokens: Token[],
   mappedTokens: Map<string, Token>,
@@ -44,7 +45,7 @@ export const generateFileContent = (
 
       // Generate css object and merge it with the existing one
       const groupCssObject = generateCssObjectFromTokens(filteredTokens, mappedTokens, tokenGroups, hasParentPrefix);
-      cssObject = mergeObjects(cssObject, groupCssObject);
+      cssObject = deepMergeObjects(cssObject, groupCssObject);
     });
   });
 

diff --git a/exporters/variables-scss/src/generators/cssObjectGenerator.ts b/exporters/variables-scss/src/generators/cssObjectGenerator.ts
@@ -4,13 +4,15 @@ import { toPlural } from '../helpers/stringHelper';
 
 export type CssObjectType = { [key: string]: string | object };
 
-const specialCases: { [key: string]: string } = {
+// TODO : add comments to this function
+// Handle invariant token aliases eg radius-full -> full
+const invariantTokenAlias: { [key: string]: string } = {
   'radius-full': 'full',
 };
 
 export const getNonNumericPart = (tokenName: string): string => {
-  if (specialCases[tokenName]) {
-    return specialCases[tokenName];
+  if (invariantTokenAlias[tokenName]) {
+    return invariantTokenAlias[tokenName];
   }
 
   return tokenName.toLowerCase();
@@ -22,6 +24,7 @@ export const generateCssObjectFromTokens = (
   tokenGroups: Array<TokenGroup>,
   hasParentPrefix: boolean,
 ): CssObjectType => {
+  // TODO: rename cssObject to cssObjectAcumulator
   return tokens.reduce((cssObject, token) => {
     const nameParts = token.origin?.name?.split('/');
 
@@ -30,7 +33,7 @@ export const generateCssObjectFromTokens = (
 
       nameParts.forEach((part, index) => {
         if (index === 0) {
-          part = token.tokenType === TokenType.color ? `$${part}-color` : `$${toPlural(part.toLowerCase())}`;
+          part = token.tokenType === TokenType.color ? `$${part}-colors` : `$${toPlural(part.toLowerCase())}`;
         }
         if (index === nameParts.length - 1) {
           const value = tokenVariableName(token, tokenGroups, hasParentPrefix);

diff --git a/exporters/variables-scss/src/generators/fileGenerator.ts b/exporters/variables-scss/src/generators/fileGenerator.ts
@@ -50,6 +50,7 @@ export const generateFiles = (
   tokenGroups: Array<TokenGroup>,
 ) => {
   return filesData.map(
+    // TODO: refactor this to use fileData instead of destructuring
     ({ fileName, tokenTypes, groupNames, withCssObject = true, hasParentPrefix = true, sortByNumValue = false }) => {
       const fileContent = generateFileContent(
         tokens,

diff --git a/exporters/variables-scss/src/helpers/__tests__/cssObjectHelper.test.ts b/exporters/variables-scss/src/helpers/__tests__/cssObjectHelper.test.ts
@@ -1,4 +1,4 @@
-import { convertToScss, mergeObjects } from '../cssObjectHelper';
+import { convertToScss, deepMergeObjects } from '../cssObjectHelper';
 
 const object1 = {
   $grids: {
@@ -37,7 +37,7 @@ columns: $grid-columns,
 describe('cssObjectHelper', () => {
   describe('mergeObjects', () => {
     it('should merge objects', () => {
-      const result = mergeObjects(object1, object2);
+      const result = deepMergeObjects(object1, object2);
 
       expect(result).toStrictEqual(mergedObject);
     });

diff --git a/exporters/variables-scss/src/helpers/cssObjectHelper.ts b/exporters/variables-scss/src/helpers/cssObjectHelper.ts
@@ -1,10 +1,10 @@
 import { CssObjectType } from '../generators/cssObjectGenerator';
 
-export const mergeObjects = (obj1: CssObjectType, obj2: CssObjectType): CssObjectType => {
+export const deepMergeObjects = (obj1: CssObjectType, obj2: CssObjectType): CssObjectType => {
   return Object.entries(obj2).reduce(
     (result, [key, value]) => {
       if (typeof value === 'object' && value !== null && typeof result[key] === 'object') {
-        result[key] = mergeObjects(result[key] as CssObjectType, value as CssObjectType);
+        result[key] = deepMergeObjects(result[key] as CssObjectType, value as CssObjectType);
       } else {
         result[key] = value;
       }