From bea5162f378d5adec463deea7c84fae1b3b8f4bb Mon Sep 17 00:00:00 2001 From: Dario Soller Date: Tue, 29 Oct 2024 21:58:09 +0100 Subject: [PATCH] refactor: destructure and dedupe repeated enum members Update import enum paths for examples --- README.md | 3 + __integration__/async.test.js | 14 +- __integration__/compose.test.js | 6 +- __integration__/css.test.js | 12 +- __integration__/customFormats.test.js | 6 +- __integration__/flutter.test.js | 10 +- __integration__/iOSObjectiveC.test.js | 17 +- __integration__/logging/config.test.js | 6 +- __integration__/logging/file.test.js | 36 +-- __integration__/nameCollisions.test.js | 8 +- __integration__/objectValues.test.js | 27 +- __integration__/outputReferences.test.js | 26 +- __integration__/showFileHeader.test.js | 15 +- __integration__/swift.test.js | 6 +- __integration__/w3c-forward-compat.test.js | 6 +- __perf_tests__/basic.test.js | 11 +- __tests__/StyleDictionary.test.js | 22 +- __tests__/__configs/test.js | 47 ++-- __tests__/buildAllPlatforms.test.js | 11 +- __tests__/buildPlatform.test.js | 17 +- .../createPropertyFormatter.test.js | 42 ++-- __tests__/exportPlatform.test.js | 69 +++--- __tests__/formats/androidResources.test.js | 6 +- __tests__/formats/es6Constants.test.js | 8 +- __tests__/formats/javascriptModule.test.js | 8 +- .../formats/javascriptModuleFlat.test.js | 8 +- __tests__/formats/javascriptObject.test.js | 8 +- __tests__/formats/javascriptUmd.test.js | 8 +- __tests__/formats/json.test.js | 8 +- __tests__/formats/jsonFlat.test.js | 7 +- __tests__/formats/jsonNested.test.js | 9 +- __tests__/formats/lessIcons.test.js | 8 +- __tests__/formats/lessVariables.test.js | 8 +- __tests__/formats/scssIcons.test.js | 8 +- __tests__/formats/scssVariables.test.js | 8 +- __tests__/formats/stylusVariable.test.js | 8 +- __tests__/formats/swiftFile.test.js | 8 +- .../formats/typeScriptEs6Declarations.test.js | 8 +- .../typeScriptModuleDeclarations.test.js | 8 +- __tests__/register/overwrite.test.js | 25 +- __tests__/register/transform.test.js | 23 +- __tests__/register/transformGroup.test.js | 11 +- __tests__/transform/config.test.js | 10 +- __tests__/transform/object.test.js | 10 +- __tests__/transform/transformToken.test.js | 10 +- bin/style-dictionary.js | 4 +- .../docs/examples/splitting-output-files.md | 2 + .../docs/getting-started/installation.mdx | 1 + .../docs/reference/Hooks/Formats/helpers.md | 1 + .../docs/reference/Hooks/Formats/index.md | 2 + .../reference/Hooks/Formats/predefined.md | 10 +- .../docs/reference/Hooks/file-headers.md | 2 + .../content/docs/reference/Hooks/filters.md | 2 + .../docs/reference/Utils/format-helpers.md | 5 + .../docs/reference/Utils/references.md | 6 + docs/src/content/docs/reference/api.md | 15 +- docs/src/content/docs/reference/logging.md | 6 + docs/src/content/docs/version-4/migration.md | 8 +- examples/advanced/custom-parser/sd.config.js | 2 +- examples/advanced/custom-transforms/build.js | 30 +-- .../advanced/font-face-rules/sd.config.js | 2 +- .../advanced/matching-build-files/config.js | 44 ++-- .../multi-brand-multi-platform/build.js | 16 +- .../config.js | 31 ++- .../transitive-transforms/sd.config.js | 22 +- .../variables-in-outputs/sd.config.js | 13 +- lib/Register.js | 8 +- lib/StyleDictionary.js | 71 +++--- lib/cleanFile.js | 6 +- lib/common/actions.js | 11 +- .../formatHelpers/createPropertyFormatter.js | 42 ++-- .../formatHelpers/formattedVariables.js | 2 + lib/common/formats.js | 80 +++--- lib/common/transformGroups.js | 232 ++++++++++-------- lib/common/transforms.js | 111 ++++----- lib/enums/fileFormats.js | 3 + lib/transform/token.js | 12 +- types/File.ts | 4 +- 78 files changed, 808 insertions(+), 638 deletions(-) diff --git a/README.md b/README.md index ebc6600f7..08591eb73 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,8 @@ StyleDictionary.buildAllPlatforms(); The `.extend()` method is an overloaded method that can also take an object with the configuration in the same format as a config.json file. ```javascript +import { fileFormats, transformGroups } from 'style-dictionary/enums'; + const StyleDictionary = require('style-dictionary').extend({ source: ['tokens/**/*.json'], platforms: { @@ -294,6 +296,7 @@ The style dictionary build system is made to be extended. We don't know exactly ```javascript const StyleDictionary = require('style-dictionary').extend('config.json'); +import { transforms, transformTypes } from 'style-dictionary/enums'; StyleDictionary.registerTransform({ name: transforms.timeSeconds, diff --git a/__integration__/async.test.js b/__integration__/async.test.js index 166075ffe..cd5401048 100644 --- a/__integration__/async.test.js +++ b/__integration__/async.test.js @@ -22,7 +22,7 @@ import { transforms, propertyFormatNames, transformTypes } from '../lib/enums/in const sleep = async (time) => { await new Promise((resolve) => setTimeout(resolve, time)); }; - +const { attributeCti, nameKebab, timeSeconds, htmlIcon, sizeRem, colorCss } = transforms; const textFile = resolve(`${buildPath}text.txt`); // Tests all hooks async, into a single config @@ -101,12 +101,12 @@ describe('integration', async function () { platforms: { css: { transforms: [ - transforms.attributeCti, - transforms.nameKebab, - transforms.timeSeconds, - transforms.htmlIcon, - transforms.sizeRem, - transforms.colorCss, + attributeCti, + nameKebab, + timeSeconds, + htmlIcon, + sizeRem, + colorCss, 'foo-value-transform', ], buildPath, diff --git a/__integration__/compose.test.js b/__integration__/compose.test.js index 7796da54b..7031905cd 100644 --- a/__integration__/compose.test.js +++ b/__integration__/compose.test.js @@ -18,6 +18,8 @@ import { buildPath } from './_constants.js'; import { clearOutput } from '../__tests__/__helpers.js'; import { fileFormats } from '../lib/enums/index.js'; +const { composeObject } = fileFormats; + describe('integration', async () => { before(async () => { const sd = new StyleDictionary({ @@ -29,7 +31,7 @@ describe('integration', async () => { files: [ { destination: 'StyleDictionary.kt', - format: fileFormats.composeObject, + format: composeObject, options: { className: 'StyleDictionary', packageName: 'com.example.tokens', @@ -37,7 +39,7 @@ describe('integration', async () => { }, { destination: 'StyleDictionaryWithReferences.kt', - format: fileFormats.composeObject, + format: composeObject, options: { outputReferences: true, className: 'StyleDictionary', diff --git a/__integration__/css.test.js b/__integration__/css.test.js index e592c959d..bee65fa5d 100644 --- a/__integration__/css.test.js +++ b/__integration__/css.test.js @@ -18,6 +18,8 @@ import { buildPath } from './_constants.js'; import { clearOutput } from '../__tests__/__helpers.js'; import { fileFormats, transformGroups } from '../lib/enums/index.js'; +const { cssVariables } = fileFormats; + describe('integration', async () => { before(async () => { const sd = new StyleDictionary({ @@ -39,14 +41,14 @@ describe('integration', async () => { files: [ { destination: 'variables.css', - format: fileFormats.cssVariables, + format: cssVariables, options: { formatting: { indentation: ' ' }, }, }, { destination: 'variablesWithReferences.css', - format: fileFormats.cssVariables, + format: cssVariables, options: { outputReferences: true, outputReferenceFallbacks: false, @@ -54,7 +56,7 @@ describe('integration', async () => { }, { destination: 'variablesWithReferenceFallbacks.css', - format: fileFormats.cssVariables, + format: cssVariables, options: { outputReferences: true, outputReferenceFallbacks: true, @@ -62,7 +64,7 @@ describe('integration', async () => { }, { destination: 'variablesWithSelector.css', - format: fileFormats.cssVariables, + format: cssVariables, options: { selector: '.test', }, @@ -79,7 +81,7 @@ describe('integration', async () => { }); describe('css', async () => { - describe(fileFormats.cssVariables, async () => { + describe(cssVariables, async () => { it(`should match snapshot`, async () => { const output = fs.readFileSync(resolve(`${buildPath}variables.css`), { encoding: 'UTF-8', diff --git a/__integration__/customFormats.test.js b/__integration__/customFormats.test.js index 7b26eadd1..a86a2abc4 100644 --- a/__integration__/customFormats.test.js +++ b/__integration__/customFormats.test.js @@ -18,6 +18,8 @@ import { buildPath } from './_constants.js'; import { clearOutput } from '../__tests__/__helpers.js'; import { transformGroups } from '../lib/enums/index.js'; +const { js } = transformGroups; + describe('integration', async () => { before(async () => { const sd = new StyleDictionary({ @@ -35,7 +37,7 @@ describe('integration', async () => { }, platforms: { inlineCustomFormats: { - transformGroup: transformGroups.js, + transformGroup: js, buildPath, options: { otherOption: `platform option`, @@ -60,7 +62,7 @@ describe('integration', async () => { ], }, customFormats: { - transformGroup: transformGroups.js, + transformGroup: js, buildPath, options: { otherOption: `platform option`, diff --git a/__integration__/flutter.test.js b/__integration__/flutter.test.js index fe66b4a51..2b00bdfe2 100644 --- a/__integration__/flutter.test.js +++ b/__integration__/flutter.test.js @@ -18,6 +18,8 @@ import { buildPath } from './_constants.js'; import { clearOutput } from '../__tests__/__helpers.js'; import { fileFormats } from '../lib/enums/index.js'; +const { flutterClassDart } = fileFormats; + describe('integration', async () => { before(async () => { const sd = new StyleDictionary({ @@ -29,14 +31,14 @@ describe('integration', async () => { files: [ { destination: 'style_dictionary.dart', - format: fileFormats.flutterClassDart, + format: flutterClassDart, options: { className: 'StyleDictionary', }, }, { destination: 'style_dictionary_with_references.dart', - format: fileFormats.flutterClassDart, + format: flutterClassDart, options: { outputReferences: true, className: 'StyleDictionary', @@ -50,7 +52,7 @@ describe('integration', async () => { files: [ { destination: 'style_dictionary_color.dart', - format: fileFormats.flutterClassDart, + format: flutterClassDart, options: { className: 'StyleDictionaryColor', type: 'color', @@ -61,7 +63,7 @@ describe('integration', async () => { }, { destination: 'style_dictionary_sizes.dart', - format: fileFormats.flutterClassDart, + format: flutterClassDart, options: { className: 'StyleDictionarySize', type: 'float', diff --git a/__integration__/iOSObjectiveC.test.js b/__integration__/iOSObjectiveC.test.js index 1cd74cb04..47310c209 100644 --- a/__integration__/iOSObjectiveC.test.js +++ b/__integration__/iOSObjectiveC.test.js @@ -18,6 +18,9 @@ import { buildPath } from './_constants.js'; import { clearOutput } from '../__tests__/__helpers.js'; import { fileFormats } from '../lib/enums/index.js'; +const { iosColorsH, iosColorsM, iosMacros, iosSingletonH, iosSingletonM, iosStaticH, iosStaticM } = + fileFormats; + describe('integration', async () => { before(async () => { const sd = new StyleDictionary({ @@ -29,21 +32,21 @@ describe('integration', async () => { files: [ { destination: 'singleton.m', - format: fileFormats.iosSingletonM, + format: iosSingletonM, options: { className: 'StyleDictionary', }, }, { destination: 'singleton.h', - format: fileFormats.iosSingletonH, + format: iosSingletonH, options: { className: 'StyleDictionary', }, }, { destination: 'color.h', - format: fileFormats.iosColorsH, + format: iosColorsH, options: { className: 'StyleDictionaryColor', type: 'StyleDictionaryColorName', @@ -52,7 +55,7 @@ describe('integration', async () => { }, { destination: 'color.m', - format: fileFormats.iosColorsM, + format: iosColorsM, options: { className: 'StyleDictionaryColor', type: 'StyleDictionaryColorName', @@ -61,11 +64,11 @@ describe('integration', async () => { }, { destination: 'macros.h', - format: fileFormats.iosMacros, + format: iosMacros, }, { destination: 'static.h', - format: fileFormats.iosStaticH, + format: iosStaticH, options: { className: 'StyleDictionaryStatic', type: 'CGFloat', @@ -74,7 +77,7 @@ describe('integration', async () => { }, { destination: 'static.m', - format: fileFormats.iosStaticM, + format: iosStaticM, options: { className: 'StyleDictionaryStatic', type: 'CGFloat', diff --git a/__integration__/logging/config.test.js b/__integration__/logging/config.test.js index a691cb855..2556bb3f7 100644 --- a/__integration__/logging/config.test.js +++ b/__integration__/logging/config.test.js @@ -17,6 +17,8 @@ import { buildPath, cleanConsoleOutput } from '../_constants.js'; import { clearOutput } from '../../__tests__/__helpers.js'; import { logWarningLevels, logVerbosityLevels } from '../../lib/enums/index.js'; +const { error: errorLog, disabled } = logWarningLevels; + /** * These integration tests will verify the behavior and logging at the *config* * level. These messages happen when `.extend()` is called to verify @@ -71,7 +73,7 @@ describe(`integration >`, () => { it(`should not log anything if the log warnings is set to disabled`, async () => { const sd = new StyleDictionary({ log: { - warnings: logWarningLevels.disabled, + warnings: disabled, }, source: [ // including a specific file twice will throw value collision warnings @@ -87,7 +89,7 @@ describe(`integration >`, () => { it(`should not show warnings if given higher log level`, async () => { const sd = new StyleDictionary( { - log: { warnings: logWarningLevels.error }, + log: { warnings: errorLog }, source: [ // including a specific file twice will throw value collision warnings `__integration__/tokens/size/padding.json`, diff --git a/__integration__/logging/file.test.js b/__integration__/logging/file.test.js index 5e1a06a5a..0bc783e5a 100644 --- a/__integration__/logging/file.test.js +++ b/__integration__/logging/file.test.js @@ -16,6 +16,10 @@ import StyleDictionary from 'style-dictionary'; import { buildPath, cleanConsoleOutput } from '../_constants.js'; import { clearOutput } from '../../__tests__/__helpers.js'; import { logWarningLevels, logVerbosityLevels } from '../../lib/enums/index.js'; + +const { silent, verbose } = logVerbosityLevels; +const { error: errorLog, disabled } = logWarningLevels; + /** * The last and final level of logging: file. * These logs happen when a file is being built and will notify the user @@ -61,7 +65,7 @@ describe(`integration`, () => { it(`should not warn user about empty tokens with silent log verbosity`, async () => { const sd = new StyleDictionary({ - log: { verbosity: logVerbosityLevels.silent }, + log: { verbosity: silent }, source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { @@ -83,7 +87,7 @@ describe(`integration`, () => { it(`should not warn user about empty tokens with silent log verbosity`, async () => { const sd = new StyleDictionary({ - log: { warnings: logWarningLevels.disabled }, + log: { warnings: disabled }, source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { @@ -106,7 +110,7 @@ describe(`integration`, () => { it(`should not warn user about empty tokens with log level set to error`, async () => { const sd = new StyleDictionary({ - log: { warnings: logWarningLevels.error }, + log: { warnings: errorLog }, source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { @@ -132,7 +136,7 @@ describe(`integration`, () => { source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { - log: { warnings: logWarningLevels.error }, + log: { warnings: errorLog }, transformGroup: `css`, files: [ { @@ -178,7 +182,7 @@ describe(`integration`, () => { it(`should not warn user of name collisions with log verbosity silent`, async () => { const sd = new StyleDictionary({ - log: { verbosity: logVerbosityLevels.silent }, + log: { verbosity: silent }, source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { @@ -201,7 +205,7 @@ describe(`integration`, () => { it(`should not warn user of name collisions with log verbosity silent`, async () => { const sd = new StyleDictionary({ - log: { warnings: logWarningLevels.disabled }, + log: { warnings: disabled }, source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { @@ -225,7 +229,7 @@ describe(`integration`, () => { it(`should throw a brief error of name collisions with log level set to error`, async () => { const sd = new StyleDictionary({ - log: { warnings: logWarningLevels.error }, + log: { warnings: errorLog }, source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { @@ -256,7 +260,7 @@ describe(`integration`, () => { source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { - log: { warnings: logWarningLevels.error }, + log: { warnings: errorLog }, // no name transform means there will be name collisions transforms: [`attribute/cti`], buildPath, @@ -282,7 +286,7 @@ describe(`integration`, () => { it(`should warn user of name collisions with a detailed message through "verbose" verbosity`, async () => { const sd = new StyleDictionary({ - log: { verbosity: logVerbosityLevels.verbose }, + log: { verbosity: verbose }, source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { @@ -307,7 +311,7 @@ describe(`integration`, () => { it(`should throw detailed error of name collisions through "verbose" verbosity and log level set to error`, async () => { const sd = new StyleDictionary({ - log: { warnings: logWarningLevels.error, verbosity: logVerbosityLevels.verbose }, + log: { warnings: errorLog, verbosity: verbose }, source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { @@ -365,7 +369,7 @@ describe(`integration`, () => { it(`should not warn user of filtered references with log verbosity silent`, async () => { const sd = new StyleDictionary({ - log: { verbosity: logVerbosityLevels.silent }, + log: { verbosity: silent }, source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { @@ -392,7 +396,7 @@ describe(`integration`, () => { it(`should not warn user of filtered references with log verbosity silent`, async () => { const sd = new StyleDictionary({ - log: { warnings: logWarningLevels.disabled }, + log: { warnings: disabled }, source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { @@ -420,7 +424,7 @@ describe(`integration`, () => { it(`should throw a brief error of filtered references with log level set to error`, async () => { const sd = new StyleDictionary({ - log: { warnings: logWarningLevels.error }, + log: { warnings: errorLog }, source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { @@ -456,7 +460,7 @@ describe(`integration`, () => { source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { - log: { warnings: logWarningLevels.error }, + log: { warnings: errorLog }, transformGroup: `css`, buildPath, files: [ @@ -486,7 +490,7 @@ describe(`integration`, () => { it(`should warn user of filtered references with a detailed message through "verbose" verbosity`, async () => { const sd = new StyleDictionary({ - log: { verbosity: logVerbosityLevels.verbose }, + log: { verbosity: verbose }, source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { @@ -515,7 +519,7 @@ describe(`integration`, () => { it(`should throw detailed error of filtered references through "verbose" verbosity and log level set to error`, async () => { const sd = new StyleDictionary({ - log: { warnings: logWarningLevels.error, verbosity: logVerbosityLevels.verbose }, + log: { warnings: errorLog, verbosity: verbose }, source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { diff --git a/__integration__/nameCollisions.test.js b/__integration__/nameCollisions.test.js index 739103875..87f4e39c9 100644 --- a/__integration__/nameCollisions.test.js +++ b/__integration__/nameCollisions.test.js @@ -17,6 +17,8 @@ import { buildPath, cleanConsoleOutput } from './_constants.js'; import { clearOutput } from '../__tests__/__helpers.js'; import { fileFormats, logVerbosityLevels } from '../lib/enums/index.js'; +const { cssVariables, jsonNested } = fileFormats; + const tokens = { color: { red: { value: '#f00' }, @@ -49,7 +51,7 @@ describe('integration', async () => { files: [ { destination: 'variables.css', - format: fileFormats.cssVariables, + format: cssVariables, }, ], }, @@ -71,7 +73,7 @@ describe('integration', async () => { files: [ { destination: 'variables.css', - format: fileFormats.cssVariables, + format: cssVariables, }, ], }, @@ -92,7 +94,7 @@ describe('integration', async () => { files: [ { destination: 'tokens.json', - format: 'json/nested', + format: jsonNested, }, ], }, diff --git a/__integration__/objectValues.test.js b/__integration__/objectValues.test.js index 061191262..2dabd76c3 100644 --- a/__integration__/objectValues.test.js +++ b/__integration__/objectValues.test.js @@ -19,6 +19,9 @@ import { buildPath } from './_constants.js'; import { clearOutput } from '../__tests__/__helpers.js'; import { fileFormats, transformTypes } from '../lib/enums/index.js'; +const { cssVariables, scssVariables } = fileFormats; +const { value: transformTypeValue } = transformTypes; + describe('integration', async () => { before(async () => { const options = { @@ -82,7 +85,7 @@ describe('integration', async () => { hooks: { transforms: { hsl: { - type: transformTypes.value, + type: transformTypeValue, transitive: true, filter: (token) => token.original.value.h, transform: (token) => { @@ -90,7 +93,7 @@ describe('integration', async () => { }, }, hslToHex: { - type: transformTypes.value, + type: transformTypeValue, transitive: true, filter: (token) => token.original.value.h, transform: (token) => { @@ -130,12 +133,12 @@ describe('integration', async () => { files: [ { destination: 'hex.css', - format: fileFormats.cssVariables, + format: cssVariables, filter: (token) => token.type === `color`, }, { destination: 'hexWithReferences.css', - format: fileFormats.cssVariables, + format: cssVariables, filter: (token) => token.type === `color`, options, }, @@ -150,12 +153,12 @@ describe('integration', async () => { files: [ { destination: 'border.css', - format: fileFormats.cssVariables, + format: cssVariables, filter: (token) => token.type === `border`, }, { destination: 'borderWithReferences.css', - format: fileFormats.cssVariables, + format: cssVariables, filter: (token) => token.type === `border`, options, }, @@ -167,12 +170,12 @@ describe('integration', async () => { files: [ { destination: 'shadow.css', - format: fileFormats.cssVariables, + format: cssVariables, filter: (token) => token.type === `shadow`, }, { destination: 'shadowWithReferences.css', - format: fileFormats.cssVariables, + format: cssVariables, filter: (token) => token.type === `shadow`, options, }, @@ -185,12 +188,12 @@ describe('integration', async () => { files: [ { destination: 'border.scss', - format: fileFormats.scssVariables, + format: scssVariables, filter: (token) => token.type === `border`, }, { destination: 'borderWithReferences.scss', - format: fileFormats.scssVariables, + format: scssVariables, filter: (token) => token.type === `border`, options, }, @@ -206,7 +209,7 @@ describe('integration', async () => { }); describe('object values', async () => { - describe(fileFormats.cssVariables, async () => { + describe(cssVariables, async () => { describe(`hsl syntax`, async () => { it(`should match snapshot`, async () => { const output = fs.readFileSync(resolve(`${buildPath}hsl.css`), { @@ -278,7 +281,7 @@ describe('integration', async () => { }); }); - describe(fileFormats.scssVariables, async () => { + describe(scssVariables, async () => { it(`should match snapshot`, async () => { const output = fs.readFileSync(resolve(`${buildPath}border.scss`), { encoding: 'UTF-8', diff --git a/__integration__/outputReferences.test.js b/__integration__/outputReferences.test.js index 6f183ad09..885692db4 100644 --- a/__integration__/outputReferences.test.js +++ b/__integration__/outputReferences.test.js @@ -26,6 +26,10 @@ import { transformTypes, } from '../lib/enums/index.js'; +const { cssVariables } = fileFormats; +const { css } = transformGroups; +const { verbose } = logVerbosityLevels; + describe('integration', async () => { let stub; beforeEach(() => { @@ -76,7 +80,7 @@ describe('integration', async () => { files: [ { destination: 'transformedFilteredVariables.css', - format: fileFormats.cssVariables, + format: cssVariables, options: { outputReferences: outputReferencesTransformed, }, @@ -99,12 +103,12 @@ describe('integration', async () => { source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { - transformGroup: transformGroups.css, + transformGroup: css, buildPath, files: [ { destination: 'filteredVariables.css', - format: fileFormats.cssVariables, + format: cssVariables, // filter tokens and use outputReferences // Style Dictionary should build this file ok // but warn the user @@ -125,16 +129,16 @@ describe('integration', async () => { const sd = new StyleDictionary({ // we are only testing showFileHeader options so we don't need // the full source. - log: { verbosity: logVerbosityLevels.verbose }, + log: { verbosity: verbose }, source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { - transformGroup: transformGroups.css, + transformGroup: css, buildPath, files: [ { destination: 'filteredVariables.css', - format: fileFormats.cssVariables, + format: cssVariables, // filter tokens and use outputReferences // Style Dictionary should build this file ok // but warn the user @@ -155,18 +159,18 @@ describe('integration', async () => { it('should warn the user if filters out references with a detailed message when using verbose logging', async () => { const sd = new StyleDictionary({ - log: { verbosity: logVerbosityLevels.verbose }, + log: { verbosity: verbose }, // we are only testing showFileHeader options so we don't need // the full source. source: [`__integration__/tokens/**/[!_]*.json?(c)`], platforms: { css: { - transformGroup: transformGroups.css, + transformGroup: css, buildPath, files: [ { destination: 'filteredVariables.css', - format: fileFormats.cssVariables, + format: cssVariables, // filter tokens and use outputReferences // Style Dictionary should build this file ok // but warn the user @@ -197,12 +201,12 @@ describe('integration', async () => { }, platforms: { css: { - transformGroup: transformGroups.css, + transformGroup: css, buildPath, files: [ { destination: 'dtcgOutputRef.css', - format: fileFormats.cssVariables, + format: cssVariables, options: { outputReferences: true, usesDtcg: true, diff --git a/__integration__/showFileHeader.test.js b/__integration__/showFileHeader.test.js index 1935fdf8c..56c089c0e 100644 --- a/__integration__/showFileHeader.test.js +++ b/__integration__/showFileHeader.test.js @@ -18,6 +18,9 @@ import { buildPath } from './_constants.js'; import { clearOutput } from '../__tests__/__helpers.js'; import { fileFormats, transformGroups } from '../lib/enums/index.js'; +const { cssVariables } = fileFormats; +const { css } = transformGroups; + describe('integration', async () => { before(async () => { const sd = new StyleDictionary({ @@ -26,16 +29,16 @@ describe('integration', async () => { source: [`__integration__/tokens/size/padding.json`], platforms: { css: { - transformGroup: transformGroups.css, + transformGroup: css, buildPath, files: [ { destination: 'platform-none-file-none.css', - format: fileFormats.cssVariables, + format: cssVariables, }, { destination: 'platform-none-file-false.css', - format: fileFormats.cssVariables, + format: cssVariables, options: { showFileHeader: false, }, @@ -43,7 +46,7 @@ describe('integration', async () => { ], }, fileHeader: { - transformGroup: transformGroups.css, + transformGroup: css, buildPath, options: { showFileHeader: false, @@ -51,11 +54,11 @@ describe('integration', async () => { files: [ { destination: 'platform-false-file-none.css', - format: fileFormats.cssVariables, + format: cssVariables, }, { destination: 'platform-false-file-true.css', - format: fileFormats.cssVariables, + format: cssVariables, options: { showFileHeader: true, }, diff --git a/__integration__/swift.test.js b/__integration__/swift.test.js index 1ae37c45d..8b7f4d7ed 100644 --- a/__integration__/swift.test.js +++ b/__integration__/swift.test.js @@ -18,6 +18,8 @@ import { buildPath } from './_constants.js'; import { clearOutput } from '../__tests__/__helpers.js'; import { fileFormats } from '../lib/enums/index.js'; +const { iosSwiftClassSwift } = fileFormats; + describe('integration', async () => { before(async () => { const sd = new StyleDictionary({ @@ -29,14 +31,14 @@ describe('integration', async () => { files: [ { destination: 'style_dictionary.swift', - format: fileFormats.iosSwiftClassSwift, + format: iosSwiftClassSwift, options: { className: 'StyleDictionary', }, }, { destination: 'style_dictionary_with_references.swift', - format: fileFormats.iosSwiftClassSwift, + format: iosSwiftClassSwift, options: { className: 'StyleDictionary', outputReferences: true, diff --git a/__integration__/w3c-forward-compat.test.js b/__integration__/w3c-forward-compat.test.js index 8dbbac2c4..c4c4e201f 100644 --- a/__integration__/w3c-forward-compat.test.js +++ b/__integration__/w3c-forward-compat.test.js @@ -19,6 +19,8 @@ import { buildPath } from './_constants.js'; import { clearOutput } from '../__tests__/__helpers.js'; import { fileFormats, transforms, transformTypes } from '../lib/enums/index.js'; +const { value } = transformTypes; + describe('integration', async () => { before(async () => { const sd = new StyleDictionary({ @@ -47,14 +49,14 @@ describe('integration', async () => { hooks: { transforms: { 'custom/css/color': { - type: transformTypes.value, + type: value, filter: (token) => token.$type === 'color', transform: (token) => { return Color(sd.usesDtcg ? token.$value : token.value).toRgbString(); }, }, 'custom/add/px': { - type: transformTypes.value, + type: value, filter: (token) => token.$type === 'dimension', transform: (token) => { return `${sd.usesDtcg ? token.$value : token.value}px`; diff --git a/__perf_tests__/basic.test.js b/__perf_tests__/basic.test.js index bf66fcfe0..03cf6fb87 100644 --- a/__perf_tests__/basic.test.js +++ b/__perf_tests__/basic.test.js @@ -16,6 +16,9 @@ import { buildPath } from '../__integration__/_constants.js'; import { clearOutput } from '../__tests__/__helpers.js'; import { fileFormats, transformGroups } from '../lib/enums/index.js'; +const { cssVariables } = fileFormats; +const { css } = transformGroups; + /** * Utility to programmatically generate large sets of tokens * @@ -93,12 +96,12 @@ describe('cliBuildWithJsConfig', () => { }, platforms: { css: { - transformGroup: transformGroups.css, + transformGroup: css, buildPath, files: [ { destination: 'variables.css', - format: fileFormats.cssVariables, + format: cssVariables, }, ], }, @@ -128,12 +131,12 @@ describe('cliBuildWithJsConfig', () => { }, platforms: { css: { - transformGroup: transformGroups.css, + transformGroup: css, buildPath, files: [ { destination: 'variables.css', - format: fileFormats.cssVariables, + format: cssVariables, }, ], }, diff --git a/__tests__/StyleDictionary.test.js b/__tests__/StyleDictionary.test.js index ce2c20e55..e4e388841 100644 --- a/__tests__/StyleDictionary.test.js +++ b/__tests__/StyleDictionary.test.js @@ -28,6 +28,10 @@ import { transformGroups, } from '../lib/enums/index.js'; +const { console: logToConsole } = logBrokenReferenceLevels; +const { silent, verbose } = logVerbosityLevels; +const { error: errorLog, warn } = logWarningLevels; + function traverseObj(obj, fn) { for (let key in obj) { fn.apply(this, [obj, key, obj[key]]); @@ -294,7 +298,7 @@ describe('StyleDictionary class', () => { const StyleDictionaryExtended = new StyleDictionary({ include: ['__tests__/__tokens/paddings.json'], source: ['__tests__/__tokens/paddings.json'], - log: logWarningLevels.error, + log: errorLog, }); const output = fileToJSON('__tests__/__tokens/paddings.json'); traverseObj(output, (obj) => { @@ -311,7 +315,7 @@ describe('StyleDictionary class', () => { const sd = new StyleDictionary( { source: ['__tests__/__tokens/paddings.json', '__tests__/__tokens/_paddings.json'], - log: { warnings: logWarningLevels.error, verbosity: logVerbosityLevels.verbose }, + log: { warnings: errorLog, verbosity: verbose }, }, { init: false }, ); @@ -328,7 +332,7 @@ describe('StyleDictionary class', () => { const sd = new StyleDictionary( { source: ['__tests__/__tokens/paddings.json', '__tests__/__tokens/_paddings.json'], - log: { warnings: logWarningLevels.error }, + log: { warnings: errorLog }, }, { init: false }, ); @@ -345,7 +349,7 @@ describe('StyleDictionary class', () => { const sd = new StyleDictionary( { source: ['__tests__/__tokens/paddings.json', '__tests__/__tokens/paddings.json'], - log: logWarningLevels.warn, + log: warn, }, { init: false }, ); @@ -405,7 +409,7 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details. const sd = new StyleDictionary({ log: { errors: { - brokenReferences: logBrokenReferenceLevels.console, + brokenReferences: logToConsole, }, }, tokens: { @@ -431,9 +435,9 @@ Refer to: https://styledictionary.com/reference/logging/ const stub = stubMethod(console, 'error'); const sd = new StyleDictionary({ log: { - verbosity: logVerbosityLevels.silent, + verbosity: silent, errors: { - brokenReferences: logBrokenReferenceLevels.console, + brokenReferences: logToConsole, }, }, tokens: { @@ -455,7 +459,7 @@ Refer to: https://styledictionary.com/reference/logging/ const sd = new StyleDictionary({ log: { errors: { - brokenReferences: logBrokenReferenceLevels.console, + brokenReferences: logToConsole, }, }, tokens: { @@ -1003,7 +1007,7 @@ Refer to: https://styledictionary.com/reference/logging/ const sd = new StyleDictionary(); const { logs } = await sd.formatFile( { destination, format }, - { log: { verbosity: logVerbosityLevels.verbose } }, + { log: { verbosity: verbose } }, dictionary, ); diff --git a/__tests__/__configs/test.js b/__tests__/__configs/test.js index 693a03924..e4728e3cf 100644 --- a/__tests__/__configs/test.js +++ b/__tests__/__configs/test.js @@ -1,54 +1,69 @@ import { fileFormats, actions, transformGroups } from '../../lib/enums/index.js'; +const { + scssIcons, + scssVariables, + javascriptModule, + lessIcons, + lessVariables, + androidColors, + androidFontDimens, + androidDimens, + iosPlist, + iosMacros, + javascriptEs6, +} = fileFormats; +const { web, scss, less } = transformGroups; + export default { source: ['__tests__/__tokens/**/*.json'], platforms: { web: { - transformGroup: transformGroups.web, + transformGroup: web, prefix: 'smop', buildPath: '__tests__/__output/web/', files: [ { destination: '_icons.css', - format: fileFormats.scssIcons, + format: scssIcons, }, { destination: '_variables.css', - format: fileFormats.scssVariables, + format: scssVariables, }, { destination: '_styles.js', - format: fileFormats.javascriptModule, + format: javascriptModule, }, ], }, scss: { - transformGroup: transformGroups.scss, + transformGroup: scss, prefix: 'smop', buildPath: '__tests__/__output/scss/', files: [ { destination: '_icons.scss', - format: fileFormats.scssIcons, + format: scssIcons, }, { destination: '_variables.scss', - format: fileFormats.scssVariables, + format: scssVariables, }, ], }, less: { - transformGroup: transformGroups.less, + transformGroup: less, prefix: 'smop', buildPath: '__tests__/__output/less/', files: [ { destination: '_icons.less', - format: fileFormats.lessIcons, + format: lessIcons, }, { destination: '_variables.less', - format: fileFormats.lessVariables, + format: lessVariables, }, ], }, @@ -58,15 +73,15 @@ export default { files: [ { destination: 'android/colors.xml', - format: fileFormats.androidColors, + format: androidColors, }, { destination: 'android/font_dimen.xml', - format: fileFormats.androidFontDimens, + format: androidFontDimens, }, { destination: 'android/dimens.xml', - format: fileFormats.androidDimens, + format: androidDimens, }, ], actions: [actions.androidCopyImages], @@ -77,11 +92,11 @@ export default { files: [ { destination: 'style_dictionary.plist', - format: fileFormats.iosPlist, + format: iosPlist, }, { destination: 'style_dictionary.h', - format: fileFormats.iosMacros, + format: iosMacros, }, ], }, @@ -91,7 +106,7 @@ export default { files: [ { destination: 'style_dictionary.js', - format: fileFormats.javascriptEs6, + format: javascriptEs6, }, ], }, diff --git a/__tests__/buildAllPlatforms.test.js b/__tests__/buildAllPlatforms.test.js index b3ad33f15..328fd9b52 100644 --- a/__tests__/buildAllPlatforms.test.js +++ b/__tests__/buildAllPlatforms.test.js @@ -17,6 +17,9 @@ import { clearOutput, fileExists } from './__helpers.js'; import memfs from '@bundled-es-modules/memfs'; import { fileFormats, transformGroups } from '../lib/enums/index.js'; +const { cssVariables } = fileFormats; +const { css } = transformGroups; + describe('buildAllPlatforms', () => { beforeEach(() => { clearOutput(); @@ -53,12 +56,12 @@ describe('buildAllPlatforms', () => { source: ['__tests__/__tokens/colors.json'], platforms: { web: { - transformGroup: transformGroups.css, + transformGroup: css, buildPath: '__tests__/__output/css/', files: [ { destination: 'vars1.css', - format: fileFormats.cssVariables, + format: cssVariables, }, ], }, @@ -80,12 +83,12 @@ describe('buildAllPlatforms', () => { source: ['__tests__/__tokens/colors.json'], platforms: { web: { - transformGroup: transformGroups.css, + transformGroup: css, buildPath: '__tests__/__output/css/', files: [ { destination: 'vars2.css', - format: fileFormats.cssVariables, + format: cssVariables, }, ], }, diff --git a/__tests__/buildPlatform.test.js b/__tests__/buildPlatform.test.js index 20f9cb78e..8d8aa677a 100644 --- a/__tests__/buildPlatform.test.js +++ b/__tests__/buildPlatform.test.js @@ -17,6 +17,9 @@ import { fileFormats, transforms, transformGroups } from '../lib/enums/index.js' const config = fileToJSON('__tests__/__configs/test.json'); const StyleDictionaryExtended = new StyleDictionary(config); +const { cssVariables, json } = fileFormats; +const { scss } = transformGroups; +const { attributeCti, sizePx, colorHex } = transforms; describe('buildPlatform', () => { beforeEach(() => { @@ -71,11 +74,11 @@ describe('buildPlatform', () => { platforms: { test: { buildPath: '__tests__/__output/', - transforms: [transforms.attributeCti, transforms.sizePx, transforms.colorHex], + transforms: [attributeCti, sizePx, colorHex], files: [ { destination: 'output.json', - format: fileFormats.json, + format: json, }, ], }, @@ -105,11 +108,11 @@ describe('buildPlatform', () => { platforms: { test: { buildPath: '__tests__/__output/', - transformGroup: transformGroups.scss, + transformGroup: scss, files: [ { destination: 'output.json', - format: fileFormats.json, + format: json, }, ], }, @@ -130,11 +133,11 @@ describe('buildPlatform', () => { platforms: { test: { buildPath: '__tests__/__output/', - transformGroup: transformGroups.scss, + transformGroup: scss, files: [ { destination: 'output.json', - format: fileFormats.json, + format: json, }, ], }, @@ -156,7 +159,7 @@ describe('buildPlatform', () => { files: [ { destination: '__tests__/__output/test.css', - format: fileFormats.cssVariables, + format: cssVariables, }, ], }, diff --git a/__tests__/common/formatHelpers/createPropertyFormatter.test.js b/__tests__/common/formatHelpers/createPropertyFormatter.test.js index caf166055..5de1f0f33 100644 --- a/__tests__/common/formatHelpers/createPropertyFormatter.test.js +++ b/__tests__/common/formatHelpers/createPropertyFormatter.test.js @@ -16,6 +16,10 @@ import flattenTokens from '../../../lib/utils/flattenTokens.js'; import { outputReferencesFilter } from '../../../lib/utils/references/outputReferencesFilter.js'; import { commentStyles, commentPositions, propertyFormatNames } from '../../../lib/enums/index.js'; +const { short, long } = commentStyles; +const { above } = commentPositions; +const { css, sass } = propertyFormatNames; + const dictionary = { foo: { original: { @@ -173,7 +177,7 @@ describe('common', () => { const propFormatter = createPropertyFormatter({ outputReferences: true, dictionary: { tokens: dictionary }, - format: propertyFormatNames.css, + format: css, }); expect(propFormatter(dictionary.foo)).to.equal(' --foo: 5px;'); expect(propFormatter(dictionary.ref)).to.equal(' --ref: var(--foo);'); @@ -183,7 +187,7 @@ describe('common', () => { const propFormatter = createPropertyFormatter({ outputReferences: true, dictionary: { tokens: transformedDictionary }, - format: propertyFormatNames.css, + format: css, }); expect(propFormatter(transformedDictionary.foo)).to.equal(' --foo: 5px;'); expect(propFormatter(transformedDictionary.ref)).to.equal(' --ref: var(--foo);'); @@ -193,7 +197,7 @@ describe('common', () => { const propFormatter = createPropertyFormatter({ outputReferences: true, dictionary: { tokens: numberDictionary }, - format: propertyFormatNames.css, + format: css, }); expect(propFormatter(numberDictionary.foo)).to.equal(' --foo: 10;'); expect(propFormatter(numberDictionary.ref)).to.equal(' --ref: var(--foo);'); @@ -203,7 +207,7 @@ describe('common', () => { const propFormatter = createPropertyFormatter({ outputReferences: true, dictionary: { tokens: numberDictionary }, - format: propertyFormatNames.css, + format: css, }); expect(propFormatter(numberDictionary.zero)).to.equal(' --zero: 0;'); expect(propFormatter(numberDictionary['ref-zero'])).to.equal( @@ -215,7 +219,7 @@ describe('common', () => { const propFormatter = createPropertyFormatter({ outputReferences: true, dictionary: { tokens: multiDictionary }, - format: propertyFormatNames.css, + format: css, }); expect(propFormatter(multiDictionary.foo)).to.equal(' --foo: 10px;'); expect(propFormatter(multiDictionary.bar)).to.equal(' --bar: 15px;'); @@ -265,7 +269,7 @@ describe('common', () => { unfilteredTokens, allTokens, }, - format: propertyFormatNames.css, + format: css, // outputReferences function that only outputs the refs if the token name is "bar" outputReferences: (token) => token.name === 'bar', }); @@ -325,7 +329,7 @@ describe('common', () => { unfilteredTokens, allTokens, }, - format: propertyFormatNames.css, + format: css, // outputReferences function that only outputs the refs if the referred tokens are not filtered out outputReferences: outputReferencesFilter, }); @@ -386,7 +390,7 @@ describe('common', () => { unfilteredTokens, allTokens, }, - format: propertyFormatNames.css, + format: css, usesDtcg: true, // outputReferences function that only outputs the refs if the referred tokens are not filtered out outputReferences: outputReferencesFilter, @@ -403,7 +407,7 @@ describe('common', () => { const propFormatter = createPropertyFormatter({ outputReferences: true, dictionary: { tokens: objectDictionary }, - format: propertyFormatNames.css, + format: css, }); // expect(propFormatter(objectDictionary.tokens.foo)).to.equal(' --foo: 5px;'); @@ -449,12 +453,12 @@ describe('common', () => { it('should default to putting comment next to the output value', async () => { // long commentStyle const cssFormatter = createPropertyFormatter({ - format: propertyFormatNames.css, + format: css, dictionary: { tokens: commentDictionary }, }); // short commentStyle const sassFormatter = createPropertyFormatter({ - format: propertyFormatNames.sass, + format: sass, dictionary: { tokens: commentDictionary }, }); @@ -474,20 +478,20 @@ describe('common', () => { it('allows overriding formatting commentStyle', async () => { // long commentStyle const cssFormatter = createPropertyFormatter({ - format: propertyFormatNames.css, + format: css, dictionary: { tokens: commentDictionary }, formatting: { - commentStyle: commentStyles.long, - commentPosition: commentPositions.above, + commentStyle: long, + commentPosition: above, }, }); // short commentStyle const sassFormatter = createPropertyFormatter({ - format: propertyFormatNames.sass, + format: sass, dictionary: { tokens: commentDictionary }, formatting: { - commentStyle: commentStyles.short, - commentPosition: commentPositions.above, + commentStyle: short, + commentPosition: above, }, }); @@ -543,7 +547,7 @@ describe('common', () => { it('supports DTCG spec $description property for comments', async () => { // long commentStyle const cssFormatter = createPropertyFormatter({ - format: propertyFormatNames.css, + format: css, dictionary: { tokens: dtcgDictionary }, usesDtcg: true, }); @@ -560,7 +564,7 @@ describe('common', () => { it('supports DTCG spec $value for outputReferences', async () => { // long commentStyle const cssFormatter = createPropertyFormatter({ - format: propertyFormatNames.css, + format: css, outputReferences: true, dictionary: { tokens: dtcgDictionary }, usesDtcg: true, diff --git a/__tests__/exportPlatform.test.js b/__tests__/exportPlatform.test.js index 2563ac427..ceb45ba7f 100644 --- a/__tests__/exportPlatform.test.js +++ b/__tests__/exportPlatform.test.js @@ -24,6 +24,19 @@ import { } from '../lib/enums/index.js'; const config = fileToJSON('__tests__/__configs/test.json'); +const { default: defaultVerbosity, silent, verbose } = logVerbosityLevels; +const { error: errorLog, disabled } = logWarningLevels; +const { css, web } = transformGroups; +const { + colorCss, + nameKebab, + typographyCssShorthand, + borderCssShorthand, + shadowCssShorthand, + cubicBezierCss, + transitionCssShorthand, +} = transforms; +const { value: transformTypeValue } = transformTypes; describe('exportPlatform', () => { let styleDictionary; @@ -74,12 +87,12 @@ describe('exportPlatform', () => { const StyleDictionaryExtended = await styleDictionary.extend({ platforms: { test: { - transforms: [transforms.colorCss, 'color/darken'], + transforms: [colorCss, 'color/darken'], }, }, }); StyleDictionary.registerTransform({ - type: transformTypes.value, + type: transformTypeValue, name: 'color/darken', transitive: true, filter: function (prop) { @@ -110,7 +123,7 @@ describe('exportPlatform', () => { hooks: { transforms: { transitive: { - type: transformTypes.value, + type: transformTypeValue, transitive: true, transform: (token) => `${token.value}-bar`, }, @@ -157,7 +170,7 @@ describe('exportPlatform', () => { }, }); StyleDictionaryExtended.registerTransform({ - type: transformTypes.value, + type: transformTypeValue, name: 'color/darken', transitive: true, filter: (token) => token.type === 'color', @@ -212,7 +225,7 @@ describe('exportPlatform', () => { }, platforms: { web: { - transformGroup: transformGroups.web, + transformGroup: web, }, }, }); @@ -309,7 +322,7 @@ describe('exportPlatform', () => { tokens, platforms: { css: { - transformGroup: transformGroups.css, + transformGroup: css, }, }, }); @@ -365,13 +378,9 @@ describe('exportPlatform', () => { }; // making the css/color transform transitive so we can be sure the references // get resolved properly and transformed. - const transitiveTransform = Object.assign( - {}, - StyleDictionary.hooks.transforms[transforms.colorCss], - { - transitive: true, - }, - ); + const transitiveTransform = Object.assign({}, StyleDictionary.hooks.transforms[colorCss], { + transitive: true, + }); const sd = new StyleDictionary({ tokens, @@ -382,7 +391,7 @@ describe('exportPlatform', () => { }, platforms: { css: { - transforms: [transforms.nameKebab, 'transitiveTransform'], + transforms: [nameKebab, 'transitiveTransform'], }, }, }); @@ -481,7 +490,7 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details.`; }, platforms: { css: { - transforms: [transforms.typographyCssShorthand], + transforms: [typographyCssShorthand], }, }, }); @@ -495,7 +504,7 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details. Refer to: https://styledictionary.com/reference/logging/ `); - sd.log.verbosity = logVerbosityLevels.verbose; + sd.log.verbosity = verbose; await sd.exportPlatform('css', { cache: false }); expect(cleanConsoleOutput(Array.from(logStub.calls)[1].args[0])).to.equal(` @@ -513,16 +522,16 @@ Unknown CSS Font Shorthand properties found for 1 tokens, CSS output for Font va letterSpacing, paragraphSpacing, textColor for token at foo.bar in /tokens.json `); - sd.log.verbosity = logVerbosityLevels.silent; + sd.log.verbosity = silent; await sd.exportPlatform('css', { cache: false }); expect(Array.from(logStub.calls)[3]).to.be.undefined; - sd.log.verbosity = logVerbosityLevels.default; - sd.log.warnings = logWarningLevels.disabled; + sd.log.verbosity = defaultVerbosity; + sd.log.warnings = disabled; await sd.exportPlatform('css', { cache: false }); expect(Array.from(logStub.calls)[3]).to.be.undefined; - sd.log.warnings = logWarningLevels.error; + sd.log.warnings = errorLog; await expect(sd.exportPlatform('css', { cache: false })).to.be.eventually.rejectedWith(` Unknown CSS Font Shorthand properties found for 1 tokens, CSS output for Font values will be missing some typography token properties as a result: Use log.verbosity "verbose" or use CLI option --verbose for more details. @@ -549,7 +558,7 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details. }, platforms: { css: { - transforms: [transforms.typographyCssShorthand], + transforms: [typographyCssShorthand], }, }, }); @@ -578,7 +587,7 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details. }, platforms: { css: { - transforms: [transforms.typographyCssShorthand], + transforms: [typographyCssShorthand], }, }, }); @@ -607,7 +616,7 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details. }, platforms: { css: { - transforms: [transforms.borderCssShorthand], + transforms: [borderCssShorthand], }, }, }); @@ -634,7 +643,7 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details. }, platforms: { css: { - transforms: [transforms.borderCssShorthand], + transforms: [borderCssShorthand], }, }, }); @@ -663,7 +672,7 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details. }, platforms: { css: { - transforms: [transforms.cubicBezierCss, transforms.transitionCssShorthand], + transforms: [cubicBezierCss, transitionCssShorthand], }, }, }); @@ -690,7 +699,7 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details. }, platforms: { css: { - transforms: [transforms.cubicBezierCss, transforms.transitionCssShorthand], + transforms: [cubicBezierCss, transitionCssShorthand], }, }, }); @@ -720,7 +729,7 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details. }, platforms: { css: { - transforms: [transforms.shadowCssShorthand], + transforms: [shadowCssShorthand], }, }, }); @@ -756,7 +765,7 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details. }, platforms: { css: { - transforms: [transforms.shadowCssShorthand], + transforms: [shadowCssShorthand], }, }, }); @@ -799,7 +808,7 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details. hooks: { transforms: { 'custom/add/px': { - type: transformTypes.value, + type: transformTypeValue, filter: (token) => { return token.$type === 'dimension'; }, @@ -811,7 +820,7 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details. }, platforms: { css: { - transforms: [transforms.nameKebab, 'custom/add/px'], + transforms: [nameKebab, 'custom/add/px'], }, }, }); diff --git a/__tests__/formats/androidResources.test.js b/__tests__/formats/androidResources.test.js index 06d02f891..4b85ab12a 100644 --- a/__tests__/formats/androidResources.test.js +++ b/__tests__/formats/androidResources.test.js @@ -16,6 +16,8 @@ import createFormatArgs from '../../lib/utils/createFormatArgs.js'; import flattenTokens from '../../lib/utils/flattenTokens.js'; import { fileFormats } from '../../lib/enums/index.js'; +const { androidResources } = fileFormats; + const tokens = { size: { font: { @@ -90,10 +92,10 @@ const customTokens = { }, }; -const format = formats[fileFormats.androidResources]; +const format = formats[androidResources]; const file = { destination: '__output/', - format: fileFormats.androidResources, + format: androidResources, }; describe('formats', () => { diff --git a/__tests__/formats/es6Constants.test.js b/__tests__/formats/es6Constants.test.js index f2fe012a7..adfbdf34f 100644 --- a/__tests__/formats/es6Constants.test.js +++ b/__tests__/formats/es6Constants.test.js @@ -16,9 +16,11 @@ import createFormatArgs from '../../lib/utils/createFormatArgs.js'; import flattenTokens from '../../lib/utils/flattenTokens.js'; import { fileFormats } from '../../lib/enums/index.js'; +const { javascriptEs6 } = fileFormats; + const file = { destination: '__output/', - format: fileFormats.javascriptEs6, + format: javascriptEs6, filter: { type: 'color', }, @@ -37,10 +39,10 @@ const tokens = { }, }; -const format = formats[fileFormats.javascriptEs6]; +const format = formats[javascriptEs6]; describe('formats', () => { - describe(fileFormats.javascriptEs6, () => { + describe(javascriptEs6, () => { it('should be a valid JS file and match snapshot', async () => { await expect( await format( diff --git a/__tests__/formats/javascriptModule.test.js b/__tests__/formats/javascriptModule.test.js index dd2186396..d18fbd351 100644 --- a/__tests__/formats/javascriptModule.test.js +++ b/__tests__/formats/javascriptModule.test.js @@ -16,9 +16,11 @@ import createFormatArgs from '../../lib/utils/createFormatArgs.js'; import flattenTokens from '../../lib/utils/flattenTokens.js'; import { fileFormats } from '../../lib/enums/index.js'; +const { javascriptModule } = fileFormats; + const file = { destination: '__output/', - format: fileFormats.javascriptModule, + format: javascriptModule, filter: { type: 'color', }, @@ -30,10 +32,10 @@ const tokens = { }, }; -const format = formats[fileFormats.javascriptModule]; +const format = formats[javascriptModule]; describe('formats', () => { - describe(fileFormats.javascriptModule, () => { + describe(javascriptModule, () => { it('should be a valid JS file and match snapshot', async () => { await expect( await format( diff --git a/__tests__/formats/javascriptModuleFlat.test.js b/__tests__/formats/javascriptModuleFlat.test.js index 8dc40e79e..2a0e75f61 100644 --- a/__tests__/formats/javascriptModuleFlat.test.js +++ b/__tests__/formats/javascriptModuleFlat.test.js @@ -16,9 +16,11 @@ import createFormatArgs from '../../lib/utils/createFormatArgs.js'; import flattenTokens from '../../lib/utils/flattenTokens.js'; import { fileFormats } from '../../lib/enums/index.js'; +const { javascriptModuleFlat } = fileFormats; + const file = { destination: '__output/', - format: fileFormats.javascriptModuleFlat, + format: javascriptModuleFlat, }; const tokens = { color: { @@ -33,10 +35,10 @@ const tokens = { }, }; -const format = formats[fileFormats.javascriptModuleFlat]; +const format = formats[javascriptModuleFlat]; describe('formats', () => { - describe(fileFormats.javascriptModuleFlat, () => { + describe(javascriptModuleFlat, () => { it('should be a valid JS file and match snapshot', async () => { await expect( await format( diff --git a/__tests__/formats/javascriptObject.test.js b/__tests__/formats/javascriptObject.test.js index 794850a77..b788c5117 100644 --- a/__tests__/formats/javascriptObject.test.js +++ b/__tests__/formats/javascriptObject.test.js @@ -16,9 +16,11 @@ import createFormatArgs from '../../lib/utils/createFormatArgs.js'; import flattenTokens from '../../lib/utils/flattenTokens.js'; import { fileFormats } from '../../lib/enums/index.js'; +const { javascriptObject } = fileFormats; + const file = { destination: '__output/', - format: fileFormats.javascriptObject, + format: javascriptObject, options: { name: 'foo' }, }; @@ -28,10 +30,10 @@ const tokens = { }, }; -const format = formats[fileFormats.javascriptObject]; +const format = formats[javascriptObject]; describe('formats', () => { - describe(fileFormats.javascriptObject, () => { + describe(javascriptObject, () => { it('should be valid JS syntax and match snapshot', async () => { await expect( await format( diff --git a/__tests__/formats/javascriptUmd.test.js b/__tests__/formats/javascriptUmd.test.js index 29eee6667..b5036c68b 100644 --- a/__tests__/formats/javascriptUmd.test.js +++ b/__tests__/formats/javascriptUmd.test.js @@ -16,9 +16,11 @@ import createFormatArgs from '../../lib/utils/createFormatArgs.js'; import flattenTokens from '../../lib/utils/flattenTokens.js'; import { fileFormats } from '../../lib/enums/index.js'; +const { javascriptUmd } = fileFormats; + const file = { destination: '__output/', - format: fileFormats.javascriptUmd, + format: javascriptUmd, filter: { type: 'color', }, @@ -30,10 +32,10 @@ const tokens = { }, }; -const format = formats[fileFormats.javascriptUmd]; +const format = formats[javascriptUmd]; describe('formats', () => { - describe(fileFormats.javascriptUmd, () => { + describe(javascriptUmd, () => { it('should be a valid JS file and match snapshot', async () => { await expect( await format( diff --git a/__tests__/formats/json.test.js b/__tests__/formats/json.test.js index 180ed9163..b8233209d 100644 --- a/__tests__/formats/json.test.js +++ b/__tests__/formats/json.test.js @@ -16,9 +16,11 @@ import createFormatArgs from '../../lib/utils/createFormatArgs.js'; import flattenTokens from '../../lib/utils/flattenTokens.js'; import { fileFormats } from '../../lib/enums/index.js'; +const { json } = fileFormats; + const file = { destination: '__output/', - format: fileFormats.json, + format: json, }; const tokens = { @@ -27,10 +29,10 @@ const tokens = { }, }; -const format = formats[fileFormats.json]; +const format = formats[json]; describe('formats', () => { - describe(fileFormats.json, () => { + describe(json, () => { it('should be a valid JSON file and match snapshot', async () => { await expect( format( diff --git a/__tests__/formats/jsonFlat.test.js b/__tests__/formats/jsonFlat.test.js index fa2333da2..8f6837447 100644 --- a/__tests__/formats/jsonFlat.test.js +++ b/__tests__/formats/jsonFlat.test.js @@ -14,6 +14,7 @@ import { expect } from 'chai'; import formats from '../../lib/common/formats.js'; import createFormatArgs from '../../lib/utils/createFormatArgs.js'; import flattenTokens from '../../lib/utils/flattenTokens.js'; +import { fileFormats } from '../../lib/enums/index.js'; const colorTokenName = 'color-base-red-400'; const colorTokenValue = '#EF5350'; @@ -37,13 +38,13 @@ const colorTokens = { const file = { destination: '__output/', - format: 'json/flat', + format: fileFormats.jsonFlat, }; -const format = formats['json/flat']; +const format = formats[fileFormats.jsonFlat]; describe('formats', () => { - describe('json/flat', () => { + describe(fileFormats.jsonFlat, () => { it('should be a valid JSON file and match snapshot', async () => { await expect( format( diff --git a/__tests__/formats/jsonNested.test.js b/__tests__/formats/jsonNested.test.js index 2030c06f4..a7b992ecb 100644 --- a/__tests__/formats/jsonNested.test.js +++ b/__tests__/formats/jsonNested.test.js @@ -14,10 +14,13 @@ import { expect } from 'chai'; import formats from '../../lib/common/formats.js'; import createFormatArgs from '../../lib/utils/createFormatArgs.js'; import flattenTokens from '../../lib/utils/flattenTokens.js'; +import { fileFormats } from '../../lib/enums/index.js'; + +const { jsonNested } = fileFormats; const file = { destination: 'output/', - format: 'json/nested', + format: jsonNested, }; const tokens = { @@ -35,10 +38,10 @@ const tokens = { }, }; -const format = formats['json/nested']; +const format = formats[jsonNested]; describe('formats', function () { - describe('json/nested', function () { + describe(jsonNested, function () { it('should be a valid JSON file and match snapshot', async () => { await expect( format( diff --git a/__tests__/formats/lessIcons.test.js b/__tests__/formats/lessIcons.test.js index 82f1614ea..cca2ffdf1 100644 --- a/__tests__/formats/lessIcons.test.js +++ b/__tests__/formats/lessIcons.test.js @@ -17,9 +17,11 @@ import flattenTokens from '../../lib/utils/flattenTokens.js'; import { isNode } from '../../lib/utils/isNode.js'; import { fileFormats } from '../../lib/enums/index.js'; +const { lessIcons } = fileFormats; + const file = { destination: '__output/', - format: fileFormats.lessIcons, + format: lessIcons, name: 'foo', }; @@ -55,10 +57,10 @@ const platform = { }, }; -const format = formats[fileFormats.lessIcons]; +const format = formats[lessIcons]; describe('formats', () => { - describe(fileFormats.lessIcons, () => { + describe(lessIcons, () => { it('should have a valid less syntax and match snapshot', async () => { const result = await format( createFormatArgs({ diff --git a/__tests__/formats/lessVariables.test.js b/__tests__/formats/lessVariables.test.js index b4aefc062..799a0c2b1 100644 --- a/__tests__/formats/lessVariables.test.js +++ b/__tests__/formats/lessVariables.test.js @@ -17,9 +17,11 @@ import flattenTokens from '../../lib/utils/flattenTokens.js'; import { isNode } from '../../lib/utils/isNode.js'; import { fileFormats } from '../../lib/enums/index.js'; +const { lessVariables } = fileFormats; + const file = { destination: '__output/', - format: fileFormats.lessVariables, + format: lessVariables, name: 'foo', }; @@ -43,10 +45,10 @@ const tokens = { }, }; -const format = formats[fileFormats.lessVariables]; +const format = formats[lessVariables]; describe('formats', () => { - describe(fileFormats.lessVariables, () => { + describe(lessVariables, () => { it('should have a valid less syntax and match snapshot', async () => { const result = await format( createFormatArgs({ diff --git a/__tests__/formats/scssIcons.test.js b/__tests__/formats/scssIcons.test.js index 4b92de763..0075a53d9 100644 --- a/__tests__/formats/scssIcons.test.js +++ b/__tests__/formats/scssIcons.test.js @@ -17,9 +17,11 @@ import createFormatArgs from '../../lib/utils/createFormatArgs.js'; import flattenTokens from '../../lib/utils/flattenTokens.js'; import { fileFormats } from '../../lib/enums/index.js'; +const { scssIcons } = fileFormats; + const file = { destination: '__output/', - format: fileFormats.scssIcons, + format: scssIcons, name: 'foo', }; @@ -55,10 +57,10 @@ const platform = { }, }; -const format = formats[fileFormats.scssIcons]; +const format = formats[scssIcons]; describe('formats', () => { - describe(fileFormats.scssIcons, () => { + describe(scssIcons, () => { it('should have a valid scss syntax and match snapshot', async () => { const result = await format( createFormatArgs({ diff --git a/__tests__/formats/scssVariables.test.js b/__tests__/formats/scssVariables.test.js index cdb13b572..70105002e 100644 --- a/__tests__/formats/scssVariables.test.js +++ b/__tests__/formats/scssVariables.test.js @@ -17,9 +17,11 @@ import createFormatArgs from '../../lib/utils/createFormatArgs.js'; import flattenTokens from '../../lib/utils/flattenTokens.js'; import { fileFormats } from '../../lib/enums/index.js'; +const { scssVariables } = fileFormats; + const file = { destination: '__output/', - format: fileFormats.scssVariables, + format: scssVariables, name: 'foo', }; @@ -43,10 +45,10 @@ const tokens = { }, }; -const format = formats[fileFormats.scssVariables]; +const format = formats[scssVariables]; describe('formats', () => { - describe(fileFormats.scssVariables, () => { + describe(scssVariables, () => { it('should have a valid scss syntax and match snapshot', async () => { const result = await format( createFormatArgs({ diff --git a/__tests__/formats/stylusVariable.test.js b/__tests__/formats/stylusVariable.test.js index 46a9ad525..17b716908 100644 --- a/__tests__/formats/stylusVariable.test.js +++ b/__tests__/formats/stylusVariable.test.js @@ -17,9 +17,11 @@ import createFormatArgs from '../../lib/utils/createFormatArgs.js'; import flattenTokens from '../../lib/utils/flattenTokens.js'; import { fileFormats } from '../../lib/enums/index.js'; +const { stylusVariables } = fileFormats; + const file = { destination: '__output/', - format: fileFormats.stylusVariables, + format: stylusVariables, name: 'foo', }; @@ -43,10 +45,10 @@ const tokens = { }, }; -const format = formats[fileFormats.stylusVariables]; +const format = formats[stylusVariables]; describe('formats', () => { - describe(fileFormats.stylusVariables, () => { + describe(stylusVariables, () => { it('should have a valid stylus syntax and match snapshot', async () => { const result = format( createFormatArgs({ diff --git a/__tests__/formats/swiftFile.test.js b/__tests__/formats/swiftFile.test.js index 6bf2bcfe7..f22d5d977 100644 --- a/__tests__/formats/swiftFile.test.js +++ b/__tests__/formats/swiftFile.test.js @@ -16,9 +16,11 @@ import createFormatArgs from '../../lib/utils/createFormatArgs.js'; import flattenTokens from '../../lib/utils/flattenTokens.js'; import { fileFormats } from '../../lib/enums/index.js'; +const { iosSwiftAnySwift } = fileFormats; + const originalFile = { destination: '__output/', - format: fileFormats.iosSwiftAnySwift, + format: iosSwiftAnySwift, options: { className: 'StyleDictionary', }, @@ -43,10 +45,10 @@ const tokens = { }, }; -const format = formats[fileFormats.iosSwiftAnySwift]; +const format = formats[iosSwiftAnySwift]; describe('formats', () => { - describe(fileFormats.iosSwiftAnySwift, () => { + describe(iosSwiftAnySwift, () => { beforeEach(() => { file = structuredClone(originalFile); }); diff --git a/__tests__/formats/typeScriptEs6Declarations.test.js b/__tests__/formats/typeScriptEs6Declarations.test.js index 248277686..8b2aedcd8 100644 --- a/__tests__/formats/typeScriptEs6Declarations.test.js +++ b/__tests__/formats/typeScriptEs6Declarations.test.js @@ -16,9 +16,11 @@ import createFormatArgs from '../../lib/utils/createFormatArgs.js'; import flattenTokens from '../../lib/utils/flattenTokens.js'; import { fileFormats } from '../../lib/enums/index.js'; +const { typescriptEs6Declarations } = fileFormats; + const file = { destination: '__output/', - format: fileFormats.typescriptEs6Declarations, + format: typescriptEs6Declarations, }; const tokens = { @@ -37,10 +39,10 @@ const tokens = { }, }; -const format = formats[fileFormats.typescriptEs6Declarations]; +const format = formats[typescriptEs6Declarations]; describe('formats', () => { - describe(fileFormats.typescriptEs6Declarations, () => { + describe(typescriptEs6Declarations, () => { it('should be a valid TS file', async () => { const output = await format( createFormatArgs({ diff --git a/__tests__/formats/typeScriptModuleDeclarations.test.js b/__tests__/formats/typeScriptModuleDeclarations.test.js index ad55273a2..abca3844f 100644 --- a/__tests__/formats/typeScriptModuleDeclarations.test.js +++ b/__tests__/formats/typeScriptModuleDeclarations.test.js @@ -16,9 +16,11 @@ import createFormatArgs from '../../lib/utils/createFormatArgs.js'; import flattenTokens from '../../lib/utils/flattenTokens.js'; import { fileFormats } from '../../lib/enums/index.js'; +const { typescriptModuleDeclarations } = fileFormats; + const file = { destination: '__output/', - format: fileFormats.typescriptModuleDeclarations, + format: typescriptModuleDeclarations, filter: { type: 'color' }, }; @@ -28,10 +30,10 @@ const tokens = { }, }; -const format = formats[fileFormats.typescriptModuleDeclarations].bind(file); +const format = formats[typescriptModuleDeclarations].bind(file); describe('formats', () => { - describe(fileFormats.typescriptModuleDeclarations, () => { + describe(typescriptModuleDeclarations, () => { it('should be a valid TS file', async () => { const output = await format( createFormatArgs({ diff --git a/__tests__/register/overwrite.test.js b/__tests__/register/overwrite.test.js index bda44df8b..c132651c2 100644 --- a/__tests__/register/overwrite.test.js +++ b/__tests__/register/overwrite.test.js @@ -4,9 +4,12 @@ import transformBuiltins from '../../lib/common/transforms.js'; import { isNode } from '../../lib/utils/isNode.js'; import { transforms, transformTypes } from '../lib/enums/index.js'; +const { colorHex } = transforms; +const { value: transformTypeValue, name } = transformTypes; + describe('Register overwrites', () => { const reset = () => { - StyleDictionary.hooks.transforms[transforms.colorHex] = transformBuiltins[transforms.colorHex]; + StyleDictionary.hooks.transforms[colorHex] = transformBuiltins[colorHex]; }; beforeEach(() => { reset(); @@ -18,12 +21,12 @@ describe('Register overwrites', () => { it(`should allow overwriting built-in hooks on class, affecting any instance created AFTER doing so`, async () => { const sd1 = new StyleDictionary(); - const builtInHookName = transforms.colorHex; + const builtInHookName = colorHex; const builtInHook = StyleDictionary.hooks.transforms[builtInHookName]; StyleDictionary.registerTransform({ ...builtInHook, name: builtInHookName, - type: transformTypes.name, + type: name, }); const sd2 = new StyleDictionary(); @@ -34,28 +37,28 @@ describe('Register overwrites', () => { // fail purely due to multiple test files writing stuff to the Register class // TODO: In the future we may be able to run mocha test files in parallel processes if (!isNode) { - expect(sd1.hooks.transforms[builtInHookName].type).to.equal(transformTypes.value); - expect(sd2.hooks.transforms[builtInHookName].type).to.equal(transformTypes.name); - expect(sd3.hooks.transforms[builtInHookName].type).to.equal(transformTypes.name); + expect(sd1.hooks.transforms[builtInHookName].type).to.equal(transformTypeValue); + expect(sd2.hooks.transforms[builtInHookName].type).to.equal(name); + expect(sd3.hooks.transforms[builtInHookName].type).to.equal(name); } }); it(`should allow overwriting built-in hooks on instance, affecting only that instance or its direct extensions`, async () => { const sd1 = new StyleDictionary(); - const builtInHookName = transforms.colorHex; + const builtInHookName = colorHex; const builtInHook = StyleDictionary.hooks.transforms[builtInHookName]; sd1.registerTransform({ ...builtInHook, name: builtInHookName, - type: transformTypes.name, + type: name, }); const sd2 = new StyleDictionary(); const sd3 = await sd2.extend(); - expect(sd1.hooks.transforms[builtInHookName].type).to.equal(transformTypes.name); - expect(sd2.hooks.transforms[builtInHookName].type).to.equal(transformTypes.value); - expect(sd3.hooks.transforms[builtInHookName].type).to.equal(transformTypes.value); + expect(sd1.hooks.transforms[builtInHookName].type).to.equal(name); + expect(sd2.hooks.transforms[builtInHookName].type).to.equal(transformTypeValue); + expect(sd3.hooks.transforms[builtInHookName].type).to.equal(transformTypeValue); }); }); diff --git a/__tests__/register/transform.test.js b/__tests__/register/transform.test.js index b5da58119..8f6e878a7 100644 --- a/__tests__/register/transform.test.js +++ b/__tests__/register/transform.test.js @@ -16,22 +16,24 @@ import { registerSuite } from './register.suite.js'; import transformBuiltins from '../../lib/common/transforms.js'; import { transformTypes } from '../../lib/enums/index.js'; +const { value: transformTypeValue, name } = transformTypes; + const transformPxAppender = { name: 'px-appender', - type: transformTypes.value, + type: transformTypeValue, transform: (token) => `${token.value}px`, }; const transformValueIncrementer = { name: 'value-incrementer', - type: transformTypes.value, + type: transformTypeValue, filter: (token) => typeof token.value === 'number', transform: (token) => token.value + 1, }; registerSuite({ config: { - type: transformTypes.value, + type: transformTypeValue, transform: () => {}, }, registerMethod: 'registerTransform', @@ -195,7 +197,7 @@ describe('register', () => { it('should error if name is not a string', () => { expect(() => { StyleDictionaryExtended.registerTransform({ - type: transformTypes.name, + type: name, }); }).to.throw('name must be a string'); }); @@ -203,7 +205,7 @@ describe('register', () => { it('should error if filter is not a function', () => { expect(() => { StyleDictionaryExtended.registerTransform({ - type: transformTypes.name, + type: name, name: 'name', filter: 'foo', }); @@ -213,7 +215,7 @@ describe('register', () => { it('should error if transform is not a function', () => { expect(() => { StyleDictionaryExtended.registerTransform({ - type: transformTypes.name, + type: name, name: 'name', filter: function () { return true; @@ -225,7 +227,7 @@ describe('register', () => { it('should work if type, filter, and transform are all proper', () => { StyleDictionaryExtended.registerTransform({ - type: transformTypes.name, + type: name, name: 'foo', filter: function () { return true; @@ -235,10 +237,7 @@ describe('register', () => { }, }); expect(typeof StyleDictionaryExtended.hooks.transforms.foo).to.equal('object'); - expect(StyleDictionaryExtended).to.have.nested.property( - 'hooks.transforms.foo.type', - transformTypes.name, - ); + expect(StyleDictionaryExtended).to.have.nested.property('hooks.transforms.foo.type', name); expect(typeof StyleDictionaryExtended.hooks.transforms.foo.filter).to.equal('function'); expect(typeof StyleDictionaryExtended.hooks.transforms.foo.transform).to.equal('function'); }); @@ -246,7 +245,7 @@ describe('register', () => { it('should properly pass the registered transform to instances', async () => { const SDE2 = await StyleDictionaryExtended.extend({}); expect(typeof SDE2.hooks.transforms.foo).to.equal('object'); - expect(SDE2).to.have.nested.property('hooks.transforms.foo.type', transformTypes.name); + expect(SDE2).to.have.nested.property('hooks.transforms.foo.type', name); expect(typeof SDE2.hooks.transforms.foo.filter).to.equal('function'); expect(typeof SDE2.hooks.transforms.foo.transform).to.equal('function'); }); diff --git a/__tests__/register/transformGroup.test.js b/__tests__/register/transformGroup.test.js index 3f4c49e0e..808226acc 100644 --- a/__tests__/register/transformGroup.test.js +++ b/__tests__/register/transformGroup.test.js @@ -16,10 +16,11 @@ import { registerSuite } from './register.suite.js'; import { transforms } from '../../lib/enums/index.js'; const dummyTransformName = 'transformGroup.test.js'; +const { sizePx } = transforms; registerSuite({ config: { - transforms: [transforms.sizePx], + transforms: [sizePx], }, registerMethod: 'registerTransformGroup', prop: 'transformGroups', @@ -105,22 +106,22 @@ describe('register/transformGroup', async () => { it('should work if everything is good', () => { StyleDictionaryExtended.registerTransformGroup({ name: 'foo', - transforms: [transforms.sizePx], + transforms: [sizePx], }); expect(Array.isArray(StyleDictionaryExtended.hooks.transformGroups.foo)).to.be.true; expect(typeof StyleDictionaryExtended.hooks.transformGroups.foo[0]).to.equal('string'); - expect(StyleDictionaryExtended.hooks.transformGroups.foo[0]).to.equal(transforms.sizePx); + expect(StyleDictionaryExtended.hooks.transformGroups.foo[0]).to.equal(sizePx); }); it('should properly pass the registered transformGroup to instances when extending', async () => { const StyleDictionaryBase = new StyleDictionary({}); StyleDictionaryBase.registerTransformGroup({ name: 'bar', - transforms: [transforms.sizePx], + transforms: [sizePx], }); const SDE2 = await StyleDictionaryBase.extend({}); expect(Array.isArray(SDE2.hooks.transformGroups.bar)).to.be.true; expect(typeof SDE2.hooks.transformGroups.bar[0]).to.equal('string'); - expect(SDE2.hooks.transformGroups.bar[0]).to.equal(transforms.sizePx); + expect(SDE2.hooks.transformGroups.bar[0]).to.equal(sizePx); }); }); diff --git a/__tests__/transform/config.test.js b/__tests__/transform/config.test.js index de4c08df5..b8658aea2 100644 --- a/__tests__/transform/config.test.js +++ b/__tests__/transform/config.test.js @@ -16,11 +16,13 @@ import transformConfig from '../../lib/transform/config.js'; import chalk from 'chalk'; import { logWarningLevels, logVerbosityLevels, transformTypes } from '../../lib/enums/index.js'; +const { attribute } = transformTypes; + const dictionary = { hooks: { transforms: { fooTransform: { - type: transformTypes.attribute, + type: attribute, transform: function () { return { bar: 'foo' }; }, @@ -66,21 +68,21 @@ None of "barTransform", "bazTransform" match the name of a registered transform. transforms: { fooTransform: { name: 'fooTransform', - type: transformTypes.attribute, + type: attribute, transform: function () { return { foo: 'foo' }; }, }, barTransform: { name: 'barTransform', - type: transformTypes.attribute, + type: attribute, transform: function () { return { bar: 'bar' }; }, }, quxTransform: { name: 'quxTransform', - type: transformTypes.attribute, + type: attribute, transform: function () { return { qux: 'qux' }; }, diff --git a/__tests__/transform/object.test.js b/__tests__/transform/object.test.js index 7bfc6d0b3..61fb05f7a 100644 --- a/__tests__/transform/object.test.js +++ b/__tests__/transform/object.test.js @@ -14,16 +14,18 @@ import { expect } from 'chai'; import transformObject from '../../lib/transform/object.js'; import { transformTypes } from '../../lib/enums/index.js'; +const { value: transformTypeValue, name, attribute } = transformTypes; + const config = { transforms: [ { - type: transformTypes.attribute, + type: attribute, transform: function () { return { foo: 'bar' }; }, }, { - type: transformTypes.attribute, + type: attribute, // verify async transforms to also work properly transform: async function () { await new Promise((resolve) => setTimeout(resolve, 100)); @@ -31,7 +33,7 @@ const config = { }, }, { - type: transformTypes.name, + type: name, filter: function (token) { return token.attributes.foo === 'bar'; }, @@ -42,7 +44,7 @@ const config = { }, }, { - type: transformTypes.value, + type: transformTypeValue, filter: function (token) { return token.path[0] === 'spacing'; }, diff --git a/__tests__/transform/transformToken.test.js b/__tests__/transform/transformToken.test.js index 85cfe6b99..0975a3970 100644 --- a/__tests__/transform/transformToken.test.js +++ b/__tests__/transform/transformToken.test.js @@ -14,10 +14,12 @@ import { expect } from 'chai'; import transformToken from '../../lib/transform/token.js'; import { transformTypes } from '../../lib/enums/index.js'; +const { value: transformTypeValue, name, attribute } = transformTypes; + const config = { transforms: [ { - type: transformTypes.attribute, + type: attribute, transform: function () { return { foo: 'bar', @@ -25,13 +27,13 @@ const config = { }, }, { - type: transformTypes.attribute, + type: attribute, transform: function () { return { bar: 'foo' }; }, }, { - type: transformTypes.name, + type: name, filter: function (prop) { return prop.attributes.foo === 'bar'; }, @@ -62,7 +64,7 @@ describe('transform', () => { { transforms: [ { - type: transformTypes.value, + type: transformTypeValue, transitive: true, transform: () => { return undefined; diff --git a/bin/style-dictionary.js b/bin/style-dictionary.js index 83ece082e..0033e6e57 100755 --- a/bin/style-dictionary.js +++ b/bin/style-dictionary.js @@ -13,7 +13,7 @@ import StyleDictionary from 'style-dictionary'; import { logWarningLevels, logVerbosityLevels } from '../lib/enums/index.js'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); - +const { silent, verbose } = logVerbosityLevels; const pkg = JSON5.parse(node_fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8')); function collect(val, arr) { @@ -113,7 +113,7 @@ function getSD(configPath, options) { let verbosity; let warnings; if (options.verbose || options.silent) { - verbosity = options.verbose ? logVerbosityLevels.verbose : logVerbosityLevels.silent; + verbosity = options.verbose ? verbose : silent; } if (options.warn === false) { warnings = logWarningLevels.disabled; diff --git a/docs/src/content/docs/examples/splitting-output-files.md b/docs/src/content/docs/examples/splitting-output-files.md index ea3f8e7fb..012910cfa 100644 --- a/docs/src/content/docs/examples/splitting-output-files.md +++ b/docs/src/content/docs/examples/splitting-output-files.md @@ -258,6 +258,8 @@ The trick is to dynamically generate the files array, generate one for each outp ``` ```js config +import { fileFormats } from 'style-dictionary/enums'; + function generateComponentFiles(components) { return components.map((comp) => ({ // output the component tokens in the right folder and file e.g. components/button/button-vars.css diff --git a/docs/src/content/docs/getting-started/installation.mdx b/docs/src/content/docs/getting-started/installation.mdx index 16294f39d..5e013bb4e 100644 --- a/docs/src/content/docs/getting-started/installation.mdx +++ b/docs/src/content/docs/getting-started/installation.mdx @@ -320,6 +320,7 @@ The StyleDictionary constructor can also take a [configuration](/reference/confi ```javascript title="build-tokens.js" import StyleDictionary from 'style-dictionary'; +import { fileFormats, transformGroups } from 'style-dictionary/enums'; const sd = new StyleDictionary({ source: ['tokens/**/*.json'], diff --git a/docs/src/content/docs/reference/Hooks/Formats/helpers.md b/docs/src/content/docs/reference/Hooks/Formats/helpers.md index 7bfd9e373..bc49a4e5b 100644 --- a/docs/src/content/docs/reference/Hooks/Formats/helpers.md +++ b/docs/src/content/docs/reference/Hooks/Formats/helpers.md @@ -11,6 +11,7 @@ They are accessible at `style-dictionary/utils` entrypoint, you can read more ab ```javascript import StyleDictionary from 'style-dictionary'; import { fileHeader, formattedVariables } from 'style-dictionary/utils'; +import { propertyFormatNames } from 'style-dictionary/enums'; StyleDictionary.registerFormat({ name: 'myCustomFormat', diff --git a/docs/src/content/docs/reference/Hooks/Formats/index.md b/docs/src/content/docs/reference/Hooks/Formats/index.md index 3edfe0aeb..c0599e6fd 100644 --- a/docs/src/content/docs/reference/Hooks/Formats/index.md +++ b/docs/src/content/docs/reference/Hooks/Formats/index.md @@ -144,6 +144,8 @@ It is also possible to provide a function instead of `true` or `false` to `outpu ```js // config.js +import { fileFormats, transformGroups } from 'style-dictionary/enums'; + export default { source: ['tokens.json'], platforms: { diff --git a/docs/src/content/docs/reference/Hooks/Formats/predefined.md b/docs/src/content/docs/reference/Hooks/Formats/predefined.md index b4c5fa721..496c8b89a 100644 --- a/docs/src/content/docs/reference/Hooks/Formats/predefined.md +++ b/docs/src/content/docs/reference/Hooks/Formats/predefined.md @@ -431,7 +431,7 @@ It is recommended to use the 'android/resources' format with a custom filter instead of this format: ```javascript title="config.js" -format: fileFormats.androidResources, +format: fileFormats.androidResources, // fileFormats enum for string 'android/resources' filter: { type: "color" } @@ -457,7 +457,7 @@ It is recommended to use the 'android/resources' format with a custom filter instead of this format: ```javascript title="config.js" -format: fileFormats.androidResources, +format: fileFormats.androidResources, // fileFormats enum for string 'android/resources' filter: { type: "dimension" } @@ -483,7 +483,7 @@ It is recommended to use the 'android/resources' format with a custom filter instead of this format: ```javascript title="config.js" -format: fileFormats.androidResources, +format: fileFormats.androidResources, // fileFormats enum for string 'android/resources' filter: { type: "dimension" } @@ -510,7 +510,7 @@ It is recommended to use the 'android/resources' format with a custom filter instead of this format: ```javascript title="config.js" -format: fileFormats.androidResources, +format: fileFormats.androidResources, // fileFormats enum for string 'android/resources' filter: { type: 'time' } @@ -537,7 +537,7 @@ It is recommended to use the 'android/resources' format with a custom filter instead of this format: ```javascript title="config.js" -format: fileFormats.androidResources, +format: fileFormats.androidResources, // fileFormats enum for string 'android/resources' filter: { type: 'content' } diff --git a/docs/src/content/docs/reference/Hooks/file-headers.md b/docs/src/content/docs/reference/Hooks/file-headers.md index 514c1188d..909b53c56 100644 --- a/docs/src/content/docs/reference/Hooks/file-headers.md +++ b/docs/src/content/docs/reference/Hooks/file-headers.md @@ -117,6 +117,8 @@ or platform-specific: ~ sd-playground ```js config +import { transformGroups } from 'style-dictionary/enums'; + export default { hooks: { fileHeaders: { diff --git a/docs/src/content/docs/reference/Hooks/filters.md b/docs/src/content/docs/reference/Hooks/filters.md index c2995cd08..01c82f944 100644 --- a/docs/src/content/docs/reference/Hooks/filters.md +++ b/docs/src/content/docs/reference/Hooks/filters.md @@ -114,6 +114,8 @@ export default { ``` ```js config +import { fileFormats, transformGroups } from 'style-dictionary/enums'; + export default { hooks: { filters: { diff --git a/docs/src/content/docs/reference/Utils/format-helpers.md b/docs/src/content/docs/reference/Utils/format-helpers.md index 1baf599ef..8ff85b6d9 100644 --- a/docs/src/content/docs/reference/Utils/format-helpers.md +++ b/docs/src/content/docs/reference/Utils/format-helpers.md @@ -9,6 +9,7 @@ They are accessible at `style-dictionary/utils` entrypoint. ```javascript import StyleDictionary from 'style-dictionary'; import { fileHeader, formattedVariables } from 'style-dictionary/utils'; +import { propertyFormatNames } from 'style-dictionary/enums'; StyleDictionary.registerFormat({ name: 'myCustomFormat', @@ -54,6 +55,8 @@ which uses: prefix, indentation, separator, suffix, and commentStyle. Example: ```javascript title="build-tokens.js" +import { propertyFormatNames } from 'style-dictionary/enums'; + StyleDictionary.registerFormat({ name: 'myCustomFormat', format: function ({ dictionary, options }) { @@ -123,6 +126,8 @@ This is used to create lists of variables like Sass variables or CSS custom prop Example: ```js title="build-tokens.js" +import { propertyFormatNames } from 'style-dictionary/enums'; + StyleDictionary.registerFormat({ name: 'myCustomFormat', format: function ({ dictionary, options }) { diff --git a/docs/src/content/docs/reference/Utils/references.md b/docs/src/content/docs/reference/Utils/references.md index 92c5ecc0f..61211a361 100644 --- a/docs/src/content/docs/reference/Utils/references.md +++ b/docs/src/content/docs/reference/Utils/references.md @@ -110,6 +110,7 @@ You can use the `getReferences` utility to create your own custom formats that h ```js title="build-tokens.js" import StyleDictionary from 'style-dictionary'; import { usesReferences, getReferences, fileHeader } from 'style-dictionary/utils'; +import { transformGroups } from 'style-dictionary/enums'; const sd = new StyleDictionary({ tokens: { @@ -252,6 +253,7 @@ What that means is that you usually have to either adjust your filter or disable ```javascript title="build-tokens.js" import StyleDictionary from 'style-dictionary'; import { outputReferencesFilter } from 'style-dictionary/utils'; +import { fileFormats, transformGroups } from 'style-dictionary/enums'; const sd = new StyleDictionary({ tokens: { @@ -345,6 +347,7 @@ Live Demo: ```js config import { outputReferencesFilter } from 'style-dictionary/utils'; +import { fileFormats, transformGroups } from 'style-dictionary/enums'; export default { platforms: { @@ -374,6 +377,7 @@ the value has changed through a transitive transform compared to the original va ```javascript title="build-tokens.js" import StyleDictionary from 'style-dictionary'; import { outputReferencesTransformed } from 'style-dictionary/utils'; +import { fileFormats, transformGroups } from 'style-dictionary/enums'; const sd = new StyleDictionary({ tokens: { @@ -438,6 +442,7 @@ Live Demo: ```js config import { outputReferencesTransformed } from 'style-dictionary/utils'; +import { fileFormats, transformGroups } from 'style-dictionary/enums'; export default { platforms: { @@ -473,6 +478,7 @@ These utility functions can be quite easily combined together: ```javascript title="build-tokens.js" import StyleDictionary from 'style-dictionary'; import { outputReferencesFilter, outputReferencesTransformed } from 'style-dictionary/utils'; +import { fileFormats, transformGroups } from 'style-dictionary/enums'; const sd = new StyleDictionary({ platforms: { diff --git a/docs/src/content/docs/reference/api.md b/docs/src/content/docs/reference/api.md index 0c32d0a07..574589689 100644 --- a/docs/src/content/docs/reference/api.md +++ b/docs/src/content/docs/reference/api.md @@ -21,6 +21,7 @@ Example: ```js title="build-tokens.js" import StyleDictionary from 'style-dictionary'; +import { fileFormats, transformGroups } from 'style-dictionary/enums'; const sd = new StyleDictionary('config.json'); const sdTwo = new StyleDictionary({ @@ -48,10 +49,10 @@ import { Volume } from 'memfs'; // You will need a bundler like webpack/rollup for memfs in browser... // Or use as a prebundled fork: import memfs from '@bundled-es-modules/memfs'; -const { Volume } = memfs; +import { fileFormats, transformGroups } from 'style-dictionary/enums'; +const { Volume } = memfs; const vol = new Volume(); - const sd = new StyleDictionary( { tokens: { @@ -78,7 +79,6 @@ const sd = new StyleDictionary( ); await sd.buildAllPlatforms(); - vol.readFileSync('/variables.css'); /** * :root { @@ -127,6 +127,7 @@ Example: ```js title="build-tokens.js" import StyleDictionary from 'style-dictionary'; +import { fileFormats, transformGroups } from 'style-dictionary/enums'; const sd = new StyleDictionary('config.json'); @@ -255,7 +256,7 @@ Example: ```js title="build-web.js" // Async, so you can do `await` or .then() if you // want to execute code after buildAllPlatforms has completed -await sd.buildPlatform(transformGroups.web); +await sd.buildPlatform('web'); ``` ```bash @@ -501,6 +502,8 @@ Add a custom [format](/reference/hooks/formats) to the Style Dictionary. Example: ```js +import { fileFormats } from 'style-dictionary/enums'; + StyleDictionary.registerFormat({ name: fileFormats.json, format: function ({ dictionary, platform, options, file }) { @@ -582,6 +585,8 @@ Transforms can manipulate a token's name, value, or attributes. Example: ```js +import { transforms, transformTypes } from 'style-dictionary/enums'; + StyleDictionary.registerTransform({ name: transforms.timeSeconds, type: transformTypes.value, @@ -615,6 +620,8 @@ group of transforms. Example: ```js +import { transforms } from 'style-dictionary/enums'; + StyleDictionary.registerTransformGroup({ name: 'Swift', transforms: [transforms.attributeCti, 'size/pt', 'name'], diff --git a/docs/src/content/docs/reference/logging.md b/docs/src/content/docs/reference/logging.md index b08ec5e00..858d01221 100644 --- a/docs/src/content/docs/reference/logging.md +++ b/docs/src/content/docs/reference/logging.md @@ -7,6 +7,12 @@ sidebar: You can customize the logging behavior of Style Dictionary. ```js +import { + logBrokenReferenceLevels, + logVerbosityLevels, + logWarningLevels, +} from 'style-dictionary/enums'; + const sd = new StyleDictionary({ // these are the defaults log: { diff --git a/docs/src/content/docs/version-4/migration.md b/docs/src/content/docs/version-4/migration.md index 0355ad582..2283ef5e8 100644 --- a/docs/src/content/docs/version-4/migration.md +++ b/docs/src/content/docs/version-4/migration.md @@ -159,7 +159,7 @@ StyleDictionary.registerFormat({ // this helper is now async! because the user-passed file.fileHeader might be an async function (await fileHeader({ file })) + ':root {\n' + - formattedVariables({ format: propertyFormatNames.css, dictionary, outputReferences }) + + formattedVariables({ format: 'css', dictionary, outputReferences }) + '\n}\n' ); }, @@ -491,7 +491,7 @@ export default { platforms: { css: { files: [{ - format: fileFormats.cssVariables, + format: 'css/variables', destination: '_variables.css', filter: 'colors-only', }], @@ -551,7 +551,7 @@ export default { css: { actions: ['copy-assets'], files: [{ - format: fileFormats.cssVariables, + format: 'css/variables', destination: '_variables.css', }], }, @@ -976,7 +976,7 @@ StyleDictionary.registerFormat({ // this helper is now async! because the user-passed file.fileHeader might be an async function (await fileHeader({ file })) + ':root {\n' + - formattedVariables({ format: propertyFormatNames.css, dictionary, outputReferences }) + + formattedVariables({ format: 'css', dictionary, outputReferences }) + '\n}\n' ); }, diff --git a/examples/advanced/custom-parser/sd.config.js b/examples/advanced/custom-parser/sd.config.js index d9996a5f7..c4f14f6df 100644 --- a/examples/advanced/custom-parser/sd.config.js +++ b/examples/advanced/custom-parser/sd.config.js @@ -1,5 +1,5 @@ import StyleDictionary from 'style-dictionary'; -import { fileFormats, transformGroups } from '../../../lib/enums/index.js'; +import { fileFormats, transformGroups } from 'style-dictionary/enums'; // You can use the .registerParser() method like this StyleDictionary.registerParser({ diff --git a/examples/advanced/custom-transforms/build.js b/examples/advanced/custom-transforms/build.js index 421ec3d2e..6bb08c2f8 100644 --- a/examples/advanced/custom-transforms/build.js +++ b/examples/advanced/custom-transforms/build.js @@ -1,9 +1,11 @@ import StyleDictionary from 'style-dictionary'; import { dirname } from 'path'; import { fileURLToPath } from 'url'; -import { transforms, transformGroups, transformTypes } from '../../../lib/enums/index.js'; +import { transforms, transformGroups, transformTypes } from 'style-dictionary/enums'; const __dirname = dirname(fileURLToPath(import.meta.url)); +const { attributeCti, nameConstant, sizePx, colorCss, timeSeconds } = transforms; +const { value: transformTypeValue, name } = transformTypes; console.log('Build started...'); console.log('\n=============================================='); @@ -11,8 +13,8 @@ console.log('\n=============================================='); // REGISTER THE CUSTOM TRANSFORMS StyleDictionary.registerTransform({ - name: transforms.sizePx, // notice: the name is an override of an existing predefined method (yes, you can do it) - type: transformTypes.value, + name: sizePx, // notice: the name is an override of an existing predefined method (yes, you can do it) + type: transformTypeValue, filter: function (token) { // this is an example of a possible filter (based on the "cti" values) to show how a "filter" works return token.type === 'fontSize' || token.type === 'dimension'; @@ -24,7 +26,7 @@ StyleDictionary.registerTransform({ StyleDictionary.registerTransform({ name: 'ratio/%', - type: transformTypes.value, + type: transformTypeValue, filter: function (token) { // here we are using a custom attribute, declared in the token, to match the values where apply the transform return token.type === 'ratio'; @@ -36,7 +38,7 @@ StyleDictionary.registerTransform({ StyleDictionary.registerTransform({ name: 'hexRGB/hexARGB', - type: transformTypes.value, + type: transformTypeValue, filter: function (token) { return token.type === 'color'; }, @@ -48,7 +50,7 @@ StyleDictionary.registerTransform({ StyleDictionary.registerTransform({ name: 'unitless/sp', - type: transformTypes.value, + type: transformTypeValue, filter: function (token) { return token.type === 'fontSize'; }, @@ -61,7 +63,7 @@ StyleDictionary.registerTransform({ StyleDictionary.registerTransform({ // this is a silly example, to show how you can apply transform to names name: 'name/squiggle', - type: transformTypes.name, + type: name, // notice: if you don't specify a filter, the transformation will be applied to all the tokens transform: function (token) { return token.path.join('~'); @@ -76,24 +78,14 @@ StyleDictionary.registerTransform({ StyleDictionary.registerTransformGroup({ name: 'custom/web', // notice: here the "size/px" transform is not the pre-defined one, but the custom one we have declared above - transforms: [ - transforms.attributeCti, - transforms.nameConstant, - transforms.sizePx, - transforms.colorCss, - transforms.timeSeconds, - 'ratio/%', - ], + transforms: [attributeCti, nameConstant, sizePx, colorCss, timeSeconds, 'ratio/%'], }); StyleDictionary.registerTransformGroup({ name: 'custom/scss', // this is to show one possibility for adding a few transforms to a pre-defined group // (however, we suggest to use the previous approach, which is more explicit and clear) - transforms: StyleDictionary.transformGroup[transformGroups.scss].concat([ - transforms.sizePx, - 'ratio/%', - ]), + transforms: StyleDictionary.transformGroup[transformGroups.scss].concat([sizePx, 'ratio/%']), }); StyleDictionary.registerTransformGroup({ diff --git a/examples/advanced/font-face-rules/sd.config.js b/examples/advanced/font-face-rules/sd.config.js index 8d7c109a2..fde36a1ac 100644 --- a/examples/advanced/font-face-rules/sd.config.js +++ b/examples/advanced/font-face-rules/sd.config.js @@ -1,5 +1,5 @@ import StyleDictionary from 'style-dictionary'; -import { transformTypes } from '../../../lib/enums/index.js'; +import { transformTypes } from 'style-dictionary/enums'; // Register an "attribute" transform to codify the font's details // as named attributes. diff --git a/examples/advanced/matching-build-files/config.js b/examples/advanced/matching-build-files/config.js index d136fe36f..fc8cc39eb 100644 --- a/examples/advanced/matching-build-files/config.js +++ b/examples/advanced/matching-build-files/config.js @@ -2,20 +2,19 @@ import StyleDictionary from 'style-dictionary'; import { fileFormats, transforms, transformGroups } from 'style-dictionary/enums'; import tokens from './tokens/index.js'; +const { javascriptEs6, scssVariables } = fileFormats; +const { attributeCti, nameCamel, sizePx, colorHex } = transforms; +const { scss } = transformGroups; + export default { source: ['tokens/**/*.json'], platforms: { 'esm/category': { buildPath: 'build/js/esm/', - transforms: [ - transforms.attributeCti, - transforms.nameCamel, - transforms.sizePx, - transforms.colorHex, - ], + transforms: [attributeCti, nameCamel, sizePx, colorHex], files: tokens.map((tokenSet) => ({ destination: `${tokenSet}.js`, - format: fileFormats.javascriptEs6, + format: javascriptEs6, filter: { attributes: { category: tokenSet, @@ -25,27 +24,17 @@ export default { }, 'esm/index': { buildPath: 'build/js/esm/', - transforms: [ - transforms.attributeCti, - transforms.nameCamel, - transforms.sizePx, - transforms.colorHex, - ], + transforms: [attributeCti, nameCamel, sizePx, colorHex], files: [ { destination: `index.js`, - format: fileFormats.javascriptEs6, + format: javascriptEs6, }, ], }, 'cjs/category': { buildPath: 'build/js/cjs/', - transforms: [ - transforms.attributeCti, - transforms.nameCamel, - transforms.sizePx, - transforms.colorHex, - ], + transforms: [attributeCti, nameCamel, sizePx, colorHex], files: tokens.map((tokenSet) => ({ destination: `${tokenSet}.js`, format: 'custom/cjsmodule', @@ -58,12 +47,7 @@ export default { }, 'cjs/index': { buildPath: 'build/js/cjs/', - transforms: [ - transforms.attributeCti, - transforms.nameCamel, - transforms.sizePx, - transforms.colorHex, - ], + transforms: [attributeCti, nameCamel, sizePx, colorHex], files: [ { destination: `index.js`, @@ -74,22 +58,22 @@ export default { // Web output in scss format scss: { - transformGroup: transformGroups.scss, + transformGroup: scss, buildPath: `build/scss/`, files: [ { destination: `tokens.scss`, - format: fileFormats.scssVariables, + format: scssVariables, }, ], }, // Web output in scss partialformat 'scss/category': { - transformGroup: transformGroups.scss, + transformGroup: scss, buildPath: `build/scss/`, files: tokens.map((tokenSet) => ({ destination: `_${tokenSet}.scss`, - format: fileFormats.scssVariables, + format: scssVariables, filter: { attributes: { category: tokenSet, diff --git a/examples/advanced/multi-brand-multi-platform/build.js b/examples/advanced/multi-brand-multi-platform/build.js index 154a9199f..2220b1478 100644 --- a/examples/advanced/multi-brand-multi-platform/build.js +++ b/examples/advanced/multi-brand-multi-platform/build.js @@ -1,8 +1,10 @@ import StyleDictionary from 'style-dictionary'; import { fileFormats, transformGroups } from 'style-dictionary/enums'; -// HAVE THE STYLE DICTIONARY CONFIG DYNAMICALLY GENERATED +const { androidColors, androidDimens, androidFontDimens, iosMacros, scssVariables } = fileFormats; +const { web } = transformGroups; +// HAVE THE STYLE DICTIONARY CONFIG DYNAMICALLY GENERATED function getStyleDictionaryConfig(brand, platform) { return { source: [ @@ -12,12 +14,12 @@ function getStyleDictionaryConfig(brand, platform) { ], platforms: { web: { - transformGroup: transformGroups.web, + transformGroup: web, buildPath: `build/web/${brand}/`, files: [ { destination: 'tokens.scss', - format: fileFormats.scssVariables, + format: scssVariables, }, ], }, @@ -27,15 +29,15 @@ function getStyleDictionaryConfig(brand, platform) { files: [ { destination: 'tokens.colors.xml', - format: fileFormats.androidColors, + format: androidColors, }, { destination: 'tokens.dimens.xml', - format: fileFormats.androidDimens, + format: androidDimens, }, { destination: 'tokens.font_dimens.xml', - format: fileFormats.androidFontDimens, + format: androidFontDimens, }, ], }, @@ -45,7 +47,7 @@ function getStyleDictionaryConfig(brand, platform) { files: [ { destination: 'tokens.h', - format: fileFormats.iosMacros, + format: iosMacros, }, ], }, diff --git a/examples/advanced/node-modules-as-config-and-properties/config.js b/examples/advanced/node-modules-as-config-and-properties/config.js index 3d68afbb6..4e5e0d56e 100644 --- a/examples/advanced/node-modules-as-config-and-properties/config.js +++ b/examples/advanced/node-modules-as-config-and-properties/config.js @@ -6,13 +6,17 @@ import tokens from './tokens.js'; // allow you to not have to copy object namespaces like you normally would. // Take a look at any of the .js files in components/ or tokens/ +const { cssVariables, scssVariables, javascriptEs6, json } = fileFormats; +const { css, js } = transformGroups; +const { attributeCti, colorHex, colorRgb } = transforms; +const { value: transformTypeValue, name } = transformTypes; const buildPath = 'build/'; // You can still add custom transforms and formats like you // normally would and reference them in the config below. StyleDictionary.registerTransform({ name: 'myRegisteredTransform', - type: transformTypes.value, + type: transformTypeValue, filter: (token) => token.attributes.category === 'size', transform: (token) => `${parseInt(token.value) * 16}px`, }); @@ -40,7 +44,7 @@ export default { transforms: { // Now we can use the transform 'myTransform' below myTransform: { - type: transformTypes.name, + type: name, transform: (token) => token.path.join('_').toUpperCase(), }, }, @@ -59,12 +63,7 @@ export default { platforms: { custom: { // Using the custom transforms we defined above - transforms: [ - transforms.attributeCti, - 'myTransform', - 'myRegisteredTransform', - transforms.colorHex, - ], + transforms: [attributeCti, 'myTransform', 'myRegisteredTransform', colorHex], buildPath: buildPath, files: [ { @@ -76,30 +75,30 @@ export default { }, css: { - transformGroup: transformGroups.css, + transformGroup: css, buildPath: buildPath, files: [ { destination: 'variables.css', - format: fileFormats.cssVariables, + format: cssVariables, }, ], }, scss: { // This works, we can create new transform arrays on the fly and edit built-ins - transforms: StyleDictionary.hooks.transformGroups.scss.concat(transforms.colorRgb), + transforms: StyleDictionary.hooks.scss.concat(colorRgb), buildPath: buildPath, files: [ { destination: 'variables.scss', - format: fileFormats.scssVariables, + format: scssVariables, }, ], }, js: { - transforms: StyleDictionary.hooks.transformGroups.js.concat('myRegisteredTransform'), + transforms: StyleDictionary.hooks.js.concat('myRegisteredTransform'), buildPath: buildPath, // If you want to get super fancy, you can use node modules // to create a tokens object first, and then you can @@ -107,7 +106,7 @@ export default { // output 1 file per color namespace. files: Object.keys(tokens.color).map((colorType) => ({ destination: `${colorType}.js`, - format: fileFormats.javascriptEs6, + format: javascriptEs6, // Filters can be functions that return a boolean filter: (token) => token.attributes.type === colorType, })), @@ -115,12 +114,12 @@ export default { // You can still use built-in transformGroups and formats like before json: { - transformGroup: transformGroups.js, + transformGroup: js, buildPath: buildPath, files: [ { destination: 'tokens.json', - format: fileFormats.json, + format: json, }, ], }, diff --git a/examples/advanced/transitive-transforms/sd.config.js b/examples/advanced/transitive-transforms/sd.config.js index 93713003b..8fd787847 100644 --- a/examples/advanced/transitive-transforms/sd.config.js +++ b/examples/advanced/transitive-transforms/sd.config.js @@ -1,13 +1,15 @@ import StyleDictionary from 'style-dictionary'; import { usesReferences } from 'style-dictionary/utils'; +import { fileFormats, transforms } from 'style-dictionary/enums'; import Color from 'colorjs.io'; -import { transforms } from '../lib/enums/index.js'; + +const { attributeCti, colorCss, nameKebab } = transforms; const colorTransform = (token) => { const { value, modify = [] } = token; // This assumes "hex" format, if you want to support { h, s, l } format you have to do - // `new Color('hsl', [value.h, value.s, value.l]);` + // 'new Color('hsl', [value.h, value.s, value.l]);' const color = new Color(value); // defer until reference is resolved @@ -43,14 +45,14 @@ const colorTransform = (token) => { export default { // This will match any files ending in json or json5 // I am using json5 here so I can add comments in the token files for reference - source: [`tokens/**/*.@(json|json5)`], + source: ['tokens/**/*.@(json|json5)'], // I am directly defining transforms here // This would work if you were to call StyleDictionary.registerTransform() as well hooks: { transforms: { colorTransform: { - type: `value`, + type: 'value', // only transforms that have transitive: true will be applied to tokens // that alias/reference other tokens transitive: true, @@ -60,8 +62,8 @@ export default { // For backwards compatibility, all built-in transforms are not transitive // by default. This will make the 'color/css' transform transitive - [transforms.colorCss]: { - ...StyleDictionary.hooks.transforms[`color/css`], + [colorCss]: { + ...StyleDictionary.hooks.transforms[colorCss], transitive: true, }, }, @@ -69,12 +71,12 @@ export default { platforms: { css: { - transforms: [`attribute/cti`, `name/kebab`, `colorTransform`, `color/css`], - buildPath: `build/`, + transforms: [attributeCti, nameKebab, 'colorTransform', colorCss], + buildPath: 'build/', files: [ { - destination: `variables.css`, - format: `css/variables`, + destination: 'variables.css', + format: fileFormats.cssVariables, }, ], }, diff --git a/examples/advanced/variables-in-outputs/sd.config.js b/examples/advanced/variables-in-outputs/sd.config.js index 63cba2d86..880829787 100644 --- a/examples/advanced/variables-in-outputs/sd.config.js +++ b/examples/advanced/variables-in-outputs/sd.config.js @@ -1,5 +1,8 @@ import { fileFormats, transformGroups } from 'style-dictionary/enums'; +const { cssVariables, jsonNested, scssVariables } = fileFormats; +const { css, js } = transformGroups; + export default { hooks: { formats: { @@ -39,13 +42,13 @@ export default { files: [ { destination: 'tokens.json', - format: 'json/nested', + format: jsonNested, }, ], }, js: { buildPath: 'build/', - transformGroup: transformGroups.js, + transformGroup: js, files: [ { destination: 'tokens.js', @@ -57,19 +60,19 @@ export default { ], }, css: { - transformGroup: transformGroups.css, + transformGroup: css, buildPath: 'build/', files: [ { destination: 'tokens.css', - format: fileFormats.cssVariables, + format: cssVariables, options: { outputReferences: true, // new setting, if true will use variable references }, }, { destination: 'tokens.scss', - format: fileFormats.scssVariables, + format: scssVariables, options: { outputReferences: true, // new setting, if true will use variable references }, diff --git a/lib/Register.js b/lib/Register.js index 76efcd5ed..57df35113 100644 --- a/lib/Register.js +++ b/lib/Register.js @@ -17,6 +17,8 @@ import { transformTypes } from './enums/index.js'; * @typedef {import('../types/Config.ts').Hooks} Hooks */ +const { value: transformTypeValue, name: transformTypeName, attribute } = transformTypes; + /** * @return {Required} */ @@ -104,11 +106,7 @@ export class Register { * @param {typeof Register | Register} target */ static __registerTransform(transform, target) { - const transformTypeValues = [ - transformTypes.name, - transformTypes.value, - transformTypes.attribute, - ]; + const transformTypeValues = [transformTypeName, transformTypeValue, attribute]; const { type, name, filter, transitive, transform: transformFn } = transform; if (typeof type !== 'string') throw new Error('type must be a string'); if (transformTypeValues.indexOf(type) < 0) diff --git a/lib/StyleDictionary.js b/lib/StyleDictionary.js index 1196a12c1..6b47aa1f6 100644 --- a/lib/StyleDictionary.js +++ b/lib/StyleDictionary.js @@ -63,6 +63,9 @@ const PROPERTY_VALUE_COLLISIONS = GroupMessages.GROUP.PropertyValueCollisions; const PROPERTY_REFERENCE_WARNINGS = GroupMessages.GROUP.PropertyReferenceWarnings; const UNKNOWN_CSS_FONT_PROPS_WARNINGS = GroupMessages.GROUP.UnknownCSSFontProperties; const FILTER_WARNINGS = GroupMessages.GROUP.FilteredOutputReferences; +const { throw: throwBrokenReference } = logBrokenReferenceLevels; +const { default: defaultVerbosity, silent, verbose } = logVerbosityLevels; +const { error, warn, disabled } = logWarningLevels; /** * Style Dictionary module @@ -120,10 +123,10 @@ export default class StyleDictionary extends Register { this.usesDtcg = undefined; /** @type {LogConfig} */ this.log = { - warnings: /** @type {'warn' | 'error' | 'disabled'} */ (logWarningLevels.warn), - verbosity: /** @type {'default' | 'silent' | 'verbose'} */ (logVerbosityLevels.default), + warnings: /** @type {'warn' | 'error' | 'disabled'} */ (warn), + verbosity: /** @type {'default' | 'silent' | 'verbose'} */ (defaultVerbosity), errors: { - brokenReferences: /** @type {'throw' | 'console'} */ (logBrokenReferenceLevels.throw), + brokenReferences: /** @type {'throw' | 'console'} */ (throwBrokenReference), }, }; /** @type {string[]} */ @@ -329,17 +332,14 @@ export default class StyleDictionary extends Register { if (propValCollisionCount > 0) { const collisions = GroupMessages.flush(PROPERTY_VALUE_COLLISIONS).join('\n'); let warn = `\nToken collisions detected (${propValCollisionCount}):\n`; - if (this.log.verbosity === logVerbosityLevels.verbose) { + if (this.log.verbosity === verbose) { warn += `\n${collisions}\n\n`; } else { warn += verbosityInfo; } - if (this.log?.warnings === logWarningLevels.error) { + if (this.log?.warnings === error) { throw new Error(warn); - } else if ( - this.log?.verbosity !== logVerbosityLevels.silent && - this.log.warnings !== logWarningLevels.disabled - ) { + } else if (this.log?.verbosity !== silent && this.log.warnings !== disabled) { // eslint-disable-next-line no-console console.log(chalk.rgb(255, 140, 0).bold(warn)); } @@ -560,15 +560,15 @@ export default class StyleDictionary extends Register { const warnings = GroupMessages.flush(PROPERTY_REFERENCE_WARNINGS).join('\n'); let err = `\nReference Errors:\nSome token references (${refWarningCount}) could not be found.\n`; - if (this.log.verbosity === logVerbosityLevels.verbose) { + if (this.log.verbosity === verbose) { err += `\n${warnings}\n`; } else { err += `${verbosityInfo}\n`; } - if (this.log.errors?.brokenReferences === logBrokenReferenceLevels.throw) { + if (this.log.errors?.brokenReferences === throwBrokenReference) { throw new Error(err); - } else if (this.log.verbosity !== logVerbosityLevels.silent) { + } else if (this.log.verbosity !== silent) { console.error(err); } } @@ -578,18 +578,15 @@ export default class StyleDictionary extends Register { const warnings = GroupMessages.flush(UNKNOWN_CSS_FONT_PROPS_WARNINGS).join('\n'); let err = `\nUnknown CSS Font Shorthand properties found for ${unknownPropsWarningCount} tokens, CSS output for Font values will be missing some typography token properties as a result:\n`; - if (this.log.verbosity === logVerbosityLevels.verbose) { + if (this.log.verbosity === verbose) { err += `\n${warnings}\n`; } else { err += `${verbosityInfo}\n`; } - if (this.log.warnings === logWarningLevels.error) { + if (this.log.warnings === error) { throw new Error(err); - } else if ( - this.log.warnings !== logWarningLevels.disabled && - this.log.verbosity !== logVerbosityLevels.silent - ) { + } else if (this.log.warnings !== disabled && this.log.verbosity !== silent) { // eslint-disable-next-line no-console console.log(chalk.rgb(255, 140, 0).bold(err)); } @@ -675,12 +672,9 @@ export default class StyleDictionary extends Register { filteredTokens.tokens.constructor === Object ) { let warnNoFile = `No tokens for ${destination}. File not created.`; - if (platform.log?.warnings === logWarningLevels.error) { + if (platform.log?.warnings === error) { throw new Error(warnNoFile); - } else if ( - platform.log?.verbosity !== logVerbosityLevels.silent && - platform.log?.warnings !== logWarningLevels.disabled - ) { + } else if (platform.log?.verbosity !== silent && platform.log?.warnings !== disabled) { logs.warning.push(chalk.rgb(255, 140, 0)(warnNoFile)); } return { logs, destination: fullDestination, output: undefined }; @@ -739,7 +733,7 @@ export default class StyleDictionary extends Register { if ( (nested || tokenNamesCollisionCount === 0) && filteredReferencesCount === 0 && - platform.log?.verbosity !== logVerbosityLevels.silent + platform.log?.verbosity !== silent ) { logs.success.push(chalk.bold.green(`✔︎ ${fullDestination}`)); } else { @@ -766,15 +760,12 @@ export default class StyleDictionary extends Register { ].join('\n '), ); const warn = - platform.log?.verbosity === logVerbosityLevels.verbose + platform.log?.verbosity === verbose ? `${warnHeader}\n${title}\n ${tokenNamesCollisionWarnings}\n${help}` : `${warnHeader}\n${title}\n\n${verbosityInfo}`; - if (platform?.log?.warnings === logWarningLevels.error) { + if (platform?.log?.warnings === error) { throw new Error(warn); - } else if ( - platform.log?.verbosity !== logVerbosityLevels.silent && - platform.log?.warnings !== logWarningLevels.disabled - ) { + } else if (platform.log?.verbosity !== silent && platform.log?.warnings !== disabled) { logs.warning.push(chalk.rgb(255, 140, 0).bold(warn)); } } @@ -792,15 +783,12 @@ export default class StyleDictionary extends Register { 0, )(['This is caused when combining a filter and `outputReferences`.'].join('\n ')); const warn = - platform.log?.verbosity === logVerbosityLevels.verbose + platform.log?.verbosity === verbose ? `${warnHeader}\n${title}\nHere are the references that are used but not defined in the file:\n ${filteredReferencesWarnings}\n${help}` : `${warnHeader}\n${title}\n\n${verbosityInfo}`; - if (platform?.log?.warnings === logWarningLevels.error) { + if (platform?.log?.warnings === error) { throw new Error(warn); - } else if ( - platform.log?.verbosity !== logVerbosityLevels.silent && - platform.log?.warnings !== logWarningLevels.disabled - ) { + } else if (platform.log?.verbosity !== silent && platform.log?.warnings !== disabled) { logs.warning.push(chalk.rgb(255, 140, 0).bold(warn)); } } @@ -841,7 +829,7 @@ export default class StyleDictionary extends Register { const logs = formattedFiles.map((formattedFile) => formattedFile.logs); if (logs) { - if (this.log?.verbosity !== logVerbosityLevels.silent) { + if (this.log?.verbosity !== silent) { // eslint-disable-next-line no-console console.log('\n' + platform); } @@ -920,12 +908,9 @@ export default class StyleDictionary extends Register { files.map(({ destination, output }) => { if (output && destination) { if (typeof output !== 'string') { - if ( - this.log.verbosity !== logVerbosityLevels.silent && - this.log.warnings !== logWarningLevels.disabled - ) { + if (this.log.verbosity !== silent && this.log.warnings !== disabled) { const warn = `Content type of ${destination} is not a string, so no file was created.`; - if (this.log.warnings === logWarningLevels.error) { + if (this.log.warnings === error) { throw new Error(warn); } // eslint-disable-next-line no-console @@ -967,7 +952,7 @@ export default class StyleDictionary extends Register { // collect logs, cleanFiles happens in parallel but we want to log in sequence const logs = await cleanFiles(platformConfig, this.volume); if (logs) { - if (this.log?.verbosity !== logVerbosityLevels.silent) { + if (this.log?.verbosity !== silent) { // eslint-disable-next-line no-console console.log('\n' + platform); } diff --git a/lib/cleanFile.js b/lib/cleanFile.js index 5b1c25b40..cf3a2bf2e 100644 --- a/lib/cleanFile.js +++ b/lib/cleanFile.js @@ -21,6 +21,8 @@ import { logVerbosityLevels } from './enums/index.js'; * @typedef {import('../types/Config.ts').PlatformConfig} PlatformConfig */ +const { silent } = logVerbosityLevels; + /** * Takes the style property object and a format and returns a * string that can be written to a file. @@ -44,13 +46,13 @@ export default async function cleanFile(file, platform = {}, vol = fs) { destination = platform.buildPath + destination; } - if (!vol.existsSync(destination) && platform?.log?.verbosity !== logVerbosityLevels.silent) { + if (!vol.existsSync(destination) && platform?.log?.verbosity !== silent) { cleanLogs.success.push(chalk.bold.red('!') + ' ' + destination + ', does not exist'); return cleanLogs; } vol.unlinkSync(destination); - if (platform?.log?.verbosity !== logVerbosityLevels.silent) { + if (platform?.log?.verbosity !== silent) { cleanLogs.success.push(chalk.bold.red('-') + ' ' + destination); } return cleanLogs; diff --git a/lib/common/actions.js b/lib/common/actions.js index af25e89ca..8ca1b661c 100644 --- a/lib/common/actions.js +++ b/lib/common/actions.js @@ -21,6 +21,9 @@ import { logVerbosityLevels, actions } from '../enums/index.js'; * @typedef {import('../../types/DesignToken.ts').TransformedToken} Token */ +const { androidCopyImages, copyAssets } = actions; +const { silent } = logVerbosityLevels; + /** * @namespace Actions * @type {Record>} @@ -31,7 +34,7 @@ export default { * * @memberof Actions */ - [actions.androidCopyImages]: { + [androidCopyImages]: { do: async function (dictionary, config, options, vol = fs) { const imagesDir = `${config.buildPath}android/main/res/drawable-`; /** @@ -73,9 +76,9 @@ export default { * * @memberof Actions */ - [actions.copyAssets]: { + [copyAssets]: { do: async function (_, config, options, vol = fs) { - if (config.log?.verbosity !== logVerbosityLevels.silent) { + if (config.log?.verbosity !== silent) { // eslint-disable-next-line no-console console.log('Copying assets directory to ' + config.buildPath + 'assets'); } @@ -89,7 +92,7 @@ export default { ); }, undo: async function (_, config, options, vol = fs) { - if (config.log?.verbosity !== logVerbosityLevels.silent) { + if (config.log?.verbosity !== silent) { // eslint-disable-next-line no-console console.log('Removing assets directory from ' + config.buildPath + 'assets'); } diff --git a/lib/common/formatHelpers/createPropertyFormatter.js b/lib/common/formatHelpers/createPropertyFormatter.js index cf9dd39b6..78cd25cdf 100644 --- a/lib/common/formatHelpers/createPropertyFormatter.js +++ b/lib/common/formatHelpers/createPropertyFormatter.js @@ -21,13 +21,17 @@ import { commentStyles, commentPositions, propertyFormatNames } from '../../enum * @typedef {import('../../../types/Format.ts').OutputReferences} OutputReferences */ +const { short, long, none } = commentStyles; +const { above, inline } = commentPositions; +const { css, sass, less, stylus } = propertyFormatNames; + /** * @type {Formatting} */ const defaultFormatting = { prefix: '', - commentStyle: /** @type {'short' | 'long' | 'none'} */ (commentStyles.long), - commentPosition: /** @type {'above' | 'inline'} */ (commentPositions.inline), + commentStyle: /** @type {'short' | 'long' | 'none'} */ (long), + commentPosition: /** @type {'above' | 'inline'} */ (inline), indentation: '', separator: ' =', suffix: ';', @@ -47,13 +51,13 @@ export function addComment(to_ret_token, comment, options) { const commentsByNewLine = comment.split('\n'); if (commentsByNewLine.length > 1) { - commentPosition = /** @type {'above' | 'inline'} */ (commentPositions.above); + commentPosition = /** @type {'above' | 'inline'} */ (above); } let processedComment; switch (commentStyle) { - case commentStyles.short: - if (commentPosition === commentPositions.inline) { + case short: + if (commentPosition === inline) { processedComment = `// ${comment}`; } else { processedComment = commentsByNewLine.reduce( @@ -64,7 +68,7 @@ export function addComment(to_ret_token, comment, options) { processedComment = processedComment.replace(/\n$/g, ''); } break; - case commentStyles.long: + case long: if (commentsByNewLine.length > 1) { processedComment = commentsByNewLine.reduce( (acc, curr) => `${acc}${indentation} * ${curr}\n`, @@ -72,12 +76,12 @@ export function addComment(to_ret_token, comment, options) { ); processedComment += `${indentation} */`; } else { - processedComment = `${commentPosition === commentPositions.above ? indentation : ''}/* ${comment} */`; + processedComment = `${commentPosition === above ? indentation : ''}/* ${comment} */`; } break; } - if (commentPosition === commentPositions.above) { + if (commentPosition === above) { // put the comment above the token if it's multi-line or if commentStyle ended with -above to_ret_token = `${processedComment}\n${to_ret_token}`; } else { @@ -96,6 +100,8 @@ export function addComment(to_ret_token, comment, options) { * @name createPropertyFormatter * @example * ```javascript + * import { propertyFormatNames } from 'style-dictionary/enums'; + * * StyleDictionary.registerFormat({ * name: 'myCustomFormat', * format: function({ dictionary, options }) { @@ -131,26 +137,26 @@ export default function createPropertyFormatter({ /** @type {Formatting} */ const formatDefaults = {}; switch (format) { - case propertyFormatNames.css: + case css: formatDefaults.prefix = '--'; formatDefaults.indentation = ' '; formatDefaults.separator = ':'; break; - case propertyFormatNames.sass: + case sass: formatDefaults.prefix = '$'; - formatDefaults.commentStyle = /** @type {'short' | 'long' | 'none'} */ (commentStyles.short); + formatDefaults.commentStyle = /** @type {'short' | 'long' | 'none'} */ (short); formatDefaults.indentation = ''; formatDefaults.separator = ':'; break; - case propertyFormatNames.less: + case less: formatDefaults.prefix = '@'; - formatDefaults.commentStyle = /** @type {'short' | 'long' | 'none'} */ (commentStyles.short); + formatDefaults.commentStyle = /** @type {'short' | 'long' | 'none'} */ (short); formatDefaults.indentation = ''; formatDefaults.separator = ':'; break; - case propertyFormatNames.stylus: + case stylus: formatDefaults.prefix = '$'; - formatDefaults.commentStyle = /** @type {'short' | 'long' | 'none'} */ (commentStyles.short); + formatDefaults.commentStyle = /** @type {'short' | 'long' | 'none'} */ (short); formatDefaults.indentation = ''; formatDefaults.separator = '='; break; @@ -220,7 +226,7 @@ export default function createPropertyFormatter({ if (Object.hasOwn(ref, `${usesDtcg ? '$' : ''}value`) && Object.hasOwn(ref, 'name')) { const refVal = usesDtcg ? ref.$value : ref.value; const replaceFunc = function () { - if (format === propertyFormatNames.css) { + if (format === css) { if (outputReferenceFallbacks) { return `var(${prefix}${ref.name}, ${refVal})`; } else { @@ -243,14 +249,14 @@ export default function createPropertyFormatter({ to_ret_token += value; const themeable_token = typeof token.themeable === 'boolean' ? token.themeable : themeable; - if (format === propertyFormatNames.sass && themeable_token) { + if (format === sass && themeable_token) { to_ret_token += ' !default'; } to_ret_token += suffix; const comment = token.$description ?? token.comment; - if (comment && commentStyle !== commentStyles.none) { + if (comment && commentStyle !== none) { to_ret_token = addComment(to_ret_token, comment, mergedOptions); } diff --git a/lib/common/formatHelpers/formattedVariables.js b/lib/common/formatHelpers/formattedVariables.js index e66629fb7..99e42c00e 100644 --- a/lib/common/formatHelpers/formattedVariables.js +++ b/lib/common/formatHelpers/formattedVariables.js @@ -42,6 +42,8 @@ const defaultFormatting = { * @returns {String} * @example * ```js + * import { propertyFormatNames } from 'style-dictionary/enums'; + * * StyleDictionary.registerFormat({ * name: 'myCustomFormat', * format: function({ dictionary, options }) { diff --git a/lib/common/formats.js b/lib/common/formats.js index 5f9f6c90e..b1f713d2a 100644 --- a/lib/common/formats.js +++ b/lib/common/formats.js @@ -61,6 +61,10 @@ import { * @typedef {import('../../types/DesignToken.ts').TransformedTokens} Tokens */ +const { none } = commentStyles; +const { long, short, xml } = fileHeaderCommentStyles; +const { css, sass, less, stylus } = propertyFormatNames; + /** * @namespace Formats */ @@ -107,7 +111,7 @@ const formats = { header + `${selector} {\n` + formattedVariables({ - format: propertyFormatNames.css, + format: css, dictionary, outputReferences, outputReferenceFallbacks, @@ -138,7 +142,7 @@ const formats = { const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.long), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (long), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -172,7 +176,7 @@ const formats = { const { outputReferences, themeable = true, formatting, usesDtcg } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.long), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (long), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -180,7 +184,7 @@ const formats = { '\n' + header + formattedVariables({ - format: propertyFormatNames.sass, + format: sass, dictionary, outputReferences, themeable, @@ -209,14 +213,14 @@ const formats = { const { outputReferences, themeable = false, formatting, usesDtcg } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); return ( header + formattedVariables({ - format: propertyFormatNames.sass, + format: sass, dictionary, outputReferences, themeable, @@ -242,7 +246,7 @@ const formats = { const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -264,14 +268,14 @@ const formats = { const { outputReferences, formatting, usesDtcg } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); return ( header + formattedVariables({ - format: propertyFormatNames.less, + format: less, dictionary, outputReferences, formatting, @@ -296,7 +300,7 @@ const formats = { const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -319,14 +323,14 @@ const formats = { const outputReferences = !!platform.options?.outputReferences; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); return ( header + formattedVariables({ - format: propertyFormatNames.stylus, + format: stylus, dictionary, outputReferences, formatting, @@ -744,7 +748,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.xml), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (xml), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -779,7 +783,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.xml), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (xml), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -814,7 +818,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.xml), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (xml), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -849,7 +853,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.xml), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (xml), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -886,7 +890,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.xml), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (xml), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -922,7 +926,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.xml), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (xml), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -961,7 +965,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul dictionary, formatting: { suffix: '', - commentStyle: /** @type {'short' | 'long' | 'none'} */ (commentStyles.none), // We will add the comment in the format template + commentStyle: /** @type {'short' | 'long' | 'none'} */ (none), // We will add the comment in the format template ...formatting, }, usesDtcg, @@ -977,7 +981,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul options = setComposeObjectProperties(options); const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -1004,7 +1008,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -1022,7 +1026,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.xml), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (xml), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -1040,7 +1044,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -1058,7 +1062,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -1076,7 +1080,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -1094,7 +1098,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -1112,7 +1116,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -1130,7 +1134,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -1148,7 +1152,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -1166,7 +1170,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul const { formatting } = options; const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -1214,7 +1218,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul } const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -1262,7 +1266,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul } const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -1321,7 +1325,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul } const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); @@ -1401,7 +1405,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul * } * ``` */ - 'json/nested': function ({ dictionary, options }) { + [fileFormats.jsonNested]: function ({ dictionary, options }) { return JSON.stringify(minifyDictionary(dictionary.tokens, options.usesDtcg), null, 2) + '\n'; }, @@ -1417,7 +1421,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul * } * ``` */ - 'json/flat': function ({ dictionary, options }) { + [fileFormats.jsonFlat]: function ({ dictionary, options }) { return ( '{\n' + dictionary.allTokens @@ -1450,7 +1454,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul * } * ``` */ - 'sketch/palette': function ({ dictionary, options }) { + [fileFormats.sketchPalette]: function ({ dictionary, options }) { const to_ret = { compatibleVersion: '1.0', pluginVersion: '1.1', @@ -1487,7 +1491,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul * } * ``` */ - 'sketch/palette/v2': function ({ dictionary, options }) { + [fileFormats.sketchPaletteV2]: function ({ dictionary, options }) { const to_ret = { compatibleVersion: '2.0', pluginVersion: '2.2', @@ -1544,7 +1548,7 @@ declare const ${moduleName}: ${JSON.stringify(treeWalker(dictionary.tokens), nul } const header = await fileHeader({ file, - commentStyle: /** @type {'short' | 'long' | 'xml'} */ (fileHeaderCommentStyles.short), + commentStyle: /** @type {'short' | 'long' | 'xml'} */ (short), formatting: getFormattingCloneWithoutPrefix(formatting), options, }); diff --git a/lib/common/transformGroups.js b/lib/common/transformGroups.js index 253b90948..68e5235eb 100644 --- a/lib/common/transformGroups.js +++ b/lib/common/transformGroups.js @@ -13,6 +13,50 @@ import { transformGroups, transforms } from '../enums/index.js'; +const { + attributeCti, + attributeColor, + nameHuman, + nameCamel, + nameKebab, + nameSnake, + namePascal, + colorHex, + colorHex8android, + colorComposeColor, + colorUIColor, + colorUIColorSwift, + colorCss, + sizeObject, + sizeRemToSp, + sizeRemToDp, + sizePx, + sizeRem, + sizeRemToPt, + sizeComposeRemToSp, + sizeComposeRemToDp, + sizeComposeEm, + sizeSwiftRemToCGFloat, + htmlIcon, + contentObjCLiteral, + contentSwiftLiteral, + timeSeconds, + fontFamilyCss, + cubicBezierCss, + strokeStyleCssShorthand, + borderCssShorthand, + typographyCssShorthand, + transitionCssShorthand, + shadowCssShorthand, + assetUrl, + assetObjCLiteral, + assetSwiftLiteral, + colorHex8flutter, + contentFlutterLiteral, + assetFlutterLiteral, + sizeFlutterRemToDouble, +} = transforms; + /** * @namespace TransformGroups */ @@ -31,12 +75,7 @@ export default { * * @memberof TransformGroups */ - [transformGroups.web]: [ - transforms.attributeCti, - transforms.nameKebab, - transforms.sizePx, - transforms.colorCss, - ], + [transformGroups.web]: [attributeCti, nameKebab, sizePx, colorCss], /** * Transforms: @@ -48,12 +87,7 @@ export default { * * @memberof TransformGroups */ - [transformGroups.js]: [ - transforms.attributeCti, - transforms.namePascal, - transforms.sizeRem, - transforms.colorHex, - ], + [transformGroups.js]: [attributeCti, namePascal, sizeRem, colorHex], /** * Transforms: @@ -76,21 +110,21 @@ export default { * @memberof TransformGroups */ [transformGroups.scss]: [ - transforms.attributeCti, - transforms.nameKebab, - transforms.timeSeconds, - transforms.htmlIcon, - transforms.sizeRem, - transforms.colorCss, - transforms.assetUrl, - transforms.fontFamilyCss, - transforms.cubicBezierCss, + attributeCti, + nameKebab, + timeSeconds, + htmlIcon, + sizeRem, + colorCss, + assetUrl, + fontFamilyCss, + cubicBezierCss, // object-value tokens - transforms.strokeStyleCssShorthand, - transforms.borderCssShorthand, - transforms.typographyCssShorthand, - transforms.transitionCssShorthand, - transforms.shadowCssShorthand, + strokeStyleCssShorthand, + borderCssShorthand, + typographyCssShorthand, + transitionCssShorthand, + shadowCssShorthand, ], /** @@ -114,21 +148,21 @@ export default { * @memberof TransformGroups */ [transformGroups.css]: [ - transforms.attributeCti, - transforms.nameKebab, - transforms.timeSeconds, - transforms.htmlIcon, - transforms.sizeRem, - transforms.colorCss, - transforms.assetUrl, - transforms.fontFamilyCss, - transforms.cubicBezierCss, + attributeCti, + nameKebab, + timeSeconds, + htmlIcon, + sizeRem, + colorCss, + assetUrl, + fontFamilyCss, + cubicBezierCss, // object-value tokens - transforms.strokeStyleCssShorthand, - transforms.borderCssShorthand, - transforms.typographyCssShorthand, - transforms.transitionCssShorthand, - transforms.shadowCssShorthand, + strokeStyleCssShorthand, + borderCssShorthand, + typographyCssShorthand, + transitionCssShorthand, + shadowCssShorthand, ], /** @@ -152,21 +186,21 @@ export default { * @memberof TransformGroups */ [transformGroups.less]: [ - transforms.attributeCti, - transforms.nameKebab, - transforms.timeSeconds, - transforms.htmlIcon, - transforms.sizeRem, - transforms.colorHex, - transforms.assetUrl, - transforms.fontFamilyCss, - transforms.cubicBezierCss, + attributeCti, + nameKebab, + timeSeconds, + htmlIcon, + sizeRem, + colorHex, + assetUrl, + fontFamilyCss, + cubicBezierCss, // object-value tokens - transforms.strokeStyleCssShorthand, - transforms.borderCssShorthand, - transforms.typographyCssShorthand, - transforms.transitionCssShorthand, - transforms.shadowCssShorthand, + strokeStyleCssShorthand, + borderCssShorthand, + typographyCssShorthand, + transitionCssShorthand, + shadowCssShorthand, ], /** @@ -178,11 +212,7 @@ export default { * * @memberof TransformGroups */ - [transformGroups.html]: [ - transforms.attributeCti, - transforms.attributeColor, - transforms.nameHuman, - ], + [transformGroups.html]: [attributeCti, attributeColor, nameHuman], /** * Transforms: * @@ -194,13 +224,7 @@ export default { * * @memberof TransformGroups */ - [transformGroups.android]: [ - transforms.attributeCti, - transforms.nameSnake, - transforms.colorHex8android, - transforms.sizeRemToSp, - transforms.sizeRemToDp, - ], + [transformGroups.android]: [attributeCti, nameSnake, colorHex8android, sizeRemToSp, sizeRemToDp], /** * Transforms: * @@ -214,12 +238,12 @@ export default { * @memberof TransformGroups */ [transformGroups.compose]: [ - transforms.attributeCti, - transforms.nameCamel, - transforms.colorComposeColor, - transforms.sizeComposeEm, - transforms.sizeComposeRemToSp, - transforms.sizeComposeRemToDp, + attributeCti, + nameCamel, + colorComposeColor, + sizeComposeEm, + sizeComposeRemToSp, + sizeComposeRemToDp, ], /** * Transforms: @@ -234,12 +258,12 @@ export default { * @memberof TransformGroups */ [transformGroups.ios]: [ - transforms.attributeCti, - transforms.namePascal, - transforms.colorUIColor, - transforms.contentObjCLiteral, - transforms.assetObjCLiteral, - transforms.sizeRemToPt, + attributeCti, + namePascal, + colorUIColor, + contentObjCLiteral, + assetObjCLiteral, + sizeRemToPt, ], /** * Transforms: @@ -254,12 +278,12 @@ export default { * @memberof TransformGroups */ [transformGroups.iosSwift]: [ - transforms.attributeCti, - transforms.nameCamel, - transforms.colorUIColorSwift, - transforms.contentSwiftLiteral, - transforms.assetSwiftLiteral, - transforms.sizeSwiftRemToCGFloat, + attributeCti, + nameCamel, + colorUIColorSwift, + contentSwiftLiteral, + assetSwiftLiteral, + sizeSwiftRemToCGFloat, ], /** * Transforms: @@ -276,12 +300,12 @@ export default { * @memberof TransformGroups */ [transformGroups.iosSwiftSeparate]: [ - transforms.attributeCti, - transforms.nameCamel, - transforms.colorUIColorSwift, - transforms.contentSwiftLiteral, - transforms.assetSwiftLiteral, - transforms.sizeSwiftRemToCGFloat, + attributeCti, + nameCamel, + colorUIColorSwift, + contentSwiftLiteral, + assetSwiftLiteral, + sizeSwiftRemToCGFloat, ], /** * Transforms: @@ -290,7 +314,7 @@ export default { * * @memberof TransformGroups */ - [transformGroups.assets]: [transforms.attributeCti], + [transformGroups.assets]: [attributeCti], /** * Transforms: * @@ -304,12 +328,12 @@ export default { * @memberof TransformGroups */ [transformGroups.flutter]: [ - transforms.attributeCti, - transforms.nameCamel, - transforms.colorHex8flutter, - transforms.sizeFlutterRemToDouble, - transforms.contentFlutterLiteral, - transforms.assetFlutterLiteral, + attributeCti, + nameCamel, + colorHex8flutter, + sizeFlutterRemToDouble, + contentFlutterLiteral, + assetFlutterLiteral, ], /** * Transforms: @@ -326,12 +350,12 @@ export default { * @memberof TransformGroups */ [transformGroups.flutterSeparate]: [ - transforms.attributeCti, - transforms.nameCamel, - transforms.colorHex8flutter, - transforms.sizeFlutterRemToDouble, - transforms.contentFlutterLiteral, - transforms.assetFlutterLiteral, + attributeCti, + nameCamel, + colorHex8flutter, + sizeFlutterRemToDouble, + contentFlutterLiteral, + assetFlutterLiteral, ], /** @@ -343,5 +367,5 @@ export default { * * @memberof TransformGroups */ - [transformGroups.reactNative]: [transforms.nameCamel, transforms.colorCss, transforms.sizeObject], + [transformGroups.reactNative]: [nameCamel, colorCss, sizeObject], }; diff --git a/lib/common/transforms.js b/lib/common/transforms.js index 0b11f42cf..7fc6014f1 100644 --- a/lib/common/transforms.js +++ b/lib/common/transforms.js @@ -26,6 +26,7 @@ import { transforms, transformTypes } from '../enums/index.js'; */ const UNKNOWN_CSS_FONT_PROPS_WARNINGS = GroupMessages.GROUP.UnknownCSSFontProperties; +const { value, name, attribute } = transformTypes; /** * @param {string} str @@ -224,7 +225,7 @@ export default { * @memberof Transforms */ [transforms.attributeCti]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.attribute), + type: /** @type {'name' | 'attribute' | 'value'} */ (attribute), transform: function (token) { const attrNames = ['category', 'type', 'item', 'subitem', 'state']; const originalAttrs = token.attributes || {}; @@ -256,7 +257,7 @@ export default { * @memberof Transforms */ [transforms.attributeColor]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.attribute), + type: /** @type {'name' | 'attribute' | 'value'} */ (attribute), filter: isColor, transform: function (token, _, options) { const color = Color(options.usesDtcg ? token.$value : token.value); @@ -281,7 +282,7 @@ export default { * @memberof Transforms */ [transforms.nameHuman]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.name), + type: /** @type {'name' | 'attribute' | 'value'} */ (name), transform: function (token) { return [token.attributes?.item, token.attributes?.subitem].join(' '); }, @@ -300,7 +301,7 @@ export default { * @memberof Transforms */ [transforms.nameCamel]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.name), + type: /** @type {'name' | 'attribute' | 'value'} */ (name), transform: function (token, config) { return camelCase([config.prefix].concat(token.path).join(' '), camelOpts); }, @@ -319,7 +320,7 @@ export default { * @memberof Transforms */ [transforms.nameKebab]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.name), + type: /** @type {'name' | 'attribute' | 'value'} */ (name), transform: function (token, config) { return kebabCase([config.prefix].concat(token.path).join(' ')); }, @@ -338,7 +339,7 @@ export default { * @memberof Transforms */ [transforms.nameSnake]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.name), + type: /** @type {'name' | 'attribute' | 'value'} */ (name), transform: function (token, config) { return snakeCase([config.prefix].concat(token.path).join(' ')); }, @@ -357,7 +358,7 @@ export default { * @memberof Transforms */ [transforms.nameConstant]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.name), + type: /** @type {'name' | 'attribute' | 'value'} */ (name), transform: function (token, config) { return snakeCase([config.prefix].concat(token.path).join(' ')).toUpperCase(); }, @@ -376,7 +377,7 @@ export default { * @memberof Transforms */ [transforms.namePascal]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.name), + type: /** @type {'name' | 'attribute' | 'value'} */ (name), transform: function (token, config) { /** @param {string} str */ const upperFirst = function (str) { @@ -398,7 +399,7 @@ export default { * @memberof Transforms */ [transforms.colorRgb]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isColor, transform: function (token, _, options) { return Color(options.usesDtcg ? token.$value : token.value).toRgbString(); @@ -418,7 +419,7 @@ export default { * @memberof Transforms */ [transforms.colorHsl]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isColor, transform: function (token, _, options) { return Color(options.usesDtcg ? token.$value : token.value).toHslString(); @@ -438,7 +439,7 @@ export default { * @memberof Transforms */ [transforms.colorHsl4]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isColor, transform: function (token, _, options) { const color = Color(options.usesDtcg ? token.$value : token.value); @@ -464,7 +465,7 @@ export default { * @memberof Transforms */ [transforms.colorHex]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isColor, transform: function (token, _, options) { return Color(options.usesDtcg ? token.$value : token.value).toHexString(); @@ -483,7 +484,7 @@ export default { * @memberof Transforms */ [transforms.colorHex8]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isColor, transform: function (token, _, options) { return Color(options.usesDtcg ? token.$value : token.value).toHex8String(); @@ -502,7 +503,7 @@ export default { * @memberof Transforms */ [transforms.colorHex8android]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isColor, transform: function (token, _, options) { const str = Color(options.usesDtcg ? token.$value : token.value).toHex8(); @@ -522,7 +523,7 @@ export default { * @memberof Transforms */ [transforms.colorComposeColor]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isColor, transform: function (token, _, options) { const str = Color(options.usesDtcg ? token.$value : token.value).toHex8(); @@ -542,7 +543,7 @@ export default { * @memberof Transforms */ [transforms.colorUIColor]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isColor, transform: function (token, _, options) { const rgb = Color(options.usesDtcg ? token.$value : token.value).toRgb(); @@ -575,7 +576,7 @@ export default { * @memberof Transforms */ [transforms.colorUIColorSwift]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isColor, transform: function (token, _, options) { const { r, g, b, a } = Color(options.usesDtcg ? token.$value : token.value).toRgb(); @@ -598,7 +599,7 @@ export default { * @memberof Transforms */ [transforms.colorColorSwiftUI]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isColor, transform: function (token, _, options) { const { r, g, b, a } = Color(options.usesDtcg ? token.$value : token.value).toRgb(); @@ -622,7 +623,7 @@ export default { * @memberof Transforms */ [transforms.colorCss]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isColor, transform: function (token, _, options) { const color = Color(options.usesDtcg ? token.$value : token.value); @@ -653,7 +654,7 @@ export default { * @memberof Transforms */ [transforms.colorSketch]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isColor, transform: function (token, _, options) { let color = Color(options.usesDtcg ? token.$value : token.value).toRgb(); @@ -678,7 +679,7 @@ export default { * @memberof Transforms */ [transforms.sizeSp]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isFontSize, transform: function (token, _, options) { const nonParsedVal = options.usesDtcg ? token.$value : token.value; @@ -700,7 +701,7 @@ export default { * @memberof Transforms */ [transforms.sizeDp]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isDimension, transform: function (token, _, options) { const nonParsedVal = options.usesDtcg ? token.$value : token.value; @@ -727,7 +728,7 @@ export default { * @memberof Transforms */ [transforms.sizeObject]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: (token, options) => isDimension(token, options) || isFontSize(token, options), transform: function (token, config, options) { const value = options.usesDtcg ? token.$value : token.value; @@ -755,7 +756,7 @@ export default { * @memberof Transforms */ [transforms.sizeRemToSp]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isFontSize, transform: function (token, config, options) { const value = options.usesDtcg ? token.$value : token.value; @@ -778,7 +779,7 @@ export default { * @memberof Transforms */ [transforms.sizeRemToDp]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isDimension, transform: function (token, config, options) { const value = options.usesDtcg ? token.$value : token.value; @@ -801,7 +802,7 @@ export default { * @memberof Transforms */ [transforms.sizePx]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: (token, options) => isDimension(token, options) || isFontSize(token, options), transform: function (token, _, options) { const value = options.usesDtcg ? token.$value : token.value; @@ -823,7 +824,7 @@ export default { * @memberof Transforms */ [transforms.sizeRem]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: (token, options) => isDimension(token, options) || isFontSize(token, options), transform: function (token, _, options) { const nonParsed = options.usesDtcg ? token.$value : token.value; @@ -850,7 +851,7 @@ export default { * @memberof Transforms */ [transforms.sizeRemToPt]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: (token, options) => isDimension(token, options) || isFontSize(token, options), transform: function (token, config, options) { const value = options.usesDtcg ? token.$value : token.value; @@ -873,7 +874,7 @@ export default { * @memberof Transforms */ [transforms.sizeComposeRemToSp]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isFontSize, transform: function (token, config, options) { const value = options.usesDtcg ? token.$value : token.value; @@ -896,7 +897,7 @@ export default { * @memberof Transforms */ [transforms.sizeComposeRemToDp]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isDimension, transform: function (token, config, options) { const value = options.usesDtcg ? token.$value : token.value; @@ -919,7 +920,7 @@ export default { * @memberof Transforms */ [transforms.sizeComposeEm]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isFontSize, transform: function (token, _, options) { const value = options.usesDtcg ? token.$value : token.value; @@ -940,7 +941,7 @@ export default { * @memberof Transforms */ [transforms.sizeSwiftRemToCGFloat]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: (token, options) => isDimension(token, options) || isFontSize(token, options), transform: function (token, config, options) { const value = options.usesDtcg ? token.$value : token.value; @@ -963,7 +964,7 @@ export default { * @memberof Transforms */ [transforms.sizeRemToPx]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: (token, options) => isDimension(token, options) || isFontSize(token, options), transform: function (token, config, options) { const value = options.usesDtcg ? token.$value : token.value; @@ -987,7 +988,7 @@ export default { * @memberof Transforms */ [transforms.sizePxToRem]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: (token, options) => isDimension(token, options) || isFontSize(token, options), transform: (token, config, options) => { const value = options.usesDtcg ? token.$value : token.value; @@ -1018,7 +1019,7 @@ export default { * @memberof Transforms */ [transforms.htmlIcon]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: function (token, options) { return (options.usesDtcg ? token.$type : token.type) === 'html'; }, @@ -1047,7 +1048,7 @@ export default { * @memberof Transforms */ [transforms.contentQuote]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isContent, transform: function (token, _, options) { return wrapValueWith("'", token, options); @@ -1066,7 +1067,7 @@ export default { * @memberof Transforms */ [transforms.contentObjCLiteral]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isContent, transform: function (token, _, options) { return '@' + wrapValueWithDoubleQuote(token, options); @@ -1085,7 +1086,7 @@ export default { * @memberof Transforms */ [transforms.contentSwiftLiteral]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isContent, transform: (token, _, options) => wrapValueWithDoubleQuote(token, options), }, @@ -1102,7 +1103,7 @@ export default { * @memberof Transforms */ [transforms.timeSeconds]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: function (token, options) { return (options.usesDtcg ? token.$type : token.type) === 'time'; }, @@ -1125,7 +1126,7 @@ export default { * @memberof Transforms */ [transforms.fontFamilyCss]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), // typography properties can be references, while fontFamily prop might not transitive: true, filter: (token, options) => { @@ -1151,7 +1152,7 @@ export default { * @memberof Transforms */ [transforms.cubicBezierCss]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), // transition properties can be references, while timingFunction might not be transitive: true, filter: (token, options) => { @@ -1177,7 +1178,7 @@ export default { * @memberof Transforms */ [transforms.strokeStyleCssShorthand]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), // border properties can be references, while style property might not be transitive: true, filter: (token, options) => (options.usesDtcg ? token.$type : token.type) === 'strokeStyle', @@ -1204,7 +1205,7 @@ export default { * @memberof Transforms */ [transforms.borderCssShorthand]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), // border properties can be references transitive: true, filter: (token, options) => (options.usesDtcg ? token.$type : token.type) === 'border', @@ -1244,7 +1245,7 @@ export default { * @memberof Transforms */ [transforms.typographyCssShorthand]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), // typography properties can be references transitive: true, filter: (token, options) => (options.usesDtcg ? token.$type : token.type) === 'typography', @@ -1300,7 +1301,7 @@ export default { * @memberof Transforms */ [transforms.transitionCssShorthand]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), // transition properties can be references transitive: true, filter: (token, options) => (options.usesDtcg ? token.$type : token.type) === 'transition', @@ -1329,7 +1330,7 @@ export default { * @memberof Transforms */ [transforms.shadowCssShorthand]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), // shadow properties can be references transitive: true, filter: (token, options) => (options.usesDtcg ? token.$type : token.type) === 'shadow', @@ -1371,7 +1372,7 @@ export default { * @memberof Transforms */ [transforms.assetUrl]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isAsset, transform: function (token, _, options) { return `url("${(options.usesDtcg ? token.$value : token.value).replace(/"/g, `\\"`)}")`; @@ -1390,7 +1391,7 @@ export default { * @memberof Transforms */ [transforms.assetBase64]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isAsset, transform: function (token, _, options, vol) { return convertToBase64(options.usesDtcg ? token.$value : token.value, vol); @@ -1409,7 +1410,7 @@ export default { * @memberof Transforms */ [transforms.assetPath]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isAsset, transform: function (token, _, options) { return join(process?.cwd() ?? '/', options.usesDtcg ? token.$value : token.value); @@ -1427,7 +1428,7 @@ export default { * @memberof Transforms */ [transforms.assetObjCLiteral]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isAsset, transform: function (token, _, options) { return '@' + wrapValueWithDoubleQuote(token, options); @@ -1445,7 +1446,7 @@ export default { * @memberof Transforms */ [transforms.assetSwiftLiteral]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isAsset, transform: (token, _, options) => wrapValueWithDoubleQuote(token, options), }, @@ -1461,7 +1462,7 @@ export default { * */ [transforms.colorHex8flutter]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isColor, transform: function (token, _, options) { const str = Color(options.usesDtcg ? token.$value : token.value) @@ -1482,7 +1483,7 @@ export default { * @memberof Transforms */ [transforms.contentFlutterLiteral]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isContent, transform: (token, _, options) => wrapValueWithDoubleQuote(token, options), }, @@ -1498,7 +1499,7 @@ export default { * @memberof Transforms */ [transforms.assetFlutterLiteral]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: isAsset, transform: (token, _, options) => wrapValueWithDoubleQuote(token, options), }, @@ -1514,7 +1515,7 @@ export default { * @memberof Transforms */ [transforms.sizeFlutterRemToDouble]: { - type: /** @type {'name' | 'attribute' | 'value'} */ (transformTypes.value), + type: /** @type {'name' | 'attribute' | 'value'} */ (value), filter: (token, options) => isDimension(token, options) || isFontSize(token, options), transform: function (token, config, options) { const baseFont = getBasePxFontSize(config); diff --git a/lib/enums/fileFormats.js b/lib/enums/fileFormats.js index 1dc877719..4ed476b95 100644 --- a/lib/enums/fileFormats.js +++ b/lib/enums/fileFormats.js @@ -28,6 +28,9 @@ export const fileFormats = { javascriptUmd: 'javascript/umd', json: 'json', jsonNested: 'json/nested', + jsonFlat: 'json/flat', + sketchPalette: 'sketchPalette', + sketchPaletteV2: 'sketch/palette/v2', lessIcons: 'less/icons', lessVariables: 'less/variables', scssIcons: 'scss/icons', diff --git a/lib/transform/token.js b/lib/transform/token.js index cd6d1556b..7dcfd23bd 100644 --- a/lib/transform/token.js +++ b/lib/transform/token.js @@ -23,6 +23,12 @@ import { transformTypes } from '../enums/index.js'; * @typedef {import('../../types/Transform.ts').NameTransform} NameTransform */ +const { + value: transformTypeValue, + name: transformTypeName, + attribute: transformTypeAttribute, +} = transformTypes; + /** * Applies all transforms to a token. This is a pure function, * it returns a new token object rather than mutating it inline. @@ -42,7 +48,7 @@ export default async function transformToken(token, config, options, vol) { const transform = transforms[i]; if (!transform.filter || transform.filter(to_ret, options)) { - if (transform.type === transformTypes.name) { + if (transform.type === transformTypeName) { to_ret.name = await /** @type {Omit} */ (transform).transform( to_ret, config, @@ -53,7 +59,7 @@ export default async function transformToken(token, config, options, vol) { // Don't try to transform the value if it is referencing another value // Only try to transform if the value is not a string or if it has '{}' if ( - transform.type === transformTypes.value && + transform.type === transformTypeValue && !usesReferences(options.usesDtcg ? token.$value : token.value, config) ) { // Only transform non-referenced values (from original) @@ -73,7 +79,7 @@ export default async function transformToken(token, config, options, vol) { } } - if (transform.type === transformTypes.attribute) + if (transform.type === transformTypeAttribute) to_ret.attributes = Object.assign( {}, to_ret.attributes, diff --git a/types/File.ts b/types/File.ts index 1766a98e4..1ec397495 100644 --- a/types/File.ts +++ b/types/File.ts @@ -16,8 +16,8 @@ export interface FormattingOptions extends FormattingOverrides { // to customize the output // Be careful with indentation if the output syntax is indentation-sensitive (e.g. python, yaml) export interface FormattingOverrides { - commentStyle?: 'short' | 'long' | 'none'; // refers to JS object commentStyles in lib/buildInEnums - commentPosition?: 'above' | 'inline'; // refers to JS object commentPositions in lib/buildInEnums + commentStyle?: 'short' | 'long' | 'none'; // refers to JS object in lib/enums/commentStyles.js + commentPosition?: 'above' | 'inline'; // refers to JS object in lib/enums/commentPositions.js indentation?: string; header?: string; footer?: string;