feat(cli-utils): update cli setup-themes functions

adevinta · Feb 24, 2023 · 8723891 · 8723891
1 parent f21e13f
commit 8723891
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 10 deletions.
diff --git a/packages/utils/cli/src/setup-themes/utils/createTailwindThemeConfigFile.js b/packages/utils/cli/src/setup-themes/utils/createTailwindThemeConfigFile.js
@@ -8,8 +8,36 @@ import { isHex, isStringOrNumber, toKebabCase, toKebabCaseKeys } from '../../uti
 function toTailwindConfig(theme) {
   const themeCpy = JSON.parse(JSON.stringify(theme))
 
+  /* eslint-disable complexity */
   function flatten(obj, path) {
     Object.entries(obj).forEach(([key, value]) => {
+      if (value !== null && typeof value === 'object' && !path && key === 'fontSize') {
+        Object.keys(value).forEach(k => {
+          if (isStringOrNumber(value[k])) {
+            obj[key][k] = `var(--${toKebabCase(key)}-${k})`
+
+            return
+          }
+
+          obj[key][k] = [
+            `var(--${toKebabCase(key)}-${k}-font-size`,
+            {
+              ...(value[k].lineHeight && {
+                lineHeight: `var(--${toKebabCase(key)}-${k}-line-height`,
+              }),
+              ...(value[k].letterSpacing && {
+                letterSpacing: `var(--${toKebabCase(key)}-${k}-letter-spacing`,
+              }),
+              ...(value[k].fontWeight && {
+                fontWeight: `var(--${toKebabCase(key)}-${k}-font-weight`,
+              }),
+            },
+          ]
+        })
+
+        return
+      }
+
       if (value !== null && typeof value === 'object') {
         const formattedPath = path ? `--${path}-${key}` : `--${key}`
         flatten(value, toKebabCase(formattedPath.replace(/-{3,}/, '--')))
@@ -19,13 +47,14 @@ function toTailwindConfig(theme) {
 
       /* eslint-disable */
       if (isStringOrNumber(value)) {
-        const formattedPath =
-          /--colors/.test(path || '') && isHex(value)
-            ? `rgb(var(${path}-${toKebabCase(key)}) / <alpha-value>)`
-            : `var(${path}-${toKebabCase(key)})`
+        const formattedValue = (() => {
+          if (/--colors/.test(path || '') && isHex(value))
+            return `rgb(var(${path}-${toKebabCase(key)}) / <alpha-value>)`
+          if (/--screens/.test(path || '')) return value
+          return `var(${path}-${toKebabCase(key)})`
+        })()
 
-        /* @ts-ignore */
-        obj[key] = formattedPath
+        obj[key] = formattedValue
         /* eslint-enable */
       }
     })

diff --git a/packages/utils/cli/src/utils.js b/packages/utils/cli/src/utils.js
@@ -16,12 +16,21 @@ function isStringOrNumber(value) {
   return typeof value === 'string' || typeof value === 'number'
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 function toKebabCaseKeys(obj, level = 1) {
   const result = {}
-  for (const key in obj) {
-    const value = typeof obj[key] === 'object' ? toKebabCaseKeys(obj[key], level + 1) : obj[key]
-    result[level > 1 ? key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : key] = value
+  for (const [key, value] of Object.entries(obj)) {
+    const transformedKey =
+      level > 1 ? key.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase() : key
+
+    if (Array.isArray(value)) {
+      result[transformedKey] = value.map(v =>
+        typeof v === 'object' ? toKebabCaseKeys(v, level + 1) : v
+      )
+    } else if (typeof value === 'object') {
+      result[transformedKey] = toKebabCaseKeys(value, level + 1)
+    } else {
+      result[transformedKey] = value
+    }
   }
 
   return result