feat(css functions): support styles as function of theme

index.d.ts

@@ -57,7 +57,10 @@ export type Theme = {
 export type Options = {}
 
 export declare function hypostyle(theme?: Theme, options?: Options): {
-  css(props: Partial<HypostyleObject>): string;
+  css(
+    props: ((tokens: Theme['tokens']) => Partial<HypostyleObject>) |
+    Partial<HypostyleObject>
+  ): string;
   injectGlobal(props: Partial<HypostyleObject>): any;
   keyframes: KeyframesAddon['keyframes'];
   flush(): string;

index.js

@@ -108,7 +108,8 @@ function hypostyle (theme = {}, config = {}) {
 
   return {
     css (props) {
-      return Object.keys(props).length ? nano.rule(style(props, t)) : ''
+      const p = typeof props === 'function' ? props(t.tokens) : props
+      return Object.keys(p).length ? nano.rule(style(p, t)) : ''
     },
     injectGlobal (props) {
       return nano.global(style(props, t))

package.json

@@ -39,7 +39,8 @@
     "husky": "^4.2.5",
     "nodemon": "^2.0.4",
     "prettier-standard": "^16.4.1",
-    "semantic-release": "^17.2.1"
+    "semantic-release": "^17.2.1",
+    "typescript": "^4.1.3"
   },
   "config": {
     "commitizen": {

test/hypostyle.js

@@ -243,4 +243,14 @@ export default (test, assert) => {
 
     assert(sheet.includes(animation))
   })
+
+  test('css as a function', () => {
+    const { css, flush } = hypostyle(defaults)
+
+    css(tokens => ({ fs: tokens.fontSize[1] }))
+
+    const sheet = flush()
+
+    assert(sheet.includes('font-size:3rem'))
+  })
 }