[React] Remove string index fallback for CSS properties (#24911)

* [React] Remove string index fallback for CSS properties (resolves #24568) * Require a minimum version of 2.2 for csstype * Fix aphrodite types * Fix react-confirm test * Use Omit * Fix react-geosuggest types * Fix victory test * Make customStyle and customStyleOnEditCell into functions
DefinitelyTyped · Apr 11, 2018 · fe3fcd7 · fe3fcd7
1 parent 40c7baa
commit fe3fcd7
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 27 deletions.
diff --git a/types/aphrodite/index.d.ts b/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 {

diff --git a/types/aphrodite/package.json b/types/aphrodite/package.json
@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "dependencies": {
+    "csstype": "^2.2.0"
+  }
+}
diff --git a/types/react-bootstrap-table/index.d.ts b/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.
 	 */

diff --git a/types/react-confirm/react-confirm-tests.tsx b/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>

diff --git a/types/react-geosuggest/index.d.ts b/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;

diff --git a/types/react/index.d.ts b/types/react/index.d.ts
@@ -897,11 +897,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

diff --git a/types/react/package.json b/types/react/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
   "dependencies": {
-    "csstype": "^2.0.0"
+    "csstype": "^2.2.0"
   }
 }
diff --git a/types/victory/victory-tests.tsx b/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={[