search

tokens-studio / sd-transforms

Custom transforms for Style-Dictionary, to work with Design Tokens that are exported from Tokens Studio
MIT License
175 stars 27 forks source link

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

Closed nhoizey closed 3 weeks ago

nhoizey commented 3 months ago

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:

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?

jorenbroekema commented 2 months ago

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.

nhoizey commented 2 months ago

@jorenbroekema thanks, I like what you suggest. 👍

jorenbroekema commented 2 months ago

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 1 month ago

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

nhoizey commented 1 month ago

@jorenbroekema great! 👍