fixup! Feat(variables-scss): Support for themes #DS-1436

lmc-eu · Sep 9, 2024 · 5362c8f · 5362c8f
1 parent 97c93be
commit 5362c8f
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 61 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/__tests__/fileGenerator.test.ts b/exporters/variables-scss/src/generators/__tests__/fileGenerator.test.ts
@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
-import { Token, TokenGroup } from '@supernovaio/sdk-exporters';
-import { generateFiles } from '../fileGenerator';
+import { Supernova, Token, TokenGroup, TokenTheme } from '@supernovaio/sdk-exporters';
+import { generateFiles, generateOutputFilesByThemes } from '../fileGenerator';
 import { exampleMockedGroups, exampleMockedTokens } from '../../formatters/__fixtures__/mockedExampleTokens';
 import { nonThemedFilesData } from '../../config/fileConfig';
 
@@ -14,18 +14,52 @@ const tokenGroups: Array<TokenGroup> = exampleMockedGroups;
 const emptyFile = `/* This file was generated by Supernova, don't change manually */\n\n`;
 
 describe('fileGenerator', () => {
-  it('should generate files', () => {
-    const tokens = Array.from(exampleMockedTokens.values());
-    const files = generateFiles(tokens, mappedTokens, tokenGroups, nonThemedFilesData);
+  describe('generateOutputFilesByThemes', () => {
+    it('should generate output files by themes', async () => {
+      const tokens = Array.from(exampleMockedTokens.values());
+      const sdk = {
+        tokens: {
+          computeTokensByApplyingThemes: jest.fn().mockResolvedValue(tokens),
+        },
+      };
+      const themes = [{ name: 'theme-light' }, { name: 'theme-light-inverted' }];
+      const outputFiles = await generateOutputFilesByThemes(
+        tokens,
+        mappedTokens,
+        tokenGroups,
+        themes as TokenTheme[],
+        sdk as unknown as Supernova,
+      );
 
-    expect(files).toStrictEqual([
-      {
-        fileName: '_borders.scss',
-        content: emptyFile,
-      },
-      { fileName: '_other.scss', content: mockedExpectedResult },
-      { fileName: '_radii.scss', content: emptyFile },
-      { fileName: '_spacing.scss', content: emptyFile },
-    ]);
+      expect(outputFiles).toStrictEqual([
+        {
+          path: './globals/',
+          fileName: '_borders.scss',
+          content: emptyFile,
+        },
+        { path: './globals/', fileName: '_other.scss', content: mockedExpectedResult },
+        { path: './globals/', fileName: '_radii.scss', content: emptyFile },
+        { path: './globals/', fileName: '_spacing.scss', content: emptyFile },
+        { path: './themes/theme-light/', fileName: '_colors.scss', content: emptyFile },
+        { path: './themes/theme-light-inverted/', fileName: '_colors.scss', content: emptyFile },
+      ]);
+    });
+  });
+
+  describe('generateFiles', () => {
+    it('should generate files', () => {
+      const tokens = Array.from(exampleMockedTokens.values());
+      const files = generateFiles(tokens, mappedTokens, tokenGroups, nonThemedFilesData);
+
+      expect(files).toStrictEqual([
+        {
+          fileName: '_borders.scss',
+          content: emptyFile,
+        },
+        { fileName: '_other.scss', content: mockedExpectedResult },
+        { fileName: '_radii.scss', content: emptyFile },
+        { fileName: '_spacing.scss', content: emptyFile },
+      ]);
+    });
   });
 });
diff --git a/exporters/variables-scss/src/generators/fileGenerator.ts b/exporters/variables-scss/src/generators/fileGenerator.ts
@@ -1,6 +1,45 @@
-import { TokenGroup, Token } from '@supernovaio/sdk-exporters';
+import { TokenGroup, Token, Supernova, TokenTheme } from '@supernovaio/sdk-exporters';
 import { generateFileContent } from './contentGenerator';
-import { FileData } from '../config/fileConfig';
+import { FileData, nonThemedFilesData, themedFilesData } from '../config/fileConfig';
+
+export const generateOutputFilesByThemes = async (
+  tokens: Token[],
+  mappedTokens: Map<string, Token>,
+  tokenGroups: TokenGroup[],
+  themes: TokenTheme[],
+  sdk: Supernova,
+): Promise<{ path: string; fileName: string; content: string }[]> => {
+  const outputFiles: { path: string; fileName: string; content: string }[] = [];
+
+  // Generate global files for non-themed tokens
+  const globalFiles = generateFiles(tokens, mappedTokens, tokenGroups, nonThemedFilesData);
+  outputFiles.push(
+    ...globalFiles.map((file) => {
+      return { path: './globals/', fileName: file.fileName, content: file.content };
+    }),
+  );
+
+  // Compute themed tokens for all themes in parallel
+  const allThemes = await Promise.all(
+    themes.map(async (theme) => {
+      const themedTokens = await sdk.tokens.computeTokensByApplyingThemes(tokens, [theme]);
+
+      return { themedTokens, theme };
+    }),
+  );
+
+  // Generate files for each theme
+  for (const { themedTokens, theme } of allThemes) {
+    const themeFiles = generateFiles(themedTokens, mappedTokens, tokenGroups, themedFilesData);
+    outputFiles.push(
+      ...themeFiles.map((file) => {
+        return { path: `./themes/${theme.name}/`, fileName: file.fileName, content: file.content };
+      }),
+    );
+  }
+
+  return outputFiles;
+};
 
 export const generateFiles = (
   tokens: Array<Token>,

diff --git a/exporters/variables-scss/src/index.ts b/exporters/variables-scss/src/index.ts
@@ -7,8 +7,7 @@ import {
   OutputTextFile,
 } from '@supernovaio/sdk-exporters';
 import { ExporterConfiguration } from '../config';
-import { generateFiles } from './generators/fileGenerator';
-import { nonThemedFilesData, themedFilesData } from './config/fileConfig';
+import { generateOutputFilesByThemes } from './generators/fileGenerator';
 
 // https://github.com/Supernova-Studio/exporters/issues/4
 // @ts-ignore-next-line
@@ -41,34 +40,11 @@ Pulsar.export(async (sdk: Supernova, context: PulsarContext): Promise<Array<AnyO
     });
   };
 
-  const outputFiles = [];
-
-  // Generate global files for non-themed tokens
-  const globalFiles = generateFiles(tokens, mappedTokens, tokenGroups, nonThemedFilesData);
-  outputFiles.push(
-    ...globalFiles.map((file) => {
-      return createTextFile('./globals/', file.fileName, file.content);
-    }),
-  );
-
-  // Compute themed tokens for all themes in parallel
-  const allThemes = await Promise.all(
-    themes.map(async (theme) => {
-      const themedTokens = await sdk.tokens.computeTokensByApplyingThemes(tokens, [theme]);
-
-      return { themedTokens, theme };
-    }),
-  );
-
-  // Generate files for each theme
-  for (const { themedTokens, theme } of allThemes) {
-    const themeFiles = generateFiles(themedTokens, mappedTokens, tokenGroups, themedFilesData);
-    outputFiles.push(
-      ...themeFiles.map((file) => {
-        return createTextFile(`./themes/${theme.name}/`, file.fileName, file.content);
-      }),
-    );
-  }
+  let textFiles: Array<OutputTextFile> = [];
+  const outputFilesData = await generateOutputFilesByThemes(tokens, mappedTokens, tokenGroups, themes, sdk);
+  textFiles = outputFilesData.map((file) => {
+    return createTextFile(file.path, file.fileName, file.content);
+  });
 
   // TODO: Only for debugging purposes, remove for production!
   const safeStringify = (obj: object) => {
@@ -93,12 +69,12 @@ Pulsar.export(async (sdk: Supernova, context: PulsarContext): Promise<Array<AnyO
   };
 
   // TODO: Only for debugging purposes - remove for production!
-  outputFiles.push(
+  textFiles.push(
     createTextFile('./original-data/', '_original-tokens.json', safeStringify(tokens)),
     createTextFile('./original-data/', '_original-groups.json', JSON.stringify(tokenGroups, null, 2)),
   );
 
-  return outputFiles;
+  return textFiles;
 });
 
 export const exportConfiguration = Pulsar.exportConfig<ExporterConfiguration>();