Android empty exports -- am I missing something?

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.

[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

[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!