From 6c94acf50aa198a61a912cdf8f12af0c26b71d74 Mon Sep 17 00:00:00 2001 From: Catherine Aylward` Date: Mon, 15 Aug 2022 11:20:33 -0400 Subject: [PATCH] semi flattened object --- build.js | 46 +++++++++++++++++++++++++++++++++++++++------- 1 file changed, 39 insertions(+), 7 deletions(-) diff --git a/build.js b/build.js index 1776d03f..62966349 100644 --- a/build.js +++ b/build.js @@ -59,17 +59,49 @@ StyleDictionary.registerFormat({ fileHeader({ file }) + Object.entries(dictionary.properties.colors) .map((tokens) => { - return `export const ${tokens[0]} : {${Object.entries(tokens[1]).map( - (token) => { - return `${token[0]} : ${getTypeScriptType(token[1].value)}`; - } - )}};`; + const colorObj = tokens[0]; + const filtered = dictionary.allTokens.filter( + (token) => token.attributes.type === colorObj + ); + return ( + `export const ${colorObj} : { ` + + filtered.map((token) => { + return `${token.name} : ${getTypeScriptType(token.value)}`; + }) + + `};` + ); }) .join(`\n`) ); }, }); +StyleDictionary.registerFormat({ + name: `javascript/colors`, + formatter: ({ dictionary, file }) => { + return ( + fileHeader({ file }) + + `module.exports = {` + + Object.entries(dictionary.properties.colors) + .map((tokens) => { + const colorObj = tokens[0]; + const filtered = dictionary.allTokens.filter( + (token) => token.attributes.type === colorObj + ); + return ( + `${colorObj} : { ` + + filtered.map((token) => { + return `${token.name} : "${token.value}"`; + }) + + `},` + ); + }) + .join(`\n`) + + `};` + ); + }, +}); + StyleDictionary.registerTransformGroup({ name: "custom/aviary", transforms: [ @@ -130,7 +162,7 @@ const getStyleDictionaryConfig = (theme) => { filter: "filter-typography", }, { - format: "javascript/module-flat", + format: "javascript/colors", destination: core ? "colors.js" : `themes/${theme}.js`, filter: { type: "color", @@ -161,7 +193,7 @@ const getStyleDictionaryConfig = (theme) => { filter: "filter-typography", }, { - format: "javascript/module-flat", + format: "javascript/colors", destination: core ? "colors.js" : `themes/${theme}.js`, filter: { type: "color",