first commit

test/development/basic/styled-components-disabled/.gitignore

@@ -0,0 +1 @@
+node_modules/

test/development/basic/styled-components-disabled/next.config.js

@@ -0,0 +1 @@
+module.exports = {}

test/development/basic/styled-components-disabled/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "styled-components-disabled",
+  "private": true,
+  "dependencies": {
+    "styled-components": "6.1.16"
+  }
+}

test/development/basic/styled-components-disabled/pages/_app.js

@@ -0,0 +1,26 @@
+import { createGlobalStyle, ThemeProvider } from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+`
+
+const theme = {
+  colors: {
+    primary: '#0070f3',
+  },
+}
+
+export default function App({ Component, pageProps }) {
+  return (
+    <>
+      <GlobalStyle />
+      <ThemeProvider theme={theme}>
+        <Component {...pageProps} />
+      </ThemeProvider>
+    </>
+  )
+}

test/development/basic/styled-components-disabled/pages/_document.js

@@ -0,0 +1,30 @@
+import Document from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        })
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      }
+    } finally {
+      sheet.seal()
+    }
+  }
+}

test/development/basic/styled-components-disabled/pages/index.js

@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components'
+const Button = styled.a`
+  /* This renders the buttons above... Edit me! */
+  display: inline-block;
+  border-radius: 3px;
+  padding: 0.5rem 0;
+  margin: 0.5rem 1rem;
+  width: 11rem;
+  background: transparent;
+  color: white;
+  border: 2px solid white;
+
+  /* The GitHub button is a primary button
+   * edit this to target it specifically! */
+  ${(props) =>
+    props.$primary &&
+    css`
+      background: white;
+      color: black;
+    `}
+`
+
+export default function Home() {
+  return (
+    <div>
+      <Button
+        href="https://github.com/styled-components/styled-components"
+        target="_blank"
+        rel="noopener"
+        $primary
+      >
+        GitHub
+      </Button>
+
+      <Button href="/docs">Documentation</Button>
+    </div>
+  )
+}