css-in-props 0.9.7 → 0.9.9

package/package.json

@@ -3,7 +3,7 @@
   "description": "Utilize props as CSS methods",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.9.7",
+  "version": "0.9.9",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [
@@ -22,10 +22,11 @@
     "bump": "npx np"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "@babel/preset-env": "^7.19.4",
     "@domql/utils": "^2.2.1",
     "@emotion/css": "^11.10.0",
     "@symbo.ls/scratch": "^0.3.19",
-    "@babel/core": "^7.14.6",
     "babel-eslint": "^10.0.3",
     "emotion": "^10.0.27",
     "np": "^7.2.0",

package/src/registry.js

@@ -1,12 +1,12 @@
 'use strict'
 
 import { isArray, isObject } from '@domql/utils'
-import { getColor, mapSpacing, getTheme, SPACING, mapFontSize, getFontFamily, FONT_FAMILY } from '@symbo.ls/scratch'
+import { getColor, getSpacingByKey, getTheme, SPACING, getFontSizeByKey, getFontFamily, FONT_FAMILY } from '@symbo.ls/scratch'
 
 export const mapBasedOnRatio = (props, prop, unit) => {
   const { spacingRatio } = props
   const val = props[prop]
-  // TODO: move this to mapSpacing
+  // TODO: move this to getSpacingByKey
   if (spacingRatio) {
     const params = SPACING[spacingRatio]
 
@@ -22,9 +22,9 @@ export const mapBasedOnRatio = (props, prop, unit) => {
       }
     }
 
-    return mapSpacing(val, prop, params, unit)
+    return getSpacingByKey(val, prop, params, unit)
   }
-  return mapSpacing(val, prop, null, unit)
+  return getSpacingByKey(val, prop, null, unit)
 }
 
 const isBorderStyle = str =>
@@ -179,7 +179,7 @@ export const position = {
 }
 
 export const text = {
-  fontSize: props => props.fontSize ? mapFontSize(props.fontSize) : null,
+  fontSize: props => props.fontSize ? getFontSizeByKey(props.fontSize) : null,
   fontFamily: props => props.fontFamily && ({ fontFamily: getFontFamily(FONT_FAMILY, props.fontFamily) || props.fontFamily }),
   lineHeight: props => props.lineHeight && ({ lineHeight: props.lineHeight }),
   // lineHeight: props => props.lineHeight && mapBasedOnRatio(props, 'lineHeight', null, ''),
@@ -205,8 +205,8 @@ export const registry = {
     if (typeof props.heightRange !== 'string') return
     const [minHeight, maxHeight] = props.heightRange.split(' ')
     return {
-      ...mapSpacing(minHeight, 'minHeight'),
-      ...mapSpacing(maxHeight, 'maxHeight')
+      ...getSpacingByKey(minHeight, 'minHeight'),
+      ...getSpacingByKey(maxHeight, 'maxHeight')
     }
   },
 

package/src/transform/classname.js

@@ -3,9 +3,9 @@
 import { merge, isFunction, isObject, isArray } from '@domql/utils'
 import { keySetters } from './subProps'
 
-import { registry } from '../registry'
+import { registry as reg } from '../registry'
 
-export const transformClassname = props => {
+export const transformClassname = (props, registry = reg) => {
   const CLASS_NAMES = {}
   if (!isObject(props)) return