Merge pull request #428 from Igorbek/feature/ts-interpolations

TypeScript: Improve typings of interpolations
styled-components · Jan 30, 2017 · 96dba9e · 96dba9e
2 parents f9cce4a + 9b9c18b
commit 96dba9e
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 5 deletions.
diff --git a/typings/styled-components-test.tsx b/typings/styled-components-test.tsx
@@ -110,3 +110,42 @@ class Example extends React.Component<{}, {}> {
     </ThemeProvider>;
   }
 }
+
+// css which only uses simple interpolations without functions
+const cssWithValues1 = css`
+  font-size: ${14}${'pt'};
+`;
+// css which uses other simple interpolations without functions
+const cssWithValues2 = css`
+  ${cssWithValues1}
+  ${[cssWithValues1, cssWithValues1]}
+  font-weight: ${'bold'};
+`;
+// injectGlobal accepts simple interpolations if they're not using functions
+injectGlobal`
+  ${'font-size'}: ${10}pt;
+  ${cssWithValues1}
+  ${[cssWithValues1, cssWithValues2]}
+`;
+
+// css which uses function interpolations with common props
+const cssWithFunc1 = css`
+  font-size: ${(props) => props.theme.fontSizePt}pt;
+`;
+const cssWithFunc2 = css`
+  ${cssWithFunc1}
+  ${props => cssWithFunc2}
+  ${[cssWithFunc1, cssWithValues1]}
+`;
+// such css can be used in styled components
+const styledButton = styled.button`
+  ${cssWithValues1} ${[cssWithValues1, cssWithValues2]}
+  ${cssWithFunc1} ${[cssWithFunc1, cssWithFunc2]}
+  ${() => [cssWithFunc1, cssWithFunc2]}
+`;
+// css with function interpolations cannot be used in injectGlobal
+/*
+injectGlobal`
+  ${cssWithFunc1}
+`;
+*/
diff --git a/typings/styled-components.d.ts b/typings/styled-components.d.ts
@@ -13,10 +13,12 @@ export type OuterStyledProps<P> = P & {
   innerRef?: (instance: any) => void;
 };
 
-export type Interpolation<P> = InterpolationValue | InterpolationFunction<P> | ReadonlyArray<InterpolationValue | InterpolationFunction<P>>;
+export type Interpolation<P> = FlattenInterpolation<P> | ReadonlyArray<FlattenInterpolation<P> | ReadonlyArray<FlattenInterpolation<P>>>;
+export type FlattenInterpolation<P> = InterpolationValue | InterpolationFunction<P>;
 export type InterpolationValue = string | number;
+export type SimpleInterpolation = InterpolationValue | ReadonlyArray<InterpolationValue | ReadonlyArray<InterpolationValue>>;
 export interface InterpolationFunction<P> {
-  (props: StyledProps<P>): InterpolationValue | ReadonlyArray<Interpolation<P>>;
+  (props: StyledProps<P>): Interpolation<P>;
 }
 
 export interface StyledFunction<P> {
@@ -170,9 +172,10 @@ export interface StyledInterface extends BaseStyledInterface {
 
 declare const styled: StyledInterface;
 
-export function css<P>(strings: TemplateStringsArray, ...interpolations: Interpolation<P>[]): Interpolation<P>[];
-export function keyframes(strings: TemplateStringsArray, ...interpolations: (string | number)[]): string;
-export function injectGlobal(strings: TemplateStringsArray, ...interpolations: (string | number)[]): void;
+export function css(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): InterpolationValue[];
+export function css<P>(strings: TemplateStringsArray, ...interpolations: Interpolation<P>[]): FlattenInterpolation<P>[];
+export function keyframes(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): string;
+export function injectGlobal(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): void;
 
 export const ThemeProvider: ComponentClass<ThemeProps>;