css-in-props 2.10.79 → 2.10.98

package/package.json

@@ -2,11 +2,12 @@
   "name": "css-in-props",
   "description": "Utilize props as CSS methods",
   "author": "symbo.ls",
-  "version": "2.10.79",
+  "version": "2.10.98",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [
-    "src"
+    "src",
+    "dist"
   ],
   "dependencies": {
     "@domql/utils": "latest",
@@ -14,5 +15,5 @@
     "@symbo.ls/emotion": "latest",
     "@symbo.ls/scratch": "latest"
   },
-  "gitHead": "b6b0b03b2741e0f9085806cec874cea58aa9cae8"
+  "gitHead": "a2d105b6f070b784c511dbae1a88727debeedda6"
 }

package/src/{transform/emotion.js → emotion.js}

@@ -1,10 +1,7 @@
 'use strict'
 
 import { isFunction } from '@domql/utils'
-import createEmotion from '@emotion/css/create-instance'
-
-const { css } = createEmotion({
-  key: 'smbls'
-})
+import { emotion } from '@symbo.ls/emotion'
+const { css } = emotion
 
 export const transformEmotion = (props, callback) => isFunction(callback) ? callback(props) : css(props)

package/src/index.js

@@ -2,4 +2,4 @@
 
 export * from './transform'
 export * from './set'
-export * as registry from './registry'
+export * from './registry'

package/src/registry.js

@@ -17,7 +17,6 @@ import {
   Animation
 } from '@symbo.ls/atoms'
 
-
 export const registry = mergeArray([
   Shape,
   Position,

package/src/set.js

@@ -1,6 +1,7 @@
 'use strict'
 
-import { transformClassname, transformEmotion } from './transform'
+import { transformClassname } from './transform'
+import { transformEmotion } from './emotion'
 
 export const setClassname = (props, emotionCss) => {
   const transform = transformClassname(props)

package/src/{transform/classname.js → transform.js}

@@ -1,9 +1,9 @@
 'use strict'
 
 import { merge, isFunction, isObject, isArray } from '@domql/utils'
-import { keySetters } from './subProps'
+import { keySetters } from '@symbo.ls/atoms'
 
-import { registry as reg } from '../registry'
+import { registry as reg } from './registry'
 
 export const transformClassname = (props, registry = reg) => {
   const CLASS_NAMES = {}

package/src/transform/index.js

@@ -1,5 +0,0 @@
-'use strict'
-
-export * from './classname'
-export * from './emotion'
-export * from './subProps'

package/src/transform/subProps.js

@@ -1,68 +0,0 @@
-
-import { isArray, merge } from '@domql/utils'
-import { CASES as CONFIG_CASES, MEDIA as CONFIG_MEDIA } from '@symbo.ls/scratch'
-import { registry } from '../registry'
-
-const execClass = (key, props, result, rootProps) => {
-  const className = registry[key]
-
-  if (typeof className !== 'function') return
-
-  let classExec = className(props)
-  if (isArray(classExec)) {
-    classExec = classExec.reduce((a, c) => merge(a, c), {})
-  }
-
-  for (const finalProp in classExec) {
-    result[finalProp] = classExec[finalProp]
-  }
-}
-
-export const transformProps = (props, result, rootProps) => {
-  const propsClassObj = {}
-
-  for (const key in props) {
-    const setter = keySetters[key.slice(0, 1)]
-    if (setter) {
-      setter(key, props[key], propsClassObj, rootProps)
-      continue
-    } else {
-      execClass(key, props, propsClassObj, rootProps)
-    }
-  }
-
-  return propsClassObj
-}
-
-export const transformMedia = (key, props, result, rootProps) => {
-  const mediaName = CONFIG_MEDIA[key.slice(1)]
-  const mediaKey = `@media screen and ${mediaName}`
-  // result[mediaKey] = transformProps(props, result, rootProps)
-  const obj = { [mediaKey]: transformProps(props, result, rootProps) }
-  merge(result, obj)
-}
-
-export const transformSelector = (key, props, result, rootProps) => {
-  const selectorKey = `&${key}`
-  const obj = { [selectorKey]: transformProps(props, result, rootProps) }
-  merge(result, obj)
-}
-
-export const transformCases = (key, props, result, rootProps) => {
-  const caseKey = key.slice(1)
-  if (!CONFIG_CASES[caseKey]) return
-  merge(result, transformProps(props, result, rootProps))
-}
-
-export const transformConditionalCases = (key, props, result, rootProps) => {
-  const caseKey = key.slice(1)
-  if (!rootProps[caseKey]) return // remove classname if not here
-  merge(result, transformProps(props, result, rootProps))
-}
-
-export const keySetters = {
-  '@': transformMedia,
-  ':': transformSelector,
-  $: transformCases,
-  '.': transformConditionalCases
-}