onno - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

cjs/index.js

@@ -53,7 +53,2 @@ "use strict"
 }
-const uniq = (list) =>
-  list.reduce((a, v) => {
-    if (a.indexOf(v) === -1) a.push(v)
-    return a
-  }, [])
 
@@ -66,3 +61,16 @@ const KEYS = ["propsKeys", "styleKeys", "themeKeys"]
 const push = Array.prototype.push
-function render(keys, value) {
+function merge(styles) {
+  return styles.reduce((o, s) => Object.assign(o, s), {})
+}
+function unique(renderers, initial = []) {
+  return renderers.reduce((collection, renderer) => {
+    if (renderer.options.renderers) {
+      unique(renderer.options.renderers, initial)
+    } else if (collection.indexOf(renderer) === -1) {
+      collection.push(renderer)
+    }
+    return collection
+  }, initial)
+}
+function renderStyle(keys, value) {
   if (isNil(value) || !isArray(keys) || !keys.length) return null
@@ -74,8 +82,36 @@ return keys.reduce((s, k) => {
 }
+function transformStyle(renderers) {
+  const renderer = compose(renderers)
+  const { propsKeys, styleKeys } = renderer.options
+  const transform = (styleObject) => {
+    const renderedStyle = renderer(styleObject)
+    const mergedStyle = renderedStyle && merge(renderedStyle)
+    return Object.keys(styleObject).reduce((result, key) => {
+      const hasPropsKey = propsKeys.includes(key)
+      const hasStyleKey = styleKeys.includes(key)
+      if (hasPropsKey && !hasStyleKey) delete result[key]
+      const value = result[key]
+      if (isObject(value)) result[key] = transform(value)
+      return result
+    }, Object.assign({}, styleObject, mergedStyle))
+  }
+  return transform
+}
 function style(options) {
-  const { propsKeys, styleKeys, themeKeys, transform, defaults } = options
+  const {
+    propsKeys,
+    styleKeys,
+    themeKeys,
+    transform,
+    renderers,
+    defaults
+  } = options
+  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 themeValue = resolve(mappedKeys, theme)
+      const lookupKeys = value === "." ? themeKeys : mappedKeys
+      const themeValue = resolve(lookupKeys, theme)
       if (!isNil(themeValue)) value = themeValue
@@ -90,4 +126,3 @@ } else if (defaults) {
     } else {
-      const keys = isArray(styleKeys) ? styleKeys : propsKeys.slice(0, 1)
-      return render(keys, value)
+      return renderStyle(keys, value)
     }
@@ -101,4 +136,8 @@ }
     const pushStyle = (value, query) => {
-      const result = renderValue(value, theme)
-      return result && styles.push(query ? { [query]: result } : result)
+      let result = renderValue(value, theme)
+      if (result) {
+        if (transformer) result = transformer(result)
+        if (query) result = { [query]: result }
+        styles.push(result)
+      }
     }
@@ -118,12 +157,13 @@ if (isObject(propsValue)) {
   }
+  renderProps.type = "style"
   renderProps.options = options
-  renderProps.composed = false
   return renderProps
 }
 function compose(...args) {
-  const renderers = uniq(toArray(args))
+  const renderers = unique(toArray(args))
   const options = {
     propsKeys: [],
     styleKeys: [],
-    themeKeys: []
+    themeKeys: [],
+    renderers
   }
@@ -136,18 +176,22 @@ renderers.forEach((fn) =>
   )
-  KEYS.forEach((key) => (options[key] = uniq(options[key])))
   const renderProps = (props) => {
-    const result = []
-    renderers.forEach((fn) => {
-      const r = fn(props)
-      if (r) push.apply(result, r)
-    })
+    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
-  renderProps.composed = true
   return renderProps
 }
-const extend = (a) => (b) => style(Object.assign({}, a, b))
-const variant = (options) =>
-  style(Object.assign({}, options, { styleKeys: null }))
+function variant(options) {
+  const renderProps = style(Object.assign({}, options, { styleKeys: null }))
+  renderProps.type = "variant"
+  return renderProps
+}
+function extend(a) {
+  return (b) => style(Object.assign({}, a, b))
+}
 
@@ -270,3 +314,3 @@ const alignContent = style({
   propsKeys: ["borderRadius", "rad"],
-  themeKeys: ["borderRadii", "radii"],
+  themeKeys: ["borderRadii", "sizes"],
   transform: addPcOrPx,
@@ -680,13 +724,33 @@ defaults: PX_SCALE
 
+const globalSet = compose([
+  border,
+  borderRadius,
+  boxShadow,
+  colorSet,
+  opacity,
+  spaceSet,
+  sizeSet,
+  textSet,
+  transition
+])
+
+const globalStyle = variant({
+  propsKeys: ["globalStyle", "gst"],
+  themeKeys: ["globalStyles"],
+  renderers: [globalSet]
+})
 const buttonStyle = variant({
   propsKeys: ["buttonStyle", "bst"],
-  themeKeys: ["buttonStyles"]
+  themeKeys: ["buttonStyles"],
+  renderers: [globalSet]
 })
 const colorStyle = variant({
   propsKeys: ["colorStyle", "cst"],
-  themeKeys: ["colorStyles"]
+  themeKeys: ["colorStyles"],
+  renderers: [colorSet]
 })
 const textStyle = variant({
   propsKeys: ["textStyle", "tst"],
-  themeKeys: ["textStyles"]
+  themeKeys: ["textStyles"],
+  renderers: [textSet]
 })
@@ -745,2 +809,4 @@
 exports.get = get
+exports.globalSet = globalSet
+exports.globalStyle = globalStyle
 exports.grid = grid
@@ -794,2 +860,3 @@ exports.gridArea = gridArea
 exports.maxWidth = maxWidth
+exports.merge = merge
 exports.minHeight = minHeight
@@ -819,3 +886,3 @@ exports.minWidth = minWidth
 exports.positionSet = positionSet
-exports.render = render
+exports.renderStyle = renderStyle
 exports.resolve = resolve
@@ -839,4 +906,5 @@ exports.right = right
 exports.transformSet = transformSet
+exports.transformStyle = transformStyle
 exports.transition = transition
-exports.uniq = uniq
+exports.unique = unique
 exports.variant = variant
@@ -843,0 +911,0 @@ exports.verticalAlign = verticalAlign

esm/index.js

@@ -49,7 +49,2 @@ const PX_SCALE = [0, 2, 4, 8, 16, 32, 64, 128, 256, 512]
 }
-const uniq = (list) =>
-  list.reduce((a, v) => {
-    if (a.indexOf(v) === -1) a.push(v)
-    return a
-  }, [])
 
@@ -62,3 +57,16 @@ const KEYS = ["propsKeys", "styleKeys", "themeKeys"]
 const push = Array.prototype.push
-function render(keys, value) {
+function merge(styles) {
+  return styles.reduce((o, s) => Object.assign(o, s), {})
+}
+function unique(renderers, initial = []) {
+  return renderers.reduce((collection, renderer) => {
+    if (renderer.options.renderers) {
+      unique(renderer.options.renderers, initial)
+    } else if (collection.indexOf(renderer) === -1) {
+      collection.push(renderer)
+    }
+    return collection
+  }, initial)
+}
+function renderStyle(keys, value) {
   if (isNil(value) || !isArray(keys) || !keys.length) return null
@@ -70,8 +78,36 @@ return keys.reduce((s, k) => {
 }
+function transformStyle(renderers) {
+  const renderer = compose(renderers)
+  const { propsKeys, styleKeys } = renderer.options
+  const transform = (styleObject) => {
+    const renderedStyle = renderer(styleObject)
+    const mergedStyle = renderedStyle && merge(renderedStyle)
+    return Object.keys(styleObject).reduce((result, key) => {
+      const hasPropsKey = propsKeys.includes(key)
+      const hasStyleKey = styleKeys.includes(key)
+      if (hasPropsKey && !hasStyleKey) delete result[key]
+      const value = result[key]
+      if (isObject(value)) result[key] = transform(value)
+      return result
+    }, Object.assign({}, styleObject, mergedStyle))
+  }
+  return transform
+}
 function style(options) {
-  const { propsKeys, styleKeys, themeKeys, transform, defaults } = options
+  const {
+    propsKeys,
+    styleKeys,
+    themeKeys,
+    transform,
+    renderers,
+    defaults
+  } = options
+  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 themeValue = resolve(mappedKeys, theme)
+      const lookupKeys = value === "." ? themeKeys : mappedKeys
+      const themeValue = resolve(lookupKeys, theme)
       if (!isNil(themeValue)) value = themeValue
@@ -86,4 +122,3 @@ } else if (defaults) {
     } else {
-      const keys = isArray(styleKeys) ? styleKeys : propsKeys.slice(0, 1)
-      return render(keys, value)
+      return renderStyle(keys, value)
     }
@@ -97,4 +132,8 @@ }
     const pushStyle = (value, query) => {
-      const result = renderValue(value, theme)
-      return result && styles.push(query ? { [query]: result } : result)
+      let result = renderValue(value, theme)
+      if (result) {
+        if (transformer) result = transformer(result)
+        if (query) result = { [query]: result }
+        styles.push(result)
+      }
     }
@@ -114,12 +153,13 @@ if (isObject(propsValue)) {
   }
+  renderProps.type = "style"
   renderProps.options = options
-  renderProps.composed = false
   return renderProps
 }
 function compose(...args) {
-  const renderers = uniq(toArray(args))
+  const renderers = unique(toArray(args))
   const options = {
     propsKeys: [],
     styleKeys: [],
-    themeKeys: []
+    themeKeys: [],
+    renderers
   }
@@ -132,18 +172,22 @@ renderers.forEach((fn) =>
   )
-  KEYS.forEach((key) => (options[key] = uniq(options[key])))
   const renderProps = (props) => {
-    const result = []
-    renderers.forEach((fn) => {
-      const r = fn(props)
-      if (r) push.apply(result, r)
-    })
+    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
-  renderProps.composed = true
   return renderProps
 }
-const extend = (a) => (b) => style(Object.assign({}, a, b))
-const variant = (options) =>
-  style(Object.assign({}, options, { styleKeys: null }))
+function variant(options) {
+  const renderProps = style(Object.assign({}, options, { styleKeys: null }))
+  renderProps.type = "variant"
+  return renderProps
+}
+function extend(a) {
+  return (b) => style(Object.assign({}, a, b))
+}
 
@@ -266,3 +310,3 @@ const alignContent = style({
   propsKeys: ["borderRadius", "rad"],
-  themeKeys: ["borderRadii", "radii"],
+  themeKeys: ["borderRadii", "sizes"],
   transform: addPcOrPx,
@@ -676,13 +720,33 @@ defaults: PX_SCALE
 
+const globalSet = compose([
+  border,
+  borderRadius,
+  boxShadow,
+  colorSet,
+  opacity,
+  spaceSet,
+  sizeSet,
+  textSet,
+  transition
+])
+
+const globalStyle = variant({
+  propsKeys: ["globalStyle", "gst"],
+  themeKeys: ["globalStyles"],
+  renderers: [globalSet]
+})
 const buttonStyle = variant({
   propsKeys: ["buttonStyle", "bst"],
-  themeKeys: ["buttonStyles"]
+  themeKeys: ["buttonStyles"],
+  renderers: [globalSet]
 })
 const colorStyle = variant({
   propsKeys: ["colorStyle", "cst"],
-  themeKeys: ["colorStyles"]
+  themeKeys: ["colorStyles"],
+  renderers: [colorSet]
 })
 const textStyle = variant({
   propsKeys: ["textStyle", "tst"],
-  themeKeys: ["textStyles"]
+  themeKeys: ["textStyles"],
+  renderers: [textSet]
 })
@@ -742,2 +806,4 @@
   get,
+  globalSet,
+  globalStyle,
   grid,
@@ -791,2 +857,3 @@ gridArea,
   maxWidth,
+  merge,
   minHeight,
@@ -816,3 +883,3 @@ minWidth,
   positionSet,
-  render,
+  renderStyle,
   resolve,
@@ -836,4 +903,5 @@ right,
   transformSet,
+  transformStyle,
   transition,
-  uniq,
+  unique,
   variant,
@@ -840,0 +908,0 @@ verticalAlign,

package.json

 {
   "name": "onno",
   "license": "MIT",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Responsive style props for building themed design systems",
@@ -30,5 +30,5 @@ "homepage": "https://github.com/wagerfield/onno/tree/master/packages/onno#readme",
   "dependencies": {
-    "csstype": "2.6.4"
+    "csstype": "2.6.5"
   },
-  "gitHead": "357b87bfdc12b5b797a31d40dbb25c770c4f692d"
+  "gitHead": "4c5ee213e4a5d03518f17c1a2428763792ff4df7"
 }

readme.md

@@ -54,4 +54,8 @@ # [![onno](https://raw.githubusercontent.com/wagerfield/onno/master/assets/onno.png)][onno]
 
-Onno is an iteration of [Styled System][styled-system] rewritten in [TypeScript][typescript] from the ground up. A lot of the ideas are owed to the brilliant work of [Brent Jackson][jxnblk] and the [numerous contributors][styled-system-contributors] to this library. Credit is also due to [Emotion's facepaint][emotion-facepaint] for the original ideas behind responsive prop values.
+Onno is an iteration of [Styled System][styled-system] written in [TypeScript][typescript] from the ground up. The core ideas are indebted to the brilliant work of [Brent Jackson][jxnblk] and the [numerous contributors][styled-system-contributors] to this library. [Facepaint][emotion-facepaint] also deserves credit for the original idea behind responsive style values.
 
+Onno started life as a rewrite of Styled System in [TypeScript][typescript] following a [discussion on GitHub][styled-system-comment]. However, during the course of this rewrite, a number of new ideas, features and refinements to Styled System's API were introduced that eventually warranted another library.
+
+The additional features introduced by onno are [presented in detail here](https://github.com/wagerfield/onno/blob/master/docs/features.md#features).
+
 ## Author
@@ -76,3 +80,4 @@
 [styled-system-contributors]: https://github.com/styled-system/styled-system/graphs/contributors
+[styled-system-comment]: https://github.com/styled-system/styled-system/issues/463#issuecomment-487167817
 [typescript]: https://www.typescriptlang.org
 [jxnblk]: https://jxnblk.com

types/index.d.ts

@@ -18,2 +18,3 @@ export * from "./types"
 export * from "./transform"
+export * from "./global"
 export * from "./variant"

types/style.d.ts

 import * as T from "./types"
-export declare function render<S extends T.Style>(
+export declare function merge<S extends T.Style>(
+  styles: T.StyleArray<S>
+): 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,
   value?: any
 ): S | null
+export declare function transformStyle<S extends T.Style>(
+  renderers: T.AnyRenderFunction[]
+): T.StyleTransformFunction<S>
 export declare function style<P extends T.ThemeProps, S extends T.Style = any>(
@@ -15,9 +25,10 @@ options: T.StyleOptions
 ): T.RenderFunction<P, S>
-export declare const extend: (
+export declare function variant<
+  P extends T.ThemeProps,
+  S extends T.Style = any
+>(options: T.StyleOptions): T.RenderFunction<P, S>
+export declare function extend(
   a: Partial<T.StyleOptions>
-) => <P extends T.ThemeProps, S extends T.Style>(
+): <P extends T.ThemeProps, S extends T.Style>(
   b: T.StyleOptions
 ) => T.RenderFunction<P, S>
-export declare const variant: <P extends T.ThemeProps, S extends T.Style = any>(
-  options: T.VariantOptions
-) => T.RenderFunction<P, S>

types/types.d.ts

@@ -33,3 +33,2 @@ export declare type Length = number
   breakpoints?: Breakpoints
-  global?: ThemeValue
   animations?: ThemeValue
@@ -60,2 +59,3 @@ transitions?: ThemeValue
   letterSpacings?: ThemeValue
+  globalStyles?: ThemeValue
   buttonStyles?: ThemeValue
@@ -69,26 +69,29 @@ colorStyles?: ThemeValue
 }
-export declare type TransformFunction = (value: any) => any
+export declare type ValueTransformFunction = (value: any) => any
 export declare type StyleOptionsKeys = "propsKeys" | "styleKeys" | "themeKeys"
-export interface VariantOptions {
+export interface StyleOptions {
   propsKeys: Keys
+  styleKeys?: Keys | null
   themeKeys?: Keys
-  transform?: TransformFunction
+  transform?: ValueTransformFunction
+  renderers?: AnyRenderFunction[]
   defaults?: ThemeValue
 }
-export interface StyleOptions extends VariantOptions {
-  styleKeys?: Keys | null
-}
+export declare type StyleValue = number | string | string[] | undefined
 export interface Style {
-  [key: string]: number | string | string[] | undefined
+  [key: string]: StyleValue
 }
-export interface NestedStyle<S extends Style> {
-  [key: string]: S
+export interface StyleObject<S extends Style> {
+  [key: string]: StyleObject<S> | StyleValue
 }
-export declare type StyleObject<S extends Style> = S | NestedStyle<S>
 export declare type StyleArray<S extends Style> = StyleObject<S>[]
+export declare type RenderFunctionType = "style" | "compose" | "variant"
 export interface RenderFunction<P extends ThemeProps, S extends Style> {
   (props: P): StyleArray<S> | null
+  type: RenderFunctionType
   options: StyleOptions
-  composed: boolean
 }
 export declare type AnyRenderFunction = RenderFunction<any, any>
+export declare type StyleTransformFunction<S extends Style> = (
+  style: StyleObject<S>
+) => StyleObject<S>

types/utils.d.ts

@@ -20,2 +20,1 @@ import { Func, Pred } from "./types"
 export declare function resolve(paths?: any[], lookup?: any): any
-export declare const uniq: <V>(list: V[]) => V[]

types/variant.d.ts

 import * as T from "./types"
 export declare type VariantProp = T.Prop<number | string>
+export interface GlobalStyleProps extends T.ThemeProps {
+  globalStyle?: VariantProp
+  gst?: VariantProp
+}
+export declare const globalStyle: T.RenderFunction<GlobalStyleProps, any>
 export interface ButtonStyleProps extends T.ThemeProps {
@@ -4,0 +9,0 @@ buttonStyle?: VariantProp

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

103171

increased by6.03%

Number of package files

25

increased by4.17%

Lines of code

3515

increased by5.65%

Number of lines in readme file

82

increased by6.49%

Dependency changes

• + Addedcsstype@2.6.5(transitive)

• - Removedcsstype@2.6.4(transitive)

• Updatedcsstype@2.6.5