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

.prettierignore

@@ -73,7 +73,7 @@ makefile
 CODEOWNERS
 
 # variable-scss exporter example mock test files
-exporters/variables-scss/tests/fixtures/*.scss
+exporters/**/{fixtures,__fixtures__}/**/unformatted*.*
 
 # variable-scss exporter generated cjs
 exporters/variables-scss/generated/**/*.cjs

exporters/variables-scss/.eslintignore

@@ -1,2 +1,5 @@
 # Generated files used by Supernova
 generated
+
+# variable-scss exporter example mock test files
+**/__fixtures__/**/unformatted*.*

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

@@ -0,0 +1,7 @@
+$my-var: (
+    color: #000,
+    background: #fff,
+    border: 1px solid #000,
+) !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

@@ -3,28 +3,24 @@ import path from 'path';
 import { indentAndFormat } from '../stylesFormatter';
 
 const mockedUnformattedCSS = fs.readFileSync(
-  path.join(__dirname, '../../../tests/fixtures/unformattedExample.scss'),
+  path.join(__dirname, '../../../src/formatters/__fixtures__/unformattedExample.scss'),
   'utf-8',
 );
 
 const mockedFormattedCSS = fs.readFileSync(
-  path.join(__dirname, '../../../tests/fixtures/formattedExample.scss'),
+  path.join(__dirname, '../../../src/formatters/__fixtures__/formattedExample.scss'),
   'utf-8',
 );
 
-const mockedFormattedJS = fs.readFileSync(path.join(__dirname, '../../../tests/fixtures/formattedExample.ts'), 'utf-8');
-
-const mockedUnformattedJS = `export const gridSpacingDesktop = '32px';
-
-export const gridColumns = '12';
+const mockedFormattedJS = fs.readFileSync(
+  path.join(__dirname, '../../../src/formatters/__fixtures__/formattedExample.ts'),
+  'utf-8',
+);
 
-export const grids = {
-spacing: {
-desktop: gridSpacingDesktop,
-},
-columns: gridColumns,
-};
-`;
+const mockedUnformattedJS = fs.readFileSync(
+  path.join(__dirname, '../../../src/formatters/__fixtures__/unformattedExample.ts'),
+  'utf-8',
+);
 
 describe('indentAndFormat', () => {
   it('should correctly indent and format CSS output', () => {

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,
+  },
+};

exporters/variables-scss/src/generators/__tests__/contentGenerator.test.ts

@@ -97,12 +97,7 @@ describe('contentGenerator', () => {
       const stylesObject = {
         $grids: { columns: '$grid-columns', spacing: { desktop: '$grid-spacing-desktop' } },
       };
-      const expectedResult = `$grids: (
-columns: $grid-columns,
-spacing: (
-desktop: $grid-spacing-desktop,
-),
-) !default;\n\n`;
+      const expectedResult = fs.readFileSync(path.join(__dirname, '../__fixtures__/unformattedExample.scss'), 'utf-8');
 
       const scssOutput = generateScssObjectOutput(stylesObject);
 
@@ -115,12 +110,7 @@ desktop: $grid-spacing-desktop,
       const stylesObject = {
         grids: { columns: 'gridColumns', spacing: { desktop: 'gridSpacingDesktop' } },
       };
-      const expectedResult = `export const grids = {
-columns: gridColumns,
-spacing: {
-desktop: gridSpacingDesktop,
-},
-};\n\n`;
+      const expectedResult = fs.readFileSync(path.join(__dirname, '../__fixtures__/unformattedExample.ts'), 'utf-8');
 
       const jsOutput = generateJsObjectOutput(stylesObject);
 

exporters/variables-scss/src/generators/__tests__/fileGenerator.test.ts

@@ -22,14 +22,7 @@ const mockedExpectedResult = fs.readFileSync(
 const mappedTokens: Map<string, Token> = new Map([]);
 const tokenGroups: Array<TokenGroup> = exampleGroups;
 const emptyFile = `/* This file was generated by Supernova, don't change manually */\n\n`;
-const indexFile = `@forward 'borders';
-@forward 'other';
-@forward 'radii';
-@forward 'spacing';
-@forward 'shadows';
-@forward 'gradients';
-@forward 'typography';
-`;
+const indexFile = fs.readFileSync(path.join(__dirname, '../__fixtures__/barrelFileMock.scss'), 'utf-8');
 const indexColorFile = `@forward 'colors';\n`;
 const indexJsFile = `export * from './borders';
 export * from './other';
@@ -51,19 +44,7 @@ export const grids = {
   columns: gridColumns,
 };\n`;
 
-const mockedRootThemeFile = `@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,
-    ),
-);
-`;
+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

exporters/variables-scss/tsconfig.eslint.json

@@ -1,4 +1,5 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["./", "./.eslintrc.cjs"]
+  "include": ["./", "./.eslintrc.cjs"],
+  "exclude": ["**/__fixtures__/**/unformatted*.*"]
 }