onno - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15

cjs/index.js

@@ -83,4 +83,4 @@ "use strict"
   const { propsKeys, styleKeys } = renderer.options
-  const transform = (styleObject) => {
-    const renderedStyle = renderer(styleObject)
+  const transform = (styleObject, theme) => {
+    const renderedStyle = renderer(Object.assign({ theme }, styleObject))
     const mergedStyle = renderedStyle && merge(renderedStyle)
@@ -92,3 +92,3 @@ return Object.keys(styleObject).reduce((result, key) => {
       const value = result[key]
-      if (isObject(value)) result[key] = transform(value)
+      if (isObject(value)) result[key] = transform(value, theme)
       return result
@@ -136,3 +136,3 @@ }, Object.assign({}, styleObject, mergedStyle))
       if (result) {
-        if (transformer) result = transformer(result)
+        if (transformer) result = transformer(result, theme)
         if (query) result = { [query]: result }
@@ -731,3 +731,3 @@ styles.push(result)
 
-const globalStyle = variant({
+const gst = variant({
   propsKeys: ["globalStyle", "gst"],
@@ -737,2 +737,5 @@ themeKeys: ["globalStyles"],
 })
+const globalStyle = (props) => gst(Object.assign({ gst: "." }, props))
+globalStyle.options = gst.options
+globalStyle.type = gst.type
 const buttonStyle = variant({
@@ -739,0 +742,0 @@ propsKeys: ["buttonStyle", "bst"],

esm/index.js

@@ -79,4 +79,4 @@ const PX_SCALE = [0, 2, 4, 8, 16, 32, 64, 128, 256, 512]
   const { propsKeys, styleKeys } = renderer.options
-  const transform = (styleObject) => {
-    const renderedStyle = renderer(styleObject)
+  const transform = (styleObject, theme) => {
+    const renderedStyle = renderer(Object.assign({ theme }, styleObject))
     const mergedStyle = renderedStyle && merge(renderedStyle)
@@ -88,3 +88,3 @@ return Object.keys(styleObject).reduce((result, key) => {
       const value = result[key]
-      if (isObject(value)) result[key] = transform(value)
+      if (isObject(value)) result[key] = transform(value, theme)
       return result
@@ -132,3 +132,3 @@ }, Object.assign({}, styleObject, mergedStyle))
       if (result) {
-        if (transformer) result = transformer(result)
+        if (transformer) result = transformer(result, theme)
         if (query) result = { [query]: result }
@@ -727,3 +727,3 @@ styles.push(result)
 
-const globalStyle = variant({
+const gst = variant({
   propsKeys: ["globalStyle", "gst"],
@@ -733,2 +733,5 @@ themeKeys: ["globalStyles"],
 })
+const globalStyle = (props) => gst(Object.assign({ gst: "." }, props))
+globalStyle.options = gst.options
+globalStyle.type = gst.type
 const buttonStyle = variant({
@@ -735,0 +738,0 @@ propsKeys: ["buttonStyle", "bst"],

package.json

 {
   "name": "onno",
   "license": "MIT",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Responsive style props for building themed design systems",
@@ -16,2 +16,3 @@ "homepage": "https://github.com/wagerfield/onno/tree/master/packages/onno#readme",
   "keywords": [
+    "onno",
     "css-in-js",
@@ -33,3 +34,3 @@ "styled-system",
   },
-  "gitHead": "4c5ee213e4a5d03518f17c1a2428763792ff4df7"
+  "gitHead": "c73461d54c93bd3bcb63fcfcb8a8c94ebd1bca18"
 }

readme.md

@@ -17,3 +17,3 @@ # [![onno](https://raw.githubusercontent.com/wagerfield/onno/master/assets/onno.png)][onno]
 - First class support for themes and design tokens
-- Compatible with most CSS in JS libraries including [styled-components][styled-components] and [emotion][emotion]
+- Works with any CSS in JS library that supports object styles like [Styled Components][styled-components] and [Emotion][emotion]
 - Written in [TypeScript][typescript] with comprehensive type definitions and interfaces
@@ -57,3 +57,3 @@ - Rigorously tested with [100% code coverage][codecov]
 
-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.
+Onno started life as a rewrite of Styled System in 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.
 
@@ -60,0 +60,0 @@ The additional features introduced by onno are [presented in detail here](https://github.com/wagerfield/onno/blob/master/docs/features.md#features).

types/background.d.ts

@@ -75,5 +75,5 @@ import * as C from "csstype"
   BackgroundSizeStyle
-export declare const backgroundSet: T.RenderFunction<
+export declare const backgroundSet: T.ComposedRenderFunction<
   BackgroundSetProps,
   BackgroundSetStyle
 >

types/border.d.ts

@@ -112,2 +112,5 @@ import * as C from "csstype"
   BorderRadiusStyle
-export declare const borderSet: T.RenderFunction<BorderSetProps, BorderSetStyle>
+export declare const borderSet: T.ComposedRenderFunction<
+  BorderSetProps,
+  BorderSetStyle
+>

types/color.d.ts

@@ -60,2 +60,5 @@ import * as C from "csstype"
   ColorStyle
-export declare const colorSet: T.RenderFunction<ColorSetProps, ColorSetStyle>
+export declare const colorSet: T.ComposedRenderFunction<
+  ColorSetProps,
+  ColorSetStyle
+>

types/display.d.ts

@@ -72,3 +72,3 @@ import * as C from "csstype"
   OverflowYStyle
-export declare const overflowSet: T.RenderFunction<
+export declare const overflowSet: T.ComposedRenderFunction<
   OverflowSetProps,
@@ -85,5 +85,5 @@ OverflowSetStyle
   VisibilityStyle
-export declare const displaySet: T.RenderFunction<
+export declare const displaySet: T.ComposedRenderFunction<
   DisplaySetProps,
   DisplaySetStyle
 >

types/flex.d.ts

@@ -112,3 +112,3 @@ import * as C from "csstype"
   FlexWrapStyle
-export declare const flexParentSet: T.RenderFunction<
+export declare const flexParentSet: T.ComposedRenderFunction<
   FlexParentSetProps,
@@ -131,3 +131,3 @@ FlexParentSetStyle
   FlexShrinkStyle
-export declare const flexChildSet: T.RenderFunction<
+export declare const flexChildSet: T.ComposedRenderFunction<
   FlexChildSetProps,
@@ -138,2 +138,5 @@ FlexChildSetStyle
 export declare type FlexSetStyle = FlexParentSetStyle & FlexChildSetStyle
-export declare const flexSet: T.RenderFunction<FlexSetProps, FlexSetStyle>
+export declare const flexSet: T.ComposedRenderFunction<
+  FlexSetProps,
+  FlexSetStyle
+>

types/global.d.ts

@@ -32,5 +32,5 @@ import {
   TransitionStyle
-export declare const globalSet: import("./types").RenderFunction<
+export declare const globalSet: import("./types").ComposedRenderFunction<
   GlobalSetProps,
   GlobalSetStyle
 >

types/grid.d.ts

@@ -284,3 +284,3 @@ import * as C from "csstype"
   GridAutoFlowStyle
-export declare const gridParentSet: T.RenderFunction<
+export declare const gridParentSet: T.ComposedRenderFunction<
   GridParentSetProps,
@@ -309,3 +309,3 @@ GridParentSetStyle
   GridColumnEndStyle
-export declare const gridChildSet: T.RenderFunction<
+export declare const gridChildSet: T.ComposedRenderFunction<
   GridChildSetProps,
@@ -316,2 +316,5 @@ GridChildSetStyle
 export declare type GridSetStyle = GridParentSetStyle & GridChildSetStyle
-export declare const gridSet: T.RenderFunction<GridSetProps, GridSetStyle>
+export declare const gridSet: T.ComposedRenderFunction<
+  GridSetProps,
+  GridSetStyle
+>

types/layout.d.ts

@@ -154,3 +154,3 @@ import * as C from "csstype"
   LeftStyle
-export declare const positionSet: T.RenderFunction<
+export declare const positionSet: T.ComposedRenderFunction<
   PositionSetProps,
@@ -173,3 +173,6 @@ PositionSetStyle
   MaxHeightStyle
-export declare const sizeSet: T.RenderFunction<SizeSetProps, SizeSetStyle>
+export declare const sizeSet: T.ComposedRenderFunction<
+  SizeSetProps,
+  SizeSetStyle
+>
 export declare type LayoutSetProps = DisplayProps &
@@ -183,2 +186,5 @@ VerticalAlignProps &
   SizeSetStyle
-export declare const layoutSet: T.RenderFunction<LayoutSetProps, LayoutSetStyle>
+export declare const layoutSet: T.ComposedRenderFunction<
+  LayoutSetProps,
+  LayoutSetStyle
+>

types/space.d.ts

@@ -166,3 +166,6 @@ import * as C from "csstype"
   MarginLeftStyle
-export declare const marginSet: T.RenderFunction<MarginSetProps, MarginSetStyle>
+export declare const marginSet: T.ComposedRenderFunction<
+  MarginSetProps,
+  MarginSetStyle
+>
 export declare type PaddingSetProps = PaddingProps &
@@ -182,3 +185,3 @@ PaddingXProps &
   PaddingLeftStyle
-export declare const paddingSet: T.RenderFunction<
+export declare const paddingSet: T.ComposedRenderFunction<
   PaddingSetProps,
@@ -189,3 +192,6 @@ PaddingSetStyle
 export declare type SpaceSetStyle = MarginSetStyle & PaddingSetStyle
-export declare const spaceSet: T.RenderFunction<SpaceSetProps, SpaceSetStyle>
+export declare const spaceSet: T.ComposedRenderFunction<
+  SpaceSetProps,
+  SpaceSetStyle
+>
 export {}

types/style.d.ts

@@ -21,6 +21,6 @@ import * as T from "./types"
   renderers: T.AnyRenderFunction[]
-): T.RenderFunction<P, S>
+): T.ComposedRenderFunction<P, S>
 export declare function compose<P extends T.ThemeProps, S extends T.Style>(
   ...renderers: T.AnyRenderFunction[]
-): T.RenderFunction<P, S>
+): T.ComposedRenderFunction<P, S>
 export declare function variant<
@@ -27,0 +27,0 @@ P extends T.ThemeProps,

types/text.d.ts

@@ -134,2 +134,5 @@ import * as C from "csstype"
   ColorStyle
-export declare const textSet: T.RenderFunction<TextSetProps, TextSetStyle>
+export declare const textSet: T.ComposedRenderFunction<
+  TextSetProps,
+  TextSetStyle
+>

types/transform.d.ts

@@ -62,5 +62,5 @@ import * as C from "csstype"
   TransformOriginStyle
-export declare const transformSet: T.RenderFunction<
+export declare const transformSet: T.ComposedRenderFunction<
   TransformSetProps,
   TransformSetStyle
 >

types/types.d.ts

@@ -39,3 +39,2 @@ export declare type Length = number
   borderRadii?: ThemeValue
-  radii?: ThemeValue
   colors?: ThemeValue
@@ -93,4 +92,15 @@ opacities?: ThemeValue
 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
+}
 export declare type StyleTransformFunction<S extends Style> = (
-  style: StyleObject<S>
+  style: StyleObject<S>,
+  theme?: Theme
 ) => StyleObject<S>

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

104050

increased by0.85%

Lines of code

3558

increased by1.22%

No dependency changes