style-dictionary/lib/common/transformGroups.js

Style once, use everywhere. A build system for creating cross-platform styles.

/*
 * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
 * the License. A copy of the License is located at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
 * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
 * and limitations under the License.
 */

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
 */

/**
 * @type {Record<string, string[]>}
 */
export default {
  /**
   * Transforms:
   *
   * [attribute/cti](/reference/hooks/transforms/predefined#attributecti)
   * [name/kebab](/reference/hooks/transforms/predefined#namectikebab)
   * [size/px](/reference/hooks/transforms/predefined#sizepx)
   * [color/css](/reference/hooks/transforms/predefined#colorcss)
   *
   * @memberof TransformGroups
   */
  [transformGroups.web]: [attributeCti, nameKebab, sizePx, colorCss],

  /**
   * Transforms:
   *
   * [attribute/cti](/reference/hooks/transforms/predefined#attributecti)
   * [name/pascal](/reference/hooks/transforms/predefined#namectipascal)
   * [size/rem](/reference/hooks/transforms/predefined#sizerem)
   * [color/hex](/reference/hooks/transforms/predefined#colorhex)
   *
   * @memberof TransformGroups
   */
  [transformGroups.js]: [attributeCti, namePascal, sizeRem, colorHex],

  /**
   * Transforms:
   *
   * [attribute/cti](/reference/hooks/transforms/predefined#attributecti)
   * [name/kebab](/reference/hooks/transforms/predefined#namectikebab)
   * [time/seconds](/reference/hooks/transforms/predefined#timeseconds)
   * [html/icon](/reference/hooks/transforms/predefined#htmlicon)
   * [size/rem](/reference/hooks/transforms/predefined#sizerem)
   * [color/css](/reference/hooks/transforms/predefined#colorcss)
   * [asset/url](/reference/hooks/transforms/predefined#asset/url)
   * [fontFamily/css](/reference/hooks/transforms/predefined#fontfamilycss)
   * [cubicBezier/css](/reference/hooks/transforms/predefined#cubicbezier)
   * [strokeStyle/css/shorthand](/reference/hooks/transforms/predefined#strokestylecssshorthand)
   * [border/css/shorthand](/reference/hooks/transforms/predefined#bordercssshorthand)
   * [typography/css/shorthand](/reference/hooks/transforms/predefined#typographycssshorthand)
   * [transition/css/shorthand](/reference/hooks/transforms/predefined#transitioncssshorthand)
   * [shadow/css/shorthand](/reference/hooks/transforms/predefined#shadowcssshorthand)
   *
   * @memberof TransformGroups
   */
  [transformGroups.scss]: [
    attributeCti,
    nameKebab,
    timeSeconds,
    htmlIcon,
    sizeRem,
    colorCss,
    assetUrl,
    fontFamilyCss,
    cubicBezierCss,
    // object-value tokens
    strokeStyleCssShorthand,
    borderCssShorthand,
    typographyCssShorthand,
    transitionCssShorthand,
    shadowCssShorthand,
  ],

  /**
   * Transforms:
   *
   * [attribute/cti](/reference/hooks/transforms/predefined#attributecti)
   * [name/kebab](/reference/hooks/transforms/predefined#namectikebab)
   * [time/seconds](/reference/hooks/transforms/predefined#timeseconds)
   * [html/icon](/reference/hooks/transforms/predefined#htmlicon)
   * [size/rem](/reference/hooks/transforms/predefined#sizerem)
   * [color/css](/reference/hooks/transforms/predefined#colorcss)
   * [asset/url](/reference/hooks/transforms/predefined#asset/url)
   * [fontFamily/css](/reference/hooks/transforms/predefined#fontfamilycss)
   * [cubicBezier/css](/reference/hooks/transforms/predefined#cubicbezier)
   * [strokeStyle/css/shorthand](/reference/hooks/transforms/predefined#strokestylecssshorthand)
   * [border/css/shorthand](/reference/hooks/transforms/predefined#bordercssshorthand)
   * [typography/css/shorthand](/reference/hooks/transforms/predefined#typographycssshorthand)
   * [transition/css/shorthand](/reference/hooks/transforms/predefined#transitioncssshorthand)
   * [shadow/css/shorthand](/reference/hooks/transforms/predefined#shadowcssshorthand)
   *
   * @memberof TransformGroups
   */
  [transformGroups.css]: [
    attributeCti,
    nameKebab,
    timeSeconds,
    htmlIcon,
    sizeRem,
    colorCss,
    assetUrl,
    fontFamilyCss,
    cubicBezierCss,
    // object-value tokens
    strokeStyleCssShorthand,
    borderCssShorthand,
    typographyCssShorthand,
    transitionCssShorthand,
    shadowCssShorthand,
  ],

  /**
   * Transforms:
   *
   * [attribute/cti](/reference/hooks/transforms/predefined#attributecti)
   * [name/kebab](/reference/hooks/transforms/predefined#namectikebab)
   * [time/seconds](/reference/hooks/transforms/predefined#timeseconds)
   * [html/icon](/reference/hooks/transforms/predefined#htmlicon)
   * [size/rem](/reference/hooks/transforms/predefined#sizerem)
   * [color/hex](/reference/hooks/transforms/predefined#colorhex)
   * [asset/url](/reference/hooks/transforms/predefined#asset/url)
   * [fontFamily/css](/reference/hooks/transforms/predefined#fontfamilycss)
   * [cubicBezier/css](/reference/hooks/transforms/predefined#cubicbezier)
   * [strokeStyle/css/shorthand](/reference/hooks/transforms/predefined#strokestylecssshorthand)
   * [border/css/shorthand](/reference/hooks/transforms/predefined#bordercssshorthand)
   * [typography/css/shorthand](/reference/hooks/transforms/predefined#typographycssshorthand)
   * [transition/css/shorthand](/reference/hooks/transforms/predefined#transitioncssshorthand)
   * [shadow/css/shorthand](/reference/hooks/transforms/predefined#shadowcssshorthand)
   *
   * @memberof TransformGroups
   */
  [transformGroups.less]: [
    attributeCti,
    nameKebab,
    timeSeconds,
    htmlIcon,
    sizeRem,
    colorHex,
    assetUrl,
    fontFamilyCss,
    cubicBezierCss,
    // object-value tokens
    strokeStyleCssShorthand,
    borderCssShorthand,
    typographyCssShorthand,
    transitionCssShorthand,
    shadowCssShorthand,
  ],

  /**
   * Transforms:
   *
   * [attribute/cti](/reference/hooks/transforms/predefined#attributecti)
   * [attribute/color](/reference/hooks/transforms/predefined#attributecolor)
   * [name/human](/reference/hooks/transforms/predefined#namehuman)
   *
   * @memberof TransformGroups
   */
  [transformGroups.html]: [attributeCti, attributeColor, nameHuman],
  /**
   * Transforms:
   *
   * [attribute/cti](/reference/hooks/transforms/predefined#attributecti)
   * [name/snake](/reference/hooks/transforms/predefined#namectisnake)
   * [color/hex8android](/reference/hooks/transforms/predefined#colorhex8android)
   * [size/remToSp](/reference/hooks/transforms/predefined#sizeremtosp)
   * [size/remToDp](/reference/hooks/transforms/predefined#sizeremtodp)
   *
   * @memberof TransformGroups
   */
  [transformGroups.android]: [attributeCti, nameSnake, colorHex8android, sizeRemToSp, sizeRemToDp],
  /**
   * Transforms:
   *
   * [attribute/cti](/reference/hooks/transforms/predefined#attributecti)
   * [name/camel](/reference/hooks/transforms/predefined#namecamel)
   * [color/composeColor](/reference/hooks/transforms/predefined#colorcomposecolor)
   * [size/compose/em](/reference/hooks/transforms/predefined#sizecomposeem)
   * [size/compose/remToSp](/reference/hooks/transforms/predefined#sizecomposeremtosp)
   * [size/compose/remToDp](/reference/hooks/transforms/predefined#sizecomposeremtodp)
   *
   * @memberof TransformGroups
   */
  [transformGroups.compose]: [
    attributeCti,
    nameCamel,
    colorComposeColor,
    sizeComposeEm,
    sizeComposeRemToSp,
    sizeComposeRemToDp,
  ],
  /**
   * Transforms:
   *
   * [attribute/cti](/reference/hooks/transforms/predefined#attributecti)
   * [name/pascal](/reference/hooks/transforms/predefined#namectipascal)
   * [color/UIColor](/reference/hooks/transforms/predefined#coloruicolor)
   * [content/objC/literal](/reference/hooks/transforms/predefined#contentobjcliteral)
   * [asset/objC/literal](/reference/hooks/transforms/predefined#assetobjcliteral)
   * [size/remToPt](/reference/hooks/transforms/predefined#sizeremtopt)
   *
   * @memberof TransformGroups
   */
  [transformGroups.ios]: [
    attributeCti,
    namePascal,
    colorUIColor,
    contentObjCLiteral,
    assetObjCLiteral,
    sizeRemToPt,
  ],
  /**
   * Transforms:
   *
   * [attribute/cti](/reference/hooks/transforms/predefined#attributecti)
   * [name/camel](/reference/hooks/transforms/predefined#namecamel)
   * [color/UIColorSwift](/reference/hooks/transforms/predefined#coloruicolorswift)
   * [content/swift/literal](/reference/hooks/transforms/predefined#contentswiftliteral)
   * [asset/swift/literal](/reference/hooks/transforms/predefined#assetswiftliteral)
   * [size/swift/remToCGFloat](/reference/hooks/transforms/predefined#sizeswiftremtocgfloat)
   *
   * @memberof TransformGroups
   */
  [transformGroups.iosSwift]: [
    attributeCti,
    nameCamel,
    colorUIColorSwift,
    contentSwiftLiteral,
    assetSwiftLiteral,
    sizeSwiftRemToCGFloat,
  ],
  /**
   * Transforms:
   *
   * [attribute/cti](/reference/hooks/transforms/predefined#attributecti)
   * [name/camel](/reference/hooks/transforms/predefined#namecamel)
   * [color/UIColorSwift](/reference/hooks/transforms/predefined#coloruicolorswift)
   * [content/swift/literal](/reference/hooks/transforms/predefined#contentswiftliteral)
   * [asset/swift/literal](/reference/hooks/transforms/predefined#assetswiftliteral)
   * [size/swift/remToCGFloat](/reference/hooks/transforms/predefined#sizeswiftremtocgfloat)
   *
   * This is to be used if you want to have separate files per category and you don't want the category (e.g., color) as the lead value in the name of the token (e.g., StyleDictionaryColor.baseText instead of StyleDictionary.colorBaseText).
   *
   * @memberof TransformGroups
   */
  [transformGroups.iosSwiftSeparate]: [
    attributeCti,
    nameCamel,
    colorUIColorSwift,
    contentSwiftLiteral,
    assetSwiftLiteral,
    sizeSwiftRemToCGFloat,
  ],
  /**
   * Transforms:
   *
   * [attribute/cti](/reference/hooks/transforms/predefined#attributecti)
   *
   * @memberof TransformGroups
   */
  [transformGroups.assets]: [attributeCti],
  /**
   * Transforms:
   *
   * [attribute/cti](/reference/hooks/transforms/predefined#attributecti)
   * [name/camel](/reference/hooks/transforms/predefined#nameccamel)
   * [color/hex8flutter](/reference/hooks/transforms/predefined#colorhex8flutter)
   * [size/flutter/remToDouble](/reference/hooks/transforms/predefined#sizeflutterremtodouble)
   * [content/flutter/literal](/reference/hooks/transforms/predefined#contentflutterliteral)
   * [asset/flutter/literal](/reference/hooks/transforms/predefined#assetflutterliteral)
   *
   * @memberof TransformGroups
   */
  [transformGroups.flutter]: [
    attributeCti,
    nameCamel,
    colorHex8flutter,
    sizeFlutterRemToDouble,
    contentFlutterLiteral,
    assetFlutterLiteral,
  ],
  /**
   * Transforms:
   *
   * [attribute/cti](/reference/hooks/transforms/predefined#attributecti)
   * [name/camel](/reference/hooks/transforms/predefined#namecamel)
   * [color/hex8flutter](/reference/hooks/transforms/predefined#colorhex8flutter)
   * [size/flutter/remToDouble](/reference/hooks/transforms/predefined#sizeflutterremtodouble)
   * [content/flutter/literal](/reference/hooks/transforms/predefined#contentflutterliteral)
   * [asset/flutter/literal](/reference/hooks/transforms/predefined#assetflutterliteral)
   *
   * This is to be used if you want to have separate files per category and you don't want the category (e.g., color) as the lead value in the name of the token (e.g., StyleDictionaryColor.baseText instead of StyleDictionary.colorBaseText).
   *
   * @memberof TransformGroups
   */
  [transformGroups.flutterSeparate]: [
    attributeCti,
    nameCamel,
    colorHex8flutter,
    sizeFlutterRemToDouble,
    contentFlutterLiteral,
    assetFlutterLiteral,
  ],

  /**
   * Transforms:
   *
   * [name/camel](/reference/hooks/transforms/predefined#namecamel)
   * [size/object](/reference/hooks/transforms/predefined#sizeobject)
   * [color/css](/reference/hooks/transforms/predefined#colorcss)
   *
   * @memberof TransformGroups
   */
  [transformGroups.reactNative]: [nameCamel, colorCss, sizeObject],
};