onno - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

cjs/index.js

@@ -7,4 +7,9 @@ "use strict"
 const PC_SCALE = Object.assign([], PX_SCALE, { 1: "100%" })
+const BREAKPOINTS = ["all", "sm", "md", "lg", "xl"].map((alias, index) => ({
+  alias,
+  value: index * 360
+}))
 
 const IGNORE = /\s|\d+\.\d+/
+const push = Array.prototype.push
 const isArray = Array.isArray
@@ -60,3 +65,2 @@ const isNil = (x) => x == null
 const KEYS = ["propsKeys", "styleKeys", "themeKeys"]
-const push = Array.prototype.push
 function unique(renderers, initial = []) {
@@ -102,17 +106,9 @@ return renderers.reduce((collection, renderer) => {
 
-const BREAKPOINTS = ["all", "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) {
-  if (isNil(value) || !isArray(keys) || !keys.length) return null
-  return keys.reduce((s, k) => {
-    s[k] = value
-    return s
-  }, {})
-}
-function transformStyle(renderer) {
+function interpolate(options) {
+  let { name, renderers } = options
+  if (!/Transform$/.test(name)) name += "Transform"
+  const renderer = compose({ name, renderers })
   const { propsKeys, styleKeys } = renderer.options
@@ -134,4 +130,14 @@ const transform = (styleObject, theme) => {
   }
+  Object.defineProperty(transform, "name", { value: name })
   return transform
 }
+
+function render(keys, value) {
+  if (isNil(value) || !isArray(keys) || !keys.length) return null
+  return keys.reduce((s, k) => {
+    s[k] = value
+    return s
+  }, {})
+}
+
 function style(options) {
@@ -151,7 +157,3 @@ const {
   const keys = isArray(styleKeys) ? styleKeys : propsKeys.slice(0, 1)
-  let transformer
-  if (isArray(renderers)) {
-    const renderer = compose({ name: `${name}Renderer`, renderers })
-    transformer = transformStyle(renderer)
-  }
+  const transformStyle = isArray(renderers) && interpolate({ name, renderers })
   if (isUndefined(styleKeys)) options.styleKeys = keys
@@ -173,3 +175,3 @@ const renderValue = (value, theme) => {
     } else {
-      return renderStyle(keys, value)
+      return render(keys, value)
     }
@@ -185,3 +187,3 @@ }
       if (result) {
-        if (transformer) result = transformer(result, theme)
+        if (transformStyle) result = transformStyle(result, theme)
         if (query) result = { [query]: result }
@@ -851,2 +853,3 @@ styles.push(result)
 
+exports.BREAKPOINTS = BREAKPOINTS
 exports.PC_SCALE = PC_SCALE
@@ -929,2 +932,3 @@ exports.PX_SCALE = PX_SCALE
 exports.height = height
+exports.interpolate = interpolate
 exports.isArray = isArray
@@ -984,3 +988,3 @@ exports.isFraction = isFraction
 exports.push = push
-exports.renderStyle = renderStyle
+exports.render = render
 exports.resolve = resolve
@@ -1004,3 +1008,2 @@ exports.right = right
 exports.transformSet = transformSet
-exports.transformStyle = transformStyle
 exports.transition = transition
@@ -1007,0 +1010,0 @@ exports.unique = unique

esm/index.js

 const PX_SCALE = [0, 2, 4, 8, 16, 32, 64, 128, 256, 512]
 const PC_SCALE = Object.assign([], PX_SCALE, { 1: "100%" })
+const BREAKPOINTS = ["all", "sm", "md", "lg", "xl"].map((alias, index) => ({
+  alias,
+  value: index * 360
+}))
 
 const IGNORE = /\s|\d+\.\d+/
+const push = Array.prototype.push
 const isArray = Array.isArray
@@ -55,3 +60,2 @@ const isNil = (x) => x == null
 const KEYS = ["propsKeys", "styleKeys", "themeKeys"]
-const push = Array.prototype.push
 function unique(renderers, initial = []) {
@@ -97,17 +101,9 @@ return renderers.reduce((collection, renderer) => {
 
-const BREAKPOINTS = ["all", "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) {
-  if (isNil(value) || !isArray(keys) || !keys.length) return null
-  return keys.reduce((s, k) => {
-    s[k] = value
-    return s
-  }, {})
-}
-function transformStyle(renderer) {
+function interpolate(options) {
+  let { name, renderers } = options
+  if (!/Transform$/.test(name)) name += "Transform"
+  const renderer = compose({ name, renderers })
   const { propsKeys, styleKeys } = renderer.options
@@ -129,4 +125,14 @@ const transform = (styleObject, theme) => {
   }
+  Object.defineProperty(transform, "name", { value: name })
   return transform
 }
+
+function render(keys, value) {
+  if (isNil(value) || !isArray(keys) || !keys.length) return null
+  return keys.reduce((s, k) => {
+    s[k] = value
+    return s
+  }, {})
+}
+
 function style(options) {
@@ -146,7 +152,3 @@ const {
   const keys = isArray(styleKeys) ? styleKeys : propsKeys.slice(0, 1)
-  let transformer
-  if (isArray(renderers)) {
-    const renderer = compose({ name: `${name}Renderer`, renderers })
-    transformer = transformStyle(renderer)
-  }
+  const transformStyle = isArray(renderers) && interpolate({ name, renderers })
   if (isUndefined(styleKeys)) options.styleKeys = keys
@@ -168,3 +170,3 @@ const renderValue = (value, theme) => {
     } else {
-      return renderStyle(keys, value)
+      return render(keys, value)
     }
@@ -180,3 +182,3 @@ }
       if (result) {
-        if (transformer) result = transformer(result, theme)
+        if (transformStyle) result = transformStyle(result, theme)
         if (query) result = { [query]: result }
@@ -847,2 +849,3 @@ styles.push(result)
 export {
+  BREAKPOINTS,
   PC_SCALE,
@@ -925,2 +928,3 @@ PX_SCALE,
   height,
+  interpolate,
   isArray,
@@ -980,3 +984,3 @@ isFraction,
   push,
-  renderStyle,
+  render,
   resolve,
@@ -1000,3 +1004,2 @@ right,
   transformSet,
-  transformStyle,
   transition,
@@ -1003,0 +1006,0 @@ unique,

package.json

 {
   "name": "onno",
   "license": "MIT",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "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": "5f2759828c790ef6ff9eb09a6c8587f80a5ba528"
+  "gitHead": "505b07aa7998c2e2076b8622b6b5933f3be3a797"
 }

types/compose.d.ts

 import * as T from "./types"
-export declare const push: (...items: any[]) => number
 export declare function unique(
@@ -4,0 +3,0 @@ renderers: T.AnyRenderFunction[],

types/constants.d.ts

 import * as T from "./types"
 export declare const PX_SCALE: T.ThemeValue
 export declare const PC_SCALE: T.ThemeValue
+export declare const BREAKPOINTS: T.Breakpoints

types/index.d.ts

@@ -5,18 +5,20 @@ export * from "./types"
 export * from "./compose"
+export * from "./interpolate"
+export * from "./render"
 export * from "./style"
 export * from "./omit"
-export * from "./align"
-export * from "./animation"
-export * from "./background"
-export * from "./border"
-export * from "./color"
-export * from "./display"
-export * from "./flex"
-export * from "./grid"
-export * from "./layout"
-export * from "./shadow"
-export * from "./space"
-export * from "./text"
-export * from "./transform"
-export * from "./global"
-export * from "./variants"
+export * from "./renderers/align"
+export * from "./renderers/animation"
+export * from "./renderers/background"
+export * from "./renderers/border"
+export * from "./renderers/color"
+export * from "./renderers/display"
+export * from "./renderers/flex"
+export * from "./renderers/grid"
+export * from "./renderers/layout"
+export * from "./renderers/shadow"
+export * from "./renderers/space"
+export * from "./renderers/text"
+export * from "./renderers/transform"
+export * from "./renderers/global"
+export * from "./renderers/variants"

types/style.d.ts

 import * as T from "./types"
-export declare function merge<S extends T.Style>(
-  styles: T.StyleArray<S>
-): T.StyleObject<S>
-export declare function renderStyle<S extends T.Style>(
-  keys?: (keyof S)[],
-  value?: any
-): S | null
-export declare function transformStyle<S extends T.Style>(
-  renderer: T.ComposedRenderFunction<any, any>
-): T.StyleTransformFunction<S>
 export declare function style<P extends T.ThemeProps, S extends T.Style>(
@@ -13,0 +3,0 @@ options: T.StyleOptions

types/types.d.ts

@@ -77,10 +77,2 @@ export declare type Length = number
 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"
@@ -95,3 +87,2 @@ export interface StyleOptions {
 }
-export declare type VariantOptions = Omit<StyleOptions, "styleKeys">
 export interface ComposeOptions {
@@ -111,2 +102,12 @@ renderers: AnyRenderFunction[]
 }
+export declare type VariantOptions = Omit<StyleOptions, "styleKeys">
+export declare type InterpolateOptions = ComposeOptions
+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 RenderFunctionType = "style" | "compose" | "variant"
@@ -113,0 +114,0 @@ export interface RenderFunction<P extends ThemeProps, S extends Style> {

types/utils.d.ts

 import { Func, Pred } from "./types"
+export declare const push: (...items: any[]) => number
 export declare const isArray: (arg: any) => arg is any[]
@@ -3,0 +4,0 @@ export declare const isNil: (x: any) => x is void

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

110824

increased by0.54%

Number of package files

29

increased by7.41%

Lines of code

3797

increased by0.21%

No dependency changes