onno - npm Package Compare versions

Comparing version 0.0.16 to 0.0.17

cjs/index.js

@@ -58,10 +58,3 @@ "use strict"
 const KEYS = ["propsKeys", "styleKeys", "themeKeys"]
-const BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"].map((alias, index) => ({
-  alias,
-  value: index * 360
-}))
 const push = Array.prototype.push
-function merge(styles) {
-  return styles.reduce((o, s) => Object.assign(o, s), {})
-}
 function unique(renderers, initial = []) {
@@ -77,2 +70,39 @@ return renderers.reduce((collection, renderer) => {
 }
+function compose(options) {
+  let { name } = options
+  if (!/Set$/.test(name)) name += "Set"
+  const renderers = unique(options.renderers)
+  const composedOptions = {
+    propsKeys: [],
+    styleKeys: [],
+    themeKeys: [],
+    renderers
+  }
+  renderers.forEach((fn) =>
+    KEYS.forEach((key) => {
+      const keys = fn.options[key]
+      if (keys) push.apply(composedOptions[key], keys)
+    })
+  )
+  const renderProps = (props) => {
+    const result = renderers.reduce((styles, renderer) => {
+      const output = renderer(props)
+      if (output) push.apply(styles, output)
+      return styles
+    }, [])
+    return result.length ? result : null
+  }
+  renderProps.options = composedOptions
+  renderProps.type = "compose"
+  Object.defineProperty(renderProps, "name", { value: name })
+  return renderProps
+}
+
+const BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"].map((alias, index) => ({
+  alias,
+  value: index * 360
+}))
+function merge(styles) {
+  return styles.reduce((o, s) => Object.assign(o, s), {})
+}
 function renderStyle(keys, value) {
@@ -86,3 +116,3 @@ if (isNil(value) || !isArray(keys) || !keys.length) return null
 function transformStyle(renderers) {
-  const renderer = compose(renderers)
+  const renderer = compose({ name: "transform", renderers })
   const { propsKeys, styleKeys } = renderer.options
@@ -115,10 +145,15 @@ const transform = (styleObject, theme) => {
   } = options
+  if (!isArray(propsKeys) || propsKeys.length < 1) {
+    throw Error("propsKeys must be an array containing at least one key")
+  }
+  const name = propsKeys[0]
+  const keys = isArray(styleKeys) ? styleKeys : propsKeys.slice(0, 1)
   const transformer = isArray(renderers) && transformStyle(renderers)
-  const keys = isArray(styleKeys) ? styleKeys : propsKeys.slice(0, 1)
   if (isUndefined(styleKeys)) options.styleKeys = keys
   const renderValue = (value, theme) => {
-    if (!isUndefined(resolve(themeKeys, theme))) {
-      const mappedKeys = themeKeys.map((k) => `${k}.${value}`)
-      const lookupKeys = value === "." ? themeKeys : mappedKeys
-      const themeValue = resolve(lookupKeys, theme)
+    let themeValue = resolve(themeKeys, theme)
+    if (!isUndefined(themeValue)) {
+      if (value !== ".") {
+        themeValue = resolve(themeKeys.map((k) => `${k}.${value}`), theme)
+      }
       if (!isNil(themeValue)) value = themeValue
@@ -162,32 +197,7 @@ } else if (defaults) {
   }
+  renderProps.options = options
   renderProps.type = "style"
-  renderProps.options = options
+  Object.defineProperty(renderProps, "name", { value: name })
   return renderProps
 }
-function compose(...args) {
-  const renderers = unique(toArray(args))
-  const options = {
-    propsKeys: [],
-    styleKeys: [],
-    themeKeys: [],
-    renderers
-  }
-  renderers.forEach((fn) =>
-    KEYS.forEach((key) => {
-      const keys = fn.options[key]
-      if (keys) push.apply(options[key], keys)
-    })
-  )
-  const renderProps = (props) => {
-    const result = renderers.reduce((styles, renderer) => {
-      const output = renderer(props)
-      if (output) push.apply(styles, output)
-      return styles
-    }, [])
-    return result.length ? result : null
-  }
-  renderProps.type = "compose"
-  renderProps.options = options
-  return renderProps
-}
 function variant(options) {
@@ -202,2 +212,20 @@ const renderProps = style(Object.assign({}, options, { styleKeys: null }))
 
+function omit(options) {
+  const { propsKeys, renderers } = options
+  const keys = []
+  if (isArray(propsKeys)) {
+    push.apply(keys, propsKeys)
+  }
+  if (isArray(renderers)) {
+    const omitSet = compose({ name: "omit", renderers })
+    push.apply(keys, omitSet.options.propsKeys)
+  }
+  const omitProps = (props) => {
+    const filteredProps = Object.assign({}, props)
+    keys.forEach((key) => delete filteredProps[key])
+    return filteredProps
+  }
+  return omitProps
+}
+
 const alignContent = style({
@@ -263,3 +291,6 @@ propsKeys: ["alignContent", "alc"]
 })
-const colorSet = compose([background, backgroundColor, borderColor, color])
+const colorSet = compose({
+  name: "color",
+  renderers: [background, backgroundColor, borderColor, color]
+})
 
@@ -282,10 +313,13 @@ const ex$1 = extend({
 })
-const backgroundSet = compose([
-  background,
-  backgroundColor,
-  backgroundImage,
-  backgroundPosition,
-  backgroundRepeat,
-  backgroundSize
-])
+const backgroundSet = compose({
+  name: "background",
+  renderers: [
+    background,
+    backgroundColor,
+    backgroundImage,
+    backgroundPosition,
+    backgroundRepeat,
+    backgroundSize
+  ]
+})
 
@@ -325,13 +359,16 @@ const ex$2 = extend({
 })
-const borderSet = compose([
-  border,
-  borderTop,
-  borderRight,
-  borderBottom,
-  borderLeft,
-  borderColor,
-  borderStyle,
-  borderWidth,
-  borderRadius
-])
+const borderSet = compose({
+  name: "border",
+  renderers: [
+    border,
+    borderTop,
+    borderRight,
+    borderBottom,
+    borderLeft,
+    borderColor,
+    borderStyle,
+    borderWidth,
+    borderRadius
+  ]
+})
 
@@ -357,4 +394,10 @@ const display = style({
 })
-const overflowSet = compose([overflow, overflowX, overflowY])
-const displaySet = compose([display, opacity, overflowSet, visibility])
+const overflowSet = compose({
+  name: "overflow",
+  renderers: [overflow, overflowX, overflowY]
+})
+const displaySet = compose({
+  name: "display",
+  renderers: [display, opacity, overflowSet, visibility]
+})
 
@@ -382,22 +425,31 @@ const flex = style({
 })
-const flexParentSet = compose([
-  display,
-  alignItems,
-  alignContent,
-  justifyItems,
-  justifyContent,
-  flexFlow,
-  flexDirection,
-  flexWrap
-])
-const flexChildSet = compose([
-  alignSelf,
-  justifySelf,
-  order,
-  flex,
-  flexBasis,
-  flexGrow,
-  flexShrink
-])
-const flexSet = compose([flexParentSet, flexChildSet])
+const flexParentSet = compose({
+  name: "flexParent",
+  renderers: [
+    display,
+    alignItems,
+    alignContent,
+    justifyItems,
+    justifyContent,
+    flexFlow,
+    flexDirection,
+    flexWrap
+  ]
+})
+const flexChildSet = compose({
+  name: "flexChild",
+  renderers: [
+    alignSelf,
+    justifySelf,
+    order,
+    flex,
+    flexBasis,
+    flexGrow,
+    flexShrink
+  ]
+})
+const flexSet = compose({
+  name: "flex",
+  renderers: [flexParentSet, flexChildSet]
+})
 
@@ -463,35 +515,44 @@ const ex$3 = extend({
 })
-const gridParentSet = compose([
-  display,
-  placeItems,
-  placeContent,
-  alignItems,
-  alignContent,
-  justifyItems,
-  justifyContent,
-  grid,
-  gridTemplate,
-  gridTemplateRows,
-  gridTemplateColumns,
-  gridTemplateAreas,
-  gridGap,
-  gridRowGap,
-  gridColumnGap,
-  gridAutoRows,
-  gridAutoColumns,
-  gridAutoFlow
-])
-const gridChildSet = compose([
-  placeSelf,
-  alignSelf,
-  justifySelf,
-  gridArea,
-  gridRow,
-  gridRowStart,
-  gridRowEnd,
-  gridColumn,
-  gridColumnStart,
-  gridColumnEnd
-])
-const gridSet = compose([gridParentSet, gridChildSet])
+const gridParentSet = compose({
+  name: "gridParent",
+  renderers: [
+    display,
+    placeItems,
+    placeContent,
+    alignItems,
+    alignContent,
+    justifyItems,
+    justifyContent,
+    grid,
+    gridTemplate,
+    gridTemplateRows,
+    gridTemplateColumns,
+    gridTemplateAreas,
+    gridGap,
+    gridRowGap,
+    gridColumnGap,
+    gridAutoRows,
+    gridAutoColumns,
+    gridAutoFlow
+  ]
+})
+const gridChildSet = compose({
+  name: "gridChild",
+  renderers: [
+    placeSelf,
+    alignSelf,
+    justifySelf,
+    gridArea,
+    gridRow,
+    gridRowStart,
+    gridRowEnd,
+    gridColumn,
+    gridColumnStart,
+    gridColumnEnd
+  ]
+})
+const gridSet = compose({
+  name: "grid",
+  renderers: [gridParentSet, gridChildSet]
+})
 
@@ -554,13 +615,14 @@ const SK = "sizes"
 })
-const positionSet = compose([position, zIndex, top, right, bottom, left])
-const sizeSet = compose([
-  size,
-  width,
-  minWidth,
-  maxWidth,
-  height,
-  minHeight,
-  maxHeight
-])
-const layoutSet = compose([display, verticalAlign, positionSet, sizeSet])
+const positionSet = compose({
+  name: "position",
+  renderers: [position, zIndex, top, right, bottom, left]
+})
+const sizeSet = compose({
+  name: "size",
+  renderers: [size, width, minWidth, maxWidth, height, minHeight, maxHeight]
+})
+const layoutSet = compose({
+  name: "layout",
+  renderers: [display, verticalAlign, positionSet, sizeSet]
+})
 
@@ -635,21 +697,30 @@ const boxShadow = style({
 })
-const marginSet = compose([
-  margin,
-  marginX,
-  marginY,
-  marginTop,
-  marginRight,
-  marginBottom,
-  marginLeft
-])
-const paddingSet = compose([
-  padding,
-  paddingX,
-  paddingY,
-  paddingTop,
-  paddingRight,
-  paddingBottom,
-  paddingLeft
-])
-const spaceSet = compose([marginSet, paddingSet])
+const marginSet = compose({
+  name: "margin",
+  renderers: [
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft
+  ]
+})
+const paddingSet = compose({
+  name: "padding",
+  renderers: [
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft
+  ]
+})
+const spaceSet = compose({
+  name: "space",
+  renderers: [marginSet, paddingSet]
+})
 
@@ -704,14 +775,17 @@ const fontFamily = style({
 })
-const textSet = compose([
-  fontFamily,
-  fontSize,
-  fontStyle,
-  fontWeight,
-  lineHeight,
-  letterSpacing,
-  textAlign,
-  textDecoration,
-  textTransform,
-  color
-])
+const textSet = compose({
+  name: "text",
+  renderers: [
+    fontFamily,
+    fontSize,
+    fontStyle,
+    fontWeight,
+    lineHeight,
+    letterSpacing,
+    textAlign,
+    textDecoration,
+    textTransform,
+    color
+  ]
+})
 
@@ -730,20 +804,21 @@ const perspective = style({
 })
-const transformSet = compose([
-  perspective,
-  perspectiveOrigin,
-  transform,
-  transformOrigin
-])
+const transformSet = compose({
+  name: "transform",
+  renderers: [perspective, perspectiveOrigin, transform, transformOrigin]
+})
 
-const globalSet = compose([
-  border,
-  borderRadius,
-  boxShadow,
-  colorSet,
-  opacity,
-  spaceSet,
-  sizeSet,
-  textSet,
-  transition
-])
+const globalSet = compose({
+  name: "global",
+  renderers: [
+    border,
+    borderRadius,
+    boxShadow,
+    colorSet,
+    opacity,
+    spaceSet,
+    sizeSet,
+    textSet,
+    transition
+  ]
+})
 
@@ -880,2 +955,3 @@ const colorStyle = variant({
 exports.mq = mq
+exports.omit = omit
 exports.opacity = opacity
@@ -902,2 +978,3 @@ exports.order = order
 exports.positionSet = positionSet
+exports.push = push
 exports.renderStyle = renderStyle
@@ -904,0 +981,0 @@ exports.resolve = resolve

esm/index.js

@@ -54,10 +54,3 @@ const PX_SCALE = [0, 2, 4, 8, 16, 32, 64, 128, 256, 512]
 const KEYS = ["propsKeys", "styleKeys", "themeKeys"]
-const BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"].map((alias, index) => ({
-  alias,
-  value: index * 360
-}))
 const push = Array.prototype.push
-function merge(styles) {
-  return styles.reduce((o, s) => Object.assign(o, s), {})
-}
 function unique(renderers, initial = []) {
@@ -73,2 +66,39 @@ return renderers.reduce((collection, renderer) => {
 }
+function compose(options) {
+  let { name } = options
+  if (!/Set$/.test(name)) name += "Set"
+  const renderers = unique(options.renderers)
+  const composedOptions = {
+    propsKeys: [],
+    styleKeys: [],
+    themeKeys: [],
+    renderers
+  }
+  renderers.forEach((fn) =>
+    KEYS.forEach((key) => {
+      const keys = fn.options[key]
+      if (keys) push.apply(composedOptions[key], keys)
+    })
+  )
+  const renderProps = (props) => {
+    const result = renderers.reduce((styles, renderer) => {
+      const output = renderer(props)
+      if (output) push.apply(styles, output)
+      return styles
+    }, [])
+    return result.length ? result : null
+  }
+  renderProps.options = composedOptions
+  renderProps.type = "compose"
+  Object.defineProperty(renderProps, "name", { value: name })
+  return renderProps
+}
+
+const BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"].map((alias, index) => ({
+  alias,
+  value: index * 360
+}))
+function merge(styles) {
+  return styles.reduce((o, s) => Object.assign(o, s), {})
+}
 function renderStyle(keys, value) {
@@ -82,3 +112,3 @@ if (isNil(value) || !isArray(keys) || !keys.length) return null
 function transformStyle(renderers) {
-  const renderer = compose(renderers)
+  const renderer = compose({ name: "transform", renderers })
   const { propsKeys, styleKeys } = renderer.options
@@ -111,10 +141,15 @@ const transform = (styleObject, theme) => {
   } = options
+  if (!isArray(propsKeys) || propsKeys.length < 1) {
+    throw Error("propsKeys must be an array containing at least one key")
+  }
+  const name = propsKeys[0]
+  const keys = isArray(styleKeys) ? styleKeys : propsKeys.slice(0, 1)
   const transformer = isArray(renderers) && transformStyle(renderers)
-  const keys = isArray(styleKeys) ? styleKeys : propsKeys.slice(0, 1)
   if (isUndefined(styleKeys)) options.styleKeys = keys
   const renderValue = (value, theme) => {
-    if (!isUndefined(resolve(themeKeys, theme))) {
-      const mappedKeys = themeKeys.map((k) => `${k}.${value}`)
-      const lookupKeys = value === "." ? themeKeys : mappedKeys
-      const themeValue = resolve(lookupKeys, theme)
+    let themeValue = resolve(themeKeys, theme)
+    if (!isUndefined(themeValue)) {
+      if (value !== ".") {
+        themeValue = resolve(themeKeys.map((k) => `${k}.${value}`), theme)
+      }
       if (!isNil(themeValue)) value = themeValue
@@ -158,32 +193,7 @@ } else if (defaults) {
   }
+  renderProps.options = options
   renderProps.type = "style"
-  renderProps.options = options
+  Object.defineProperty(renderProps, "name", { value: name })
   return renderProps
 }
-function compose(...args) {
-  const renderers = unique(toArray(args))
-  const options = {
-    propsKeys: [],
-    styleKeys: [],
-    themeKeys: [],
-    renderers
-  }
-  renderers.forEach((fn) =>
-    KEYS.forEach((key) => {
-      const keys = fn.options[key]
-      if (keys) push.apply(options[key], keys)
-    })
-  )
-  const renderProps = (props) => {
-    const result = renderers.reduce((styles, renderer) => {
-      const output = renderer(props)
-      if (output) push.apply(styles, output)
-      return styles
-    }, [])
-    return result.length ? result : null
-  }
-  renderProps.type = "compose"
-  renderProps.options = options
-  return renderProps
-}
 function variant(options) {
@@ -198,2 +208,20 @@ const renderProps = style(Object.assign({}, options, { styleKeys: null }))
 
+function omit(options) {
+  const { propsKeys, renderers } = options
+  const keys = []
+  if (isArray(propsKeys)) {
+    push.apply(keys, propsKeys)
+  }
+  if (isArray(renderers)) {
+    const omitSet = compose({ name: "omit", renderers })
+    push.apply(keys, omitSet.options.propsKeys)
+  }
+  const omitProps = (props) => {
+    const filteredProps = Object.assign({}, props)
+    keys.forEach((key) => delete filteredProps[key])
+    return filteredProps
+  }
+  return omitProps
+}
+
 const alignContent = style({
@@ -259,3 +287,6 @@ propsKeys: ["alignContent", "alc"]
 })
-const colorSet = compose([background, backgroundColor, borderColor, color])
+const colorSet = compose({
+  name: "color",
+  renderers: [background, backgroundColor, borderColor, color]
+})
 
@@ -278,10 +309,13 @@ const ex$1 = extend({
 })
-const backgroundSet = compose([
-  background,
-  backgroundColor,
-  backgroundImage,
-  backgroundPosition,
-  backgroundRepeat,
-  backgroundSize
-])
+const backgroundSet = compose({
+  name: "background",
+  renderers: [
+    background,
+    backgroundColor,
+    backgroundImage,
+    backgroundPosition,
+    backgroundRepeat,
+    backgroundSize
+  ]
+})
 
@@ -321,13 +355,16 @@ const ex$2 = extend({
 })
-const borderSet = compose([
-  border,
-  borderTop,
-  borderRight,
-  borderBottom,
-  borderLeft,
-  borderColor,
-  borderStyle,
-  borderWidth,
-  borderRadius
-])
+const borderSet = compose({
+  name: "border",
+  renderers: [
+    border,
+    borderTop,
+    borderRight,
+    borderBottom,
+    borderLeft,
+    borderColor,
+    borderStyle,
+    borderWidth,
+    borderRadius
+  ]
+})
 
@@ -353,4 +390,10 @@ const display = style({
 })
-const overflowSet = compose([overflow, overflowX, overflowY])
-const displaySet = compose([display, opacity, overflowSet, visibility])
+const overflowSet = compose({
+  name: "overflow",
+  renderers: [overflow, overflowX, overflowY]
+})
+const displaySet = compose({
+  name: "display",
+  renderers: [display, opacity, overflowSet, visibility]
+})
 
@@ -378,22 +421,31 @@ const flex = style({
 })
-const flexParentSet = compose([
-  display,
-  alignItems,
-  alignContent,
-  justifyItems,
-  justifyContent,
-  flexFlow,
-  flexDirection,
-  flexWrap
-])
-const flexChildSet = compose([
-  alignSelf,
-  justifySelf,
-  order,
-  flex,
-  flexBasis,
-  flexGrow,
-  flexShrink
-])
-const flexSet = compose([flexParentSet, flexChildSet])
+const flexParentSet = compose({
+  name: "flexParent",
+  renderers: [
+    display,
+    alignItems,
+    alignContent,
+    justifyItems,
+    justifyContent,
+    flexFlow,
+    flexDirection,
+    flexWrap
+  ]
+})
+const flexChildSet = compose({
+  name: "flexChild",
+  renderers: [
+    alignSelf,
+    justifySelf,
+    order,
+    flex,
+    flexBasis,
+    flexGrow,
+    flexShrink
+  ]
+})
+const flexSet = compose({
+  name: "flex",
+  renderers: [flexParentSet, flexChildSet]
+})
 
@@ -459,35 +511,44 @@ const ex$3 = extend({
 })
-const gridParentSet = compose([
-  display,
-  placeItems,
-  placeContent,
-  alignItems,
-  alignContent,
-  justifyItems,
-  justifyContent,
-  grid,
-  gridTemplate,
-  gridTemplateRows,
-  gridTemplateColumns,
-  gridTemplateAreas,
-  gridGap,
-  gridRowGap,
-  gridColumnGap,
-  gridAutoRows,
-  gridAutoColumns,
-  gridAutoFlow
-])
-const gridChildSet = compose([
-  placeSelf,
-  alignSelf,
-  justifySelf,
-  gridArea,
-  gridRow,
-  gridRowStart,
-  gridRowEnd,
-  gridColumn,
-  gridColumnStart,
-  gridColumnEnd
-])
-const gridSet = compose([gridParentSet, gridChildSet])
+const gridParentSet = compose({
+  name: "gridParent",
+  renderers: [
+    display,
+    placeItems,
+    placeContent,
+    alignItems,
+    alignContent,
+    justifyItems,
+    justifyContent,
+    grid,
+    gridTemplate,
+    gridTemplateRows,
+    gridTemplateColumns,
+    gridTemplateAreas,
+    gridGap,
+    gridRowGap,
+    gridColumnGap,
+    gridAutoRows,
+    gridAutoColumns,
+    gridAutoFlow
+  ]
+})
+const gridChildSet = compose({
+  name: "gridChild",
+  renderers: [
+    placeSelf,
+    alignSelf,
+    justifySelf,
+    gridArea,
+    gridRow,
+    gridRowStart,
+    gridRowEnd,
+    gridColumn,
+    gridColumnStart,
+    gridColumnEnd
+  ]
+})
+const gridSet = compose({
+  name: "grid",
+  renderers: [gridParentSet, gridChildSet]
+})
 
@@ -550,13 +611,14 @@ const SK = "sizes"
 })
-const positionSet = compose([position, zIndex, top, right, bottom, left])
-const sizeSet = compose([
-  size,
-  width,
-  minWidth,
-  maxWidth,
-  height,
-  minHeight,
-  maxHeight
-])
-const layoutSet = compose([display, verticalAlign, positionSet, sizeSet])
+const positionSet = compose({
+  name: "position",
+  renderers: [position, zIndex, top, right, bottom, left]
+})
+const sizeSet = compose({
+  name: "size",
+  renderers: [size, width, minWidth, maxWidth, height, minHeight, maxHeight]
+})
+const layoutSet = compose({
+  name: "layout",
+  renderers: [display, verticalAlign, positionSet, sizeSet]
+})
 
@@ -631,21 +693,30 @@ const boxShadow = style({
 })
-const marginSet = compose([
-  margin,
-  marginX,
-  marginY,
-  marginTop,
-  marginRight,
-  marginBottom,
-  marginLeft
-])
-const paddingSet = compose([
-  padding,
-  paddingX,
-  paddingY,
-  paddingTop,
-  paddingRight,
-  paddingBottom,
-  paddingLeft
-])
-const spaceSet = compose([marginSet, paddingSet])
+const marginSet = compose({
+  name: "margin",
+  renderers: [
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft
+  ]
+})
+const paddingSet = compose({
+  name: "padding",
+  renderers: [
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft
+  ]
+})
+const spaceSet = compose({
+  name: "space",
+  renderers: [marginSet, paddingSet]
+})
 
@@ -700,14 +771,17 @@ const fontFamily = style({
 })
-const textSet = compose([
-  fontFamily,
-  fontSize,
-  fontStyle,
-  fontWeight,
-  lineHeight,
-  letterSpacing,
-  textAlign,
-  textDecoration,
-  textTransform,
-  color
-])
+const textSet = compose({
+  name: "text",
+  renderers: [
+    fontFamily,
+    fontSize,
+    fontStyle,
+    fontWeight,
+    lineHeight,
+    letterSpacing,
+    textAlign,
+    textDecoration,
+    textTransform,
+    color
+  ]
+})
 
@@ -726,20 +800,21 @@ const perspective = style({
 })
-const transformSet = compose([
-  perspective,
-  perspectiveOrigin,
-  transform,
-  transformOrigin
-])
+const transformSet = compose({
+  name: "transform",
+  renderers: [perspective, perspectiveOrigin, transform, transformOrigin]
+})
 
-const globalSet = compose([
-  border,
-  borderRadius,
-  boxShadow,
-  colorSet,
-  opacity,
-  spaceSet,
-  sizeSet,
-  textSet,
-  transition
-])
+const globalSet = compose({
+  name: "global",
+  renderers: [
+    border,
+    borderRadius,
+    boxShadow,
+    colorSet,
+    opacity,
+    spaceSet,
+    sizeSet,
+    textSet,
+    transition
+  ]
+})
 
@@ -877,2 +952,3 @@ const colorStyle = variant({
   mq,
+  omit,
   opacity,
@@ -899,2 +975,3 @@ order,
   positionSet,
+  push,
   renderStyle,
@@ -901,0 +978,0 @@ resolve,

package.json

 {
   "name": "onno",
   "license": "MIT",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Responsive style props for building themed design systems",
@@ -33,3 +33,3 @@ "homepage": "https://github.com/wagerfield/onno/tree/master/packages/onno#readme",
   },
-  "gitHead": "f22d5b24d4d552ef1052cf597853ed2c4e2bc27e"
+  "gitHead": "ede6f7b2a2c3af02fdaf84db3104b48a41d2b3a1"
 }

readme.md

@@ -38,4 +38,4 @@ # [![onno](https://raw.githubusercontent.com/wagerfield/onno/master/assets/onno.png)][onno]
 
-// [{ backgroundColor: "tomato" }, { color: "ivory" }]
-<Box backgroundColor="tomato" color="ivory" />
+// [{ backgroundColor: "coral" }, { color: "ivory" }]
+<Box backgroundColor="coral" color="ivory" />
 
@@ -42,0 +42,0 @@ // [{ background: "url(onno.png) center" }]

types/index.d.ts

 export * from "./types"
 export * from "./constants"
 export * from "./utils"
+export * from "./compose"
 export * from "./style"
+export * from "./omit"
 export * from "./align"
@@ -19,2 +21,2 @@ export * from "./animation"
 export * from "./global"
-export * from "./variant"
+export * from "./variants"

types/style.d.ts

@@ -5,8 +5,4 @@ import * as T from "./types"
 ): T.StyleObject<S>
-export declare function unique(
-  renderers: T.AnyRenderFunction[],
-  initial?: T.AnyRenderFunction[]
-): T.AnyRenderFunction[]
 export declare function renderStyle<S extends T.Style>(
-  keys?: T.Keys,
+  keys?: (keyof S)[],
   value?: any
@@ -17,15 +13,8 @@ ): S | null
 ): T.StyleTransformFunction<S>
-export declare function style<P extends T.ThemeProps, S extends T.Style = any>(
+export declare function style<P extends T.ThemeProps, S extends T.Style>(
   options: T.StyleOptions
 ): T.RenderFunction<P, S>
-export declare function compose<P extends T.ThemeProps, S extends T.Style>(
-  renderers: T.AnyRenderFunction[]
-): T.ComposedRenderFunction<P, S>
-export declare function compose<P extends T.ThemeProps, S extends T.Style>(
-  ...renderers: T.AnyRenderFunction[]
-): T.ComposedRenderFunction<P, S>
-export declare function variant<
-  P extends T.ThemeProps,
-  S extends T.Style = any
->(options: T.StyleOptions): T.RenderFunction<P, S>
+export declare function variant<P extends T.ThemeProps, S extends T.Style>(
+  options: T.VariantOptions
+): T.RenderFunction<P, S>
 export declare function extend(
@@ -32,0 +21,0 @@ a: Partial<T.StyleOptions>

types/types.d.ts

@@ -66,3 +66,21 @@ export declare type Length = number
 }
+export interface Props extends ThemeProps {
+  [key: string]: any
+}
+export declare type StyleValue = number | string | string[] | undefined
+export interface Style {
+  [key: string]: StyleValue
+}
+export interface StyleObject<S extends Style> {
+  [key: string]: StyleObject<S> | StyleValue
+}
+export declare type StyleArray<S extends Style> = StyleObject<S>[]
 export declare type ValueTransformFunction = (value: any) => any
+export declare type StyleTransformFunction<S extends Style> = (
+  style: StyleObject<S>,
+  theme?: Theme
+) => StyleObject<S>
+export declare type OmitFunction<P extends ThemeProps> = (
+  value: P
+) => Partial<P>
 export declare type StyleOptionsKeys = "propsKeys" | "styleKeys" | "themeKeys"
@@ -77,30 +95,27 @@ export interface StyleOptions {
 }
-export declare type StyleValue = number | string | string[] | undefined
-export interface Style {
-  [key: string]: StyleValue
+export declare type VariantOptions = Omit<StyleOptions, "styleKeys">
+export interface ComposeOptions {
+  renderers: AnyRenderFunction[]
+  name: string
 }
-export interface StyleObject<S extends Style> {
-  [key: string]: StyleObject<S> | StyleValue
+export interface OmitOptions {
+  propsKeys?: Keys
+  renderers?: AnyRenderFunction[]
 }
-export declare type StyleArray<S extends Style> = StyleObject<S>[]
+export interface ComposedRenderOptions {
+  propsKeys: Keys
+  styleKeys: Keys
+  themeKeys: Keys
+  renderers: AnyRenderFunction[]
+}
 export declare type RenderFunctionType = "style" | "compose" | "variant"
 export interface RenderFunction<P extends ThemeProps, S extends Style> {
   (props: P): StyleArray<S> | null
+  options: StyleOptions
   type: RenderFunctionType
-  options: StyleOptions
 }
-export declare type AnyRenderFunction = RenderFunction<any, any>
-export interface ComposedStyleOptions extends StyleOptions {
-  propsKeys: Keys
-  styleKeys: Keys
-  themeKeys: Keys
-  renderers: AnyRenderFunction[]
-}
 export interface ComposedRenderFunction<P extends ThemeProps, S extends Style>
   extends RenderFunction<P, S> {
-  options: ComposedStyleOptions
+  options: ComposedRenderOptions
 }
-export declare type StyleTransformFunction<S extends Style> = (
-  style: StyleObject<S>,
-  theme?: Theme
-) => StyleObject<S>
+export declare type AnyRenderFunction = RenderFunction<any, any>

types/utils.d.ts

@@ -6,3 +6,3 @@ import { Func, Pred } from "./types"
 export declare const isType: <T>(type: string) => (x: any) => x is T
-export declare const isObject: (x: any) => x is {}
+export declare const isObject: (x: any) => x is unknown
 export declare const isNumber: (x: any) => x is number
@@ -9,0 +9,0 @@ export declare const isString: (x: any) => x is string

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108635

increased by3.81%

Number of package files

27

increased by8%

Lines of code

3742

increased by4.73%

No dependency changes