Issue 1:
If you know how to fix the issue, make a pull request instead.

I tried using the @types/rebass@3.0.3 package and had problems.

I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript

I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).

Mention the authors (see Definitions by: in index.d.ts) so they can respond.

Authors: @rhysd @ryee-dev @jamesmckenzie @gretzky @angusfretwell

(list of authors was grabbed from the definitions header)

Been following along with the types changes for rebass the past week or so (using it currently on a project). I noticed 3.0.3 introduced a complete rework of the implementation of the types that is causing my project to break completely.

info @storybook/react v4.0.12
info
info => Loading presets
info => Loading custom addons config.
info => Using base config because react-scripts is not installed.
info => Loading custom webpack config (full-control mode).
info => Using base config because react-scripts is not installed.
info Building storybook ...
ℹ ｢atl｣: Using typescript@2.9.2 from typescript
ℹ ｢atl｣: Using tsconfig.json from /Users/mdloss/workspace/project/tsconfig.json
ℹ ｢atl｣: Checking started in a separate process...
✖ ｢atl｣: Checking finished with 40 errors
ERR! Failed to build the storybook
ERR! [at-loader] ./node_modules/@types/node/index.d.ts:207:13
ERR! TS2451: Cannot redeclare block-scoped variable 'console'.
ERR! [at-loader] ./node_modules/@types/node/index.d.ts:252:13
ERR! TS2300: Duplicate identifier 'require'.
ERR! [at-loader] ./src/Card/Card.tsx:11:7
ERR! TS2322: Type 'StyledComponentClass<CardProps, any, WithOptionalTheme<CardProps, any>>' is not assignable to type 'StyledComponentClass<ICardProps & CardProps, {}, ICardProps & CardProps>'.
ERR! Type 'CardProps' is not assignable to type 'ICardProps & CardProps'.
ERR! Type 'CardProps' is not assignable to type 'ICardProps'.
ERR! Types of property 'variant' are incompatible.
ERR! Type 'string | (string | null)[] | { [key: string]: string; } | undefined' is not assignable to type 'string | undefined'.
ERR! Type '(string | null)[]' is not assignable to type 'string | undefined'.
ERR! Type '(string | null)[]' is not assignable to type 'string'.
ERR! [at-loader] ./src/Heading/Heading.tsx:15:7
ERR! TS2322: Type 'StyledComponentClass<HeadingProps, any, WithOptionalTheme<HeadingProps, any>>' is not assignable to type 'StyledComponentClass<IHeadingProps & HeadingProps, {}, IHeadingProps & HeadingProps>'.
ERR! Type 'HeadingProps' is not assignable to type 'IHeadingProps & HeadingProps'.
ERR! Type 'HeadingProps' is not assignable to type 'IHeadingProps'.
ERR! Types of property 'as' are incompatible.
ERR! Type '"symbol" | "object" | "p" | "cite" | "data" | "form" | "label" | "pattern" | "span" | "summary" |...' is not assignable to type '"h1" | "h2" | "h3" | "h4" | undefined'.
ERR! Type '"symbol"' is not assignable to type '"h1" | "h2" | "h3" | "h4" | undefined'.
ERR! [at-loader] ./node_modules/@types/webpack-env/index.d.ts:203:13
ERR! TS2300: Duplicate identifier 'require'.
ERR! [at-loader] ./node_modules/@types/react-native/globals.d.ts:36:15
ERR! TS2300: Duplicate identifier 'FormData'.
ERR! [at-loader] ./node_modules/@types/react-native/globals.d.ts:107:14
ERR! TS2300: Duplicate identifier 'RequestInfo'.
ERR! [at-loader] ./node_modules/@types/react-native/globals.d.ts:243:6
ERR! TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:364:56
ERR! TS2694: Namespace 'React' has no exported member 'BaseSyntheticEvent'.
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:3922:74
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:3933:53
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:3938:54
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:3943:54
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4149:88
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4160:53
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4165:54
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4170:54
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4175:60
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4261:74
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4266:74
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4326:53
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4332:54
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4338:54
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4563:26
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4573:26
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4587:10
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4604:77
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4616:10
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4693:23
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4694:24
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4695:25
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4698:12
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:4857:18
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:6642:10
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:6645:91
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:8191:27
ERR! TS2314: Generic type 'ReactElement<P>' requires 1 type argument(s).
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:9300:14
ERR! TS2300: Duplicate identifier 'require'.
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:9318:11
ERR! TS2451: Cannot redeclare block-scoped variable 'console'.
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:9326:18
ERR! TS2717: Subsequent property declarations must have the same type. Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.
ERR! [at-loader] ./node_modules/@types/react-native/index.d.ts:9329:11
ERR! TS2451: Cannot redeclare block-scoped variable 'navigator'.

