@spark-ui/cli-utils - npm Package Compare versions

Comparing version 2.2.1 to 2.2.2

CHANGELOG.md

@@ -6,2 +6,6 @@ # Change Log
 
+## [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)
@@ -8,0 +12,0 @@

package.json

 {
   "name": "@spark-ui/cli-utils",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Spark CLI utils",
@@ -32,3 +32,3 @@ "publishConfig": {
   },
-  "gitHead": "ce879d963dfb960b7ab442cdf4fbba587176c846"
+  "gitHead": "f60c8e55186499585ce7dd3b76318ad8245bfd41"
 }

src/setup-themes/utils/createCSSTokenfile.js

@@ -6,14 +6,11 @@ import { appendFileSync } from 'node:fs'
 
-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))
       }
@@ -32,3 +29,5 @@
 
-        flattenedTheme[`${path}-${toKebabCase(key)}`] = getFormattedValue()
+        flattenedTheme[
+          `--${[...paths, key].map(toKebabCase).join('-').replace(doubleHyphensRegex, '-')}`
+        ] = getFormattedValue()
       }
@@ -38,3 +37,3 @@ })
 
-  flatten(theme)
+  flatten(_theme)
 
@@ -54,3 +53,3 @@ return {
   Object.keys(themeRecord).map(key => {
-    const { className, ...rest } = flattenTheme(themeRecord[key], key)
+    const { className, ...rest } = toCSSVars(themeRecord[key], key)
 
@@ -57,0 +56,0 @@ return key === 'default'

src/setup-themes/utils/createTailwindThemeConfigFile.js

@@ -6,14 +6,26 @@ import { writeFileSync } from 'node:fs'
 
-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})`
 
@@ -23,13 +35,21 @@ 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)`,
               }),
@@ -43,20 +63,35 @@ },
 
-      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
+          }
 
-        return
+          const tmp = value[k]
+          delete value[k]
+          value[toKebabCase(k)] = tmp
+        })
+
+        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, '-')
       }
@@ -66,5 +101,5 @@ })
 
-  flatten(themeCpy)
+  traverse(themeCpy)
 
-  return toKebabCaseKeys(themeCpy)
+  return themeCpy
 }
@@ -71,0 +106,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32324

increased by2.25%

Lines of code

709

increased by4.42%

No dependency changes