tokens-studio/sd-transforms

[Feature]: convert Tokens Studio's `fontSizes` (plural) type to Style Dictionary's `fontSize` (singular) type

Closed this issue · 5 comments

nhoizey commented

What feature would you like?

I couldn't find where the fontSizes (plural) type from Tokens Studio becomes a fontSize (singular) type in Style Dictionary, and based on @jorenbroekema answer in this Style Dictionary issue:

  • it doesn't
  • Tokens Studio will probably change to use the singular version, as defined in the DTCG spec

So my feature request is: could sd-transforms transform fontSizes to fontSize now, even if it will not be necessary in the future?

Would you be available to contribute this feature?

  • Yes, I would like to contribute this
jorenbroekema commented

Yeah it's probably a good idea to do this on sd-transforms side of things. Since style-dictionary doesn't expose a lifecycle hook for transforming the token's type attribute, we'd have to do this in a preprocessor.

I am tempted to raise an issue for style-dictionary allowing a certain type of transform that allows you to transform the entire token like so:

StyleDictionary.registerTransform({
  name: 'plural-to-single',
  type: 'token',
  filter: (token) => ['fontSizes', 'fontWeights', 'lineHeights', 'fontFamilies'].includes(token.type),
  transform: (token) => ({
    ...token,
    type: token.type.slice(0, token.slice.length - 1)
  })
});

Would have to be aware here that this transform must run before others, otherwise they might be missed because the token type is still the old type and the transforms filters don't match for it yet.

I am a bit swamped to get v4 over the line there so I won't have time for this until then, but no matter which way we go, it should be fine to include after the v4 launch without breaking changes.

  • 👍1
nhoizey commented

@jorenbroekema thanks, I like what you suggest. 👍

jorenbroekema commented

This would be a good first issue for newcomers, although preprocessors hook and recursively looping over the dictionary object that adjust the types may be challenging to someone who's not comfortable with that. You can follow the addFontStyles code as an example though:

jorenbroekema commented

Assigned myself coz I'm fixing this now on the v1 branch :) and not just fontSizes but every token type in Tokens Studio will get aligned to the ones in DTCG spec, before it is passed off to Style Dictionary's transform lifecycle.
Instead of diving into whether "type transforms" are a good idea to add to SD, I'm just handling these conversions in the tokens-studio preprocessor instead for now. Safe option and doesn't require any major changes in Style Dictionary

  • 👍1
nhoizey commented

@jorenbroekema great! 👍