Style-dictionary: Android empty exports -- am I missing something?

[MikeCarbone]

Hi everyone! Thank you for clicking into this issue, and thanks to the team for their support. 🍻

Problem: Android transforms will export an empty-ish file if the categories aren't named correctly. For example, a category named color (and its types + tokens) will export using the 'android/colors' format correctly. However, a category named 'colors', with the same configuration, will not be recognized or exported at all. Any 'custom' category will be ignored.

What I expect: Disclaimer: I'm not an Android developer. But what I'd expect is for StyleDictionary to output each token into a file, regardless of its category name. No token should be ignored and perhaps exported to a more general xml file. Below you will see how the android formats will completely ignore unrecognized categories. Is there another format or documentation I'm missing that will enable this?

Extra details:
Here is an example StyleDictionary object that I'm using:

{
   "fun-colors":{
      "button":{
         "active":{
            "value":"red"
         },
         "hover":{
            "value":"blue"
         }
      }
   },
   "color":{
      "button":{
         "active":{
            "value":"red"
         },
         "hover":{
            "value":"blue"
         }
      }
   }
}

With the Android part of my config as:

android: {
            transformGroup: 'android',
            buildPath: `${buildPath}/android/`,
            files: [{
              destination: 'token_colors.xml',
              format: 'android/colors'
            },{
              destination: 'token_font_dimens.xml',
              format: 'android/fontDimens'
            },{
              destination: 'token_dimens.xml',
              format: 'android/dimens'
            },{
              destination: 'token_integers.xml',
              format: 'android/integers'
           },{
              destination: 'token_strings.xml',
              format: 'android/strings'
            }]
        },

Will export:
token_colors.xml (missing the "fun-colors" category)

<?xml version="1.0" encoding="UTF-8"?>

<!--
  Do not edit directly
  Generated on Wed, 19 Aug 2020 15:31:22 GMT
-->
<resources>
  <color name="color_button_active">#ffff0000</color>
  <color name="color_button_hover">#ff0000ff</color>

</resources>

token_font_dimens.xml (Empty)

<?xml version="1.0" encoding="UTF-8"?>

<!--
  Do not edit directly
  Generated on Wed, 19 Aug 2020 15:31:22 GMT
-->
<resources>

</resources>

token_dimens.xml (Empty)

<?xml version="1.0" encoding="UTF-8"?>

<!--
  Do not edit directly
  Generated on Wed, 19 Aug 2020 15:31:22 GMT
-->
<resources>

</resources>

token_strings.xml (Empty)

<?xml version="1.0" encoding="UTF-8"?>

<!--
  Do not edit directly
  Generated on Wed, 19 Aug 2020 15:31:22 GMT
-->
<resources>

</resources>

Thank you again! Cheers.

[arielwb]

Hi @carbonology,

I'm currently playing around with style dictionary and maybe I can help you ;)

if you look at the template file for the android/colors format, you will see that it filters tokens from the color category

https://github.com/amzn/style-dictionary/blob/main/lib/common/templates/android/colors.template#L18

I believe that is why fun-colors is not showing up on the output (in your example the category is fun-colors).
To use the default format, you should include colors under the color category, or you can customize the android/colors to add your specific categories ;)

The other formats also have specific category or type rules that filter out tokens. I frequently look for this kind of info in the style dictionary source files ;)

[dbanksdesign]

Thanks @arielwb! That is correct, although I think we do want to eventually remove that filter from the format (and other similar filters from android formats) because now we now have the ability to filter outside of a format so they are more flexible to other use-cases like this one.

[dbanksdesign]

Just giving an update on this, in the upcoming version we added the android/resource format which does not do any token filtering inside of it. Here is the code and some documentation about it: https://github.com/amzn/style-dictionary/blob/3.0/lib/common/formats.js#L429

With this new format you can filter tokens with a custom filter to generate android resource files in a more flexible way. This format also allows you to tell it what type of resources each token in the file should be (like string or dimen) or provide a map that takes the token's category and will map it to whatever resource type you want.

You can start using this new format by installing the next tag of style dictionary: npm install style-dictionary@next

Let me know if this solves your issue or we can provide any additional help or functionality in the next release!

[MikeCarbone]

Thanks for the update @dbanksdesign! Appreciate your work on this!

[chazzmoney]

Also, while it has nothing to do with the specific case, I think this is a good example of token types being valuable. If tokens had a specific type (color, font, image, dimension, etc), then it would be much harder to make a mistake (color/colors) like we have in the CTI approach today. It could also have big value with transforms and formats...

It would not be easy necessarily, but it might be useful. The long story of having atomic tokens and being able to group them into useful outputs might also be helped.

/sidetrack