[FIX] Nested token-parsing (#1347)

@navikt/core/tokens/config.json

@@ -44,7 +44,7 @@
         },
         {
           "destination": "tokens-cjs.js",
-          "format": "javascript/module"
+          "format": "javascript/module-flat"
         }
       ]
     }

@navikt/core/tokens/figma/deepen.ts

@@ -1,8 +1,12 @@
+import unifyNestedLevel from "./unify-nested-level";
+
 const deepen = (obj: { [key: string]: { value: string } }) => {
   const result = {};
 
+  const workObj = unifyNestedLevel(obj);
+
   // For each object path (property key) in the object
-  for (const objectPath in obj) {
+  for (const objectPath in workObj) {
     // Split path into component parts
     const parts = objectPath.split("-");
 
@@ -12,9 +16,8 @@ const deepen = (obj: { [key: string]: { value: string } }) => {
       const part = parts.shift();
       target = target[part] = target[part] || {};
     }
-
     // Set value at end of path
-    target[parts[0]] = obj[objectPath];
+    target[parts[0]] = workObj[objectPath];
   }
 
   return result;

@navikt/core/tokens/figma/tests/format-sd.test.ts

@@ -30,10 +30,10 @@ describe("Check conversion to Styled-dictionary format", () => {
           semantic: {
             color: {
               danger: {
-                value: "{navds.global.color.red.400.value}",
                 hover: {
                   value: "{navds.global.color.red.300.value}",
                 },
+                "@": { value: "{navds.global.color.red.400.value}" },
               },
             },
           },

@navikt/core/tokens/figma/tests/unify-nested-level.test.ts

@@ -0,0 +1,43 @@
+import unifyNestedLevel from "../unify-nested-level";
+
+describe("Check unifying of nested levels", () => {
+  test("Check color nesting", () => {
+    const obj = {
+      "navds-global-color-green-50": { value: "rbga(0,1,0,0)" },
+      "navds-global-color-green-500": { value: "rbga(0,2,0,0)" },
+      "navds-semantic-color-primary-hover": {
+        value: "rbga(0,3,0,0)",
+      },
+      "navds-semantic-color-primary-hover-subtle": {
+        value: "rbga(0,4,0,0)",
+      },
+      "navds-semantic-color-danger": { value: "rbga(0,5,0,0)" },
+      "navds-semantic-color-danger-hover": {
+        value: "rbga(0,6,0,0)",
+      },
+      "navds-semantic-color-danger-hover-subtle": {
+        value: "rbga(0,7,0,0)",
+      },
+    };
+
+    const newObj = unifyNestedLevel(obj);
+
+    expect(newObj).toEqual({
+      "navds-global-color-green-50": { value: "rbga(0,1,0,0)" },
+      "navds-global-color-green-500": { value: "rbga(0,2,0,0)" },
+      "navds-semantic-color-primary-hover-@": {
+        value: "rbga(0,3,0,0)",
+      },
+      "navds-semantic-color-primary-hover-subtle": {
+        value: "rbga(0,4,0,0)",
+      },
+      "navds-semantic-color-danger-@-@": { value: "rbga(0,5,0,0)" },
+      "navds-semantic-color-danger-hover-@": {
+        value: "rbga(0,6,0,0)",
+      },
+      "navds-semantic-color-danger-hover-subtle": {
+        value: "rbga(0,7,0,0)",
+      },
+    });
+  });
+});

@navikt/core/tokens/figma/unify-nested-level.ts

@@ -0,0 +1,22 @@
+const unifyNestedLevel = (obj: { [key: string]: { value: string } }) => {
+  // deep copy
+  const workObj = JSON.parse(JSON.stringify(obj));
+
+  Object.keys(workObj).forEach((k) => {
+    const deeperKeys = Object.keys(workObj).filter(
+      (k2) => k2.startsWith(`${k}-`) && k2.length > k.length
+    );
+    if (deeperKeys.length > 0) {
+      const neededNestedLevel =
+        Math.max(...deeperKeys.map((k) => k.split("-").length)) -
+        k.split("-").length;
+
+      delete Object.assign(workObj, {
+        [k + "-@".repeat(neededNestedLevel)]: workObj[k],
+      })[k];
+    }
+  });
+  return workObj;
+};
+
+export default unifyNestedLevel;