amzn/style-dictionary

# Transforms

Transforms are functions that transform a property - this enables each platform to consume the property in different ways. A simple example is changing pixel values to point values for iOS and dp or sp for Android. Transforms are applied in a non-destructive way thus each platform can transform the properties. Transforms are performed sequentially, therfore the order you use transforms matters. Transforms are used in your [configuration](config.md), and can be either [pre-defined transforms](transforms.md?id=defining-custom-transforms) supplied by Style Dictionary or [custom transforms](transforms.md?id=defining-custom-transforms).

## Using Transforms
You use transforms in your config file under platforms > [platform] > transforms

```json
{
  "source": ["properties/**/*.json"],
  "platforms": {
    "android": {
      "transforms": ["attribute/cti", "name/cti/kebab", "color/hex", "size/rem"]
    }
  }
}
```

A transform consists of 4 parts: type, name, matcher, and transformer. Transforms are run on all properties where the matcher returns true. *NOTE: if you don't provide a matcher function, it will match all properties.*

## Transform Types
There are 3 types of transforms: attribute, name, and value.

**Attribute:** An attribute transform adds to the attributes object on a property. This is for including any meta-data about a property such as it's CTI or other information.

**Name:** A name transform transform the name of a property. You should really only be apply one name transformer because they will override each other if you use more than one.

**Value:** The value transform is the most important as this is the one that changes the representation of the value. Colors can be turned into hex values, rgb, hsl, hsv, etc. Value transforms have a matcher function that filter which properties that transform runs on. This allows us to only run a color transform on only the colors and not every property.

## Defining Custom Transforms
You can define custom transforms with the [`registerTransform`](api.md#registertransform).

## Pre-defined Transforms

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

> All the pre-defined transforms included use the [CTI structure](properties.md?id=category-type-item) for the match properties. If you structure your style properties differently you will need to write [custom transforms](transforms.md?id=defining-custom-transforms) or make sure the property CTIs are on the attributes of your properties.

{{#namespace name="Transforms"}}
{{>members~}}
{{/namespace}}