Fix(variables-scss): Export in JS barrel file #DS-1503

lmc-eu · Oct 8, 2024 · ff113b9 · ff113b9
1 parent 8aeab9a
commit ff113b9
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 42 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
@@ -46,15 +46,15 @@ export const grids = {
 
 const mockedRootThemeFile = fs.readFileSync(path.join(__dirname, '../__fixtures__/mockedRootThemeFile.scss'), 'utf-8');
 
-const mockedRootThemeJsFile = `import * as themeLight from './themes/theme-light';
-import * as themeLightInverted from './themes/theme-light-inverted';\n
+const mockedRootThemeJsFile = `import * as themeLight from './theme-light';
+import * as themeLightInverted from './theme-light-inverted';\n
 // The first theme is the default theme, as the left column in the Figma table.
 export const themes = {
   themeLight: {
-    colors: themeLight.colors
+    colors: themeLight.colors,
   },
   themeLightInverted: {
-    colors: themeLightInverted.colors
+    colors: themeLightInverted.colors,
   },
 };
 `;
@@ -98,7 +98,7 @@ describe('fileGenerator', () => {
         { path: './js/global/', fileName: 'index.ts', content: barrelJsFile },
         // Root barrel files
         { path: './scss/', fileName: '@global.scss', content: "@forward 'global';\n" },
-        { path: './js/', fileName: '@global.ts', content: "export * from './global';\n" },
+        { path: './js/', fileName: 'index.ts', content: "export * from './global';\nexport * from './themes';\n" },
         // Themes files
         { path: './scss/themes/theme-light/', fileName: '_colors.scss', content: emptyFile },
         { path: './js/themes/theme-light/', fileName: 'colors.ts', content: emptyFile },
@@ -110,7 +110,7 @@ describe('fileGenerator', () => {
         { path: './js/themes/theme-light-inverted/', fileName: 'index.ts', content: barrelJsColorFile },
         // Themes root barrel files
         { path: './scss/', fileName: '@themes.scss', content: mockedRootThemeFile },
-        { path: './js/', fileName: '@themes.ts', content: mockedRootThemeJsFile },
+        { path: './js/themes', fileName: 'index.ts', content: mockedRootThemeJsFile },
       ]);
     });
   });
@@ -201,7 +201,7 @@ describe('fileGenerator', () => {
 
       expect(content).toBe(
         // eslint-disable-next-line prettier/prettier, quotes -- special characters in the string
-        'themeLight: {\ncolors: themeLight.colors\n},\nthemeLightInverted: {\ncolors: themeLightInverted.colors\n},',
+        'themeLight: {\ncolors: themeLight.colors,\n},\nthemeLightInverted: {\ncolors: themeLightInverted.colors,\n},',
       );
     });
   });
@@ -219,7 +219,7 @@ describe('fileGenerator', () => {
       const content = generateRootThemesFileImports(themes as TokenTheme[], true);
 
       expect(content).toBe(
-        "import * as themeLight from './themes/theme-light';\nimport * as themeLightInverted from './themes/theme-light-inverted';",
+        "import * as themeLight from './theme-light';\nimport * as themeLightInverted from './theme-light-inverted';",
       );
     });
   });
@@ -228,7 +228,7 @@ describe('fileGenerator', () => {
     it('should generate js import statement', () => {
       const content = jsImportStatement('theme-light');
 
-      expect(content).toBe("import * as themeLight from './themes/theme-light';");
+      expect(content).toBe("import * as themeLight from './theme-light';");
     });
   });
 

diff --git a/exporters/variables-scss/src/generators/fileGenerator.ts b/exporters/variables-scss/src/generators/fileGenerator.ts
@@ -39,7 +39,7 @@ export const generateBarrelFile = (files: { fileName: string; content: string }[
     .join('\n')}\n`;
 };
 export const jsImportStatement = (name: string) => {
-  return `import * as ${toCamelCase(name)} from './${THEMES_DIRECTORY}/${name}';`;
+  return `import * as ${toCamelCase(name)} from './${name}';`;
 };
 
 export const scssImportStatement = (name: string) => `@use '${THEMES_DIRECTORY}/${name}';`;
@@ -56,7 +56,7 @@ export const generateRootThemesFileContent = (themes: TokenTheme[], hasJsOutput:
   return themes
     .map((theme) => {
       return hasJsOutput
-        ? `${toCamelCase(theme.name)}: {\n${COLOR_KEY}: ${toCamelCase(theme.name)}.${COLOR_KEY}\n},`
+        ? `${toCamelCase(theme.name)}: {\n${COLOR_KEY}: ${toCamelCase(theme.name)}.${COLOR_KEY},\n},`
         : `${theme.name}: (\n${COLOR_KEY}: ${theme.name}.$${COLOR_KEY},\n),`;
     })
     .join('\n');
@@ -115,8 +115,8 @@ export const generateOutputFilesByThemes = async (
   });
   outputFiles.push({
     path: `./${JS_DIRECTORY}/`,
-    fileName: '@global.ts',
-    content: `export * from './${GLOBAL_DIRECTORY}';\n`,
+    fileName: 'index.ts',
+    content: `export * from './${GLOBAL_DIRECTORY}';\nexport * from './${THEMES_DIRECTORY}';\n`,
   });
 
   // Compute themed tokens for all themes in parallel
@@ -162,7 +162,11 @@ export const generateOutputFilesByThemes = async (
   const rootThemesFileContent = generateThemesRootFile(themes);
   const rootTsThemesFileContent = generateThemesRootFile(themes, true);
   outputFiles.push({ path: `./${SCSS_DIRECTORY}/`, fileName: '@themes.scss', content: rootThemesFileContent });
-  outputFiles.push({ path: `./${JS_DIRECTORY}/`, fileName: '@themes.ts', content: rootTsThemesFileContent });
+  outputFiles.push({
+    path: `./${JS_DIRECTORY}/${THEMES_DIRECTORY}`,
+    fileName: 'index.ts',
+    content: rootTsThemesFileContent,
+  });
 
   return outputFiles;
 };