What's odd is this project does not use react-native whatsoever. It's being brought in with @types/styled-component (that's a whole different issue I should bring up).

The 2 errors that don't seem to be related to types on the surface - dealing with Card and Heading - don't really make sense either. Here's the Card component, for example:

import styled, { StyledComponentClass } from 'styled-components';
import { Card as RCard, CardProps } from 'rebass';
import { ITheme } from '../themes/default';

export type TVariants = 'default' | 'primary';

export interface ICardProps {
variant?: TVariants;
interactive?: boolean;
}

const Card: StyledComponentClass<ICardProps & CardProps, ITheme> = styled(RCard)`
${ (props: any) => {
const { variant, interactive, theme: { cards } } = props;
return interactive && `
cursor: pointer;
transition: background-color 0.2s ease-out;
&:hover{
background-color: ${ cards[variant].hovers.backgroundColor };
};
`;
}}
`;

export default Card;

I'm reusing the variant here specifically only to allow primary and default as variant values, but the type listed specifically in @types/rebass (and now subsequently @types/styled-system) don't allow strings by themselves apparently.

To add some more detail here, rebassjs calls out specifically Button and Card for having built in variant functionality by using the theme to receive any / all theming properties. I'm doing something very similar to Button, but exporting a React.FunctionComponent<> object, with no issues:

import React from 'react';
import { Button as RButton, ButtonProps } from 'rebass';

export interface IButtonProps {
variant?: 'default' | 'primary';
onClick?: () => void;
}

const Button: React.FunctionComponent<IButtonProps & ButtonProps> =
(props: any) => <RButton { ...props } />;

Button.displayName = 'Button';

Button.defaultProps = {
variant: 'default',
as: 'button',
};

export default Button;

Heading looks very similar to the Card component, except I'm implementing variant from styled-system:

const HeadingStyle = variant({ key: 'headings' });
const Heading: StyledComponentClass<IHeadingProps & HeadingProps, ITheme> = styled(RHeading)`
${ HeadingStyle }
`;

I was not receiving any of these errors on version 3.0.2. Until this gets resolved, I'm going to use a custom declaration that'll just implement what 3.0.2 had, plus some changes that we need (that I actually made a PR for yesterday, but closed immediately due to there being an update [3.0.3] that I didn't see yet!).

I can post details from my package.json or my yarn.lock files, but the project is actually pretty big so I don't want to make this page any larger than it needs to be 🤷🏻‍♂️

Issue 2:
The current version of whatwg-streams on master does not pass npm test, which causes test failures on changes to package node (see #19733,#19656,#19612, #19488), and perhaps also other dependencies.

To expose the error, commit a dummy change to a comment in types/whatwg-streams/index.d.ts on a separate branch, and run npm test, which fails with

index.d.ts(32,15): error TS2300: Duplicate identifier 'ReadableStream'.

I don't know if the problem is in whatwg-streams itself or if a breaking change in one of its dependencies somehow got merged.

Mention the authors (see Definitions by: in index.d.ts) so they can respond.

Authors: @saschanaz