json to scss

I have listed here the issue I am trying to solve.

stackoverflow question

Convert following from

{"component": { "button": { "padding": { "value": "{size.padding.medium.value}" }, "font-size": { "value": 2 }, "text-align": { "value": "center" }, "primary": { "modifier": "true", "background-color": { "value": "hsl(10, 80, 50)" }, "color": { "value": "{color.font.inverse.value}" } }, "secondary": { "modifier": "true", "background-color": { "value": "{color.background.primary.value}" }, "color": { "value": "{color.font.link.value}" } } } } }

to

.component-button { padding: " "; font-size: " "; & .primary { background-color: "", color: "" } }

[uptonking]

@dbanksdesign It seems that style-dictionary is so powerful that it can fully replace sass. In a design system, have u ever tried write all tokens and components in style dictionary, and then output .css files directly? we can write tokens source files in js, to use the sass equivalent vars/functions/mixins/nested. The tradeoff is to write a lot of formatters.

[chazzmoney]

@dbanksdesign It seems that style-dictionary is so powerful that it can fully replace sass. In a design system, have u ever tried write all tokens and components in style dictionary, and then output .css files directly? we can write tokens source files in js, to use the sass equivalent vars/functions/mixins/nested. The tradeoff is to write a lot of formatters.

This… really is mind-blowing. Something to think about more fully supporting in 4.0?