diff --git a/.changeset/bright-turtles-rescue.md b/.changeset/bright-turtles-rescue.md new file mode 100644 index 0000000..4db2035 --- /dev/null +++ b/.changeset/bright-turtles-rescue.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-tokens": minor +--- + +handle custom tokens in SassGenerator diff --git a/packages/tokens/src/bin/Generators/SassGenerator.spec.ts b/packages/tokens/src/bin/Generators/SassGenerator.spec.ts index bac693a..fbe9477 100644 --- a/packages/tokens/src/bin/Generators/SassGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/SassGenerator.spec.ts @@ -25,27 +25,34 @@ describe("SassGenerator", () => { expect(fs.existsSync(sassFile)).toEqual(true); expect(fs.readFileSync(sassFile).toString()).toMatchInlineSnapshot(` - "$colors: ( - 'primary': #055FD2, - 'secondary': #DA0000, - 'ternary-900': #022858, - 'ogre-odor-is-orange-indeed': #FD5240 - ) !default; - $fontFamilies: ( - 'base': Roboto - ) !default; - $fontSizes: ( - 'm': 1rem - ) !default; - $fontWeights: ( - 'medium': 400 - ) !default; - $spacings: ( - 's': 1rem - ) !default; - $transitions: ( - 'ease': linear - ) !default; + "$theme: ( + 'colors': ( + 'primary': #055FD2, + 'secondary': #DA0000, + 'ternary-900': #022858, + 'ogre-odor-is-orange-indeed': #FD5240 + ), + 'font': ( + 'sizes': ( + 'm': 1rem + ), + 'weights': ( + 'medium': 400 + ), + 'families': ( + 'base': Roboto + ) + ), + 'spacings': ( + 's': 1rem + ), + 'transitions': ( + 'ease': linear + ), + 'input': ( + 'border-color': #022858 + ) + ) !default " `); }); diff --git a/packages/tokens/src/bin/Generators/SassGenerator.ts b/packages/tokens/src/bin/Generators/SassGenerator.ts index ed6fb67..6218f92 100644 --- a/packages/tokens/src/bin/Generators/SassGenerator.ts +++ b/packages/tokens/src/bin/Generators/SassGenerator.ts @@ -12,43 +12,20 @@ export const sassGenerator: Generator = async (tokens, opts) => { }; const generateSassMaps = (tokens: Tokens) => { - return [ - generateColorsSassMap(tokens), - generateFontSassMap(tokens), - generateSpacingsSassMap(tokens), - generateTransitionsSassMap(tokens), - ].join("\n"); + return Object.keys(tokens) + .map((key) => { + return toSassVariable(`$${key}`, tokens[key]); + }) + .join("\n"); }; -// Generate colors sass map with the ability to create sub map -// for a color with shades. -// Example: `primary-500: #000` will return `primary: (500: #000)` -const generateColorsSassMap = (tokens: Tokens) => { - return `$colors: ${JSONToSassMap(tokens.theme.colors)};`; -}; -const generateFontSassMap = (tokens: Tokens) => { - return [ - generateFontFamiliesSassMap(tokens), - generateFontSizesSassMap(tokens), - generateFontWeightsSassMap(tokens), - ].join("\n"); -}; -const generateFontFamiliesSassMap = (tokens: Tokens) => { - return `$fontFamilies: ${JSONToSassMap(tokens.theme.font.families)};`; -}; -const generateFontSizesSassMap = (tokens: Tokens) => { - return `$fontSizes: ${JSONToSassMap(tokens.theme.font.sizes)};`; -}; -const generateFontWeightsSassMap = (tokens: Tokens) => { - return `$fontWeights: ${JSONToSassMap(tokens.theme.font.weights)};`; -}; -const generateSpacingsSassMap = (tokens: Tokens) => { - return `$spacings: ${JSONToSassMap(tokens.theme.spacings)};`; -}; - -const generateTransitionsSassMap = (tokens: Tokens) => { - return `$transitions: ${JSONToSassMap(tokens.theme.transitions)};`; -}; +function toSassVariable(varName: string, value: any, isDefault = true) { + const out = `${varName}: `; + if (typeof value === "object") { + return out + JSONToSassMap(value, isDefault); + } + return out + value; +} function JSONToSassMap(json: Object, isDefault = true) { function deepQuoteObjectKeys(object: Object) {