react-jss: Provides its own types (#39514)

notNeededPackages.json

@@ -3102,6 +3102,12 @@
             "sourceRepoURL": "https://github.com/formatjs/react-intl",
             "asOfVersion": "3.0.0"
         },
+        {
+            "libraryName": "react-jss",
+            "typingsPackageName": "react-jss",
+            "sourceRepoURL": "https://github.com/cssinjs/react-jss#readme",
+            "asOfVersion": "10.0.0"
+        },
         {
             "libraryName": "react-monaco-editor",
             "typingsPackageName": "react-monaco-editor",

types/react-jss/index.d.ts

@@ -1,27 +0,0 @@
-// Type definitions for react-jss 8.6
-// Project: https://github.com/cssinjs/react-jss#readme
-// Definitions by: Sebastian Silbermann <https://github.com/eps1lon>
-//                 James Lawrence <https://github.com/jlaw90>
-// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.9
-import { createGenerateClassName, JSS, SheetsRegistry } from "jss";
-import * as React from "react";
-import { createTheming, ThemeProvider, withTheme } from "theming";
-
-import injectSheet from "./lib/injectSheet";
-import JssProvider, { Props as JssProviderProps } from "./lib/JssProvider";
-
-// re-export types
-export * from "./lib/injectSheet";
-export { JssProviderProps };
-// library implementations
-export const jss: JSS;
-export {
-  createGenerateClassName,
-  createTheming,
-  JssProvider,
-  SheetsRegistry,
-  ThemeProvider,
-  withTheme
-};
-export default injectSheet;

types/react-jss/lib/JssProvider.d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-import { GenerateClassName, JSS, SheetsRegistry } from "jss";
-
-export interface Props {
-  children: React.ReactNode;
-  classNamePrefix?: string;
-  disableStylesGeneration?: boolean;
-  jss?: JSS;
-  generateClassName?: GenerateClassName;
-  registry?: SheetsRegistry;
-}
-
-export default class JssProvider extends React.Component<Props> {}

types/react-jss/lib/injectSheet.d.ts

@@ -1,124 +0,0 @@
-import * as CSS from "csstype";
-import { CreateStyleSheetOptions, JSS } from "jss";
-import * as React from "react";
-import {
-  channel,
-  createTheming,
-  themeListener,
-  ThemeProvider,
-  withTheme
-} from "theming";
-
-/**
- * omit from T every key K
- *
- * @internal
- */
-export type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
-/**
- * `T extends ConsistentWith<T, U>` means that where `T` has overlapping properties with
- * `U`, their value types do not conflict.
- *
- * @internal
- */
-export type ConsistentWith<DecorationTargetProps, InjectedProps> = {
-  [P in keyof DecorationTargetProps]: P extends keyof InjectedProps
-    ? InjectedProps[P] extends DecorationTargetProps[P]
-      ? DecorationTargetProps[P]
-      : InjectedProps[P]
-    : DecorationTargetProps[P]
-};
-
-/**
- * Like `T & U`, but using the value types from `U` where their properties overlap.
- *
- * @internal
- */
-export type Overwrite<T, U> = Omit<T, keyof U> & U;
-
-/**
- * @internal
- */
-export type PropsOf<C> = C extends new (props: infer P) => React.Component
-  ? P
-  : C extends (props: infer P) => React.ReactElement | null ? P : never;
-
-/**
- * a function that takes {component} and returns a component that passes along
- * all the props to {component} except the {InjectedProps} and will accept
- * additional {AdditionalProps}
- *
- * source mui-org/material-ui#12673
- * @internal
- */
-export type PropInjector<InjectedProps, AdditionalProps = {}> = <
-  C extends React.ComponentType<ConsistentWith<PropsOf<C>, InjectedProps>>
-  >(
-  component: C
-) => React.ComponentType<
-  Omit<JSX.LibraryManagedAttributes<C, PropsOf<C>>, keyof InjectedProps> &
-  AdditionalProps
-  >;
-
-// Allow functions that take the properties of the component and return a CSS value
-export type DynamicCSSRule<Props> = {
-  [K in keyof CSS.Properties<number | string | Array<number | string>>]:
-  | CSS.Properties<number | string | Array<number | string>>[K]
-  | ((props: Props) => CSS.Properties<number | string | Array<number | string>>[K])
-}[keyof CSS.Properties];
-
-export interface CSSProperties<Props> {
-  // Allow pseudo selectors and media queries
-  [k: string]:
-    | DynamicCSSRule<Props>
-    | CSSProperties<Props>;
-}
-export type Styles<ClassKey extends string | number | symbol = string, Props = {}> = Record<
-  ClassKey,
-  CSSProperties<Props>
-  >;
-export type StyleCreator<C extends string | number | symbol = string, T extends {} = {}, Props = {}> = (
-  theme: T
-) => Styles<C, Props>;
-
-export interface Theming {
-  channel: string;
-  createTheming: typeof createTheming;
-  themeListener: typeof themeListener;
-  ThemeProvider: typeof ThemeProvider;
-  withTheme: typeof withTheme;
-}
-export interface InjectOptions extends CreateStyleSheetOptions {
-  jss?: JSS;
-  theming?: Theming;
-}
-
-export type ClassNameMap<C extends string | number | symbol> = Record<C, string>;
-export type WithSheet<
-    S extends string | Styles | StyleCreator<keyof S, any>,
-  GivenTheme = undefined,
-Props = {},
-  > = {
-  classes: ClassNameMap<
-    S extends string | number | symbol
-      ? S
-      : S extends StyleCreator<infer C, any, Props>
-      ? C
-      : S extends Styles<infer C, Props> ? C : never
-    >;
-} & WithTheme<S extends StyleCreator<keyof S, infer T> ? T : GivenTheme>;
-
-export interface WithTheme<T> {
-  theme: T;
-  innerRef?: React.Ref<any> | React.RefObject<any>;
-}
-
-export interface StyledComponentProps<ClassKey extends string = string> {
-  classes?: Partial<ClassNameMap<ClassKey>>;
-  innerRef?: React.Ref<any> | React.RefObject<any>;
-}
-
-export default function injectSheet<C extends string, T extends object, Props = {}>(
-  stylesOrCreator: Styles<C, Props> | StyleCreator<C, T, Props>,
-  options?: InjectOptions
-): PropInjector<WithSheet<C, T, Props>, StyledComponentProps<C>>;

types/react-jss/package.json

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

types/react-jss/react-jss-tests.tsx

@@ -1,102 +0,0 @@
-import * as React from "react";
-import injectSheet, {
-  JssProvider,
-  SheetsRegistry,
-  Styles,
-  WithSheet,
-  ThemeProvider
-} from "react-jss";
-
-interface MyTheme {
-  color: {
-    primary: string;
-    secondary: string;
-  };
-}
-
-/**
- * helper function to counter typescripts type widening
- */
-// tslint:disable-next-line:no-unnecessary-generics
-function createStyles<Props = {}, C extends string = string>(styles: Styles<C, Props>): Styles<C> {
-  return styles as Styles<C>;
-}
-
-interface ButtonProps {
-  label: string;
-  active?: boolean;
-}
-
-const styles = (theme: MyTheme) => createStyles({
-  myButton: {
-    color: (props: ButtonProps) => props.active ? 'red' : theme.color.primary,
-    margin: 1,
-    "& span": {
-      fontWeight: "revert"
-    }
-  },
-  myLabel: {
-    fontStyle: "italic"
-  }
-});
-const Button: React.SFC<ButtonProps & WithSheet<typeof styles>> = ({active, classes, children}) => {
-  return (
-    <>
-      <button className={classes.myButton}>
-        <span className={classes.myLabel}>{children}</span>
-      </button>
-    </>
-  );
-};
-
-const ManuallyStyles = () => {
-  return (
-    <Button
-      classes={{myButton: "my-button", myLabel: "my-label"}}
-      label="Hello, World!"
-      theme={{color: {primary: "red", secondary: "blue"}}}
-    />
-  );
-};
-
-const StyledButton = injectSheet(styles)(Button);
-
-const darkTheme: MyTheme = {
-  color: {
-    primary: "grey",
-    secondary: "brown"
-  }
-};
-const App = () => (
-  <ThemeProvider theme={darkTheme}>
-    <>
-      <StyledButton label="I'm dark"/>
-      <StyledButton label="I'm active" active/>
-    </>
-  </ThemeProvider>
-);
-
-function ssrRender(req: any, res: { send: (text: string) => any }) {
-  const mockedRenderToString = (e: React.ReactElement) => `${e}`;
-  const sheets = new SheetsRegistry();
-
-  const body = mockedRenderToString(
-    <JssProvider classNamePrefix="dt-" registry={sheets}>
-      <StyledButton label="I come from the server"/>
-    </JssProvider>
-  );
-
-  // Any instances of `injectSheet` within `<MyApp />` will have gotten sheets
-  // from `context` and added their Style Sheets to it by now.
-
-  return res.send(
-    mockedRenderToString(
-      <html>
-      <head>
-        <style type="text/css">{sheets.toString()}</style>
-      </head>
-      <body>{body}</body>
-      </html>
-    )
-  );
-}

types/react-jss/tsconfig.json

@@ -1,26 +0,0 @@
-{
-    "compilerOptions": {
-        "module": "commonjs",
-        "lib": [
-            "es6"
-        ],
-        "noImplicitAny": true,
-        "noImplicitThis": true,
-        "strictNullChecks": true,
-        "baseUrl": "../",
-        "typeRoots": [
-            "../"
-        ],
-        "types": [],
-        "noEmit": true,
-        "forceConsistentCasingInFileNames": true,
-        "jsx": "react",
-        "strictFunctionTypes": true
-    },
-    "files": [
-        "index.d.ts",
-        "lib/injectSheet.d.ts",
-        "lib/JssProvider.d.ts",
-        "react-jss-tests.tsx"
-    ]
-}

types/react-jss/tslint.json

@@ -1 +0,0 @@
-{ "extends": "dtslint/dt.json" }