UX-749 Generate JS token files

packages/design-tokens-sd/config.js

@@ -1,4 +1,5 @@
 const { mapGet, utils, colorMapGet } = require('./templates/scss-functions');
+const { toSnake, toCamel } = require('./utils/utils');
 
 module.exports = {
   source: ['tokens/**/*.json'],
@@ -31,17 +32,45 @@ module.exports = {
         },
       ],
     },
+    // Generates JS files in snake case
+    js: {
+      transformGroup: 'js',
+      buildPath: 'dist/js/',
+      transforms: ['name/cti/snake'],
+      files: [
+        {
+          destination: 'tokens.js',
+          format: 'javascript/module-flat',
+        },
+      ],
+    },
+    // Generates JS files in the old format of snake & camel using a custom transform
+    js_legacy: {
+      transformGroup: 'js',
+      buildPath: 'dist/js/',
+      transforms: ['name/cti/legacy'],
+      files: [
+        {
+          destination: 'tokens.legacy.js',
+          format: 'javascript/module-flat',
+        },
+      ],
+    },
+  },
+  transform: {
+    'name/cti/legacy': {
+      type: 'name',
+      transformer: (token) => {
+        const [category, ...rest] = token.path;
+        return `${toCamel(category)}_${toSnake(rest.join('-'))}`;
+      },
+    },
   },
   format: {
     'scss/functions': (args) => {
       const keys = Object.keys(args.dictionary.tokens);
       const rootFontSize = args.dictionary.allTokens.find(({ name }) => name === 'font-size-root');
-
-      const functions = keys
-        .map((key) => {
-          return key !== 'color' ? mapGet(key) : colorMapGet();
-        })
-        .join('');
+      const functions = keys.map((key) => (key !== 'color' ? mapGet(key) : colorMapGet())).join('');
       return `${utils(rootFontSize)}\n${functions}`;
     },
   },

packages/design-tokens-sd/utils/utils.js

@@ -0,0 +1,21 @@
+function toCamel(string) {
+  return string
+    .replace('-', ' ')
+    .replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => {
+      return index === 0 ? word.toLowerCase() : word.toUpperCase();
+    })
+    .replace(/\s+/g, '');
+}
+
+function toSnake(string) {
+  return string
+    .replace(/\W+/g, ' ')
+    .split(/ |\B(?=[A-Z])/)
+    .map((word) => word.toLowerCase())
+    .join('_');
+}
+
+module.exports = {
+  toCamel,
+  toSnake,
+};