SCSS variables output

README.md

@@ -660,13 +660,13 @@ From version `4.3.7`, you can now also opt-in to have no transforms applied to y
 
 #### Switch token file format
 
-`figmagic [--outputFormatTokens | -ft] [ts|mjs|js|json|css]`
+`figmagic [--outputFormatTokens | -ft] [ts|mjs|js|json|css|scss]`
 
 **Default**: `ts`.
 
-For typical programmatic cases you will probably most often want one of `ts`, `mjs`, or `js`. For basic JSON, use `json`, and for ready-to-use CSS variables, use `css`.
+For typical programmatic cases you will probably most often want one of `ts`, `mjs`, or `js`. For basic JSON, use `json`. For ready-to-use CSS or Sass variables, use `css` or `scss`.
 
-_Please note that CSS variables will not work with elements!_
+_Please note that CSS & Sass variables will not work with elements!_
 
 ---
 

__tests__/entities/Config/logic/parseCliArgs.test.ts

@@ -645,6 +645,15 @@ describe('Success cases', () => {
           })
         );
       });
+
+      test('It should return "scss" for outputFormatTokens if passing "scss"', () => {
+        // @ts-ignore
+        expect(parseCliArgs(['--outputFormatTokens', 'scss'])).toEqual(
+          expect.objectContaining({
+            outputFormatTokens: 'scss'
+          })
+        );
+      });
     });
 
     describe('Short hand', () => {
@@ -692,6 +701,15 @@ describe('Success cases', () => {
           })
         );
       });
+
+      test('It should return "scss" for outputFormatTokens if passing "scss"', () => {
+        // @ts-ignore
+        expect(parseCliArgs(['-ft', 'scss'])).toEqual(
+          expect.objectContaining({
+            outputFormatTokens: 'scss'
+          })
+        );
+      });
     });
   });
 

__tests__/frameworks/filesystem/getFileContentAndPath.test.ts

@@ -10,7 +10,8 @@ import {
   expectedEnum,
   expectedStandard,
   expectedTs,
-  expectedCss
+  expectedCss,
+  expectedScss
 } from '../../../testdata/getFileContentAndPathOperation';
 
 import {
@@ -95,6 +96,16 @@ describe('Success cases', () => {
         filePath: 'tokens/colors.css'
       });
     });
