♻️ Organize utils and getters in one file

docs/api.md

@@ -2851,7 +2851,6 @@ Inspired by [`styled-system`][228].
     -   `options.getter`  
     -   `options.prop`   (optional, default `cssProp`)
     -   `options.getValue`   (optional, default `themeKey?themeValue({themeKey,transformValue,scale,getter}):undefined`)
-    -   `options.rule`   (optional, default `createRule({cssProp,getValue})`)
 
 #### Examples
 

src/core/create-rule.js

@@ -1,6 +1,5 @@
 import { isBool, isNum, isFn, identity, isStr, mapObj, isObj } from '@exah/utils'
-import { wrap, wrapIfMedia } from '../utils'
-import { getThemeMedia } from '../getters'
+import { wrap, wrapIfMedia, getThemeMedia } from '../utils'
 
 const has = (a, b) => b.some((key) => a.includes(key))
 

src/core/create-styles.js

@@ -8,8 +8,7 @@ import {
 } from '@exah/utils'
 
 import { DEFAULT_MEDIA_KEY } from '../constants'
-import { getThemeMedia } from '../getters'
-import { wrapIfMedia } from '../utils'
+import { wrapIfMedia, getThemeMedia } from '../utils'
 import { propType } from '../prop-type'
 
 function handleStyle (style, input, props, mediaKey) {

src/core/media-style.js

@@ -1,6 +1,5 @@
 import { DEFAULT_MEDIA_KEY } from '../constants'
-import { getMedia } from '../getters'
-import { wrapIfMedia } from '../utils'
+import { wrapIfMedia, getMedia } from '../utils'
 
 /**
  * ```js

src/index.js

@@ -10,7 +10,6 @@ export {
 
 export * from './constants'
 export * from './core'
-export * from './getters'
 export * from './mixins'
 export * from './rules'
 export * from './selectors'

src/mixins/mq.js

@@ -1,4 +1,4 @@
-import { getMedia } from '../getters'
+import { getMedia } from '../utils'
 
 /**
  * ```js

src/utils.js

@@ -0,0 +1,90 @@
+import { compose, path, isNum, isStr, curryN } from '@exah/utils'
+import { DEFAULT_KEY, THEME_MEDIA_KEY } from './constants'
+
+/**
+ * ```js
+ * import { themePath } from 'pss'
+ * ```
+ *
+ * Get value from theme.
+ *
+ * @example
+ * import { themePath } from 'pss'
+ *
+ * const Box = styled.div`
+ *   width: ${themePath('size.card')};
+ *   background-color: ${themePath('color.red', 'hotpink')};
+ * `
+ *
+ * <Box /> // → width: 200px; background-color: hotpink;
+ */
+
+export const themePath = (input, defaultValue) =>
+  (props = {}) => path(input, defaultValue)(props.theme)
+
+export const getDefault = (input, defaultValue = DEFAULT_KEY) =>
+  themePath([ DEFAULT_KEY, input ], defaultValue)
+
+export const getThemeMedia = themePath(THEME_MEDIA_KEY, {})
+export const getMedia = (input) => compose(path(input), getThemeMedia)
+
+/**
+ * Convert number to rem
+ *
+ * @example
+ * import { rem } form 'pss'
+ *
+ * rem() // → 1rem
+ * rem(16) // → 1rem
+ * rem(20) // → 1.25rem
+ * rem('20px') // → 1.25rem
+ * rem(20, 20) // → 1rem
+ */
+
+export const rem = (input = 16, base = 16) =>
+  /rem$/.test(input) ? input : `${parseFloat(input, 10) / base}rem`
+
+/**
+ * Convert numbers to pixels
+ *
+ * @example
+ * import { px } from 'pss'
+ *
+ * px(30) // → '30px'
+ * px(0) // → 0
+ * px('100px') // → '100px'
+ * px('100rem') // → '100rem' (nothing changed)
+ */
+
+export const px = (num) => isNum(num) && num !== 0 ? `${num}px` : num
+
+export const cap = (input = '') => input.replace(/^\w/, c => c.toUpperCase())
+export const addPrefix = (input = '', prefix) => prefix ? prefix + cap(input) : input
+
+export const wrap = curryN(2, (name, value) => value != null
+  ? (name ? { [name]: value } : value)
+  : null
+)
+
+export const wrapIfMedia = (query, style) => wrap(
+  query ? `@media ${query}` : null,
+  style
+)
+
+const parseUnit = (str) => str.replace(/([\d.]+)(\D+)?$/, '$2').trim() || undefined
+
+/**
+ * @example
+ * import { splitUnit } from 'pss'
+ *
+ * const [ value, unit ] = splitUnit('30px') // → [ 30, 'px' ]
+ */
+
+export const splitUnit = (input) => isStr(input)
+  ? [ parseFloat(input, 10), parseUnit(input) ]
+  : (isNum(input) ? [ input, undefined ] : [])
+
+export const floor = (number, precision = 0) => {
+  const factor = Math.pow(10, precision)
+  return Math.floor(number * factor) / factor
+}

src/values/color-value.js

@@ -1,5 +1,5 @@
 import { identity, fallbackTo, isStr, isArr, path } from '@exah/utils'
-import { themePath, getDefault } from '../getters'
+import { themePath, getDefault } from '../utils'
 
 export function createColorValue ({
   themeColorKey = 'color',

src/values/space-value.js

@@ -10,8 +10,7 @@ import {
 } from '@exah/utils'
 
 import { DEFAULT_MEDIA_KEY } from '../constants'
-import { px, splitUnit } from '../utils'
-import { themePath } from '../getters'
+import { px, splitUnit, themePath } from '../utils'
 
 const getSpaceStep = (input, spaces = []) => {
   const value = spaces[Math.abs(input)]

src/values/theme-value.js

@@ -1,5 +1,5 @@
 import { path, identity, isObj, isFn, mapObj } from '@exah/utils'
-import { getDefault, themePath } from '../getters'
+import { getDefault, themePath } from '../utils'
 
 function get ({ themeKey, transformValue, scale }) {
   const isTransformValue = isFn(transformValue)