From b9d2f2955f2abf9a97a659ce6acf7640d5debe85 Mon Sep 17 00:00:00 2001
From: Romain Le Cellier <rlecellier@gmail.com>
Date: Thu, 27 Apr 2023 14:38:00 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(tokens)=20fix=20scss=20generator?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

scss maps expect keys between quotes like:
$map = (
  'key': value,
)
---
 .changeset/nasty-donuts-run.md                 |  5 +++++
 .../src/bin/Generators/SassGenerator.spec.ts   | 18 +++++++++---------
 .../tokens/src/bin/Generators/SassGenerator.ts | 14 +++++++++++++-
 3 files changed, 27 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/nasty-donuts-run.md

diff --git a/.changeset/nasty-donuts-run.md b/.changeset/nasty-donuts-run.md
new file mode 100644
index 0000000..7c161d1
--- /dev/null
+++ b/.changeset/nasty-donuts-run.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-tokens": minor
+---
+
+Fix SassGenerator
diff --git a/packages/tokens/src/bin/Generators/SassGenerator.spec.ts b/packages/tokens/src/bin/Generators/SassGenerator.spec.ts
index 90a6eaf..f7b2c32 100644
--- a/packages/tokens/src/bin/Generators/SassGenerator.spec.ts
+++ b/packages/tokens/src/bin/Generators/SassGenerator.spec.ts
@@ -26,26 +26,26 @@ describe("SassGenerator", () => {
     expect(fs.existsSync(sassFile)).toEqual(true);
     expect(fs.readFileSync(sassFile).toString()).toMatchInlineSnapshot(`
       "$colors: (
-        primary: #055FD2,
-        secondary: #DA0000,
-        ternary: (
-          900: #022858
+        'primary': #055FD2,
+        'secondary': #DA0000,
+        'ternary': (
+          '900': #022858
         )
       );
       $fontFamilies: (
-        base: Roboto
+        'base': Roboto
       );
       $fontSizes: (
-        m: 1rem
+        'm': 1rem
       );
       $fontWeights: (
-        medium: 400
+        'medium': 400
       );
       $spacings: (
-        s: 1rem
+        's': 1rem
       );
       $transitions: (
-        ease: linear
+        'ease': linear
       );
       "
     `);
diff --git a/packages/tokens/src/bin/Generators/SassGenerator.ts b/packages/tokens/src/bin/Generators/SassGenerator.ts
index bfc8972..0a6f69b 100644
--- a/packages/tokens/src/bin/Generators/SassGenerator.ts
+++ b/packages/tokens/src/bin/Generators/SassGenerator.ts
@@ -55,7 +55,19 @@ const generateTransitionsSassMap = (tokens: Tokens) => {
 };
 
 function JSONToSassMap(json: Object) {
-  return JSON.stringify(json, null, 2)
+  function deepQuoteObjectKeys(object: Object) {
+    return Object.entries(object).reduce(
+      (acc, [key, value]): Record<string, any> => ({
+        ...acc,
+        [`'${key}'`]:
+          typeof value === "object" ? deepQuoteObjectKeys(value) : value,
+      }),
+      {}
+    );
+  }
+  const jsonWithQuotedKeys = deepQuoteObjectKeys(json);
+
+  return JSON.stringify(jsonWithQuotedKeys, null, 2)
     .replace(/{/g, "(")
     .replace(/}/g, ")")
     .replace(/"/g, "");