Feat(variables-scss): Export to javascript #DS-1437

.prettierignore

@@ -1,6 +1,7 @@
 # Build files
 **/dist
 **/build
+**/.build
 packages/**/types/*
 packages/**/esm/*
 packages/**/cjs/*
@@ -72,8 +73,9 @@ makefile
 # GitHub
 CODEOWNERS
 
-# variable-scss exporter example mock test files
-exporters/variables-scss/tests/fixtures/*.scss
+# Unformatted fixtures
+**/{fixtures}/**/unformatted*
+**/__fixtures__/unformatted*
 
 # variable-scss exporter generated cjs
 exporters/variables-scss/generated/**/*.cjs

exporters/variables-scss/.eslintignore

@@ -1,2 +1,6 @@
 # Generated files used by Supernova
 generated
+
+# Unformatted fixtures
+**/{fixtures}/**/unformatted*
+**/__fixtures__/unformatted*

exporters/variables-scss/src/config/fileConfig.ts

@@ -3,64 +3,61 @@ import { TokenType } from '@supernovaio/sdk-exporters';
 export type FileData = {
   fileName: string;
   tokenTypes: TokenType[];
-  groupNames: string[];
-  withCssObject?: boolean;
+  groupNames?: string[];
+  excludeGroupNames?: string[] | null;
+  hasStylesObject?: boolean;
   hasParentPrefix?: boolean;
   sortByNumValue?: boolean;
 };
 
 export const nonThemedFilesData: FileData[] = [
   {
-    fileName: '_borders.scss',
+    fileName: 'borders',
     tokenTypes: [TokenType.dimension],
     groupNames: ['Border'],
-    withCssObject: false,
+    hasStylesObject: false,
     sortByNumValue: true,
   },
   {
-    fileName: '_other.scss',
+    fileName: 'other',
     tokenTypes: [TokenType.dimension, TokenType.string],
-    groupNames: ['Grid', 'Container', 'Breakpoint'],
+    excludeGroupNames: ['Border', 'Radius', 'Spacing'],
+    sortByNumValue: true,
   },
   {
-    fileName: '_radii.scss',
+    fileName: 'radii',
     tokenTypes: [TokenType.dimension],
     groupNames: ['Radius'],
     hasParentPrefix: false,
     sortByNumValue: true,
   },
   {
-    fileName: '_spacing.scss',
+    fileName: 'spacing',
     tokenTypes: [TokenType.dimension],
     groupNames: ['Spacing'],
     hasParentPrefix: false,
     sortByNumValue: true,
   },
   {
-    fileName: '_shadows.scss',
+    fileName: 'shadows',
     tokenTypes: [TokenType.shadow],
-    groupNames: [''],
     hasParentPrefix: false,
   },
   {
-    fileName: '_gradients.scss',
+    fileName: 'gradients',
     tokenTypes: [TokenType.gradient],
-    groupNames: [''],
     hasParentPrefix: true,
   },
   {
-    fileName: '_typography.scss',
+    fileName: 'typography',
     tokenTypes: [TokenType.typography],
-    groupNames: [''],
-    withCssObject: true,
     hasParentPrefix: false,
   },
 ];
 
 export const themedFilesData: FileData[] = [
   {
-    fileName: '_colors.scss',
+    fileName: 'colors',
     tokenTypes: [TokenType.color],
-    groupNames: [''],
   },
 ];

exporters/variables-scss/src/config/invariantTokenAliasConfig.ts

@@ -0,0 +1,3 @@
+export const invariantTokenAlias: { [key: string]: string } = {
+  'radius-full': 'full',
+};

exporters/variables-scss/src/formatters/__fixtures__/formattedExample.ts

@@ -0,0 +1,10 @@
+export const gridSpacingDesktop = '32px';
+
+export const gridColumns = '12';
+
+export const grids = {
+  spacing: {
+    desktop: gridSpacingDesktop,
+  },
+  columns: gridColumns,
+};

exporters/variables-scss/tests/fixtures/unformattedExample.scss → exporters/variables-scss/src/formatters/__fixtures__/unformattedExample.scss

@@ -4,4 +4,4 @@ background: #fff,
 border: 1px solid #000,
 ) !default;
 
