From 5c8383cb8cfb9565c99ba935e1b8104d60bd95a8 Mon Sep 17 00:00:00 2001
From: Tom Crockett <pelotom@gmail.com>
Date: Mon, 22 Jan 2018 23:47:53 -0800
Subject: [PATCH] Allow Style to be an Observable

---
 types/jss/index.d.ts   | 4 +++-
 types/jss/jss-tests.ts | 8 ++++----
 types/jss/package.json | 6 ++++++
 3 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 types/jss/package.json

diff --git a/types/jss/index.d.ts b/types/jss/index.d.ts
index 89c38d5223..40af88ea8b 100644
--- a/types/jss/index.d.ts
+++ b/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>;
diff --git a/types/jss/jss-tests.ts b/types/jss/jss-tests.ts
index cd9387492c..c40d024040 100644
--- a/types/jss/jss-tests.ts
+++ b/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
diff --git a/types/jss/package.json b/types/jss/package.json
new file mode 100644
index 0000000000..33ba8bf22b
--- /dev/null
+++ b/types/jss/package.json
@@ -0,0 +1,6 @@
+{
+    "private": true,
+    "dependencies": {
+        "rxjs": "*"
+    }
+}