v6 docs (styled-components#919)

* docs: add v6 migration guide

* docs: remove references to withComponent() API

* docs: update StyleSheetManager

* docs: use tsx syntax in example code

* docs: remove Flow section, update TS section

* chore: link v6 migration doc

.lintstagedrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  '**/*.{js,jsx,ts,tsx}': ['jest -c .jest.config.js --findRelatedTests', 'prettier --write'],
+  '**/*.{js,jsx,ts,tsx}': ['jest -c .jest.config.js --findRelatedTests --passWithNoTests', 'prettier --write'],
 };

pages/docs.json

@@ -85,9 +85,6 @@
         {
           "title": "Supported CSS"
         },
-        {
-          "title": "Flow"
-        },
         {
           "title": "TypeScript"
         },
@@ -127,6 +124,9 @@
       "title": "FAQs",
       "pathname": "faqs",
       "sections": [
+        {
+          "title": "What do I need to do to migrate to v6?"
+        },
         {
           "title": "What do I need to do to migrate to v5?"
         },

pages/docs/api.mdx

@@ -4,7 +4,6 @@ import NextPage from '../../components/NextPage'
 import Primary from '../../sections/api/primary/index.mdx'
 import Helpers from '../../sections/api/helpers/index.mdx'
 import SupportedCSS from '../../sections/api/supported-css.mdx'
-import Flow from '../../sections/api/flow.mdx'
 import TypeScript from '../../sections/api/typescript.mdx'
 import OldAPIs from '../../sections/api/old/index.mdx'
 import TestUtilities from '../../sections/api/test-utils/index.mdx'
@@ -19,7 +18,6 @@ export default ({ children }) => (
 <Helpers />
 <TestUtilities />
 <SupportedCSS />
-<Flow />
 <TypeScript />
 <OldAPIs />
 

pages/docs/faqs.mdx

@@ -11,18 +11,20 @@ import HTMLAttributeWarnings from '../../sections/faqs/html-attribute-warnings.m
 import BrowserSupport from '../../sections/faqs/browser-support.mdx'
 import MigrationV4 from '../../sections/faqs/migration-v4.mdx'
 import MigrationV5 from '../../sections/faqs/migration-v5.mdx'
+import MigrationV6 from '../../sections/faqs/migration-v6.mdx'
 import CRA from '../../sections/faqs/create-react-app.mdx'
 import NPMLink from '../../sections/faqs/npm-link.mdx'
 import FlickeringText from '../../sections/faqs/flickering-text.mdx'
 import DeclareComponentsInRenderMethod from '../../sections/faqs/declare-components-in-render-method.mdx'
 import MissingNativeImport from '../../sections/faqs/missing-native-import.mdx'
 
 export default ({ children }) => (
-<DocsLayout title="FAQs" description="Commonly asked questions about styled-components">
-{children}
-</DocsLayout>
+    <DocsLayout title="FAQs" description="Commonly asked questions about styled-components">
+        {children}
+    </DocsLayout>
 )
 
+<MigrationV6 />
 <MigrationV5 />
 <MigrationV4 />
 <Nesting />

pages/index.js

@@ -30,7 +30,7 @@ const SupportingTagline = styled.h2`
 `;
 
 const headerCode = `
-const Button = styled.a\`
+const Button = styled.a<{ $primary?: boolean; }>\`
   /* This renders the buttons above... Edit me! */
   display: inline-block;
   border-radius: 3px;

sections/advanced/components-as-selectors.mdx

@@ -63,7 +63,7 @@ This behaviour is only supported within the context of _Styled_ Components:
 attempting to mount `B` in the following example will fail because component
 `A` is an instance of React.Component not a Styled Component.
 
-```jsx
+```tsx
 class A extends React.Component {
   render() {
     return <div />
@@ -82,7 +82,7 @@ styled component is attempting to call the component as an interpolation functio
 However, wrapping `A` in a styled() factory makes it eligible for interpolation -- just
 make sure the wrapped component passes along `className`.
 
-```jsx
+```tsx
 class A extends React.Component {
   render() {
     return <div className={this.props.className} />

sections/advanced/existing-css.mdx

@@ -13,7 +13,7 @@ If you use the `styled(MyComponent)` notation and `MyComponent` does not
 render the passed-in `className` prop, then no styles will be applied.
 To avoid this issue, make sure your component attaches the passed-in className to a DOM node:
 
-```jsx
+```tsx
 class MyComponent extends React.Component {
   render() {
     // Attach the passed-in className to the DOM node
@@ -25,7 +25,7 @@ class MyComponent extends React.Component {
 If you have pre-existing styles with a class, you can combine the global class with the
 passed-in one:
 
-```jsx
+```tsx
 class MyComponent extends React.Component {
   render() {
     // Attach the passed-in className to the DOM node
@@ -40,7 +40,7 @@ If you apply a global class together with a styled component class, the result m
 what you're expecting. If a property is defined in both classes with the same specificity,
 the last one will win.
 
-```jsx
+```tsx
 // MyComponent.js
 const MyComponent = styled.div`background-color: green;`;
 
@@ -84,7 +84,7 @@ body.my-body button {
 Since the rule contains a classname and two tag names, it has higher specificity than the single
 classname selector generated by this styled component:
 
-```jsx
+```tsx
 styled.button`
   padding: 16px;
 `

sections/advanced/security.mdx

@@ -7,7 +7,7 @@ browser that an attacker can place in your application.
 This example shows how bad user input can even lead to API endpoints being called on a user's
 behalf.
 
-```jsx
+```tsx
 // Oh no! The user has given us a bad URL!
 const userInput = '/api/withdraw-funds'
 

sections/advanced/server-side-rendering.mdx

@@ -20,7 +20,7 @@ If possible, we definitely recommend using the babel plugin though because it is
 
 The basic API goes as follows:
 
-```jsx
+```tsx
 import { renderToString } from 'react-dom/server';
 import { ServerStyleSheet } from 'styled-components';
 
@@ -40,7 +40,7 @@ The `collectStyles` method wraps your element in a provider. Optionally you can
 the `StyleSheetManager` provider directly, instead of this method. Just make sure not to
 use it on the client-side.
 
-```jsx
+```tsx
 import { renderToString } from 'react-dom/server';
 import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
 
@@ -98,7 +98,7 @@ _On the server:_
 
 `ReactDOMServer.renderToNodeStream` emits a "readable" stream that styled-components wraps. As whole chunks of HTML are pushed onto the stream, if any corresponding styles are ready to be rendered, a style block is prepended to React's HTML and forwarded on to the client browser.
 
-```js
+```tsx
 import { renderToNodeStream } from 'react-dom/server';
 import styled, { ServerStyleSheet } from 'styled-components';
 
@@ -124,7 +124,7 @@ stream.on('end', () => res.end('</body></html>'));
 
 _On the client:_
 
-```js
+```tsx
 import { hydrate } from 'react-dom';
 
 hydrate();

sections/advanced/style-objects.mdx

@@ -4,23 +4,23 @@ styled-components optionally supports writing CSS as JavaScript objects instead
 
 ```react
 // Static object
-const Box = styled.div({
+const Box = styled.div<{ $background?: string; }>({
   background: '#BF4F74',
   height: '50px',
   width: '50px'
 });
 
 // Adapting based on props
 const PropsBox = styled.div(props => ({
-  background: props.background,
+  background: props.$background,
   height: '50px',
   width: '50px'
 }));
 
 render(
   <div>
     <Box />
-    <PropsBox background="blue" />
+    <PropsBox $background="blue" />
   </div>
 );
 ```

sections/advanced/tagged-template-literals.mdx

@@ -5,7 +5,7 @@ which is how we're able to create styled components.
 
 If you pass no interpolations, the first argument your function receives is an array with a string in it.
 
-```jsx
+```tsx
 // These are equivalent:
 fn`some string here`;
 fn(['some string here']);
@@ -14,7 +14,7 @@ fn(['some string here']);
 Once you pass interpolations, the array contains the passed string, split at the positions of the interpolations.
 The rest of the arguments will be the interpolations, in order.
 
-```jsx
+```tsx
 const aVar = 'good';
 
 // These are equivalent:
@@ -30,10 +30,10 @@ Speaking of which, during flattening, styled-components ignores interpolations t
 [short-circuit evaluation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#Short-circuit_evaluation)
 to conditionally add CSS rules.
 
-```jsx
-const Title = styled.h1`
-  /* Text centering won't break if props.upsidedown is falsy */
-  ${props => props.upsidedown && 'transform: rotate(180deg);'}
+```tsx
+const Title = styled.h1<{ $upsideDown?: boolean; }>`
+  /* Text centering won't break if props.$upsideDown is falsy */
+  ${props => props.$upsideDown && 'transform: rotate(180deg);'}
   text-align: center;
 `;
 ```

sections/advanced/theming.mdx

@@ -96,7 +96,7 @@ render(
 If you ever need to use the current theme outside styled components (e.g. inside big components), you can use
 the `withTheme` higher order component.
 
-```jsx
+```tsx
 import { withTheme } from 'styled-components'
 
 class MyComponent extends React.Component {
@@ -113,7 +113,7 @@ export default withTheme(MyComponent)
 
 You can also use `useContext` to access the current theme outside of styled components when working with React Hooks.
 
-```jsx
+```tsx
 import { useContext } from 'react'
 import { ThemeContext } from 'styled-components'
 
@@ -129,7 +129,7 @@ const MyComponent = () => {
 
 You can also use `useTheme` to access the current theme outside of styled components when working with React Hooks.
 
-```jsx
+```tsx
 import { useTheme } from 'styled-components'
 
 const MyComponent = () => {

sections/api/helpers/create-global-style.mdx

@@ -16,31 +16,31 @@ A helper function to generate a special `StyledComponent` that handles global st
 
 Returns a `StyledComponent` that does not accept children. Place it at the top of your React tree and the global styles will be injected when the component is "rendered".
 
-```jsx
+```tsx
 import { createGlobalStyle } from 'styled-components'
 
-const GlobalStyle = createGlobalStyle`
+const GlobalStyle = createGlobalStyle<{ $whiteColor?: boolean; }>`
   body {
-    color: ${props => (props.whiteColor ? 'white' : 'black')};
+    color: ${props => (props.$whiteColor ? 'white' : 'black')};
   }
 `
 
 // later in your app
 
 <React.Fragment>
-  <GlobalStyle whiteColor />
+  <GlobalStyle $whiteColor />
   <Navigation /> {/* example of other top-level stuff */}
 </React.Fragment>
 ```
 
 Since the `GlobalStyle` component is a `StyledComponent`, that means it also has access to theming from the [`<ThemeProvider>` component](/docs/api#themeprovider) if provided.
 
-```jsx
+```tsx
 import { createGlobalStyle, ThemeProvider } from 'styled-components'
 
-const GlobalStyle = createGlobalStyle`
+const GlobalStyle = createGlobalStyle<{ $whiteColor?: boolean; }>`
   body {
-    color: ${props => (props.whiteColor ? 'white' : 'black')};
+    color: ${props => (props.$whiteColor ? 'white' : 'black')};
     font-family: ${props => props.theme.fontFamily};
   }
 `
@@ -50,7 +50,7 @@ const GlobalStyle = createGlobalStyle`
 <ThemeProvider theme={{ fontFamily: 'Helvetica Neue' }}>
   <React.Fragment>
     <Navigation /> {/* example of other top-level stuff */}
-    <GlobalStyle whiteColor />
+    <GlobalStyle $whiteColor />
   </React.Fragment>
 </ThemeProvider>
 ```

sections/api/helpers/css.mdx

@@ -20,16 +20,21 @@ If you're interpolating a string you do not need to use this, only if you're int
 Returns an array of interpolations, which is a flattened data structure that you can pass as an interpolation
 itself.
 
-```jsx
+```tsx
 import styled, { css } from 'styled-components'
 
-const complexMixin = css`
-  color: ${props => (props.whiteColor ? 'white' : 'black')};
+interface ComponentProps {
+  $complex?: boolean;
+  $whiteColor?: boolean;
+}
+
+const complexMixin = css<ComponentProps>`
+  color: ${props => (props.$whiteColor ? 'white' : 'black')};
 `
 
-const StyledComp = styled.div`
+const StyledComp = styled.div<ComponentProps>`
   /* This is an example of a nested interpolation */
-  ${props => (props.complex ? complexMixin : 'color: blue;')};
+  ${props => (props.$complex ? complexMixin : 'color: blue;')};
 `
 ```
 

sections/api/helpers/is-styled-component.mdx

@@ -19,7 +19,7 @@ A utility to help identify styled components.
 
 Returns true if the passed function is a valid styled components-wrapped component class. It can be useful for determining if a component needs to be wrapped such that it can be used as a component selector:
 
-```jsx
+```tsx
 import React from 'react'
 import styled, { isStyledComponent } from 'styled-components'
 import MaybeStyledComponent from './somewhere-else'