🐛(tokens) fix generators

When customized tokens have multiple entries like theme and components,
each variable definition needs to end with a ;.

.changeset/yellow-meals-mix.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-tokens": patch
+---
+
+Fix bug on sass token generation

packages/tokens/src/bin/Generators/JsGenerator.spec.ts

@@ -24,7 +24,7 @@ describe("JsGenerator", () => {
     await run(["", "", "-g", "js"]);
     expect(fs.existsSync(tokensFile)).toEqual(true);
     expect(fs.readFileSync(tokensFile).toString()).toMatchInlineSnapshot(`
-      "export const tokens = {"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"}}};
+      "export const tokens = {"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"}},"components":{"button":{"font-family":"Times New Roman"}}};
       "
     `);
   });

packages/tokens/src/bin/Generators/SassGenerator.spec.ts

@@ -52,7 +52,12 @@ describe("SassGenerator", () => {
         'input': (
           'border-color': #022858
         )
-      ) !default
+      ) !default;
+      $components: (
+        'button': (
+          'font-family': Times New Roman
+        )
+      ) !default;
       "
     `);
   });

packages/tokens/src/bin/Generators/SassGenerator.ts

@@ -44,5 +44,5 @@ function JSONToSassMap(json: Object, isDefault = true) {
     .replace(/{/g, "(")
     .replace(/}/g, ")")
     .replace(/"/g, "")
-    .concat(isDefault ? " !default" : "");
+    .concat(isDefault ? " !default;" : "");
 }

packages/tokens/src/bin/Generators/TsGenerator.spec.ts

@@ -24,7 +24,7 @@ describe("TsGenerator", () => {
     await run(["", "", "-g", "ts"]);
     expect(fs.existsSync(tokensFile)).toEqual(true);
     expect(fs.readFileSync(tokensFile).toString()).toMatchInlineSnapshot(`
-      "export const tokens = {"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"}}};
+      "export const tokens = {"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"}},"components":{"button":{"font-family":"Times New Roman"}}};
       "
     `);
   });

packages/tokens/src/bin/__mocks__/cunningham.ts

@@ -27,4 +27,9 @@ module.exports = {
       "border-color": "ref(theme.colors.ternary-900)",
     },
   },
+  components: {
+    button: {
+      "font-family": "Times New Roman",
+    },
+  },
 };

packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css

@@ -9,4 +9,5 @@
 	--c--theme--spacings--s: 1rem;
 	--c--theme--transitions--ease: linear;
 	--c--theme--input--border-color: var(--c--theme--colors--ternary-900);
+	--c--components--button--font-family: Times New Roman;
 }

packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css

@@ -9,4 +9,5 @@
 	--c--theme--spacings--s: 1rem;
 	--c--theme--transitions--ease: linear;
 	--c--theme--input--border-color: var(--c--theme--colors--ternary-900);
+	--c--components--button--font-family: Times New Roman;
 }

packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css

@@ -9,6 +9,7 @@
 	--c--theme--spacings--s: 1rem;
 	--c--theme--transitions--ease: linear;
 	--c--theme--input--border-color: var(--c--theme--colors--ternary-900);
+	--c--components--button--font-family: Times New Roman;
 } .clr-primary { color: var(--c--theme--colors--primary); }
 .clr-secondary { color: var(--c--theme--colors--secondary); }
 .clr-ternary-900 { color: var(--c--theme--colors--ternary-900); }