css-in-props 0.8.29 → 0.9.0

package/README.md

@@ -1,25 +1,24 @@
-# Symbols
+# css-in-props
 
 UI Library in composition of [Scratch](https://github.com/smbo-ls/scratch) and [DOMQL](https://github.com/domql/domql)
 
-[![npm version](https://badge.fury.io/js/smbls.svg)](https://badge.fury.io/js/smbls)
+[![npm version](https://badge.fury.io/js/css-in-props.svg)](https://badge.fury.io/js/css-in-props)
 
 ### Setup
 
 1. Installation
 ```
-yarn add smbls
+yarn add css-in-props
 ```
 
 2. Import the component from Symbols
 ```
-import { Box } from 'smbls'
+import { transformClassname, transformEmotion } from 'css-in-props'
 ```
 
 3. Use it inside your DOMQL code
 ```
-const Header = {
-  proto: Box,
-  // ...Other Properties
-}
+const Box = ({ children, ...props }) => <div className={
+  transformEmotion(transformClassname(props))
+}>{children}</div>
 ```

package/package.json

@@ -3,7 +3,7 @@
   "description": "Utilize props as CSS methods",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.8.29",
+  "version": "0.9.0",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [
@@ -13,6 +13,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "scripts": {
+    "prestart": "rm -rf dist .cache",
     "start": "parcel index.html",
     "build": "parcel build index.html --public-url .",
     "deploy": "yarn build && gh-pages -d dist",
@@ -22,6 +23,7 @@
   },
   "dependencies": {
     "@domql/utils": "^2.2.1",
+    "@emotion/css": "^11.10.0",
     "@symbo.ls/scratch": "^0.3.19"
   },
   "devDependencies": {

package/src/index.js

@@ -1,19 +1,4 @@
 'use strict'
 
-import { classNames } from './classNames'
-import { keySetters } from './subprops'
-
-export * from '@symbo.ls/scratch'
-
-export const transformClassname = props => {
-  const CLASS_NAMES = {}
-
-  for (const key in props) {
-    const setter = keySetters[key.slice(0, 1)]
-    const hasCSS = classNames[key]
-    if (setter) setter(key, props[key], CLASS_NAMES)
-    else if (hasCSS) CLASS_NAMES[key] = hasCSS
-  }
-
-  return CLASS_NAMES
-}
+export { set } from '@symbo.ls/scratch'
+export * from './transform'

package/src/registry.js

@@ -0,0 +1,216 @@
+'use strict'
+
+import { isArray, isObject } from '@domql/utils'
+import { getColor, mapSpacing, getTheme, SPACING, mapFontSize, 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
+  if (spacingRatio) {
+    const params = SPACING[spacingRatio]
+
+    if (!params) {
+      SPACING[spacingRatio] = {
+        base: SPACING.base,
+        type: 'spacing',
+        ratio: spacingRatio,
+        range: [-5, +7],
+        subSequence: true,
+        sequence: {},
+        scales: {}
+      }
+    }
+
+    return mapSpacing(val, prop, params, unit)
+  }
+  return mapSpacing(val, prop, null, unit)
+}
+
+const isBorderStyle = str =>
+  ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial'].some(v => str.includes(v))
+
+const diffBorder = (border, key = 'border') => {
+  const obj = {}
+  const arr = isObject(border) ? Object.values(border) : isArray(border) ? border : border.split(', ')
+  arr.map(v => {
+    if (v.includes('px')) obj[`${key}Width`] = v // TODO: add map spacing
+    else if (isBorderStyle(v)) obj[`${key}Style`] = v || 'solid'
+    else if (getColor(v)) obj[`${key}Color`] = getColor(v)
+  })
+  return obj
+}
+
+const diffStroke = stroke => {
+  const WebkitTextStroke = stroke.split(', ').map(v => {
+    if (v.includes('px')) return v
+    else if (getColor(v)) return getColor(v)
+  }).join(' ')
+  return { WebkitTextStroke }
+}
+
+export const grid = {
+  columns: props => props.columns ? ({ gridTemplateColumns: props.columns }) : null,
+  rows: props => props.rows ? ({ gridTemplateRows: props.rows }) : null,
+  area: props => props.area ? ({ gridArea: props.area }) : null,
+  template: props => props.template ? ({ gridTemplate: props.template }) : null,
+  templateAreas: props => props.templateAreas ? ({ gridTemplateAreas: props.templateAreas }) : null,
+  gap: props => props.gap ? mapBasedOnRatio(props, 'gap') : null,
+  columnGap: props => props.template ? mapBasedOnRatio(props, 'columnGap') : null,
+  rowGap: props => props.template ? mapBasedOnRatio(props, 'rowGap') : null
+}
+
+export const theme = {
+  theme: props => props.theme ? getTheme(props.theme) : null,
+
+  color: props => props.color ? ({ color: getColor(props.color) }) : null,
+  background: props => props.background ? ({ backgroundColor: getColor(props.background) }) : null,
+
+  textStroke: props => props.textStroke ? diffStroke(props.textStroke) : null,
+
+  border: props => props.border ? diffBorder(props.border) : null,
+  borderColor: props => props.borderColor ? ({ borderColor: getColor(props.borderColor) }) : null,
+  borderStyle: props => props.borderStyle && ({ borderStyle: props.borderStyle }),
+
+  borderLeft: props => props.borderLeft ? diffBorder(props.borderLeft, 'borderLeft') : null,
+  borderTop: props => props.borderTop ? diffBorder(props.borderTop, 'borderTop') : null,
+  borderRight: props => props.borderRight ? diffBorder(props.borderRight, 'borderRight') : null,
+  borderBottom: props => props.borderBottom ? diffBorder(props.borderBottom, 'borderBottom') : null,
+
+  opacity: props => props.opacity && ({ opacity: props.opacity }),
+  visibility: props => ({ visibility: props.visibility })
+}
+
+export const block = {
+  round: ({ props, key }) => props.round ? (mapSpacing(props.round, 'borderRadius') || ({ borderRadius: props.round })) : null,
+  borderRadius: ({ props, key }) => props.borderRadius ? (mapSpacing(props.borderRadius, 'borderRadius') || ({ borderRadius: props.borderRadius })) : null,
+
+  transition: props => props.transition && ({ transition: props.transition }),
+  transitionProperty: props => props.transitionProperty && ({
+    transitionProperty: props.transitionProperty,
+    willChange: props.transitionProperty
+  }),
+
+  boxSizing: props => props.boxSizing ? ({ display: props.boxSizing }) : {
+    boxSizing: 'border-box'
+  },
+
+  display: props => props.display && ({ display: props.display }),
+
+  hide: props => props.hide && ({ display: 'none' }),
+
+  width: props => props.width && mapBasedOnRatio(props, 'width'),
+  height: props => props.height && mapBasedOnRatio(props, 'height'),
+  boxSize: props => {
+    if (typeof props.boxSize !== 'string') return
+    const [height, width] = props.boxSize.split(' ')
+    return {
+      ...mapSpacing(height, 'height'),
+      ...mapSpacing(width, 'width')
+    }
+  },
+
+  maxWidth: props => props.maxWidth && mapBasedOnRatio(props, 'maxWidth'),
+  minWidth: props => props.minWidth && mapBasedOnRatio(props, 'minWidth'),
+  widthRange: props => {
+    if (typeof props.widthRange !== 'string') return
+    const [minWidth, maxWidth] = props.widthRange.split(' ')
+    return {
+      ...mapSpacing(minWidth, 'minWidth'),
+      ...mapSpacing(maxWidth, 'maxWidth')
+    }
+  },
+
+  maxHeight: props => props.maxHeight && mapBasedOnRatio(props, 'maxHeight'),
+  minHeight: props => props.minHeight && mapBasedOnRatio(props, 'minHeight'),
+  heightRange: props => {
+    if (typeof props.heightRange !== 'string') return
+    const [minHeight, maxHeight] = props.heightRange.split(' ')
+    return {
+      ...mapSpacing(minHeight, 'minHeight'),
+      ...mapSpacing(maxHeight, 'maxHeight')
+    }
+  },
+
+  aspectRatio: props => props.aspectRatio && ({ aspectRatio: props.aspectRatio }),
+
+  borderWidth: props => props.borderWidth ? mapBasedOnRatio(props, 'borderWidth') : null,
+
+  padding: props => props.padding ? mapBasedOnRatio(props, 'padding') : null,
+  margin: props => props.margin ? mapBasedOnRatio(props, 'margin') : null,
+
+  gap: props => props.gap ? mapBasedOnRatio(props, 'gap') : null,
+  gridArea: props => props.gridArea && ({ gridArea: props.gridArea })
+}
+
+export const flex = {
+  flexFlow: props => props.flexFlow && ({
+    display: 'flex',
+    flexFlow: props.flexFlow
+  }),
+  flexAlign: props => {
+    if (typeof props.flexAlign !== 'string') return
+    const [alignItems, justifyContent] = props.flexAlign.split(' ')
+    return {
+      display: 'flex',
+      alignItems: alignItems,
+      justifyContent: justifyContent
+    }
+  },
+
+  flex: props => props.flex && ({ flex: props.flex }),
+  alignItems: props => props.alignItems && ({ alignItems: props.alignItems }),
+  alignContent: props => props.alignContent && ({ alignContent: props.alignContent }),
+  justifyContent: props => props.justifyContent && ({ justifyContent: props.justifyContent })
+}
+
+export const position = {
+  position: props => props.position && ({ position: props.position }),
+  inset: props => {
+    const { inset } = props
+    if (typeof inset !== 'string') return
+    return { inset: inset.split(' ').map(v => mapSpacing(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')
+}
+
+export const text = {
+  fontSize: props => props.fontSize ? mapFontSize(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, ''),
+  textDecoration: props => props.textDecoration && ({ textDecoration: props.textDecoration }),
+  textTransform: props => props.textTransform && ({ textTransform: props.textTransform }),
+  textAlign: props => props.textAlign && ({ textAlign: props.textAlign }),
+  fontWeight: props => props.fontWeight && ({ fontWeight: props.fontWeight })
+}
+
+export const registry = {
+  style: props => props.style,
+
+  ...theme,
+  ...block,
+  ...flex,
+  ...position,
+  ...text,
+
+  gridColumn: props => props.gridColumn && ({ gridColumn: props.gridColumn }),
+  gridRow: props => props.gridRow && ({ gridRow: props.gridRow }),
+
+  size: props => {
+    if (typeof props.heightRange !== 'string') return
+    const [minHeight, maxHeight] = props.heightRange.split(' ')
+    return {
+      ...mapSpacing(minHeight, 'minHeight'),
+      ...mapSpacing(maxHeight, 'maxHeight')
+    }
+  },
+
+  overflow: props => props.overflow && ({ overflow: props.overflow }),
+
+  transform: props => props.transform && ({ transform: props.transform })
+}

package/src/transform/classname.js

@@ -0,0 +1,21 @@
+'use strict'
+
+import { merge, isFunction } from '@domql/utils'
+import { keySetters } from './subProps'
+
+import { registry } from '../registry'
+
+export const transformClassname = props => {
+  const CLASS_NAMES = {}
+
+  for (const key in props) {
+    const setter = keySetters[key.slice(0, 1)]
+    const hasCSS = registry[key]
+
+    if (setter) setter(key, props[key], CLASS_NAMES)
+    else if (isFunction(hasCSS)) merge(CLASS_NAMES, hasCSS(props))
+  }
+
+
+  return CLASS_NAMES
+}

package/src/transform/emotion.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import createEmotion from '@emotion/css/create-instance'
+// const ENV = process.env.NODE_ENV
+
+export const {
+  flush,
+  hydrate,
+  cx,
+  getRegisteredStyles,
+  injectGlobal,
+  keyframes,
+  css,
+  sheet,
+  cache
+} = createEmotion({
+  key: 'smbls'
+})
+
+export const transformEmotion = props => css(props)

package/src/transform/index.js

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

package/src/transform/subProps.js

@@ -0,0 +1,68 @@
+
+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
+}

package/src/classNames.js

@@ -1,50 +0,0 @@
-'use strict'
-
-import { isArray, isObject } from '@domql/utils'
-import { getColor, mapSpacing, getTheme } from '@symbo.ls/scratch'
-
-const isBorderStyle = str =>
-  ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial'].some(v => str.includes(v))
-
-const diffBorder = (border, key = 'border') => {
-  const obj = {}
-  const arr = isObject(border) ? Object.values(border) : isArray(border) ? border : border.split(', ')
-  arr.map(v => {
-    if (v.includes('px')) obj[`${key}Width`] = v // TODO: add map spacing
-    else if (isBorderStyle(v)) obj[`${key}Style`] = v || 'solid'
-    else if (getColor(v)) obj[`${key}Color`] = getColor(v)
-  })
-  return obj
-}
-
-const diffStroke = stroke => {
-  const WebkitTextStroke = stroke.split(', ').map(v => {
-    if (v.includes('px')) return v
-    else if (getColor(v)) return getColor(v)
-  }).join(' ')
-  return { WebkitTextStroke }
-}
-
-export const classNames = {
-  round: ({ props, key }) => props.round ? (mapSpacing(props.round, 'borderRadius') || ({ borderRadius: props.round })) : null,
-  borderRadius: ({ props, key }) => props.borderRadius ? (mapSpacing(props.borderRadius, 'borderRadius') || ({ borderRadius: props.borderRadius })) : null,
-
-  theme: ({ props }) => props.theme ? getTheme(props.theme) : null,
-
-  color: ({ props }) => props.color ? ({ color: getColor(props.color) }) : null,
-  background: ({ props }) => props.background ? ({ backgroundColor: getColor(props.background) }) : null,
-
-  textStroke: ({ props }) => props.textStroke ? diffStroke(props.textStroke) : null,
-
-  border: ({ props }) => props.border ? diffBorder(props.border) : null,
-  borderColor: ({ props }) => props.borderColor ? ({ borderColor: getColor(props.borderColor) }) : null,
-  borderStyle: ({ props }) => props.borderStyle && ({ borderStyle: props.borderStyle }),
-
-  borderLeft: ({ props }) => props.borderLeft ? diffBorder(props.borderLeft, 'borderLeft') : null,
-  borderTop: ({ props }) => props.borderTop ? diffBorder(props.borderTop, 'borderTop') : null,
-  borderRight: ({ props }) => props.borderRight ? diffBorder(props.borderRight, 'borderRight') : null,
-  borderBottom: ({ props }) => props.borderBottom ? diffBorder(props.borderBottom, 'borderBottom') : null,
-
-  opacity: ({ props }) => props.opacity && ({ opacity: props.opacity }),
-  visibility: ({ props }) => ({ visibility: props.visibility })
-}

package/src/subprops.js

@@ -1,67 +0,0 @@
-
-import { isArray, merge } from '@domql/utils'
-import { CASES as CONFIG_CASES, MEDIA as CONFIG_MEDIA } from '@symbo.ls/scratch'
-import { classNames } from './classNames'
-
-export const keySetters = {
-  '@': (key, props, result, rootProps) => applyMediaProps(key, props, result, rootProps),
-  ':': (key, props, result, rootProps) => applySelectorProps(key, props, result, rootProps),
-  $: (key, props, result, rootProps) => applyCaseProps(key, props, result, rootProps),
-  '.': (key, props, result, rootProps) => applyConditionalCaseProps(key, props, result, rootProps)
-}
-
-const execClass = (key, props, result, rootProps) => {
-  const className = classNames[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]
-  }
-}
-
-const convertPropsToClass = (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
-}
-
-const applyMediaProps = (key, props, result, rootProps) => {
-  const mediaName = CONFIG_MEDIA[key.slice(1)]
-  const mediaKey = `@media screen and ${mediaName}`
-  // result[mediaKey] = convertPropsToClass(props, result, rootProps)
-  merge(result, convertPropsToClass(props, result, rootProps))
-}
-
-const applySelectorProps = (key, props, result, rootProps) => {
-  const selectorKey = `&${key}`
-  result[selectorKey] = convertPropsToClass(props, result, rootProps)
-  merge(result, convertPropsToClass(props, result, rootProps))
-}
-
-const applyCaseProps = (key, props, result, rootProps) => {
-  const caseKey = key.slice(1)
-  if (!CONFIG_CASES[caseKey]) return
-  merge(result, convertPropsToClass(props, result, rootProps))
-}
-
-const applyConditionalCaseProps = (key, props, result, rootProps) => {
-  const caseKey = key.slice(1)
-  if (!rootProps[caseKey]) return // remove classname if not here
-  merge(result, convertPropsToClass(props, result, rootProps))
-}