From 5ee667652e84858abba2034813f5727567a723dc Mon Sep 17 00:00:00 2001
From: Tom Crockett <pelotom@gmail.com>
Date: Sat, 14 Apr 2018 08:34:33 -0700
Subject: [PATCH] Upgrade types, use string index fallback for CSSProperties to
 allow nested pseudos (#11007)

---
 package.json                    |  6 +++---
 src/styles/withStyles.d.ts      |  8 +++++++-
 test/typescript/styles.spec.tsx |  9 +++++++++
 yarn.lock                       | 18 ++++++++++++++----
 4 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 9e0c316366c635..0349977de39ee8 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
   },
   "dependencies": {
     "@types/jss": "^9.3.0",
-    "@types/react-transition-group": "^2.0.6",
+    "@types/react-transition-group": "^2.0.8",
     "babel-runtime": "^6.26.0",
     "brcast": "^3.0.1",
     "classnames": "^2.2.5",
@@ -98,7 +98,7 @@
   },
   "devDependencies": {
     "@types/enzyme": "^3.1.4",
-    "@types/react": "16.3.4",
+    "@types/react": "16.3.9",
     "argos-cli": "^0.0.9",
     "autoprefixer": "^8.0.0",
     "autosuggest-highlight": "^3.1.1",
@@ -196,7 +196,7 @@
     "workbox-build": "^3.0.1"
   },
   "resolutions": {
-    "@types/react": "16.3.4"
+    "@types/react": "16.3.9"
   },
   "sideEffects": false,
   "nyc": {
diff --git a/src/styles/withStyles.d.ts b/src/styles/withStyles.d.ts
index d5bd55cc59bc7f..7be0af180738f6 100644
--- a/src/styles/withStyles.d.ts
+++ b/src/styles/withStyles.d.ts
@@ -1,5 +1,11 @@
 import * as React from 'react';
 import { Theme } from './createMuiTheme';
+import * as CSS from 'csstype';
+
+export interface CSSProperties extends CSS.Properties<number | string> {
+  // Allow pseudo selectors and media queries
+  [k: string]: CSS.Properties<number | string>[keyof CSS.Properties] | CSSProperties;
+}
 
 /**
  * This is basically the API of JSS. It defines a Map<string, CSS>,
@@ -8,7 +14,7 @@ import { Theme } from './createMuiTheme';
  * - the `keys` are the class (names) that will be created
  * - the `values` are objects that represent CSS rules (`React.CSSProperties`).
  */
-export type StyleRules<ClassKey extends string = string> = Record<ClassKey, React.CSSProperties>;
+export type StyleRules<ClassKey extends string = string> = Record<ClassKey, CSSProperties>;
 
 export type StyleRulesCallback<ClassKey extends string = string> = (
   theme: Theme,
diff --git a/test/typescript/styles.spec.tsx b/test/typescript/styles.spec.tsx
index 3e386e265bd670..1c2f4a6c8217ae 100644
--- a/test/typescript/styles.spec.tsx
+++ b/test/typescript/styles.spec.tsx
@@ -166,3 +166,12 @@ const DecoratedComponent = withStyles(styles)(
 
 // no 'classes' property required at element creation time (#8267)
 <DecoratedComponent text="foo" />;
+
+// Allow nested pseudo selectors
+withStyles<'listItem'>(theme => ({
+  listItem: {
+    '&:hover $listItemIcon': {
+      visibility: 'inherit',
+    },
+  },
+}))
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 7d280792292ab4..10b7f51d0c5de6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -128,11 +128,17 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16.3.4":
-  version "16.3.4"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.3.4.tgz#9bbb301cd38270ae200bed329a342bd2f140c3ea"
+"@types/react-transition-group@^2.0.8":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.8.tgz#1ea86f6d8288e4bba8d743317ba9cc61cdacc1ad"
   dependencies:
-    csstype "^2.0.0"
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@16.3.9":
+  version "16.3.9"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.3.9.tgz#15be16b53c89aac558cf6445774502b2792555ff"
+  dependencies:
+    csstype "^2.2.0"
 
 "@zeit/check-updates@1.1.1":
   version "1.1.1"
@@ -2946,6 +2952,10 @@ csstype@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.1.1.tgz#37b01a7a9958ef0b88167ff6678deccd732e0ae2"
 
+csstype@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.2.0.tgz#1656ef97553ac53b77090844a2531c6660ebd902"
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"