diff --git a/README.md b/README.md index 16564fa6..715e11d0 100644 --- a/README.md +++ b/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!_ --- diff --git a/__tests__/entities/Config/logic/parseCliArgs.test.ts b/__tests__/entities/Config/logic/parseCliArgs.test.ts index ea2e925b..eb2abf77 100644 --- a/__tests__/entities/Config/logic/parseCliArgs.test.ts +++ b/__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' + }) + ); + }); }); }); diff --git a/__tests__/frameworks/filesystem/getFileContentAndPath.test.ts b/__tests__/frameworks/filesystem/getFileContentAndPath.test.ts index 1d7f336e..b62402c4 100644 --- a/__tests__/frameworks/filesystem/getFileContentAndPath.test.ts +++ b/__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', () => { diff --git a/bin/contracts/Config.ts b/bin/contracts/Config.ts index b9df9bcf..fe33283e 100644 --- a/bin/contracts/Config.ts +++ b/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 = { diff --git a/bin/frameworks/errors/errors.ts b/bin/frameworks/errors/errors.ts index 70ac09b5..99ecad65 100644 --- a/bin/frameworks/errors/errors.ts +++ b/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!' diff --git a/bin/frameworks/filesystem/getFileContentAndPath.ts b/bin/frameworks/filesystem/getFileContentAndPath.ts index 28eb1128..b3ec519a 100644 --- a/bin/frameworks/filesystem/getFileContentAndPath.ts +++ b/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 */ diff --git a/bin/frameworks/system/validatorLists.ts b/bin/frameworks/system/validatorLists.ts index 3d3098df..42aec8f5 100644 --- a/bin/frameworks/system/validatorLists.ts +++ b/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']; diff --git a/testdata/getFileContentAndPathOperation.ts b/testdata/getFileContentAndPathOperation.ts index 91bbb3f7..19aca546 100644 --- a/testdata/getFileContentAndPathOperation.ts +++ b/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); +`; diff --git a/translation/README.pt-br.md b/translation/README.pt-br.md index be0f1624..23a5ed54 100644 --- a/translation/README.pt-br.md +++ b/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`.