I have the exact same issue as this thread: get scss from design tokens json file using style dictionary. The answer mentioned in this thread is great, but is there a way to specify some setting so that the style-dictionary automatically converts the style object to the way its mentioned in the answer in the mentioned thread?
I basically want to convert
"Display-2xl": {
"Regular": {
"value": {
"fontFamily": "{fontFamilies.inter.value}",
"fontWeight": "{fontWeights.inter-0.value}",
"fontSize": "$fontSize.10",
},
"type": "typography"
},
}
to
"Display-2xl": {
"Regular": {
"type": "typography",
"fontFamily": {
"value": "{fontFamilies.inter.value}"
},
"fontWeight": {
"value": "{fontWeights.inter-0.value}"
},
"fontSize": {
"value": "{fontSize.10}"
}
}
}
by adding some format / transform. How can I achieve this?
My config.json object:
const StyleDictionary = require("style-dictionary").extend({
source: ["./tokens.json"],
platforms: {
scss: {
transformGroup: "scss",
buildPath: "src/tokens/",
files: [
{
destination: "_colors.scss",
format: "scss/variables",
filter: {
type: "color",
},
},
{
destination: "_shadows.scss",
format: "scss/variables",
filter: {
type: "boxShadow",
},
},
{
destination: "_fontFamilies.scss",
format: "scss/variables",
filter: {
type: "fontFamilies",
},
},
{
destination: "_lineHeights.scss",
format: "scss/variables",
filter: {
type: "lineHeights",
},
},
{
destination: "_fontWeights.scss",
format: "scss/variables",
filter: {
type: "fontWeights",
},
},
{
destination: "_fontSizes.scss",
format: "scss/variables",
filter: {
type: "fontSizes",
},
},
{
destination: "_letterSpacing.scss",
format: "scss/variables",
filter: {
type: "letterSpacing",
},
},
{
destination: "_paragraphSpacing.scss",
format: "scss/variables",
filter: {
type: "paragraphSpacing",
},
},
{
destination: "_typography.scss",
format: "scss/variables",
filter: {
type: "typography",
},
},
{
destination: "_textCase.scss",
format: "scss/variables",
filter: {
type: "textCase",
},
},
{
destination: "_textDecoration.scss",
format: "scss/variables",
filter: {
type: "textDecoration",
},
},
],
},
},
});
StyleDictionary.buildAllPlatforms();
The question makes in my opinion no sense, the solution is mentioned on the linked site already:
Beside that the json represents a configuration and has to be created but a conversion from one json configuration format to another json configuration format is probably not part of the framework, concerning this the question might be just a bit misleading.
Nevertheless, both configurations can be used and should have the same result.