styled-components 3.3.2 → 3.3.3

package/src/test/extending.test.js

@@ -26,7 +26,9 @@ describe('extending', () => {
   })
 
   it('should attach styles to both classes if only parent has styles', () => {
-    const Parent = styled.div`color: blue;`
+    const Parent = styled.div`
+      color: blue;
+    `
     const Child = Parent.extend``
 
     shallow(<Parent />)
@@ -37,7 +39,9 @@ describe('extending', () => {
 
   it('should attach styles to child class if only child has styles', () => {
     const Parent = styled.div``
-    const Child = Parent.extend`color: blue;`
+    const Child = Parent.extend`
+      color: blue;
+    `
 
     shallow(<Parent />)
     shallow(<Child />)
@@ -46,8 +50,12 @@ describe('extending', () => {
   })
 
   it('should generate a class for the child with the rules of the parent', () => {
-    const Parent = styled.div`color: blue;`
-    const Child = Parent.extend`color: red;`
+    const Parent = styled.div`
+      color: blue;
+    `
+    const Child = Parent.extend`
+      color: red;
+    `
 
     shallow(<Child />)
 
@@ -55,21 +63,31 @@ describe('extending', () => {
   })
 
   it('should generate different classes for both parent and child', () => {
-    const Parent = styled.div`color: blue;`
-    const Child = Parent.extend`color: red;`
+    const Parent = styled.div`
+      color: blue;
+    `
+    const Child = Parent.extend`
+      color: red;
+    `
 
     shallow(<Parent />)
     shallow(<Child />)
 
-    expectCSSMatches('.sc-a {} .c { color:blue; } .sc-b {} .d { color:blue;color:red; }')
+    expectCSSMatches(
+      '.sc-a {} .c { color:blue; } .sc-b {} .d { color:blue;color:red; }'
+    )
   })
 
   it('should copy nested rules to the child', () => {
     const Parent = styled.div`
       color: blue;
-      > h1 { font-size: 4rem; }
+      > h1 {
+        font-size: 4rem;
+      }
+    `
+    const Child = Parent.extend`
+      color: red;
     `
-    const Child = Parent.extend`color: red;`
 
     shallow(<Parent />)
     shallow(<Child />)
@@ -86,13 +104,15 @@ describe('extending', () => {
 
   it('should keep default props from parent', () => {
     const Parent = styled.div`
-      color: ${(props) => props.color};
+      color: ${props => props.color};
     `
     Parent.defaultProps = {
-      color: 'red'
+      color: 'red',
     }
 
-    const Child = Parent.extend`background-color: green;`
+    const Child = Parent.extend`
+      background-color: green;
+    `
 
     shallow(<Parent />)
     shallow(<Child />)
@@ -105,34 +125,46 @@ describe('extending', () => {
 
   it('should keep prop types from parent', () => {
     const Parent = styled.div`
-      color: ${(props) => props.color};
+      color: ${props => props.color};
     `
     Parent.propTypes = {
-      color: PropTypes.string
+      color: PropTypes.string,
     }
 
-    const Child = Parent.extend`background-color: green;`
+    const Child = Parent.extend`
+      background-color: green;
+    `
 
     expect(Child.propTypes).toEqual(Parent.propTypes)
   })
 
   it('should keep custom static member from parent', () => {
-    const Parent = styled.div`color: red;`
+    const Parent = styled.div`
+      color: red;
+    `
 
     Parent.fetchData = () => 1
 
-    const Child = Parent.extend`color: green;`
+    const Child = Parent.extend`
+      color: green;
+    `
 
     expect(Child.fetchData).toBeTruthy()
     expect(Child.fetchData()).toEqual(1)
   })
 
   it('should keep static member in triple inheritance', () => {
-    const GrandParent = styled.div`color: red;`
+    const GrandParent = styled.div`
+      color: red;
+    `
     GrandParent.fetchData = () => 1
 
-    const Parent = GrandParent.extend`color: red;`
-    const Child = Parent.extend`color:red;`
+    const Parent = GrandParent.extend`
+      color: red;
+    `
+    const Child = Parent.extend`
+      color: red;
+    `
 
     expect(Child.fetchData).toBeTruthy()
     expect(Child.fetchData()).toEqual(1)
@@ -173,7 +205,9 @@ describe('extending', () => {
   })
 
   it('should allow changing component', () => {
-    const Parent = styled.div`color: red;`
+    const Parent = styled.div`
+      color: red;
+    `
     const Child = Parent.withComponent('span')
 
     expect(shallow(<Child />).html()).toEqual('<span class="sc-b c"></span>')
@@ -198,9 +232,31 @@ describe('extending', () => {
       color: red;
     `
     const Child = Parent.withComponent('a').extend.attrs({
-      href: '/test'
+      href: '/test',
     })``
 
-    expect(shallow(<Child />).html()).toEqual('<a href="/test" class="sc-c d"></a>')
+    expect(shallow(<Child />).html()).toEqual(
+      '<a href="/test" class="sc-c d"></a>'
+    )
+  })
+
+  it('regression test for #1781, extending a Styled(StyledComponent)', () => {
+    const Title = styled.h1`
+      color: red;
+    `
+
+    const ExtendedTitle = styled(Title)`
+      background-color: blue;
+    `
+
+    const ExtendedExtendedTitle = ExtendedTitle.extend`
+      border: 2px solid green;
+    `
+
+    expect(shallow(<ExtendedExtendedTitle />).html()).toMatchSnapshot()
+    expectCSSMatches(`
+      .sc-a { } .e { color:red; }
+      .sc-c { } .d { background-color:blue; border:2px solid green; }
+    `)
   })
 })

package/typings/styled-components.d.ts

@@ -40,8 +40,7 @@ export interface StyledComponentClass<P, T, O = P> extends ComponentClass<Themed
 }
 
 export interface ThemedStyledFunction<P, T, O = P> {
-  (strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]): StyledComponentClass<P, T, O>;
-  <U>(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]): StyledComponentClass<P & U, T, O & U>;
+  <U = {}>(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]): StyledComponentClass<P & U, T, O & U>;
   attrs<U, A extends Partial<P & U> = {}>(attrs: Attrs<P & U, A, T>): ThemedStyledFunction<P & A & U, T, O & U>;
 }
 
@@ -73,7 +72,7 @@ export interface ThemedCssFunction<T> {
 
 // Helper type operators
 type KeyofBase = keyof any;
-type Diff<T extends KeyofBase, U extends KeyofBase> = ({ [P in T]: P } & { [P in U]: never } & { [x: string]: never })[T];
+type Diff<T extends KeyofBase, U extends KeyofBase> = ({ [P in T]: P } & { [P in U]: never })[T];
 type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;
 type WithOptionalTheme<P extends { theme?: T; }, T> = Omit<P, "theme"> & { theme?: T; };
 

package/typings/tests/issue1068.tsx

@@ -4,6 +4,9 @@ import styled from "../..";
 interface OptionalProps {
     text?: string;
 }
+interface IndexedProps {
+    [prop: string]: any;
+}
 interface ThemedOptionalProps extends OptionalProps {
     theme: any;
 }
@@ -13,6 +16,13 @@ interface RequiredProps {
 interface ThemedRequiredProps extends RequiredProps {
     theme: any;
 }
+interface IndexedAndRequiredProps extends IndexedProps, RequiredProps { }
+interface ThemedIndexedProps extends IndexedProps {
+    theme: any;
+}
+interface ThemedIndexedAndRequiredProps extends IndexedProps, RequiredProps {
+    theme: any;
+}
 
 declare const theme: any;
 
@@ -79,6 +89,85 @@ function statelessFunctionalComponents() {
         <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
     }
 
+    function indexedProps() {
+        const Component = (props: IndexedProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component />; // text is optional through index signature
+        <Component text="test" />; // text is allowed through index signature
+        <StyledComponent />; // text is optional through index signature
+        <StyledComponent text="test" />; // text is allowed through index signature; theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent />; // text is optional through index signature
+        <StyledStyledComponent text="test" />; // text is allowed through index signature; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function indexedAndRequiredProps() {
+        const Component = (props: IndexedAndRequiredProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text is required
+        <Component text="test" />; // text is required
+        <Component text="test" foo="bar" />; // text is required; foo is allowed through index signature
+        // <StyledComponent />; // text is required
+        // <StyledComponent foo="bar"/>; // text is required; foo is indexed; theme is optional
+        <StyledComponent text="test" />; // text is required; theme is optional
+        <StyledComponent text="test" foo="bar" />; // text is required; foo is indexed; theme is optional
+        <StyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <StyledComponent text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+        // <StyledStyledComponent />; // text is required
+        // <StyledStyledComponent foo="bar"/>; // text is required; foo is indexed; theme is optional
+        <StyledStyledComponent text="test" />; // text is required; theme is optional
+        <StyledStyledComponent text="test" foo="bar" />; // text is required; foo is indexed; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <StyledStyledComponent text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+    }
+
+    function indexedPropsWithRequiredTheme() {
+        const Component = (props: ThemedIndexedProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+
+        // <Component />; // theme is required
+        <Component theme={theme} />; // theme is required
+        <Component foo="bar" theme={theme} />; // theme is required; foo is indexed prop
+        <StyledComponent />; // theme is optional
+        <StyledComponent foo="bar" />; // theme is optional; foo is indexed prop
+        <StyledComponent foo="bar" theme={theme} />; // theme is allowed; foo is indexed prop
+        <StyledStyledComponent />; // theme is optional
+        <StyledStyledComponent foo="bar" />; // theme is optional; foo is indexed prop
+        <StyledStyledComponent foo="bar" theme={theme} />; // theme is allowed; foo is indexed prop
+    }
+
+    function indexedAndRequiredPropsWithRequiredTheme() {
+        const Component = (props: ThemedIndexedAndRequiredProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text and theme are required
+        // <Component text="test" />; // theme is required
+        // <Component text="test" foo="bar" />; theme is required
+        <Component text="foo" theme={theme} />; // text is required; theme is required
+        <Component text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is required
+        // <StyledComponent />; // text is required; theme is optional
+        // <StyledComponent foo="bar"/>; // text is required; theme is optional
+        <StyledComponent text="test" />; // text is required; theme is optional
+        <StyledComponent text="test" foo="bar" />; // text is required; theme is optional; foo is indexed
+        <StyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <Component text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+        // <StyledStyledComponent />; // text is required; theme is optional
+        // <StyledStyledComponent foo="bar"/>; // text is required; theme is optional
+        <StyledStyledComponent text="test" />; // text is indexed; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
 }
 
 // Tests of pure components
@@ -151,6 +240,94 @@ function pureComponents() {
         <StyledStyledComponent text="test" />; // theme is optional
         <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
     }
+
+    function indexedProps() {
+        class Component extends React.PureComponent<IndexedProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component />; // text is optional through index signature
+        <Component text="test" />; // text is allowed through index signature
+        <StyledComponent />; // text is optional through index signature
+        <StyledComponent text="test" />; // text is allowed through index signature; theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent />; // text is optional through index signature
+        <StyledStyledComponent text="test" />; // text is allowed through index signature; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function indexedAndRequiredProps() {
+        class Component extends React.PureComponent<IndexedAndRequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text is required
+        <Component text="test" />; // text is required
+        <Component text="test" foo="bar" />; // text is required; foo is allowed through index signature
+        // <StyledComponent />; // text is required
+        // <StyledComponent foo="bar"/>; // text is required; foo is indexed; theme is optional
+        <StyledComponent text="test" />; // text is required; theme is optional
+        <StyledComponent text="test" foo="bar" />; // text is required; foo is indexed; theme is optional
+        <StyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <StyledComponent text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+        // <StyledStyledComponent />; // text is required
+        // <StyledStyledComponent foo="bar"/>; // text is required; foo is indexed; theme is optional
+        <StyledStyledComponent text="test" />; // text is required; theme is optional
+        <StyledStyledComponent text="test" foo="bar" />; // text is required; foo is indexed; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <StyledStyledComponent text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+    }
+
+    function indexedPropsWithRequiredTheme() {
+        class Component extends React.PureComponent<ThemedIndexedProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+
+        // <Component />; // theme is required
+        <Component theme={theme} />; // theme is required
+        <Component foo="bar" theme={theme} />; // theme is required; foo is indexed prop
+        <StyledComponent />; // theme is optional
+        <StyledComponent foo="bar" />; // theme is optional; foo is indexed prop
+        <StyledComponent foo="bar" theme={theme} />; // theme is allowed; foo is indexed prop
+        <StyledStyledComponent />; // theme is optional
+        <StyledStyledComponent foo="bar" />; // theme is optional; foo is indexed prop
+        <StyledStyledComponent foo="bar" theme={theme} />; // theme is allowed; foo is indexed prop
+    }
+
+    function indexedAndRequiredPropsWithRequiredTheme() {
+        class Component extends React.PureComponent<ThemedIndexedAndRequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text and theme are required
+        // <Component text="test" />; // theme is required
+        // <Component text="test" foo="bar" />; theme is required
+        <Component text="foo" theme={theme} />; // text is required; theme is required
+        <Component text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is required
+        // <StyledComponent />; // text is required; theme is optional
+        // <StyledComponent foo="bar"/>; // text is required; theme is optional
+        <StyledComponent text="test" />; // text is required; theme is optional
+        <StyledComponent text="test" foo="bar" />; // text is required; theme is optional; foo is indexed
+        <StyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <Component text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+        // <StyledStyledComponent />; // text is required; theme is optional
+        // <StyledStyledComponent foo="bar"/>; // text is required; theme is optional
+        <StyledStyledComponent text="test" />; // text is indexed; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
 }
 
 // Tests of classic components
@@ -223,4 +400,92 @@ function classicComponents() {
         <StyledStyledComponent text="test" />; // theme is optional
         <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
     }
+
+    function indexedProps() {
+        class Component extends React.Component<IndexedProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component />; // text is optional through index signature
+        <Component text="test" />; // text is allowed through index signature
+        <StyledComponent />; // text is optional through index signature
+        <StyledComponent text="test" />; // text is allowed through index signature; theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent />; // text is optional through index signature
+        <StyledStyledComponent text="test" />; // text is allowed through index signature; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function indexedAndRequiredProps() {
+        class Component extends React.Component<IndexedAndRequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text is required
+        <Component text="test" />; // text is required
+        <Component text="test" foo="bar" />; // text is required; foo is allowed through index signature
+        // <StyledComponent />; // text is required
+        // <StyledComponent foo="bar"/>; // text is required; foo is indexed; theme is optional
+        <StyledComponent text="test" />; // text is required; theme is optional
+        <StyledComponent text="test" foo="bar" />; // text is required; foo is indexed; theme is optional
+        <StyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <StyledComponent text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+        // <StyledStyledComponent />; // text is required
+        // <StyledStyledComponent foo="bar"/>; // text is required; foo is indexed; theme is optional
+        <StyledStyledComponent text="test" />; // text is required; theme is optional
+        <StyledStyledComponent text="test" foo="bar" />; // text is required; foo is indexed; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <StyledStyledComponent text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+    }
+
+    function indexedPropsWithRequiredTheme() {
+        class Component extends React.Component<ThemedIndexedProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+
+        // <Component />; // theme is required
+        <Component theme={theme} />; // theme is required
+        <Component foo="bar" theme={theme} />; // theme is required; foo is indexed prop
+        <StyledComponent />; // theme is optional
+        <StyledComponent foo="bar" />; // theme is optional; foo is indexed prop
+        <StyledComponent foo="bar" theme={theme} />; // theme is allowed; foo is indexed prop
+        <StyledStyledComponent />; // theme is optional
+        <StyledStyledComponent foo="bar" />; // theme is optional; foo is indexed prop
+        <StyledStyledComponent foo="bar" theme={theme} />; // theme is allowed; foo is indexed prop
+    }
+
+    function indexedAndRequiredPropsWithRequiredTheme() {
+        class Component extends React.Component<ThemedIndexedAndRequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text and theme are required
+        // <Component text="test" />; // theme is required
+        // <Component text="test" foo="bar" />; theme is required
+        <Component text="foo" theme={theme} />; // text is required; theme is required
+        <Component text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is required
+        // <StyledComponent />; // text is required; theme is optional
+        // <StyledComponent foo="bar"/>; // text is required; theme is optional
+        <StyledComponent text="test" />; // text is required; theme is optional
+        <StyledComponent text="test" foo="bar" />; // text is required; theme is optional; foo is indexed
+        <StyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <Component text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+        // <StyledStyledComponent />; // text is required; theme is optional
+        // <StyledStyledComponent foo="bar"/>; // text is required; theme is optional
+        <StyledStyledComponent text="test" />; // text is indexed; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
 }