-
Notifications
You must be signed in to change notification settings - Fork 542
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Unable to use multiple transformers with the same token type #1317
Comments
Transforms can be chained on the same type, but yes for If you're only interested in changing the filter of a transform for a particular built-in transform, consider trying this: Example from #1292 const colorHslBuiltin = StyleDictionary.hooks.transforms['color/hsl'];
StyleDictionary.registerTransform({
...colorHslBuiltin,
filter: (token) => token.type === 'colors',
name: 'colors/hsl', // if you don't override the name it will register on the original name and override the built-in one, which might be nice
}); |
Thank you, my input is unitless, but when the token type is Giving this custom transform group:
and the following tokens: {
"font": {
"size-px": {
"$type": "dimension",
"100": {
"$value": 100
}
},
"size-rem": {
"$type": "dimension",
"100": {
"$value": 100
}
}
}
} both final tokens are in px because the Is there any possibility of seeing the proposed change and avoiding writing "fake" custom transform to change the filter? Does it make sense to have non-exclusive transforms? |
So your proposal is to somehow make The issue is that just because their filter methods overlap, it doesn't mean they can't work in conjunction with one another. |
In your chain example, you have one token input, converted to RGB, then converted to LAB, a sigle output. Yes, this chain may be useful, but honestly, we find it more common in design systems to have tokens with the same type that need different output. Platforms support many “types”, in our case, the web platform supports line height in px, em, rem, etc… both are “dimension” types with different use cases and one doesn’t exclude the others. In the example above, if we want to convert the same token to multiple units we are forced to create a custom transform. If there is a way to make chaining and this change work together is even better. |
I think if you want to transform two tokens differently yet they share the same type, you'll have to add some metadata to the token to be able to distinguish between these tokens if the type is the same. I'm not convinced currently about your proposed changes to complicate the transforms API to be able to do this when there's an easier way to do it already |
What easier way? Defining custom fake transforms? |
Yes overriding the built-in transforms either partially or entirely, or creating a custom transform and using that instead. The built-ins aren't meant to be perfect for everyone - custom transforms is already how people get around it, overriding the built-ins is often more convenient but just needs more documentation |
ok. It's worth taking into consideration that the software's assumption of only one output for token type may not align conceptually with the diverse needs of different platforms or design systems. For instance, using the type "dimension/rem" could potentially lead to the software enforcing the use of only rem throughout the platform. It's definitely a point worth considering. |
The issue
Hello, in our design system we have some tokens that must be converted to px and other to rem. Since both
size/pxToRem
andsize/px
, check on thetoken.type === 'dimension'
we can't use the built-in transformers because the output would be all px or all rem. We are forced to create custom transformers only to change thefilter
function and check on differenttype
. Doing so makes the built-in transformers concept a bit useless.Possible solution
In our opinion, transformers should have unique
filter
check to being able to combine them on the same platform. For instancesize/pxToRem
could matchtype === 'dimension-px-to-rem'
andsize/px
could matchtype === 'dimension-px'
. This way we can convert some tokens to px, and some to remThe text was updated successfully, but these errors were encountered: