@codeleap/styles 4.3.2 → 4.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "4.3.2",
+  "version": "4.3.5",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,7 +9,7 @@
     "directory": "packages/styles"
   },
   "devDependencies": {
-    "@codeleap/config": "4.3.2",
+    "@codeleap/config": "4.3.5",
     "ts-node-dev": "1.1.8"
   },
   "scripts": {
@@ -28,6 +28,7 @@
     "@fastify/deepmerge": "1.3.0",
     "js-sha256": "0.11.0",
     "lz-string": "^1.5.0",
+    "rfdc": "^1.4.1",
     "zustand": "4.5.0"
   }
 }

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/styles",
-  "version": "4.3.2",
+  "version": "4.3.5",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -28,6 +28,7 @@
     "@fastify/deepmerge": "1.3.0",
     "js-sha256": "0.11.0",
     "lz-string": "^1.5.0",
+    "rfdc": "^1.4.1",
     "zustand": "4.5.0"
   }
 }

package/src/lib/StyleRegistry.ts

@@ -5,10 +5,13 @@ import deepmerge from '@fastify/deepmerge'
 import { MultiplierFunction } from './spacing'
 import { defaultVariants } from './defaultVariants'
 import { dynamicVariants } from './dynamicVariants'
-import { ignoredStyleKeys, isSpacingKey } from './utils'
+import { capitalize, ignoredStyleKeys, isSpacingKey } from './utils'
 import { StyleCache } from './StyleCache'
 import { minifier } from './minifier'
 import { StateStorage } from 'zustand/middleware'
+import rfdc from 'rfdc'
+
+const deepClone = rfdc()
 
 export class CodeleapStyleRegistry {
   stylesheets: Record<string, VariantStyleSheet> = {}
@@ -369,8 +372,6 @@ export class CodeleapStyleRegistry {
       return this.mergeStylesWithCache([defaultStyle], cache.key)
     }
 
-    const isStyleObject = typeof style === 'object' && !isStyleArray
-
     if (typeof style === 'string') {
       const computedVariantStyle = this.computeVariantStyle(componentName, [style])
 
@@ -380,6 +381,8 @@ export class CodeleapStyleRegistry {
       )
     }
 
+    const isStyleObject = typeof style === 'object' && !isStyleArray
+
     if (isStyleObject) {
       const { isComposition, composition } = this.isCompositionStyle(registeredComponent, style)
 
@@ -521,17 +524,7 @@ export class CodeleapStyleRegistry {
   }
 
   private copyStyle(style: any) {
-    let copiedStyle = null
-
-    if (Array.isArray(style)) {
-      copiedStyle = [...style]
-    } else if (typeof style == 'object') {
-      copiedStyle = { ...style }
-    } else {
-      copiedStyle = style
-    }
-
-    return copiedStyle
+    return deepClone(style)
   }
 
   createStyles<K extends string = string>(styles: Record<K, StyleProp<AnyRecord, ''>> | ((theme: ITheme) => Record<K, StyleProp<AnyRecord, ''>>)): Record<K, ICSS> {
@@ -565,4 +558,16 @@ export class CodeleapStyleRegistry {
       },
     })
   }
+
+  prefixStyle(prefix: string, style: any) {
+    const entries = Object.entries(style).map(e => {
+      const [key, value] = e
+      
+      const elementKey = capitalize(key)
+      
+      return [`${prefix}${elementKey}`, value]
+    })
+  
+    return Object.fromEntries(entries)
+  }
 }

package/src/lib/borderCreator.ts

@@ -1,5 +1,4 @@
-import { IColors, ICSS } from '../types'
-import { StyleConstants } from './constants'
+import { AppTheme, IColors, ICSS, Theme } from '../types'
 import { borderDirection } from './dynamicVariants'
 import { themeStore } from './themeStore'
 import { capitalize } from './utils'
@@ -22,22 +21,18 @@ export const borderCreator: BorderCreator = (args) => {
     directions = ['left', 'top', 'bottom', 'right'],
   } = args
 
-  const theme = themeStore.getState().current
+  const theme = themeStore.getState().current as AppTheme<Theme>
 
-  // @ts-expect-error
   const color = theme?.colors?.[colorKey] ?? colorKey
 
-  const borderStyles: ICSS = {}
+  let borderStyles: ICSS = {}
 
   for (const direction of directions) {
     const property = `border${capitalize(direction)}`
 
     borderStyles[`${property}Color`] = color
     borderStyles[`${property}Width`] = width
-
-    if (StyleConstants.IS_BROWSER) {
-      borderStyles[`${property}Style`] = style
-    }
+    if (theme?.isBrowser) borderStyles[`${property}Style`] = style
   }
 
   return borderStyles

package/src/types/theme.ts

@@ -50,6 +50,7 @@ export type Theme = {
   typography: AnyMap
   icons: AnyMap
   values?: AnyMap
+  isBrowser?: boolean
 }
 
 export type DefaultColorSchemeName = 'default'