Style-dictionary: Flat output turns "2x" into "2-x"

[nategreen]

I have tokens like:

{
  space: {
    "2x-small": { value: "2px" },
    "x-small": { value: "4px" },
    "small": { value: "8px" },
    "medium": { value: "16px" },
    "large": { value: "32px" },
    "x-large": { value: "64px" }
  }
}

And when they get turned into Sass variables, the ones with "2x" come out as e.g.:

$space-2-x-small

Likewise in the flat Sass map format, but in the deep Sass map format, the map keys come out as 2x even though the variable referenced is 2-x:

'padding': (
      '2x-small': (
        'base': $mri-space-padding-2-x-small-base
      ),

🤔 Very strange, but is this intended? (Perhaps to ensure that the keys don't break some other output?) I'm using JSON5 format, by the way, if that's important.

style-dictionary: 2.8.0

[dbanksdesign]

I think it isn't the format, but the 'name/cti/kebab' transform that is the culprit. We are using lodash's string method, kebabCase method (and similar string functions for other name transforms). I'm guessing lodash see's "2x" and thinks those are 2 separate words... I just tested it out on the lodash documentation site's REPL

[littlefengers]

I had to make a custom transform with this package: https://github.com/blakeembrey/change-case/tree/master/packages/param-case
StyleDictionary.registerTransform({ name: 'name/cti/kebabCustom', type: 'name', transformer: function(prop,options){ return paramCase([options.prefix].concat(prop.path).join(' ')); } })

[dbanksdesign]

It might be a good idea to take a look at migrating off lodash's string methods to change-case if it fixes this issue (and does not introduce any new issues).

[chazzmoney]

@nategreen @wiese @littlefengers @samwilliscreative

We are changing our case-changing support in 3.0 to use change-case and want to create some unit tests around it. If you have any challenging ones, please submit them on #500

[chazzmoney]

This is now solved in 3.0