Comments not visible in .scss output about theo

[aputinski]

This isn't currently supported, but it would be very easy to add:

import _ from 'lodash'
import theo from 'theo'

theo.registerFormat('scss-with-comments', json => {
  return _.map(json.props, prop => {
    let name = _.kebabCase(prop.name)
    let scss = `$${name}: ${prop.value};`
    if (prop.comment) {
      scss = `// ${prop.comment}\n${scss}`
    }
    return scss
  }).join('\n')
})

[siiron]

Your snippet works great in my case.

Thanks!

[jina]

Yay! the commenting thing might have been something in the old set up — I believe Theo got rewritten at some point so maybe that wasn't built in the second go-round. Sorry about any confusion! Glad to see you using Theo. :)

Hello @siiron and @jina ,

I'm using Theo in one of my project and I really like it! the thing is that I was trying to add comment as mentioned in this issue description with no luck, I believe it was supported by one of theo's old version?

I'm trying to transform from JSON to SCSS and I need to add comments. To be honest I have a nobby question related to the snippet provided by @siiron, where should it be added? should it be part of my gulp task?

[siiron]

Hi @abdallahQoraan,
Try adding it within your gulp-file. Then set up a gulp-task that uses the registered format (scss with comments.). My example uses .yml as a tokens-file, but I guess changing the file-type to .json is straight forward within your gulp-task.

/*******************************************************************************
 TOKENS TASK
 *******************************************************************************/
// Register new format that overrides default format for 'scss'.
// The new format also contains key/ value for 'comment'
theo.registerFormat('scss', function (json) {
    return _.map(json.props, function (prop) {
        var name = _.kebabCase(prop.name);
        var scss = '$' + name + ': ' + prop.value + ';' + '\n';
        if (prop.comment) {
            scss = '// ' + prop.comment + '\n' + scss;
        }
        return scss;
    }).join('\n');
});

gulp.task('tokens-web', function() {
    return gulp.src('path/to/tokens/*.yml')
        .pipe(theo.plugins.transform('web'))
        .pipe(theo.plugins.format('scss'))
        .pipe(rename({
            prefix: '_',
            extname: '.scss'
        }))
        .pipe(gulp.dest('path/to/scss/tokens/'));
});

Thank you @siiron for your help. Now its working like a charm! I really appreciate it :)

[kaelig]

@siiron @abdallahQoraan I just added a last minute to Theo v5: comments in most common output formats (SCSS, Sass, stylus, common.js, amd.js). Let me know what you think!

@kaelig I've updated my Theo's version to include your latest changes :) It's prefect thank you!
Kudos!