🐛(tokens) fix invalid sass with comma

The generated sass from tokens containing commas, like font families was
not valid due to the way maps are made in sass. So we wrap those value
in quotes.

packages/react/src/cunningham-tokens.scss

@@ -95,8 +95,8 @@ $themes: (
           'black': 800
         ),
         'families': (
-          'base': \Roboto Flex Variable\, sans-serif,
-          'accent': \Roboto Flex Variable\, sans-serif
+          'base': #{\Roboto Flex Variable\, sans-serif},
+          'accent': #{\Roboto Flex Variable\, sans-serif}
         ),
         'letterSpacings': (
           'h1': normal,
@@ -119,9 +119,9 @@ $themes: (
         'st': 0.25rem
       ),
       'transitions': (
-        'ease-in': cubic-bezier(0.32, 0, 0.67, 0),
-        'ease-out': cubic-bezier(0.33, 1, 0.68, 1),
-        'ease-in-out': cubic-bezier(0.65, 0, 0.35, 1),
+        'ease-in': #{cubic-bezier(0.32, 0, 0.67, 0)},
+        'ease-out': #{cubic-bezier(0.33, 1, 0.68, 1)},
+        'ease-in-out': #{cubic-bezier(0.65, 0, 0.35, 1)},
         'duration': 250ms
       ),
       'breakpoints': (
@@ -315,7 +315,7 @@ $themes: (
         'nano-font-size': 0.8125rem,
         'nano-icon-font-size': 1rem,
         'font-weight': 400,
-        'font-family': \Roboto Flex Variable\, sans-serif,
+        'font-family': #{\Roboto Flex Variable\, sans-serif},
         'text-font-weight': 500
       ),
       'alert': (

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

@@ -35,7 +35,7 @@ describe("CssGenerator", () => {
 	--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;
+	--c--components--button--font-family: Times New Roman,Helvetica Neue,Segoe UI;
 }
 .cunningham-theme--dark{
 	--c--theme--colors--primary: black;
@@ -71,7 +71,7 @@ describe("CssGenerator", () => {
 	--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;
+	--c--components--button--font-family: Times New Roman,Helvetica Neue,Segoe UI;
 }
 .cunningham-theme--dark{
 	--c--theme--colors--primary: black;

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 = {"themes":{"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"}},"components":{"button":{"font-family":"Times New Roman"}}},"dark":{"theme":{"colors":{"primary":"black"}}},"custom":{"theme":{"colors":{"primary":"green"}}}}};
+"export const tokens = {"themes":{"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"}},"components":{"button":{"font-family":"Times New Roman,Helvetica Neue,Segoe UI"}}},"dark":{"theme":{"colors":{"primary":"black"}}},"custom":{"theme":{"colors":{"primary":"green"}}}}};
 "
 `);
   });

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

@@ -10,7 +10,7 @@ jest.mock("../Paths", () => ({
 
 describe("SassGenerator", () => {
   beforeAll(() => {
-    jest.spyOn(console, "log").mockImplementation(() => {});
+    // jest.spyOn(console, "log").mockImplementation(() => {});
     cleanup(__dirname);
   });
 
@@ -57,7 +57,7 @@ describe("SassGenerator", () => {
     ),
     'components': (
       'button': (
-        'font-family': Times New Roman
+        'font-family': #{Times New Roman,Helvetica Neue,Segoe UI}
       )
     )
   ),

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

@@ -28,12 +28,23 @@ function toSassVariable(varName: string, value: any, isDefault = true) {
 }
 
 function JSONToSassMap(json: Object, isDefault = true) {
+  function toSassValue(value: any) {
+    if (typeof value === "object") {
+      return deepQuoteObjectKeys(value);
+    }
+    if (typeof value === "string") {
+      // If we have value = Font 1, Font 2 it will break the map so we need to use interpolation operator.
+      if (value.indexOf(",") >= 0) {
+        return `#__OPEN_BRACKET__${value}__CLOSE_BRACKET__`;
+      }
+    }
+    return value;
+  }
   function deepQuoteObjectKeys(object: Object) {
     return Object.entries(object).reduce(
       (acc, [key, value]): Record<string, any> => ({
         ...acc,
-        [`'${key}'`]:
-          typeof value === "object" ? deepQuoteObjectKeys(value) : value,
+        [`'${key}'`]: toSassValue(value),
       }),
       {},
     );
@@ -44,5 +55,7 @@ function JSONToSassMap(json: Object, isDefault = true) {
     .replace(/{/g, "(")
     .replace(/}/g, ")")
     .replace(/"/g, "")
+    .replace(/__OPEN_BRACKET__/g, "{")
+    .replace(/__CLOSE_BRACKET__/g, "}")
     .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 = {"themes":{"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"}},"components":{"button":{"font-family":"Times New Roman"}}},"dark":{"theme":{"colors":{"primary":"black"}}},"custom":{"theme":{"colors":{"primary":"green"}}}}};
+"export const tokens = {"themes":{"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"}},"components":{"button":{"font-family":"Times New Roman,Helvetica Neue,Segoe UI"}}},"dark":{"theme":{"colors":{"primary":"black"}}},"custom":{"theme":{"colors":{"primary":"green"}}}}};
 "
 `);
   });

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

@@ -31,7 +31,7 @@ module.exports = {
       },
       components: {
         button: {
-          "font-family": "Times New Roman",
+          "font-family": "Times New Roman,Helvetica Neue,Segoe UI",
         },
       },
     },

packages/tokens/src/bin/tests/Cunningham.spec.ts

@@ -67,7 +67,7 @@ describe("Cunningham Bin", () => {
 	--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;
+	--c--components--button--font-family: Times New Roman,Helvetica Neue,Segoe UI;
 }
 .cunningham-theme--dark{
 	--c--theme--colors--primary: black;
@@ -106,7 +106,7 @@ describe("Cunningham Bin", () => {
 	--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;
+	--c--components--button--font-family: Times New Roman,Helvetica Neue,Segoe UI;
 }
 .cunningham-theme--dark{
 	--c--theme--colors--primary: black;
@@ -158,7 +158,7 @@ describe("Cunningham Bin", () => {
 	--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;
+	--c--components--button--font-family: Times New Roman,Helvetica Neue,Segoe UI;
 }
 .cunningham-theme--dark{
 	--c--theme--colors--primary: black;