Allow Style to be an Observable

types/jss/index.d.ts

@@ -6,6 +6,7 @@
 // TypeScript Version: 2.3
 
 import { CSSProperties } from 'react';
+import { Observable } from 'rxjs';
 
 export type PseudoCssKey =
 	| ':active'
@@ -180,7 +181,8 @@ export interface JssExpand {
 
 export type JssExpandArr = { [k in keyof JssExpand]?: JssExpand[k] | Array<JssExpand[k]> };
 
-export type Style = React.CSSProperties & PseudoCss & JssProps & JssExpandArr;
+export type SimpleStyle = React.CSSProperties & PseudoCss & JssProps & JssExpandArr;
+export type Style = Observable<SimpleStyle> | SimpleStyle
 
 export type Styles<Name extends string = any> = Record<Name, Style>;
 export type Classes<Name extends string = any> = Record<Name, string>;

types/jss/jss-tests.ts

@@ -4,15 +4,15 @@ import {
 	create as createJSS,
 	default as sharedInstance
 } from 'jss';
+import { Observable } from 'rxjs';
 
 const jss = createJSS().setup({});
 
-// use <string> because we will be dynamically augmenting
 const styleSheet = jss.createStyleSheet<string>(
 	{
-		root: {
+		ruleWithMockObservable: Observable.of({
 			backgroundColor: 'red',
-		},
+		}),
 		container: {
 			display: 'flex',
 			width: 100,
@@ -24,8 +24,8 @@ const styleSheet = jss.createStyleSheet<string>(
 	}
 ).attach();
 
-styleSheet.classes.root; // $ExpectType string
 styleSheet.classes.container; // $ExpectType string
+styleSheet.classes.ruleWithMockObservable; // $ExpectType string
 
 const rule = styleSheet.addRule('dynamicRule', { color: 'indigo' });
 rule.prop('border-radius', 5).prop('color'); // $ExpectType string

types/jss/package.json

@@ -0,0 +1,6 @@
+{
+    "private": true,
+    "dependencies": {
+        "rxjs": "*"
+    }
+}