♻️(tokens) handle custom tokens in SassGenerator

Previously the generator was only handling hard-defined design tokens preventing to make custom tokens to appear in the scss generated file. This new way of generating the file handles custom tokens in a more generic way.
openfun · Jul 18, 2023 · cfd0f7e · cfd0f7e
1 parent d4e98d1
commit cfd0f7e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 56 deletions.
diff --git a/.changeset/bright-turtles-rescue.md 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
@@ -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
@@ -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) {