+
+    test('It should return valid data for SCSS variables', () => {
+      expect(
+        // @ts-ignore
+        getFileContentAndPath({ ...getFileContentAndPathOperationToken, format: 'scss' })
+      ).toMatchObject({
+        fileContent: expectedScss,
+        filePath: 'tokens/_colors.scss'
+      });
+    });
   });
 
   describe('Components', () => {

bin/contracts/Config.ts

@@ -144,7 +144,7 @@ export type OutputFormatDescription = 'md' | 'txt';
 export type OutputFormatElements = 'tsx' | 'jsx';
 export type OutputFormatGraphics = 'svg' | 'png';
 export type OutputFormatStorybook = 'ts' | 'js' | 'mdx';
-export type OutputFormatTokens = 'ts' | 'mjs' | 'js' | 'json' | 'css';
+export type OutputFormatTokens = 'ts' | 'mjs' | 'js' | 'json' | 'css' | 'scss';
 export type OutputDataTypeToken = null | 'enum';
 
 export type TemplatesConfig = {

bin/frameworks/errors/errors.ts

@@ -381,7 +381,7 @@ export const ErrorValidateConfigOutputFormatStorybook = ErrorMessage(
   'Received unrecognized "outputFormatStorybook" arguments, it must be "js" (default), "ts" or "mdx".'
 );
 export const ErrorValidateConfigOutputFormatTokens = ErrorMessage(
-  'Received unrecognized "outputFormatTokens" arguments, it must be "ts" (default), "mjs", "js", "json", or "css".'
+  'Received unrecognized "outputFormatTokens" arguments, it must be "ts" (default), "mjs", "js", "json", "css", or "scss".'
 );
 export const ErrorValidateConfigOutputScaleGraphics = ErrorMessage(
   'Argument "outputScaleGraphics" is invalid!'

bin/frameworks/filesystem/getFileContentAndPath.ts

@@ -51,7 +51,7 @@ export function getFileContentAndPath(
     templates
   } = getFileContentAndPathOperation;
 
-  let filePath = `${path}/${name}`;
+  let filePath = `${path}/${format === 'scss' ? '_' : ''}${name}`;
 
   const fileOperations = {
     raw: () => {
@@ -119,7 +119,8 @@ const getTokenString = (
   const constAssertion = format === 'ts' ? ' as const;' : '';
 
   if (format === 'json') return getTokenStringJSON(file);
-  if (format === 'css') return getTokenStringCSS(file, name);
+  if (format === 'css') return getTokenStringCSS(file);
+  if (format === 'scss') return getTokenStringSCSS(file);
   if (dataType === 'enum') return getTokenStringEnum(file, name, exportString);
   return getTokenStringJS(file, name, exportString, constAssertion);
 };
@@ -148,6 +149,21 @@ function getTokenStringCSS(file: string | ProcessedToken, name: string) {
   return css;
 }
 
+/**
+ * @description Return SCSS variables token string
+ */
+function getTokenStringSCSS(file: string | ProcessedToken) {
+  const contents: any = file;
+  let scss = `// ${MsgGeneratedFileWarning}\n\n`;
+
+  for (const key in contents) {
+    const value = contents[key];
+    scss += `$${key}: ${value};\n`;
+  }
+
+  return scss;
+}
+
 /**
  * @description Return enum token string
  */

bin/frameworks/system/validatorLists.ts

@@ -10,7 +10,7 @@ export const validOutputFormatDescList = ['md', 'txt'];
 export const validOutputFormatElementsList = ['tsx', 'jsx', 'mjs', 'js'];
 export const validOutputFormatGraphicsList = ['svg', 'png'];
 export const validOutputFormatStorybookList = ['ts', 'js', 'mdx'];
-export const validOutputFormatTokensList = ['ts', 'mjs', 'js', 'json', 'css'];
+export const validOutputFormatTokensList = ['ts', 'mjs', 'js', 'json', 'css', 'scss'];
 export const validRadiusUnitList = ['rem', 'em', 'px'];
 export const validShadowUnitList = ['rem', 'em', 'px'];
 export const validDurationUnitList = ['s', 'ms'];

testdata/getFileContentAndPathOperation.ts

@@ -302,3 +302,24 @@ export const expectedCss = `:root {
   --colors-black: rgba(51, 51, 51, 1);
 }
 `;
+
+export const expectedScss = `// THIS FILE IS AUTO-GENERATED BY FIGMAGIC. DO NOT MAKE EDITS IN THIS FILE! CHANGES WILL GET OVER-WRITTEN BY ANY FURTHER PROCESSING.
+
+$green3: rgba(111, 207, 151, 1);
+$green2: rgba(39, 174, 96, 1);
+$green1: rgba(33, 150, 83, 1);
+$blue3: rgba(86, 204, 242, 1);
+$blue2: rgba(45, 156, 219, 1);
+$blue1: rgba(47, 128, 237, 1);
+$yellow: rgba(242, 201, 76, 1);
+$orange: rgba(242, 153, 74, 1);
+$red: rgba(235, 87, 87, 1);
+$neon: rgba(228, 255, 193, 1);
+$gray5: rgba(242, 242, 242, 1);
+$gray4: rgba(224, 224, 224, 1);
+$gray3: rgba(189, 189, 189, 1);
+$gray2: rgba(130, 130, 130, 1);
+$gray1: rgba(79, 79, 79, 1);
+$white: rgba(255, 255, 255, 1);
+$black: rgba(51, 51, 51, 1);
+`;

translation/README.pt-br.md

@@ -528,7 +528,7 @@ _Note that hex colors will not use any alpha/transparency!_
 
 #### Switch token file format
 
-`figmagic [--outputFormatTokens | -ft] [ts|mjs|js|json|css]`
+`figmagic [--outputFormatTokens | -ft] [ts|mjs|js|json|css|scss]`
 
 **Default**: `ts`.