feat: improve typing support

.storybook/StyleSheet/Button.tsx

@@ -3,7 +3,7 @@ import StyleSheet from '../../src/StyleSheet';
 
 const styles = StyleSheet.create({
     container: {
-        textAlign: 'center',
+        ta: 'center',
     },
     button: {
         background: 'red',

.storybook/jsxstyle/Example1.tsx

@@ -7,6 +7,7 @@ const Button = jsxstyle('button', {
     padding: '20px',
     borderRadius: '5px',
     ta: 'center',
+    cur: 'pointer'
 });
 
 const Example1 = () =>

.storybook/rule/Example1.tsx

@@ -2,7 +2,7 @@ import {Component, createElement as h} from 'react';
 import {rule} from '../../src';
 
 const containerClassName = rule({
-    ta: 'center',
+    textAlign: 'right'
 });
 
 const buttonClassName = rule({

.storybook/styleit/Example1.tsx

@@ -4,7 +4,7 @@ import {Styleit, styleit} from '../../src/react/styleit';
 export default class Example1 extends Component<any, any> {
     render() {
         return styleit({
-            ta: 'center',
+            ta: 'center'
         },
             <div>
                 {styleit({

src/StyleSheet.ts

@@ -1,8 +1,8 @@
-import {IStyles} from './renderer/types';
+import {IFreestylerStyles} from './types/styles';
 import rule from './rule';
 
 const StyleSheet = {
-    create: (sheet: {[name: string]: IStyles}) => {
+    create: (sheet: {[name: string]: IFreestylerStyles}) => {
         const result: {[name: string]: string} = {};
         for (const name in sheet) {
             const styles = sheet[name];

src/react/jsxstyle.ts

@@ -1,4 +1,4 @@
-import jsxstyle from './jsxstyle/implementation1';
+import jsxstyle from './jsxstyle/implementation2';
 
 export {jsxstyle};
 

src/react/jsxstyle/implementation0.ts

@@ -1,9 +1,20 @@
 import {Component, createElement as h} from 'react';
-import {styleit} from '../styleit';
 import {extend} from 'fast-extend';
+import {IFreestylerStyles} from '../../types/styles';
+import {styleit} from '../styleit';
+
+export interface IJsxStyleProps extends IFreestylerStyles {
+    [key: string]: any;
+    component?: string;
+    props?: object;
+    children?: any;
+    mediaQueries?: any;
+    className?: string;
+    style?: object;
+}
 
-const jsxstyle = (Comp, defaultStyles = {}) => {
-    return props => {
+const jsxstyle = (Comp, defaultStyles: IFreestylerStyles = {}) => {
+    return (props: IJsxStyleProps) => {
         let {
             component,
             props: customProps = null,

src/react/jsxstyle/implementation1.ts

@@ -1,12 +1,23 @@
 import {Component, createElement as h} from 'react';
-import {styleit} from '../styleit';
 import {extend} from 'fast-extend';
+import {IFreestylerStyles} from '../../types/styles';
+import {styleit} from '../styleit';
 import renderer from '../../renderer';
 
-const jsxstyle = (Comp, defaultStyles = {}) => {
+export interface IJsxStyleProps extends IFreestylerStyles {
+    [key: string]: any;
+    component?: string;
+    props?: object;
+    children?: any;
+    mediaQueries?: any;
+    className?: string;
+    style?: object;
+}
+
+const jsxstyle = (Comp, defaultStyles: IFreestylerStyles = {}) => {
     let staticClassNames: string = '';
 
-    const JsxStyle = props => {
+    const JsxStyle = (props: IJsxStyleProps) => {
         let {
             component,
             props: customProps = null,

src/react/jsxstyle/implementation2.ts

@@ -1,9 +1,10 @@
 import {Component, createElement as h} from 'react';
-import {styleit} from '../styleit';
 import {extend} from 'fast-extend';
+import {IFreestylerStyles} from '../../types/styles';
+import {styleit} from '../styleit';
 import renderer from '../../renderer';
 
-export interface IJsxStyleProps {
+export interface IJsxStyleProps extends IFreestylerStyles {
     [key: string]: any;
     component?: string;
     props?: object;
@@ -15,7 +16,7 @@ export interface IJsxStyleProps {
 
 export interface IJsxStyleState {}
 
-const jsxstyle = (Comp, defaultStyles = {}) => {
+const jsxstyle = (Comp, defaultStyles: IFreestylerStyles = {}) => {
     let JsxStyle: React.ComponentClass<IJsxStyleProps>;
     let staticClassNames: string = '';
 

src/react/styleit.ts

@@ -1,5 +1,5 @@
 import {createElement as h, cloneElement, Component} from 'react';
-import {IStyles} from '../renderer/types';
+import {IFreestylerStyles} from '../types/styles';
 import stylesToClassesAndCss from './transform/stylesToClassesAndCss';
 
 export type TStyleitFacc = (classNames: string) => any;
@@ -32,7 +32,7 @@ const styleFacc = (classNames: string, css: string, facc: (classNames: string) =
     }
 };
 
-export function styleit(styles: IStyles, jsxOrFacc: any | TStyleitFacc) {
+export function styleit(styles: IFreestylerStyles, jsxOrFacc: any | TStyleitFacc) {
     if (process.env.NODE_ENV !== 'production') {
         if (typeof styles !== 'object') {
             throw TypeError(
@@ -50,7 +50,7 @@ export function styleit(styles: IStyles, jsxOrFacc: any | TStyleitFacc) {
 
 export interface IStyleitProps {
     children: (className: string) => any;
-    css: IStyles;
+    css: IFreestylerStyles;
 }
 
 export const Styleit: any = (props: IStyleitProps | any) => {