Official Typescript Enums for Formats and Transforms?

[DarioSoller]

I think it would be a favourable improvement, if you could centrally provide Typescript Enums for a few things, rather than having everyone writing their own. This would create a smoother DX for anyone using Style-Dictionary in a Typescript project, because a single source of truth (SSOT) for these things also make future update paths easier, cause Typescript errors can guide you for identifying breaking changes in the values for the formats or transfroms.

While I do acknowledge that enums are controversial in some scenarios, I think that they would really shine here for having more explicitly defined format and transform options. As enums can be used as a type but also as a constant, I see some unused benefits for within the Style-Dictionary code base itself and for anyone using Style-Dictionary in a Typescript project.

My proposed two enums that I created myself look like the following: sd-predefined-transforms.enum.ts

// extracted from https://github.com/amzn/style-dictionary/blob/main/lib/common/transforms.js
export enum SdPredefinedTransforms {
  attributeCti = 'attribute/cti',
  attributeColor = 'attribute/color',
  nameHuman = 'name/human',
  nameCamel = 'name/camel',
  nameKebab = 'name/kebab',
  nameSnake = 'name/snake',
  nameConstant = 'name/constant',
  namePascal = 'name/pascal',
  colorRgb = 'color/rgb',
  colorHsl = 'color/hsl',
  colorHsl4 = 'color/hsl-4',
  colorHex = 'color/hex',
  colorHex8 = 'color/hex8',
  colorHex8android = 'color/hex8android',
  colorComposeColor = 'color/composeColor',
  colorUIColor = 'color/UIColor',
  colorUIColorSwift = 'color/UIColorSwift',
  colorColorSwiftUI = 'color/ColorSwiftUI',
  colorCss = 'color/css',
  colorSketch = 'color/sketch',
  sizeSp = 'size/sp',
  sizeDp = 'size/dp',
  sizeObject = 'size/object',
  sizeRemToSp = 'size/remToSp',
  sizeRemToDp = 'size/remToDp',
  sizePx = 'size/px',
  sizeRem = 'size/rem',
  sizeRemToPt = 'size/remToPt',
  sizeComposeRemToSp = 'size/compose/remToSp',
  sizeComposeRemToDp = 'size/compose/remToDp',
  sizeComposeEm = 'size/compose/em',
  sizeSwiftRemToCGFloat = 'size/swift/remToCGFloat',
  sizeRemToPx = 'size/remToPx',
  sizePxToRem = 'size/pxToRem',
  htmlIcon = 'html/icon',
  contentQuote = 'content/quote',
  contentObjCLiteral = 'content/objC/literal',
  contentSwiftLiteral = 'content/swift/literal',
  timeSeconds = 'time/seconds',
  fontFamilyCss = 'fontFamily/css',
  cubicBezierCss = 'cubicBezier/css',
  strokeStyleCssShorthand = 'strokeStyle/css/shorthand',
  borderCssShorthand = 'border/css/shorthand',
  typographyCssShorthand = 'typography/css/shorthand',
  transitionCssShorthand = 'transition/css/shorthand',
  shadowCssShorthand = 'shadow/css/shorthand',
  assetUrl = 'asset/url',
  assetBase64 = 'asset/base64',
  assetPath = 'asset/path',
  assetObjCLiteral = 'asset/objC/literal',
  assetSwiftLiteral = 'asset/swift/literal',
  colorHex8flutter = 'color/hex8flutter',
  contentFlutterLiteral = 'content/flutter/literal',
  assetFlutterLiteral = 'asset/flutter/literal',
  sizeFlutterRemToDouble = 'size/flutter/remToDouble',
}

sd-file-formats.enum.ts

// Extracted from https://github.com/amzn/style-dictionary/blob/main/lib/common/formats.js
export enum SdFileFormats {
  androidColors = 'android/colors',
  androidDimens = 'android/dimens',
  androidFontDimens = 'android/fontDimens',
  androidIntegers = 'android/integers',
  androidResources = 'android/resources',
  androidStrings = 'android/strings',
  composeObject = 'compose/object',
  cssVariables = 'css/variables',
  flutterClassDart = 'flutter/class.dart',
  iosColorsH = 'ios/colors.h',
  iosColorsM = 'ios/colors.m',
  iosMacros = 'ios/macros',
  iosPlist = 'ios/plist',
  iosSingletonH = 'ios/singleton.h',
  iosSingletonM = 'ios/singleton.m',
  iosStaticH = 'ios/static.h',
  iosStaticM = 'ios/static.m',
  iosStringsH = 'ios/strings.h',
  iosStringsM = 'ios/strings.m',
  iosSwiftAnySwift = 'ios-swift/any.swift',
  iosSwiftClassSwift = 'ios-swift/class.swift',
  iosSwiftEnumSwift = 'ios-swift/enum.swift',
  javascriptEs6 = 'javascript/es6',
  javascriptModule = 'javascript/module',
  javascriptModuleFlat = 'javascript/module-flat',
  javascriptObject = 'javascript/object',
  javascriptUmd = 'javascript/umd',
  json = 'json',
  lessIcons = 'less/icons',
  lessVariables = 'less/variables',
  scssIcons = 'scss/icons',
  scssMapDeep = 'scss/map-deep',
  scssMapFlat = 'scss/map-flat',
  scssVariables = 'scss/variables',
  stylusVariables = 'stylus/variables',
  typescriptEs6Declarations = 'typescript/es6-declarations',
  typescriptModuleDeclarations = 'typescript/module-declarations',
}

Usage example:

import { File } from 'style-dictionary';
import { SdFileFormats } from '../../enums/sd-file-formats.enum'; // Would be cool if this would also come from the Style-Dictionary import above

export const cssOutputFileConfig = (): Array<File> => {
  const files: Array<File> = [
    {
      destination: 'tokens.css',
      format: SdFileFormats.cssVariables,
    },
    {
      destination: 'tokens-refs.css',
      format: SdFileFormats.cssVariables,
      options: {
        outputReferences: true,
      },
    },
  ];
  return files;
};