kebabCase names

[Jonathan Price]

Hi, I am trying to generate the example theo https://github.com/salesforce-ux/theo-example
with sass tokens, like: $font-size-medium in the html format rather than the camelCase names the html outputs. (fontSizeMedium)

It looks like the options you provide should work but I must be doing something wrong.

let formatOptions = {
  type: 'html',
  options: {
    transformPropName: name => kebabCase(name)
  }
}

gulp.task('styleguide', () =>
  gulp.src('./design-tokens/app.json')
    .pipe(theo.plugins.transform('web'))
    .pipe(theo.plugins.format(formatOptions))
    .pipe(gulp.dest(paths.generated))
    .pipe(livereload())
)

But the output always is camelCase.

[Adam Putinski]

To use that option you'll need to use gulp-theo >= 2.0.0 with a peerDependency on theo >= 6.0.0.

https://github.com/salesforce-ux/gulp-theo#usage

I need to take that repo down because it hasn't been updated in a while. Sorry about that!

[Jonathan Price]

Thanks @aputinski I got this to work as you suggested.

Love this feature you have on your token page: being able to select your format to show either sass or 'lightening' . Is this going to become a feature of theo ?