fix linting errors

.eslintrc.json

@@ -11,7 +11,9 @@
   "rules": {
     "@typescript-eslint/ban-types": 0,
     "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/no-empty-function": 0,
     "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-namespace": 0,
     "@typescript-eslint/no-non-null-assertion": 0,
     "@typescript-eslint/no-unused-vars": [
       "error",
@@ -37,7 +39,7 @@
     "react/require-default-props": 0,
     "react/sort-comp": 0,
     "symbol-description": 0,
-    "no-restricted-syntax": ["error", "ForOfStatement", "LabeledStatement", "WithStatement"],
+    "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
     "no-return-assign": 0,
     "no-bitwise": 0,
     "no-plusplus": 0,

CHANGELOG.md

@@ -12,6 +12,8 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 
 - Pass `elementToBeCreated` as a third parameter to `shouldForwardProp` so that the user-specified function can decide whether to pass through props based on whether the created element will be a tag or another component. (see [#3436](https://github.com/styled-components/styled-components/pull/3436))
 
+- Rename `masterSheet` in internals to `mainSheet`
+
 ## [v5.2.2] - 2021-03-30
 
 - For React Native based components, pass `testID` down to the native component if specified for an easier time testing. (see [#3365](https://github.com/styled-components/styled-components/pull/3365))

packages/styled-components/src/base.ts

@@ -1,26 +1,22 @@
 /* Import singletons */
-import isStyledComponent from './utils/isStyledComponent';
-import css from './constructors/css';
-import createGlobalStyle from './constructors/createGlobalStyle';
-import keyframes from './constructors/keyframes';
-import ServerStyleSheet from './models/ServerStyleSheet';
 import { SC_VERSION } from './constants';
-
-import StyleSheetManager, {
-  StyleSheetContext,
-  StyleSheetConsumer,
-} from './models/StyleSheetManager';
-
-/* Import components */
-import ThemeProvider, { ThemeContext, ThemeConsumer } from './models/ThemeProvider';
-
+import createGlobalStyle from './constructors/createGlobalStyle';
+import css from './constructors/css';
+import keyframes from './constructors/keyframes';
 /* Import Higher Order Components */
 import withTheme from './hoc/withTheme';
-
 /* Import hooks */
 import useTheme from './hooks/useTheme';
+import ServerStyleSheet from './models/ServerStyleSheet';
+import StyleSheetManager, {
+  StyleSheetConsumer,
+  StyleSheetContext,
+} from './models/StyleSheetManager';
+/* Import components */
+import ThemeProvider, { ThemeConsumer, ThemeContext } from './models/ThemeProvider';
+import isStyledComponent from './utils/isStyledComponent';
 
-declare var __SERVER__: boolean;
+declare const __SERVER__: boolean;
 
 declare global {
   interface Window {

packages/styled-components/src/constants.ts

@@ -1,5 +1,5 @@
-declare var SC_DISABLE_SPEEDY: boolean | null | undefined;
-declare var __VERSION__: string;
+declare let SC_DISABLE_SPEEDY: boolean | null | undefined;
+declare let __VERSION__: string;
 
 export const SC_ATTR: string =
   (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||

packages/styled-components/src/constructors/createGlobalStyle.ts

@@ -4,7 +4,7 @@ import GlobalStyle from '../models/GlobalStyle';
 import { useStyleSheet, useStylis } from '../models/StyleSheetManager';
 import { Theme, ThemeContext } from '../models/ThemeProvider';
 import StyleSheet from '../sheet';
-import { ExtensibleObject, Interpolation, RuleSet, Stringifier } from '../types';
+import { ExtensibleObject, Interpolation, RuleSet, Stringifier, Styles } from '../types';
 import { checkDynamicCreation } from '../utils/checkDynamicCreation';
 import determineTheme from '../utils/determineTheme';
 import generateComponentId from '../utils/generateComponentId';
@@ -13,7 +13,7 @@ import css from './css';
 declare const __SERVER__: boolean;
 
 export default function createGlobalStyle(
-  strings: Array<string>,
+  strings: Styles,
   ...interpolations: Array<Interpolation>
 ) {
   const rules = css(strings, ...interpolations) as RuleSet;

packages/styled-components/src/constructors/test/createGlobalStyle.ssr.test.tsx

@@ -1,23 +1,21 @@
 /**
  * @jest-environment node
  */
-
-
-/* eslint-disable no-console, import/namespace */
-import React from "react";
-import ReactDOMServer from "react-dom/server";
-import ServerStyleSheet from "../../models/ServerStyleSheet";
-import { stripComments, stripWhitespace } from "../../test/utils";
-import createGlobalStyle from "../createGlobalStyle";
+/* eslint-disable no-console */
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import ServerStyleSheet from '../../models/ServerStyleSheet';
+import { stripComments, stripWhitespace } from '../../test/utils';
+import createGlobalStyle from '../createGlobalStyle';
 
 describe(`createGlobalStyle`, () => {
-  let context;
+  let context: ReturnType<typeof setup>;
 
   function setup() {
     return {
-      renderToString(comp) {
+      renderToString(comp: JSX.Element) {
         return ReactDOMServer.renderToString(comp);
-      }
+      },
     };
   }
 
@@ -32,10 +30,12 @@ describe(`createGlobalStyle`, () => {
     const styles = stripOuterHTML(sheet.getStyleTags());
 
     expect(html).toBe('');
-    expect(stripWhitespace(stripComments(styles))).toMatchInlineSnapshot(`"[data-test-inject]{ color:red; } data-styled.g1[id=\\"sc-global-a1\\"]{ content:\\"sc-global-a1,\\"} "`);
+    expect(stripWhitespace(stripComments(styles))).toMatchInlineSnapshot(
+      `"[data-test-inject]{ color:red; } data-styled.g1[id=\\"sc-global-a1\\"]{ content:\\"sc-global-a1,\\"} "`
+    );
   });
 });
 
-function stripOuterHTML(html) {
+function stripOuterHTML(html: string) {
   return html.replace(/<[^>]*>([^<]*)<[^>]*>/g, '$1');
-}
+}

packages/styled-components/src/constructors/test/createGlobalStyle.test.tsx

@@ -1,19 +1,18 @@
-/* eslint-disable no-console, import/namespace */
-
-import React from "react";
-import ReactDOM from "react-dom";
-import { act, Simulate } from "react-dom/test-utils";
-import ReactTestRenderer from "react-test-renderer";
-import * as constants from "../../constants";
-import StyleSheetManager from "../../models/StyleSheetManager";
-import ThemeProvider from "../../models/ThemeProvider";
-import StyleSheet from "../../sheet";
-import { getRenderedCSS, resetStyled } from "../../test/utils";
-import createGlobalStyle from "../createGlobalStyle";
-import keyframes from "../keyframes";
+/* eslint-disable no-console */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act, Simulate } from 'react-dom/test-utils';
+import ReactTestRenderer from 'react-test-renderer';
+import * as constants from '../../constants';
+import StyleSheetManager from '../../models/StyleSheetManager';
+import ThemeProvider from '../../models/ThemeProvider';
+import StyleSheet from '../../sheet';
+import { getRenderedCSS, resetStyled } from '../../test/utils';
+import createGlobalStyle from '../createGlobalStyle';
+import keyframes from '../keyframes';
 
 describe(`createGlobalStyle`, () => {
-  let context;
+  let context: ReturnType<typeof setup>;
 
   function setup() {
     const container = document.createElement('div');
@@ -21,13 +20,13 @@ describe(`createGlobalStyle`, () => {
 
     return {
       container,
-      render(comp) {
+      render(comp: JSX.Element) {
         ReactDOM.render(comp, container);
       },
       cleanup() {
         resetStyled();
         document.body.removeChild(container);
-      }
+      },
     };
   }
 
@@ -40,9 +39,7 @@ describe(`createGlobalStyle`, () => {
   });
 
   it(`injects global <style> when rendered`, () => {
-    const {
-      render
-    } = context;
+    const { render } = context;
     const Component = createGlobalStyle`[data-test-inject]{color:red;} `;
     render(<Component />);
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
@@ -53,9 +50,7 @@ describe(`createGlobalStyle`, () => {
   });
 
   it(`supports interpolation`, () => {
-    const {
-      render
-    } = context;
+    const { render } = context;
     const Component = createGlobalStyle`div {color:${props => props.color};} `;
     render(<Component color="orange" />);
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
@@ -66,15 +61,11 @@ describe(`createGlobalStyle`, () => {
   });
 
   it(`supports objects with a function`, () => {
-    const {
-      render
-    } = setup();
+    const { render } = setup();
     const Component = createGlobalStyle({
       'h1, h2, h3, h4, h5, h6': {
-        fontFamily: ({
-          theme
-        }) => theme.fonts.heading
-      }
+        fontFamily: ({ theme }) => theme.fonts.heading,
+      },
     });
     render(<Component theme={{ fonts: { heading: 'sans-serif' } }} />);
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
@@ -85,19 +76,15 @@ describe(`createGlobalStyle`, () => {
   });
 
   it(`supports nested objects with a function`, () => {
-    const {
-      render
-    } = setup();
+    const { render } = setup();
     const Component1 = createGlobalStyle({
       'div, span': {
         h1: {
           span: {
-            fontFamily: ({
-              theme
-            }) => theme.fonts.heading
-          }
-        }
-      }
+            fontFamily: ({ theme }) => theme.fonts.heading,
+          },
+        },
+      },
     });
     render(<Component1 theme={{ fonts: { heading: 'sans-serif' } }} />);
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
@@ -108,13 +95,13 @@ describe(`createGlobalStyle`, () => {
   });
 
   it(`supports theming`, () => {
-    const {
-      render
-    } = context;
+    const { render } = context;
     const Component = createGlobalStyle`div {color:${props => props.theme.color};} `;
-    render(<ThemeProvider theme={{ color: 'black' }}>
+    render(
+      <ThemeProvider theme={{ color: 'black' }}>
         <Component />
-      </ThemeProvider>);
+      </ThemeProvider>
+    );
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
       "div {
         color: black;
@@ -123,26 +110,25 @@ describe(`createGlobalStyle`, () => {
   });
 
   it(`updates theme correctly`, () => {
-    const {
-      render
-    } = context;
+    const { render } = context;
     const Component = createGlobalStyle`div {color:${props => props.theme.color};} `;
-    let update;
+    let update: Function;
     class App extends React.Component {
-
       state = { color: 'grey' };
 
-      constructor() {
-        super();
-        update = payload => {
+      constructor(props: {}) {
+        super(props);
+        update = (payload: {}) => {
           this.setState(payload);
         };
       }
 
       render() {
-        return <ThemeProvider theme={{ color: this.state.color }}>
+        return (
+          <ThemeProvider theme={{ color: this.state.color }}>
             <Component />
-          </ThemeProvider>;
+          </ThemeProvider>
+        );
       }
     }
     render(<App />);
@@ -152,6 +138,7 @@ describe(`createGlobalStyle`, () => {
       }"
     `);
 
+    // @ts-expect-error TS not detecting construction during render
     update({ color: 'red' });
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
       "div {
@@ -161,9 +148,7 @@ describe(`createGlobalStyle`, () => {
   });
 
   it('should work in StrictMode without warnings', () => {
-    const {
-      render
-    } = context;
+    const { render } = context;
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
     const Comp = createGlobalStyle`
       html {
@@ -172,9 +157,11 @@ describe(`createGlobalStyle`, () => {
     `;
 
     act(() => {
-      render(<React.StrictMode>
+      render(
+        <React.StrictMode>
           <Comp />
-        </React.StrictMode>);
+        </React.StrictMode>
+      );
     });
 
     expect(spy).not.toHaveBeenCalled();
@@ -183,9 +170,7 @@ describe(`createGlobalStyle`, () => {
   it('should not inject twice in StrictMode', () => {
     jest.spyOn(StyleSheet, 'registerId');
 
-    const {
-      render
-    } = context;
+    const { render } = context;
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
     const Comp = createGlobalStyle`
       html {
@@ -194,9 +179,11 @@ describe(`createGlobalStyle`, () => {
     `;
 
     act(() => {
-      render(<React.StrictMode>
+      render(
+        <React.StrictMode>
           <Comp />
-        </React.StrictMode>);
+        </React.StrictMode>
+      );
     });
 
     expect(spy).not.toHaveBeenCalled();
@@ -204,31 +191,30 @@ describe(`createGlobalStyle`, () => {
   });
 
   it(`renders to StyleSheetManager.target`, () => {
-    const {
-      container,
-      render
-    } = context;
+    const { container, render } = context;
     const Component = createGlobalStyle`[data-test-target]{color:red;} `;
-    render(<StyleSheetManager target={container}>
+    render(
+      <StyleSheetManager target={container}>
         <Component />
-      </StyleSheetManager>);
+      </StyleSheetManager>
+    );
 
-    const style = container.firstChild;
+    const style = container.firstElementChild!;
     expect(style.tagName).toBe('STYLE');
     expect(style.textContent).toContain(`[data-test-target]{color:red;}`);
   });
 
   it(`adds new global rules non-destructively`, () => {
-    const {
-      render
-    } = context;
+    const { render } = context;
     const Color = createGlobalStyle`[data-test-add]{color:red;} `;
     const Background = createGlobalStyle`[data-test-add]{background:yellow;} `;
 
-    render(<React.Fragment>
+    render(
+      <React.Fragment>
         <Color />
         <Background />
-      </React.Fragment>);
+      </React.Fragment>
+    );
 
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
       "[data-test-add] {
@@ -241,9 +227,7 @@ describe(`createGlobalStyle`, () => {
   });
 
   it(`stringifies multiple rules correctly`, () => {
-    const {
-      render
-    } = context;
+    const { render } = context;
     const Component = createGlobalStyle`
       div {
         color: ${props => props.fg};
@@ -260,17 +244,17 @@ describe(`createGlobalStyle`, () => {
   });
 
   it(`injects multiple <GlobalStyle> components correctly`, () => {
-    const {
-      render
-    } = context;
+    const { render } = context;
 
     const A = createGlobalStyle`body { background: palevioletred; }`;
     const B = createGlobalStyle`body { color: white; }`;
 
-    render(<React.Fragment>
+    render(
+      <React.Fragment>
         <A />
         <B />
-      </React.Fragment>);
+      </React.Fragment>
+    );
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
       "body {
         background: palevioletred;
@@ -285,8 +269,7 @@ describe(`createGlobalStyle`, () => {
     const ComponentA = createGlobalStyle`[data-test-remove]{color:grey;} `;
     const ComponentB = createGlobalStyle`[data-test-keep]{color:blue;} `;
 
-    class Comp extends React.Component {
-
+    class Comp extends React.Component<{ insert: boolean }> {
       render() {
         return this.props.insert ? <ComponentA /> : <ComponentB />;
       }
@@ -314,49 +297,48 @@ describe(`createGlobalStyle`, () => {
   });
 
   it(`removes styling injected for multiple <GlobalStyle> components correctly`, () => {
-    const {
-      render
-    } = context;
+    const { render } = context;
 
     const A = createGlobalStyle`body { background: palevioletred; }`;
     const B = createGlobalStyle`body { color: white; }`;
 
     class Comp extends React.Component {
-
       state = {
         a: true,
-        b: true
+        b: true,
       };
 
       onClick() {
         if (this.state.a === true && this.state.b === true) {
           this.setState({
             a: true,
-            b: false
+            b: false,
           });
         } else if (this.state.a === true && this.state.b === false) {
           this.setState({
             a: false,
-            b: false
+            b: false,
           });
         } else {
           this.setState({
             a: true,
-            b: true
+            b: true,
           });
         }
       }
 
       render() {
-        return <div data-test-el onClick={() => this.onClick()}>
+        return (
+          <div data-test-el onClick={() => this.onClick()}>
             {this.state.a ? <A /> : null}
             {this.state.b ? <B /> : null}
-          </div>;
+          </div>
+        );
       }
     }
 
     render(<Comp />);
-    const el = document.querySelector('[data-test-el]');
+    const el = document.querySelector('[data-test-el]')!;
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
       "body {
         background: palevioletred;
@@ -380,9 +362,7 @@ describe(`createGlobalStyle`, () => {
   it(`removes styling injected for multiple instances of same <GlobalStyle> components correctly`, () => {
     jest.spyOn(console, 'warn').mockImplementation(() => {});
 
-    const {
-      render
-    } = context;
+    const { render } = context;
 
     const A = createGlobalStyle`
       body { background: ${props => props.bgColor}; }
@@ -409,40 +389,44 @@ describe(`createGlobalStyle`, () => {
   it(`should warn when children are passed as props`, () => {
     jest.spyOn(console, 'warn').mockImplementation(() => {});
 
-    const {
-      render
-    } = context;
+    const { render } = context;
     const Component = createGlobalStyle`
       div {
         color: ${props => props.fg};
         background: ${props => props.bg};
       }
     `;
-    render(<Component fg="red" bg="green">
+    render(
+      <Component fg="red" bg="green">
         <div />
-      </Component>);
+      </Component>
+    );
 
-    expect(console.warn.mock.calls[0][0]).toMatchInlineSnapshot(`"The global style component sc-global-a was given child JSX. createGlobalStyle does not render children."`);
+    const warn = console.warn as jest.Mock<Console['warn']>;
+
+    expect(warn.mock.calls[0][0]).toMatchInlineSnapshot(
+      `"The global style component sc-global-a was given child JSX. createGlobalStyle does not render children."`
+    );
   });
 
   it(`should warn when @import is used`, () => {
     jest.spyOn(console, 'warn').mockImplementation(() => {});
 
-    const {
-      render
-    } = context;
+    const { render } = context;
     const Component = createGlobalStyle`
       @import url("something.css");
     `;
     render(<Component />);
 
-    expect(console.warn.mock.calls[0][0]).toMatchInlineSnapshot(`"Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."`);
+    const warn = console.warn as jest.Mock<Console['warn']>;
+
+    expect(warn.mock.calls[0][0]).toMatchInlineSnapshot(
+      `"Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app."`
+    );
   });
 
   it('works with keyframes', () => {
-    const {
-      render
-    } = context;
+    const { render } = context;
 
     const rotate360 = keyframes`
       from {
@@ -463,10 +447,12 @@ describe(`createGlobalStyle`, () => {
       }
     `;
 
-    render(<div>
+    render(
+      <div>
         <GlobalStyle />
         <div>&lt; 💅 &gt;</div>
-      </div>);
+      </div>
+    );
 
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
       "div {
@@ -510,6 +496,7 @@ describe(`createGlobalStyle`, () => {
   it(`removes style tag in StyleSheetManager.target when unmounted after target detached and no other global styles`, () => {
     // Set DISABLE_SPEEDY flag to false to force using speedy tag
     const flag = constants.DISABLE_SPEEDY;
+    // @ts-expect-error it's ok
     constants.DISABLE_SPEEDY = false;
 
     const container = document.createElement('div');
@@ -521,21 +508,24 @@ describe(`createGlobalStyle`, () => {
     const Component = createGlobalStyle`[data-test-unmount-remove]{color:grey;} `;
 
     class Comp extends React.Component {
-
       render() {
-        return <div>
+        return (
+          <div>
             <StyleSheetManager target={styleContainer}>
               <Component />
             </StyleSheetManager>
-          </div>;
+          </div>
+        );
       }
     }
 
     ReactDOM.render(<Comp />, container);
 
     // Check styles
-    const style = styleContainer.firstChild;
-    expect(style.sheet.cssRules[0].selectorText).toBe('[data-test-unmount-remove]');
+    const style = styleContainer.firstElementChild as HTMLStyleElement;
+    expect((style!.sheet!.cssRules[0] as CSSStyleRule).selectorText).toBe(
+      '[data-test-unmount-remove]'
+    );
 
     // detach container and unmount react component
     try {
@@ -549,19 +539,20 @@ describe(`createGlobalStyle`, () => {
     }
 
     // Reset DISABLE_SPEEDY flag
+    // @ts-expect-error it's ok
     constants.DISABLE_SPEEDY = flag;
   });
 
   it(`injects multiple global styles in definition order, not composition order`, () => {
-    const {
-      render
-    } = context;
+    const { render } = context;
     const GlobalStyleOne = createGlobalStyle`[data-test-inject]{color:red;} `;
     const GlobalStyleTwo = createGlobalStyle`[data-test-inject]{color:green;} `;
-    render(<>
+    render(
+      <>
         <GlobalStyleTwo />
         <GlobalStyleOne />
-      </>);
+      </>
+    );
 
     expect(getRenderedCSS()).toMatchInlineSnapshot(`
       "[data-test-inject] {
@@ -572,4 +563,4 @@ describe(`createGlobalStyle`, () => {
       }"
     `);
   });
-});
+});

packages/styled-components/src/index-standalone.ts

@@ -1,5 +1,4 @@
 import * as secondary from './base';
-
 /* Import singleton constructors */
 import styled from './constructors/styled';
 
@@ -7,9 +6,8 @@ import styled from './constructors/styled';
  * eliminates the need to do styled.default since the other APIs
  * are directly assigned as properties to the main function
  * */
-// eslint-disable-next-line guard-for-in
 for (const key in secondary) {
-  // @ts-ignore
+  // @ts-expect-error shush
   styled[key] = secondary[key];
 }
 

packages/styled-components/src/models/StyleSheetManager.tsx

@@ -5,7 +5,7 @@ import { Stringifier } from '../types';
 import createStylisInstance from '../utils/stylis';
 
 type Props = {
-  children?: Node;
+  children?: React.ReactChild;
   disableCSSOMInjection?: boolean;
   disableVendorPrefixes?: boolean;
   sheet?: StyleSheet;

packages/styled-components/src/models/ThemeProvider.tsx

@@ -3,10 +3,10 @@ import styledError from '../utils/error';
 import isFunction from '../utils/isFunction';
 
 export type Theme = {
-  [key: string]: unknown;
+  [key: string]: any;
 };
 
-type ThemeFn = (outerTheme?: Theme) => Theme;
+type ThemeFn = (outerTheme: Theme) => Theme;
 type ThemeArgument = Theme | ThemeFn;
 
 type Props = {

packages/styled-components/src/models/test/ThemeProvider.test.tsx

@@ -1,11 +1,9 @@
-
-
 /* eslint-disable react/no-multi-comp */
-import React from "react";
-import TestRenderer from "react-test-renderer";
-import ThemeProvider from "../ThemeProvider";
-import withTheme from "../../hoc/withTheme";
-import { resetStyled } from "../../test/utils";
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+import withTheme from '../../hoc/withTheme';
+import { resetStyled } from '../../test/utils';
+import ThemeProvider from '../ThemeProvider';
 
 let styled: ReturnType<typeof resetStyled>;
 
@@ -24,7 +22,9 @@ describe('ThemeProvider', () => {
 
   it('should render its child', () => {
     const child = <p>Child!</p>;
-    const wrapper = TestRenderer.create(<ThemeProvider theme={{ main: 'black' }}>{child}</ThemeProvider>);
+    const wrapper = TestRenderer.create(
+      <ThemeProvider theme={{ main: 'black' }}>{child}</ThemeProvider>
+    );
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
@@ -36,15 +36,17 @@ describe('ThemeProvider', () => {
     const MyDiv = styled.div``;
     const MyDivWithTheme = withTheme(MyDiv);
 
-    const wrapper = TestRenderer.create(<ThemeProvider theme={outerTheme}>
+    const wrapper = TestRenderer.create(
+      <ThemeProvider theme={outerTheme}>
         <ThemeProvider theme={innerTheme}>
           <MyDivWithTheme />
         </ThemeProvider>
-      </ThemeProvider>);
+      </ThemeProvider>
+    );
 
     expect(wrapper.root.findByType(MyDiv).props.theme).toEqual({
       ...outerTheme,
-      ...innerTheme
+      ...innerTheme,
     });
   });
 
@@ -56,25 +58,27 @@ describe('ThemeProvider', () => {
     const MyDiv = styled.div``;
     const MyDivWithTheme = withTheme(MyDiv);
 
-    const wrapper = TestRenderer.create(<ThemeProvider theme={outerestTheme}>
+    const wrapper = TestRenderer.create(
+      <ThemeProvider theme={outerestTheme}>
         <ThemeProvider theme={outerTheme}>
           <ThemeProvider theme={innerTheme}>
             <MyDivWithTheme />
           </ThemeProvider>
         </ThemeProvider>
-      </ThemeProvider>);
+      </ThemeProvider>
+    );
 
     expect(wrapper.root.findByType(MyDiv).props.theme).toEqual({
       ...outerestTheme,
       ...outerTheme,
-      ...innerTheme
+      ...innerTheme,
     });
   });
 
   it('should be able to render two independent themes', () => {
     const themes = {
       one: { main: 'black', secondary: 'red' },
-      two: { main: 'blue', other: 'green' }
+      two: { main: 'blue', other: 'green' },
     };
 
     const MyDivOne = withTheme(styled.div``);
@@ -82,14 +86,16 @@ describe('ThemeProvider', () => {
     const MyDivTwo = withTheme(styled.div``);
     const MyDivWithThemeTwo = withTheme(MyDivTwo);
 
-    const wrapper = TestRenderer.create(<div>
+    const wrapper = TestRenderer.create(
+      <div>
         <ThemeProvider theme={themes.one}>
           <MyDivWithThemeOne />
         </ThemeProvider>
         <ThemeProvider theme={themes.two}>
           <MyDivWithThemeTwo />
         </ThemeProvider>
-      </div>);
+      </div>
+    );
 
     expect(wrapper.root.findByType(MyDivOne).props.theme).toEqual(themes.one);
     expect(wrapper.root.findByType(MyDivTwo).props.theme).toEqual(themes.two);
@@ -97,19 +103,21 @@ describe('ThemeProvider', () => {
 
   it('ThemeProvider propagates theme updates through nested ThemeProviders', () => {
     const theme = { themed: true };
-    const augment = outerTheme => Object.assign({}, outerTheme, { augmented: true });
+    const augment = (outerTheme: typeof theme) =>
+      Object.assign({}, outerTheme, { augmented: true });
     const update = { updated: true };
-    let actual;
     const expected = { themed: true, augmented: true, updated: true };
 
     const MyDiv = styled.div``;
     const MyDivWithTheme = withTheme(MyDiv);
 
-    const getJSX = (givenTheme = theme) => <ThemeProvider theme={givenTheme}>
+    const getJSX = (givenTheme = theme) => (
+      <ThemeProvider theme={givenTheme}>
         <ThemeProvider theme={augment}>
           <MyDivWithTheme />
         </ThemeProvider>
-      </ThemeProvider>;
+      </ThemeProvider>
+    );
 
     const wrapper = TestRenderer.create(getJSX());
 
@@ -117,4 +125,4 @@ describe('ThemeProvider', () => {
 
     expect(wrapper.root.findByType(MyDiv).props.theme).toEqual(expected);
   });
-});
+});

packages/styled-components/src/sheet/Sheet.ts

@@ -56,7 +56,7 @@ export default class StyleSheet implements Sheet {
     }
   }
 
-  reconstructWithOptions(options: SheetConstructorArgs, withNames: boolean = true) {
+  reconstructWithOptions(options: SheetConstructorArgs, withNames = true) {
     return new StyleSheet(
       { ...this.options, ...options },
       this.gs,

packages/styled-components/src/sheet/test/GroupedTag.test.ts

@@ -41,7 +41,7 @@ it('inserts and retrieves rules by groups correctly', () => {
 
 it('inserts rules at correct indices if some rules are dropped', () => {
   const tag = new VirtualTag();
-  const insertRule = jest.spyOn(tag, 'insertRule').mockImplementationOnce(() => false);
+  jest.spyOn(tag, 'insertRule').mockImplementationOnce(() => false);
   const groupedTag = makeGroupedTag(tag);
 
   groupedTag.insertRules(1, ['.skipped {}', '.inserted {}']);

packages/styled-components/src/test/basic.test.tsx

@@ -54,7 +54,7 @@ describe('basic', () => {
 
     invalidComps.forEach(comp => {
       expect(() => {
-        // @ts-expect-error
+        // @ts-expect-error test assertion
         const Comp = styled(comp)``;
         TestRenderer.create(<Comp />);
       }).toThrow(`Cannot create styled-component for component: ${comp}`);
@@ -265,7 +265,7 @@ describe('basic', () => {
       const Comp = styled.div``;
 
       class Wrapper extends Component<any, any> {
-        testRef: any = React.createRef();
+        testRef = React.createRef<HTMLDivElement>();
 
         render() {
           return (
@@ -276,10 +276,10 @@ describe('basic', () => {
         }
       }
 
-      const wrapper = renderIntoDocument(<Wrapper />);
+      const wrapper = renderIntoDocument<any, Wrapper>(<Wrapper />);
 
       // eslint-disable-next-line react/no-find-dom-node
-      const component = find(findDOMNode(wrapper), Comp);
+      const component = find(findDOMNode(wrapper) as Element, Comp);
 
       expect(wrapper.testRef.current).toBe(component);
     });
@@ -294,7 +294,7 @@ describe('basic', () => {
       const Outer = styled(Inner)``;
 
       class Wrapper extends Component<any, any> {
-        testRef: any = React.createRef();
+        testRef = React.createRef<HTMLDivElement>();
 
         render() {
           return (
@@ -305,7 +305,7 @@ describe('basic', () => {
         }
       }
 
-      const wrapper = renderIntoDocument(<Wrapper />);
+      const wrapper = renderIntoDocument<any, Wrapper>(<Wrapper />);
       const innerComponent = findRenderedComponentWithType(wrapper, Inner);
 
       expect(wrapper.testRef.current).toBe(innerComponent);

packages/styled-components/src/test/constants.test.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable global-require */
+/* eslint-disable global-require, @typescript-eslint/no-var-requires */
 import { SC_ATTR as DEFAULT_SC_ATTR } from '../constants';
 import { expectCSSMatches } from './utils';
 

packages/styled-components/src/test/globals.ts

@@ -2,5 +2,5 @@
 global.__SERVER__ = typeof document === 'undefined';
 global.__VERSION__ = 'JEST_MOCK_VERSION';
 
-declare var __SERVER__: boolean;
-declare var __VERSION__: string;
+declare let __SERVER__: boolean;
+declare let __VERSION__: string;

packages/styled-components/src/test/rehydration.test.tsx

@@ -15,7 +15,7 @@ import { getRenderedCSS, resetStyled, seedNextClassnames } from './utils';
    */
 let styled: ReturnType<typeof resetStyled>;
 
-const resetSheet = sheet => {
+const resetSheet = (sheet: typeof mainSheet) => {
   sheet.gs = {};
   sheet.names = new Map();
   sheet.clearTag();

packages/styled-components/src/test/theme.test.tsx

@@ -458,7 +458,7 @@ describe('theming', () => {
   it('should hoist static properties when using withTheme', () => {
     class MyComponent extends Component<any, any> {
 
-      static myStaticProperty: boolean = true;
+      static myStaticProperty = true;
     }
 
     const MyComponentWithTheme = withTheme(MyComponent);

packages/styled-components/src/types.ts

@@ -21,18 +21,19 @@ export type StyleFunction<Props> = (
 ) => BaseExtensibleObject | string | number;
 
 // Do not add IStyledComponent to this union, it breaks prop function interpolation in TS
-export type Interpolation<Props extends Object = ExtensibleObject> =
+export type Interpolation<Props extends Object = ExecutionContext> =
   | StyleFunction<Props>
   | ExtensibleObject
   | string
   | Keyframe
   | Interpolation<Props>[];
 
-export type Attrs<Props = ExtensibleObject> =
+export type Attrs<Props = ExecutionContext> =
   | ExtensibleObject
-  | ((props: ExecutionContext & Props) => ExtensibleObject);
+  | ((props: ExecutionContext & Props) => ExecutionContext);
 export type RuleSet = Interpolation[];
-export type Styles = string[] | Object | ((executionContext: ExtensibleObject) => Interpolation);
+
+export type Styles = string[] | Object | ((executionContext: ExecutionContext) => Interpolation);
 
 export type WebTarget = string | ComponentType<any>;
 export type NativeTarget = ComponentType<any>;

packages/styled-components/src/utils/nonce.ts

@@ -1,4 +1,4 @@
-declare var __webpack_nonce__: string;
+declare let __webpack_nonce__: string;
 
 export default function getNonce() {
   return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;

packages/styled-components/src/utils/stylis.ts

@@ -49,8 +49,8 @@ export default function createStylisInstance(
    */
   const selfReferenceReplacementPlugin: stylis.Middleware = element => {
     if (element.type === RULESET && element.value.includes('&')) {
-      // @ts-ignore
-      element.props[0] = element.props[0].replace(_selectorRegexp, selfReferenceReplacer);
+      const props = element.props as string[];
+      props[0] = props[0].replace(_selectorRegexp, selfReferenceReplacer);
     }
   };
 

packages/styled-components/src/utils/test/getComponentName.test.tsx

@@ -1,9 +1,9 @@
-
-import React from "react";
-import getComponentName from "../getComponentName";
+/* eslint-disable react/display-name */
+import React from 'react';
+import getComponentName from '../getComponentName';
 
 describe('getComponentName', () => {
-  let Test;
+  let Test: React.FC;
   beforeEach(() => {
     Test = () => <div />;
   });
@@ -20,9 +20,9 @@ describe('getComponentName', () => {
 
   it('ultimately falls back to "Component"', () => {
     Object.defineProperty(Test, 'name', {
-      value: ''
+      value: '',
     });
 
     expect(getComponentName(Test)).toEqual('Component');
   });
-});
+});

packages/styled-components/src/utils/test/isPlainObject.test.ts

@@ -26,7 +26,7 @@ it('returns false for an array', () => {
 });
 
 it('returns false for a React component', () => {
-  class Foo extends React.Component {};
+  class Foo extends React.Component {}
   expect(isPlainObject(Foo)).toEqual(false);
 });
 

packages/styled-components/src/utils/test/mixinDeep.test.ts

@@ -1,11 +1,17 @@
 /* ported from https://github.com/jonschlinkert/mixin-deep; thanks Jon! */
-import mixinDeep from "../mixinDeep";
+import mixinDeep from '../mixinDeep';
 
 it('should deeply mix the properties of object into the first object.', () => {
   expect(mixinDeep({ a: { aa: 'aa' } }, { a: { bb: 'bb' } }, { a: { cc: 'cc' } })).toEqual({
-    a: { aa: 'aa', bb: 'bb', cc: 'cc' }
+    a: { aa: 'aa', bb: 'bb', cc: 'cc' },
   });
-  expect(mixinDeep({ a: { aa: 'aa', dd: { ee: 'ff' } } }, { a: { bb: 'bb', dd: { gg: 'hh' } } }, { a: { cc: 'cc', dd: { ii: 'jj' } } })).toEqual({ a: { aa: 'aa', dd: { ee: 'ff', gg: 'hh', ii: 'jj' }, bb: 'bb', cc: 'cc' } });
+  expect(
+    mixinDeep(
+      { a: { aa: 'aa', dd: { ee: 'ff' } } },
+      { a: { bb: 'bb', dd: { gg: 'hh' } } },
+      { a: { cc: 'cc', dd: { ii: 'jj' } } }
+    )
+  ).toEqual({ a: { aa: 'aa', dd: { ee: 'ff', gg: 'hh', ii: 'jj' }, bb: 'bb', cc: 'cc' } });
 });
 
 it('should copy properties onto the first object', () => {
@@ -104,8 +110,8 @@ it('should mixin Dates', () => {
 });
 
 it('should not mixin objects created with custom constructor', () => {
-  function TestType() {}
+  class TestType {}
   const fixture = new TestType();
   const actual = mixinDeep(fixture);
   expect(actual).toEqual(fixture);
-});
+});