@spark-ui/cli-utils 2.0.7 → 2.2.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.1.0...@spark-ui/cli-utils@2.2.0) (2023-02-24)
+
+### Features
+
+- **cli-utils:** update cli setup-themes functions ([8723891](https://github.com/adevinta/spark/commit/8723891243a11a81176a3cdefe7fadf2951ce613))
+
+# [2.1.0](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.0.7...@spark-ui/cli-utils@2.1.0) (2023-02-24)
+
+### Features
+
+- **cli-utils:** flattened cli args for theme config ([ccb13de](https://github.com/adevinta/spark/commit/ccb13de785f2d6d2f8893bdff83b032af6416a38))
+
 ## [2.0.7](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.0.6...@spark-ui/cli-utils@2.0.7) (2023-02-24)
 
 ### Bug Fixes

package/bin/spark-setup-themes.mjs

@@ -45,10 +45,10 @@ if (!configFileIsMJS) writeFileSync(jsFilePath, jsFileContents)
 
 import(jsFilePath)
   .then(module => {
-    const { tailwindThemeConfigFilePath, CSSTokens } = module.default
+    const { tailwindThemeConfigPath, tailwindCSSPath, themes } = module.default
 
-    createTailwindThemeConfigFile(tailwindThemeConfigFilePath)
-    createCSSTokensFile(CSSTokens.filePath, CSSTokens.themes)
+    createTailwindThemeConfigFile(tailwindThemeConfigPath)
+    createCSSTokensFile(tailwindCSSPath, themes)
 
     const child = spawn(process.execPath, [jsFilePath], {
       stdio: 'inherit',
@@ -59,14 +59,14 @@ import(jsFilePath)
       logger.success(
         `✨ Your Spark Tailwind theme config file has been successfully created: ${join(
           process.cwd(),
-          tailwindThemeConfigFilePath
+          tailwindThemeConfigPath
         )}`
       )
 
       logger.success(
         `✨ Your Spark Tailwind CSS Tokens file file has been successfully created: ${join(
           process.cwd(),
-          CSSTokens.filePath
+          tailwindCSSPath
         )}`
       )
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/cli-utils",
-  "version": "2.0.7",
+  "version": "2.2.0",
   "description": "Spark CLI utils",
   "publishConfig": {
     "access": "public"
@@ -13,7 +13,7 @@
   "type": "module",
   "dependencies": {
     "@clack/prompts": "0.2.2",
-    "@spark-ui/theme-utils": "^2.3.2",
+    "@spark-ui/theme-utils": "^2.4.0",
     "camel-case": "4.1.2",
     "chalk": "5.2.0",
     "commander": "10.0.0",
@@ -29,5 +29,5 @@
     "url": "git@github.com:adevinta/spark.git",
     "directory": "packages/utils/cli"
   },
-  "gitHead": "28fc0d6e70e1f90286d5ddbb5544952da0e786ad"
+  "gitHead": "53849c741f5ef573d7ef83218e1274145a22f8c8"
 }

package/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 */
       }
     })

package/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