style-dictionary
style-dictionary copied to clipboard
Behavior of name/cti/snake when strings are followed by digits, e.g. "purple500"
Hi! 👋🏻
When I have tokens like these
{
"color": {
"base": {
"purple100": { "value": "#27103F" },
"purple200": { "value": "#42105F" },
...
and run them through the name/cti/snake transform, I end up with names like these (see playground):
color_base_purple100
color_base_purple200
However, I was expecting something more like this:
color_base_purple_100
color_base_purple_200
Why was I expecting that? Well, that's a fun story... 😃 So... I just happened to realize that I hadn't upgraded Style Dictionary in a while... and by that I mean like a really long time (my bad)... so I upgraded from v3.0.0-rc.6 to v3.7.0 and discovered then that my Android output changed from color_base_purple_100
to color_base_purple100
... 🤔
After some digging and trying to find in what version this behavior changed, I discovered it was in v3.0.0-rc.7... 😂 More precisely because of lodash being replaced (ebfba3ea4fe977a0a945189587a4cdc8fdf8a61b) and snakeCase
in lodash being replaced with snakeCase
from change-case.
Mostly these are identical, however in one case (no pun intended) they are not:
const _ = require('lodash');
const changeCase = require('change-case');
console.log(_.snakeCase('purple500')); // Outputs purple_500
console.log(changeCase.snakeCase('purple500')); // Outputs purple500
console.log(_.snakeCase('TestV2')); // Outputs test_v_2
console.log(changeCase.snakeCase('TestV2')); // Outputs test_v2
Now I'm not the guy to answer which one is more right (but you can probably guess which one I prefer), or in any position to complain about a breaking change introduced in 3.0.0-rc.7 a year ago... 😅 but I would like to bring up the question of:
Is the current behavior of name/cti/snake in Style Dictionary preferred? Or should it be more like that of snakeCase in lodash..?
I could of course solve my specific case by either:
- creating a new transform that uses my preferred way of
snakeCase
and use that instead ofname/cti/snake
, or - setup my tokens so the
100
,200
and so on are nested belowpurple
...
Anyway, thanks for reading and getting a glimpse of what was my friday evening 😄
@oscarb if you search in the issues, I think it's already been discussed. have a look, I think you will find the answer.
@oscarb if you search in the issues, I think it's already been discussed. have a look, I think you will find the answer.
I searched for snakeCase in closed issues and didn't find anything. However, I see now that if I search for lodash
and case
there seems to be some related issues, #449 being one. Will read up on them, thanks!
Update: Haha, I wasn't alone in thinking this was an issue... I was just the only one using snakeCase
as my example 😂
should have widened my perspective a bit when searching...
After going through the search results for case
I found these related ones: #460, #300 and #449. And now if anyone searches for snakeCase
they will find one too 😄
Feel free to close this one unless you want to discuss the implementation details of snakeCase
specifically.
While I personally would like purple500
to turn into purple_500
, I can totally see how someone else would like 2x-small
to turn into 2x_small
... guess you can't satisfy everyone right? 😅
Oh well, there's always custom transforms which I'm happy for 👍🏻