-$gradient-basic-overlay: linear-gradient(var(--gradient-angle, 0deg), #fff 0%, #fff0 100%) !default;
+$gradient-basic-overlay: linear-gradient(var(--gradient-angle, 0deg), #fff 0%, #fff0 100%) !default;

exporters/variables-scss/src/formatters/__fixtures__/unformattedExample.ts

@@ -0,0 +1,10 @@
+export const gridSpacingDesktop = '32px';
+
+export const gridColumns = '12';
+
+export const grids = {
+spacing: {
+desktop: gridSpacingDesktop,
+},
+columns: gridColumns,
+};

exporters/variables-scss/src/formatters/__tests__/stylesFormatter.test.ts

@@ -0,0 +1,33 @@
+import fs from 'fs';
+import path from 'path';
+import { indentAndFormat } from '../stylesFormatter';
+
+const mockedUnformattedCSS = fs.readFileSync(
+  path.join(__dirname, '../../../src/formatters/__fixtures__/unformattedExample.scss'),
+  'utf-8',
+);
+
+const mockedFormattedCSS = fs.readFileSync(
+  path.join(__dirname, '../../../src/formatters/__fixtures__/formattedExample.scss'),
+  'utf-8',
+);
+
+const mockedFormattedJS = fs.readFileSync(
+  path.join(__dirname, '../../../src/formatters/__fixtures__/formattedExample.ts'),
+  'utf-8',
+);
+
+const mockedUnformattedJS = fs.readFileSync(
+  path.join(__dirname, '../../../src/formatters/__fixtures__/unformattedExample.ts'),
+  'utf-8',
+);
+
+describe('indentAndFormat', () => {
+  it('should correctly indent and format CSS output', () => {
+    expect(indentAndFormat(mockedUnformattedCSS, false)).toBe(mockedFormattedCSS);
+  });
+
+  it('should correctly indent and format JS output', () => {
+    expect(indentAndFormat(mockedUnformattedJS, true)).toBe(mockedFormattedJS);
+  });
+});

exporters/variables-scss/src/formatters/stylesFormatter.ts

@@ -0,0 +1,52 @@
+export const SCSS_INDENTATION = '    ';
+export const JS_INDENTATION = '  ';
+
+export const removeExtraBlankLines = (css: string): string => {
+  return css.replace(/\n{3,}/g, '\n\n');
+};
+
+export const formatLinesAtEndOfTheFile = (css: string): string => {
+  return css.replace(/\n{2,}$/, '\n');
+};
+
+const formattingConfig = {
+  js: {
+    indentation: '  ',
+    openingBracket: '{',
+    closingBracket: '}',
+  },
+  scss: {
+    indentation: '    ',
+    openingBracket: '(',
+    closingBracket: ')',
+  },
+};
+
+export const indentAndFormat = (css: string, hasJsOutput: boolean): string => {
+  const fileType = hasJsOutput ? 'js' : 'scss';
+  const { indentation, openingBracket, closingBracket } = formattingConfig[fileType];
+  let indentationLevel = 0;
+  let formattedCSS = '';
+
+  const lines = css.split('\n');
+
+  for (const line of lines) {
+    // Check if both openingBracket and closeBracket are on the same line
+    if (line.includes(openingBracket) && line.includes(closingBracket)) {
+      formattedCSS += `${indentation.repeat(indentationLevel)}${line}\n`;
+    } else if (line.includes(openingBracket)) {
+      formattedCSS += `${indentation.repeat(indentationLevel)}${line}\n`;
+      indentationLevel += 1;
+    } else if (line.includes(closingBracket)) {
+      indentationLevel -= 1;
+      formattedCSS += `${indentation.repeat(indentationLevel)}${line}\n`;
+    } else {
+      formattedCSS += `${indentation.repeat(indentationLevel)}${line}\n`;
+    }
+  }
+
+  formattedCSS = removeExtraBlankLines(formattedCSS);
+  formattedCSS = formatLinesAtEndOfTheFile(formattedCSS);
+
+  return formattedCSS;
+};

exporters/variables-scss/src/generators/__fixtures__/barrelFileMock.scss

@@ -0,0 +1,7 @@
+@forward 'borders';
+@forward 'other';
+@forward 'radii';
+@forward 'spacing';
+@forward 'shadows';
+@forward 'gradients';
+@forward 'typography';

exporters/variables-scss/src/generators/__fixtures__/mockedRootThemeFile.scss

@@ -0,0 +1,12 @@
+@use 'themes/theme-light';
+@use 'themes/theme-light-inverted';
+
+// The first theme is the default theme, as the left column in the Figma table.
+$themes: (
+    theme-light: (
+        colors: theme-light.$colors,
+    ),
+    theme-light-inverted: (
+        colors: theme-light-inverted.$colors,
+    ),
+);

exporters/variables-scss/src/generators/__fixtures__/unformattedExample.scss

@@ -0,0 +1,6 @@
+$grids: (
+columns: $grid-columns,
+spacing: (
+desktop: $grid-spacing-desktop,
+),
+) !default;

exporters/variables-scss/src/generators/__fixtures__/unformattedExample.ts

@@ -0,0 +1,6 @@
+export const grids = {
+columns: gridColumns,
+spacing: {
+desktop: gridSpacingDesktop,
+},
+};