css-in-props 0.9.4 → 0.9.7

package/README.md

@@ -13,12 +13,10 @@ yarn add css-in-props
 
 2. Import the component from Symbols
 ```
-import { transformClassname, transformEmotion } from 'css-in-props'
+import { setClassname } from 'css-in-props'
 ```
 
 3. Use it inside your DOMQL code
 ```
-const Box = ({ children, ...props }) => <div className={
-  transformEmotion(transformClassname(props))
-}>{children}</div>
+const Box = ({ children, ...props }) => <div className={setClassname(props)}>{children}</div>
 ```

package/package.json

@@ -3,7 +3,7 @@
   "description": "Utilize props as CSS methods",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.9.4",
+  "version": "0.9.7",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [
@@ -21,12 +21,10 @@
     "reinstall": "rm yarn.lock && rm -rf node_modules/rackai && yarn",
     "bump": "npx np"
   },
-  "dependencies": {
+  "devDependencies": {
     "@domql/utils": "^2.2.1",
     "@emotion/css": "^11.10.0",
-    "@symbo.ls/scratch": "^0.3.19"
-  },
-  "devDependencies": {
+    "@symbo.ls/scratch": "^0.3.19",
     "@babel/core": "^7.14.6",
     "babel-eslint": "^10.0.3",
     "emotion": "^10.0.27",

package/src/registry.js

@@ -82,8 +82,8 @@ export const theme = {
 }
 
 export const block = {
-  round: props => props.round ? (mapSpacing(props.round, 'borderRadius') || ({ borderRadius: props.round })) : null,
-  borderRadius: props => props.borderRadius ? (mapSpacing(props.borderRadius, 'borderRadius') || ({ borderRadius: props.borderRadius })) : null,
+  round: props => props.round ? (mapBasedOnRatio(props, 'borderRadius') || ({ borderRadius: props.round })) : null,
+  borderRadius: props => props.borderRadius ? (mapBasedOnRatio(props, 'borderRadius') || ({ borderRadius: props.borderRadius })) : null,
 
   transition: props => props.transition && ({ transition: props.transition }),
   transitionProperty: props => props.transitionProperty && ({
@@ -105,8 +105,8 @@ export const block = {
     if (typeof props.boxSize !== 'string') return
     const [height, width] = props.boxSize.split(' ')
     return {
-      ...mapSpacing(height, 'height'),
-      ...mapSpacing(width, 'width')
+      ...mapBasedOnRatio({ height, spacingRatio: props.spacingRatio }, 'height'),
+      ...mapBasedOnRatio({ width, spacingRatio: props.spacingRatio }, 'width')
     }
   },
 
@@ -116,8 +116,8 @@ export const block = {
     if (typeof props.widthRange !== 'string') return
     const [minWidth, maxWidth] = props.widthRange.split(' ')
     return {
-      ...mapSpacing(minWidth, 'minWidth'),
-      ...mapSpacing(maxWidth, 'maxWidth')
+      ...mapBasedOnRatio({ minWidth, spacingRatio: props.spacingRatio }, 'minWidth'),
+      ...mapBasedOnRatio({ maxWidth, spacingRatio: props.spacingRatio }, 'maxWidth')
     }
   },
 
@@ -127,8 +127,8 @@ export const block = {
     if (typeof props.heightRange !== 'string') return
     const [minHeight, maxHeight] = props.heightRange.split(' ')
     return {
-      ...mapSpacing(minHeight, 'minHeight'),
-      ...mapSpacing(maxHeight, 'maxHeight')
+      ...mapBasedOnRatio({ minHeight, spacingRatio: props.spacingRatio }, 'minHeight'),
+      ...mapBasedOnRatio({ maxHeight, spacingRatio: props.spacingRatio }, 'maxHeight')
     }
   },
 
@@ -169,13 +169,13 @@ export const position = {
   inset: props => {
     const { inset } = props
     if (typeof inset !== 'string') return
-    return { inset: inset.split(' ').map(v => mapSpacing(v, 'k').k).join(' ') }
+    return { inset: inset.split(' ').map(v => mapBasedOnRatio(v, 'k').k).join(' ') }
   },
 
-  left: props => mapSpacing(props.left, 'left'),
-  top: props => mapSpacing(props.top, 'top'),
-  right: props => mapSpacing(props.right, 'right'),
-  bottom: props => mapSpacing(props.bottom, 'bottom')
+  left: props => mapBasedOnRatio(props, 'left'),
+  top: props => mapBasedOnRatio(props, 'top'),
+  right: props => mapBasedOnRatio(props, 'right'),
+  bottom: props => mapBasedOnRatio(props, 'bottom')
 }
 
 export const text = {

package/src/transform/classname.js

@@ -1,12 +1,13 @@
 'use strict'
 
-import { merge, isFunction } from '@domql/utils'
+import { merge, isFunction, isObject, isArray } from '@domql/utils'
 import { keySetters } from './subProps'
 
 import { registry } from '../registry'
 
 export const transformClassname = props => {
   const CLASS_NAMES = {}
+  if (!isObject(props)) return
 
   for (const key in props) {
     const setter = keySetters[key.slice(0, 1)]
@@ -14,7 +15,13 @@ export const transformClassname = props => {
     const hasCSS = reg[key]
 
     if (setter) setter(key, props[key], CLASS_NAMES)
-    else if (isFunction(hasCSS)) merge(CLASS_NAMES, hasCSS(props))
+    else if (isFunction(hasCSS)) {
+      const stack = hasCSS(props)
+      const exec = isArray(stack) ? stack.reduce((a, c) => {
+        return merge(a, c)
+      }, {}) : stack
+      merge(CLASS_NAMES, exec)
+    }
   }
 
   return CLASS_NAMES