fix: typings for additional props (#622)

src/StyledMeta.ts

@@ -0,0 +1,6 @@
+export type StyledMeta = {
+  __linaria: {
+    className: string;
+    extends: StyledMeta;
+  };
+};

src/babel/evaluators/templateProcessor.ts

@@ -10,7 +10,7 @@ import generator from '@babel/generator';
 
 import { units } from '../units';
 import { State, StrictOptions, TemplateExpression, ValueCache } from '../types';
-import { StyledMeta } from '../../react/styled';
+import { StyledMeta } from '../../StyledMeta';
 
 import isSerializable from '../utils/isSerializable';
 import { debug } from '../utils/logger';

src/babel/types.ts

@@ -1,6 +1,6 @@
 import { types as t, TransformOptions } from '@babel/core';
 import { NodePath } from '@babel/traverse';
-import { StyledMeta } from '../react/styled';
+import { StyledMeta } from '../StyledMeta';
 
 export type JSONValue = string | number | boolean | JSONObject | JSONArray;
 

src/core/css.ts

@@ -1,12 +1,12 @@
-type CSSMeta = string;
+import { StyledMeta } from '../StyledMeta';
 
 type CSSProperties = {
   [key: string]: string | number | CSSProperties;
 };
 
 export default function css(
   _strings: TemplateStringsArray,
-  ..._exprs: Array<string | number | CSSProperties | CSSMeta>
+  ..._exprs: Array<string | number | CSSProperties | StyledMeta>
 ): string {
   throw new Error(
     'Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.'

src/react/styled.ts

@@ -7,13 +7,7 @@
 import * as React from 'react'; // eslint-disable-line import/no-extraneous-dependencies
 import validAttr from '@emotion/is-prop-valid';
 import { cx } from '../index';
-
-export type StyledMeta = {
-  __linaria: {
-    className: string;
-    extends: StyledMeta;
-  };
-};
+import { StyledMeta } from '../StyledMeta';
 
 type Options = {
   name: string;
@@ -170,16 +164,21 @@ type HtmlStyledTag<TName extends keyof JSX.IntrinsicElements> = <
 ) => StyledComponent<JSX.IntrinsicElements[TName] & TAdditionalProps>;
 
 type ComponentStyledTag<T> = <
-  Props = T extends React.FunctionComponent<infer TProps> ? TProps : T
+  OwnProps = {},
+  TrgProps = T extends React.FunctionComponent<infer TProps> ? TProps : T
 >(
   strings: TemplateStringsArray,
   // Expressions can contain functions only if wrapped component has style property
-  ...exprs: Props extends { style?: React.CSSProperties }
-    ? Array<StaticPlaceholder | ((props: Props) => string | number)>
+  ...exprs: TrgProps extends { style?: React.CSSProperties }
+    ? Array<
+        StaticPlaceholder | ((props: OwnProps & TrgProps) => string | number)
+      >
     : StaticPlaceholder[]
-) => T extends React.FunctionComponent<any>
-  ? StyledMeta & T
-  : StyledComponent<Props>;
+) => keyof OwnProps extends never
+  ? T extends React.FunctionComponent<any>
+    ? StyledMeta & T
+    : StyledComponent<TrgProps>
+  : StyledComponent<OwnProps & TrgProps>;
 
 type StyledJSXIntrinsics = {
   readonly [P in keyof JSX.IntrinsicElements]: HtmlStyledTag<P>;

types/styled.ts

@@ -84,16 +84,38 @@ styled.a`
   }
 `({ href: 'about:blank' });
 
-// Issue #536
-const Title = styled.div<{ background: string }>`
-  background: ${props => props.background};
-`;
-
-// $ExpectType "extends"
-isExtends<typeof Title, React.FC<{ background: string }>>();
-
-css`
-  ${Title} {
-    color: green;
-  }
-`;
+((/* Issue #536 */) => {
+  const Title = styled.div<{ background: string }>`
+    background: ${props => props.background};
+  `;
+
+  // $ExpectType "extends"
+  isExtends<typeof Title, React.FC<{ background: string }>>();
+
+  css`
+    ${Title} {
+      color: green;
+    }
+  `;
+})();
+
+((/* Issue #622 */) => {
+  const Wrapper = styled.div<{ prop1: boolean }>`
+    width: 1em;
+    background-color: ${props => (props.prop1 ? 'transparent' : 'green')};
+  `;
+
+  const styledTag = styled(Wrapper);
+
+  const NewWrapper = styledTag<{ prop2: string }>`
+    width: 2em;
+    background-color: ${props => (props.prop1 ? 'transparent' : 'red')};
+    color: ${props => props.prop2};
+  `;
+
+  // $ExpectType Validator<boolean> | undefined
+  NewWrapper.propTypes!.prop1;
+
+  // $ExpectType Validator<string> | undefined
+  NewWrapper.propTypes!.prop2;
+})();