Is it possible to create a custom transform which contains a group of properties/values?

A common need with a lot of projects is the ability to define groups of styles together and then applying them later on.

Take Google’s Polymer project for example.

--paper-font-display1: {
  @apply --paper-font-common-base;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 40px;
}

This can then be applied to any class, or even a utility class which can be reused.

While using the concept of design tokens I’ve noticed that it would be very useful to store groups of styles like as design tokens (or design mixins if you wish).

In my mind, there would be several parts needed to make this work.

1. A syntax which allows you to define groups of values/properties in Style Dictionary
2. A transform/format that exports the group of values in a specific way
3. A way of applying those group of styles in the relevant platform

My background is in web development so I know the last two steps would be relatively easy because there are a lot of pre-processors available. I’m not that familiar with iOS and Android.

What are your thoughts? I’m interested in anyone’s thoughts on what the pros and cons of this might be.

[dbanksdesign]

For your point 2, dictionary.properties should be have references resolved and tokens transformed at this point. You should probably be referencing {size.font.base.value} to get it resolved properly. The reason is the resolution is “dumb” in that it simply copies whatever it finds at that object path and resolutions happen after transforms take place.

For excluding the groups what you could do is create 2 style dictionaries in a node file:

const StyleDictionary = require('style-dictionary');

StyleDictionary.extend({
  source: ['properties/**/*.json', 'components/**/*.json'],
  // ...
}).buildAllPlatforms();

StyleDictionary.extend({
  source: ['properties/**/*.json']
  // ...
}).buildAllPlatforms();

Or you could define a filter to filter out the component group stuff and use it on the files you don’t want it.

[dbanksdesign]

Hey @limitlessloop wanted to see if you needed any more help with this issue or if we can close it. We also have a discussion issue #268 about token organization and how to handle it properly moving forward. Thanks!