@spark-ui/cli-utils 2.2.1 → 2.2.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.2.2](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.2.1...@spark-ui/cli-utils@2.2.2) (2023-02-27)
+
+**Note:** Version bump only for package @spark-ui/cli-utils
+
 ## [2.2.1](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.2.0...@spark-ui/cli-utils@2.2.1) (2023-02-24)
 
 **Note:** Version bump only for package @spark-ui/cli-utils

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/cli-utils",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Spark CLI utils",
   "publishConfig": {
     "access": "public"
@@ -29,5 +29,5 @@
     "url": "git@github.com:adevinta/spark.git",
     "directory": "packages/utils/cli"
   },
-  "gitHead": "ce879d963dfb960b7ab442cdf4fbba587176c846"
+  "gitHead": "f60c8e55186499585ce7dd3b76318ad8245bfd41"
 }

package/src/setup-themes/utils/createCSSTokenfile.js

@@ -3,18 +3,15 @@ import { join } from 'node:path'
 
 import hexRgb from 'hex-rgb'
 
-import { isHex, isStringOrNumber, toKebabCase } from '../../utils.js'
+import { doubleHyphensRegex, isHex, isObject, isStringOrNumber, toKebabCase } from './utils.js'
 
-function flattenTheme(theme, className) {
+function toCSSVars(_theme, className) {
   const flattenedTheme = {}
 
-  function flatten(obj, path) {
-    Object.entries(obj).forEach(([key, value]) => {
-      if (value !== null && typeof value === 'object') {
-        const formattedPath = path ? `--${path}-${key}` : `--${key}`
-        flatten(value, toKebabCase(formattedPath.replace(/-{3,}/, '--')))
-
-        return
+  function flatten(theme, paths = []) {
+    Object.entries(theme).forEach(([key, value]) => {
+      if (isObject(value)) {
+        return flatten(value, paths.concat(key))
       }
 
       if (isStringOrNumber(value)) {
@@ -28,12 +25,14 @@ function flattenTheme(theme, className) {
           return value
         }
 
-        flattenedTheme[`${path}-${toKebabCase(key)}`] = getFormattedValue()
+        flattenedTheme[
+          `--${[...paths, key].map(toKebabCase).join('-').replace(doubleHyphensRegex, '-')}`
+        ] = getFormattedValue()
       }
     })
   }
 
-  flatten(theme)
+  flatten(_theme)
 
   return {
     ...flattenedTheme,
@@ -48,7 +47,7 @@ const toStringifiedTheme = theme =>
 
 const getStringifiedThemes = themeRecord =>
   Object.keys(themeRecord).map(key => {
-    const { className, ...rest } = flattenTheme(themeRecord[key], key)
+    const { className, ...rest } = toCSSVars(themeRecord[key], key)
 
     return key === 'default'
       ? `:root{${toStringifiedTheme(rest)}}`

package/src/setup-themes/utils/createTailwindThemeConfigFile.js

@@ -3,33 +3,53 @@ import { join } from 'node:path'
 
 import { defaultTheme } from '@spark-ui/theme-utils'
 
-import { isHex, isStringOrNumber, toKebabCase, toKebabCaseKeys } from '../../utils.js'
+import { tailwindKeys } from './constants.js'
+import {
+  doubleHyphensRegex,
+  hasNumber,
+  isCamelCase,
+  isHex,
+  isObject,
+  isStringOrNumber,
+  toKebabCase,
+} from './utils.js'
 
-function toTailwindConfig(theme) {
-  const themeCpy = JSON.parse(JSON.stringify(theme))
+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') {
+  const { fontSize, colors, screens } = tailwindKeys
+
+  function traverse(theme, paths = []) {
+    Object.entries(theme).forEach(([key, value]) => {
+      // 👀 see: https://tailwindcss.com/docs/font-size#providing-a-default-line-height
+      if (isObject(value) && !paths.length && key === fontSize) {
         Object.keys(value).forEach(k => {
+          const prefix = toKebabCase(fontSize)
           if (isStringOrNumber(value[k])) {
-            obj[key][k] = `var(--${toKebabCase(key)}-${k})`
+            theme[key][k] = `var(--${prefix}-${k})`
 
             return
           }
 
-          obj[key][k] = [
-            `var(--${toKebabCase(key)}-${k}-font-size`,
+          const kebabedKey = isCamelCase(k) || hasNumber(k) ? toKebabCase(k) : k
+
+          if (kebabedKey !== k) {
+            const tmp = theme[key][k]
+            delete theme[key][k]
+            theme[key][kebabedKey] = tmp
+          }
+
+          theme[key][kebabedKey] = [
+            `var(--${prefix}-${kebabedKey}-font-size)`,
             {
-              ...(value[k].lineHeight && {
-                lineHeight: `var(--${toKebabCase(key)}-${k}-line-height`,
+              ...(value[kebabedKey].lineHeight && {
+                lineHeight: `var(--${prefix}-${kebabedKey}-line-height)`,
               }),
-              ...(value[k].letterSpacing && {
-                letterSpacing: `var(--${toKebabCase(key)}-${k}-letter-spacing`,
+              ...(value[kebabedKey].letterSpacing && {
+                letterSpacing: `var(--${prefix}-${kebabedKey}-letter-spacing)`,
               }),
-              ...(value[k].fontWeight && {
-                fontWeight: `var(--${toKebabCase(key)}-${k}-font-weight`,
+              ...(value[kebabedKey].fontWeight && {
+                fontWeight: `var(--${prefix}-${kebabedKey}-font-weight)`,
               }),
             },
           ]
@@ -38,31 +58,46 @@ function toTailwindConfig(theme) {
         return
       }
 
-      if (value !== null && typeof value === 'object') {
-        const formattedPath = path ? `--${path}-${key}` : `--${key}`
-        flatten(value, toKebabCase(formattedPath.replace(/-{3,}/, '--')))
+      if (isObject(value)) {
+        Object.keys(value).forEach(k => {
+          if (!isObject(value[k]) && !isCamelCase(k)) {
+            return
+          }
+
+          const tmp = value[k]
+          delete value[k]
+          value[toKebabCase(k)] = tmp
+        })
 
-        return
+        return traverse(value, paths.concat(key))
       }
 
-      /* eslint-disable */
       if (isStringOrNumber(value)) {
+        const rootPath = paths.at(0) ?? ''
+        const isScreenValue = rootPath.includes(screens)
+        const isColorValue = rootPath.includes(colors)
+
         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)})`
+          if (isColorValue && isHex(value)) {
+            return `rgb(var(--${paths.join('-')}-${key}) / <alpha-value>)`
+          }
+          if (isScreenValue) {
+            return String(value).toLowerCase()
+          }
+
+          return `var(--${paths.join('-')}-${key})`
         })()
 
-        obj[key] = formattedValue
-        /* eslint-enable */
+        theme[key] = isScreenValue
+          ? formattedValue
+          : toKebabCase(formattedValue).replace(doubleHyphensRegex, '-')
       }
     })
   }
 
-  flatten(themeCpy)
+  traverse(themeCpy)
 
-  return toKebabCaseKeys(themeCpy)
+  return themeCpy
 }
 
 /**

package/src/setup-themes/utils/utils.js

@@ -0,0 +1,41 @@
+function toKebabCase(v) {
+  return v.replace(/[A-Z0-9]/g, e => `-${e.toLocaleLowerCase()}`)
+}
+
+function isHex(value) {
+  if (typeof value === 'number') {
+    return false
+  }
+
+  const regexp = /^#[0-9a-fA-F]+$/
+
+  return regexp.test(value)
+}
+
+function isStringOrNumber(value) {
+  return typeof value === 'string' || typeof value === 'number'
+}
+
+function isObject(x) {
+  return !!x && x.constructor === Object
+}
+
+function isCamelCase(value) {
+  return /[A-Z]/.test(value.slice(1))
+}
+
+function hasNumber(value) {
+  return /\d/.test(value)
+}
+
+const doubleHyphensRegex = /(?<!var\()--+/g
+
+export {
+  toKebabCase,
+  isHex,
+  isStringOrNumber,
+  isObject,
+  isCamelCase,
+  hasNumber,
+  doubleHyphensRegex,
+}

package/src/utils.js

@@ -1,39 +0,0 @@
-function toKebabCase(v) {
-  return v.replace(/[A-Z]/g, e => `-${e.toLocaleLowerCase()}`)
-}
-
-function isHex(value) {
-  if (typeof value === 'number') {
-    return false
-  }
-
-  const regexp = /^#[0-9a-fA-F]+$/
-
-  return regexp.test(value)
-}
-
-function isStringOrNumber(value) {
-  return typeof value === 'string' || typeof value === 'number'
-}
-
-function toKebabCaseKeys(obj, level = 1) {
-  const result = {}
-  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
-}
-
-export { toKebabCase, isHex, toKebabCaseKeys, isStringOrNumber }