[React] Remove string index fallback for CSS properties

types/aphrodite/index.d.ts

@@ -4,27 +4,36 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.6
 
-import * as React from "react";
+import * as CSS from "csstype";
+
+type BaseCSSProperties = CSS.Properties<number | string>;
 
 type FontFamily =
-    | React.CSSProperties['fontFamily']
-    | Pick<React.CSSProperties,
-        | 'fontFamily'
-        | 'fontStyle'
-        | 'fontWeight'
-        | 'src'
-    >
+    | BaseCSSProperties['fontFamily']
+    | CSS.FontFace;
+
+// Replace with Exclude once on 2.8+
+type Diff<T extends string, U extends string> = (
+    & { [P in T]: P }
+    & { [P in U]: never }
+    & { [x: string]: never }
+)[T];
+type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;
+
+type CSSProperties = Omit<BaseCSSProperties, 'fontFamily'> & {
+    fontFamily?: FontFamily | FontFamily[];
+};
+
+// For pseudo selectors and media queries
+interface OpenCSSProperties  extends CSSProperties {
+    [k: string]: CSSProperties[keyof CSSProperties] | CSSProperties;
+}
 
 /**
  * Aphrodite style declaration
  */
 export interface StyleDeclaration {
-    [key: string]: Pick<React.CSSProperties, (
-        & React.CSSProperties
-        & { fontFamily: never }
-    )[keyof React.CSSProperties]> & {
-        fontFamily?: FontFamily | FontFamily[];
-    };
+    [key: string]: OpenCSSProperties;
 }
 
 interface StyleSheetStatic {

types/aphrodite/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "dependencies": {
+    "csstype": "^2.2.0"
+  }
+}

types/react-bootstrap-table/index.d.ts

@@ -1857,15 +1857,15 @@ export interface KeyboardNavigation {
 	/**
 	 * Return a style object which will be applied on the navigating cell.
 	 */
-	customStyle?: CSSProperties;
+	customStyle?(cell: any, row: any): CSSProperties;
 	/**
 	 * Set to false to disable click to navigate, usually user wants to click to select row instead of navigation.
 	 */
 	clickToNav?: boolean;
 	/**
 	 * Return a style object which will be applied on the both of navigating and editing cell.
 	 */
-	customStyleOnEditCell?: CSSProperties;
+	customStyleOnEditCell?(cell: any, row: any): CSSProperties;
 	/**
 	 * When set to true, pressing ENTER will begin to edit the cell if cellEdit is also enabled.
 	 */

types/react-confirm/react-confirm-tests.tsx

@@ -6,13 +6,13 @@ interface CustomModalProps {
 }
 
 class CustomModal extends React.Component<CustomModalProps & ReactConfirmProps> {
-    modalStyle(): string {
-        return this.props.show ? "display: none;" : "";
+    modalStyle() {
+        return this.props.show ? { display: 'none' } : undefined;
     }
 
     render() {
         return (
-            <div style={this.modalStyle}>
+            <div style={this.modalStyle()}>
                 <h1>{this.props.title}</h1>
 
                 <div>

types/react-geosuggest/index.d.ts

@@ -16,7 +16,15 @@ export default class Geosuggest extends Component<GeosuggestProps> {
     selectSuggest(value?: Suggest): void;
 }
 
-export interface GeosuggestProps extends InputHTMLAttributes<HTMLInputElement> {
+// Replace with Exclude once on 2.8+
+export type Diff<T extends string, U extends string> = (
+    & { [P in T]: P }
+    & { [P in U]: never }
+    & { [x: string]: never }
+)[T];
+export type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;
+
+export interface GeosuggestProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'style'> {
     placeholder?: string;
     initialValue?: string;
     className?: string;

types/react/index.d.ts

@@ -898,11 +898,7 @@ declare namespace React {
         onTransitionEndCapture?: TransitionEventHandler<T>;
     }
 
-    export interface CSSProperties extends CSS.Properties<string | number> {
-        // The string index signature fallback is needed at least until csstype
-        // provides SVG CSS properties: https://github.com/frenic/csstype/issues/4
-        [propertyName: string]: any;
-    }
+    export interface CSSProperties extends CSS.Properties<string | number> {}
 
     interface HTMLAttributes<T> extends DOMAttributes<T> {
         // React-specific Attributes

types/react/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
   "dependencies": {
-    "csstype": "^2.0.0"
+    "csstype": "^2.2.0"
   }
 }

types/victory/victory-tests.tsx

@@ -158,7 +158,7 @@ test = (
           grid: {strokeWidth: 2},
           ticks: {stroke: "red"},
           tickLabels: {fontSize: 12},
-          axisLabel: {fontsize: 16}
+          axisLabel: {fontSize: 16}
         }}
         label="Planets"
         tickValues={[