amzn/style-dictionary

View on GitHub
docs/transform_groups.md

Summary

Maintainability
Test Coverage
<!--
DO NOT EDIT THIS FILE DIRECTLY, THIS FILE IS GENERATED BY JSDOC!
EDIT scripts/handlebars/templates/api.hbs OR JSDOC COMMENT INSTEAD!
-->
# Transform Groups

Transform Groups are a way to easily use multiple transforms at once. They are an array of transforms. You can define a custom transform group with the [`registerTransformGroup`](api.md#registertransformgroup).

You use transformGroups in your config file under platforms > [platform] > transformGroup

```json
{
  "source": ["properties/**/*.json"],
  "platforms": {
    "android": {
      "transformGroup": "android"
    }
  }
}
```

----

## Pre-defined Transform groups

[lib/common/transformGroups.js](https://github.com/amzn/style-dictionary/blob/master/lib/common/transformGroups.js)

### web 


Transforms:

[attribute/cti](transforms.md#attributecti)
[name/cti/kebab](transforms.md#namectikebab)
[size/px](transforms.md#sizepx)
[color/css](transforms.md#colorcss)


* * *

### js 


Transforms:

[attribute/cti](transforms.md#attributecti)
[name/cti/pascal](transforms.md#namectipascal)
[size/rem](transforms.md#sizerem)
[color/hex](transforms.md#colorhex)


* * *

### scss 


Transforms:

[attribute/cti](transforms.md#attributecti)
[name/cti/kebab](transforms.md#namectikebab)
[time/seconds](transforms.md#timeseconds)
[content/icon](transforms.md#contenticon)
[size/rem](transforms.md#sizerem)
[color/css](transforms.md#colorcss)


* * *

### css 


Transforms:

[attribute/cti](transforms.md#attributecti)
[name/cti/kebab](transforms.md#namectikebab)
[time/seconds](transforms.md#timeseconds)
[content/icon](transforms.md#contenticon)
[size/rem](transforms.md#sizerem)
[color/css](transforms.md#colorcss)


* * *

### less 


Transforms:

[attribute/cti](transforms.md#attributecti)
[name/cti/kebab](transforms.md#namectikebab)
[time/seconds](transforms.md#timeseconds)
[content/icon](transforms.md#contenticon)
[size/rem](transforms.md#sizerem)
[color/hex](transforms.md#colorhex)


* * *

### html 


Transforms:

[attribute/cti](transforms.md#attributecti)
[attribute/color](transforms.md#attributecolor)
[name/human](transforms.md#namehuman)


* * *

### android 


Transforms:

[attribute/cti](transforms.md#attributecti)
[name/cti/snake](transforms.md#namectisnake)
[color/hex8android](transforms.md#colorhex8android)
[size/remToSp](transforms.md#sizeremtosp)
[size/remToDp](transforms.md#sizeremtodp)


* * *

### ios 


Transforms:

[attribute/cti](transforms.md#attributecti)
[name/cti/pascal](transforms.md#namectipascal)
[color/UIColor](transforms.md#coloruicolor)
[content/objC/literal](transforms.md#contentobjcliteral)
[asset/objC/literal](transforms.md#assetobjcliteral)
[size/remToPt](transforms.md#sizeremtopt)
[font/objC/literal](transforms.md#fontobjcliteral)


* * *

### ios-swift 


Transforms:

[attribute/cti](transforms.md#attributecti)
[name/cti/camel](transforms.md#namecticamel)
[color/UIColorSwift](transforms.md#coloruicolorswift)
[content/swift/literal](transforms.md#contentswiftliteral)
[asset/swift/literal](transforms.md#assetswiftliteral)
[size/swift/remToCGFloat](transforms.md#sizeswiftremtocgfloat)
[font/swift/literal](transforms.md#fontswiftliteral)


* * *

### ios-swift-separate 


Transforms:

[attribute/cti](transforms.md#attributecti)
[name/ti/camel](transforms.md#nameticamel)
[color/UIColorSwift](transforms.md#coloruicolorswift)
[content/swift/literal](transforms.md#contentswiftliteral)
[asset/swift/literal](transforms.md#assetswiftliteral)
[size/swift/remToCGFloat](transforms.md#sizeswiftremtocgfloat)
[font/swift/literal](transforms.md#fontswiftliteral)

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 property (e.g., StyleDictionaryColor.baseText instead of StyleDictionary.colorBaseText).


* * *

### assets 


Transforms:

[attribute/cti](transforms.md#attributecti)


* * *

### flutter 


Transforms:

[attribute/cti](transforms.md#attributecti)
[name/cti/camel](transforms.md#namecticamel)
[color/hex8flutter](transforms.md#colorhex8flutter)
[size/flutter/remToDouble](transforms.md#sizeflutterremToDouble)
[content/flutter/literal](transforms.md#contentflutterliteral)
[asset/flutter/literal](transforms.md#assetflutterliteral)
[font/flutter/literal](transforms.md#fontflutterliteral)


* * *

### flutter-separate 


Transforms:

[attribute/cti](transforms.md#attributecti)
[name/ti/camel](transforms.md#nameticamel)
[color/hex8flutter](transforms.md#colorhex8flutter)
[size/flutter/remToDouble](transforms.md#sizeflutterremToDouble)
[content/flutter/literal](transforms.md#contentflutterliteral)
[asset/flutter/literal](transforms.md#assetflutterliteral)
[font/flutter/literal](transforms.md#fontflutterliteral)

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 property (e.g., StyleDictionaryColor.baseText instead of StyleDictionary.colorBaseText).


* * *