chore: update mdx (styled-components#917)

* chore: update mdx

* chore: other upgrades

* chore: update test snaps

components/Label.js

@@ -12,7 +12,7 @@ export const LabelGroup = styled.div`
 
 const Label = styled.small`
   display: inline-block;
-  background: ${p => (p.isVersion ? 'royalblue' : blmGrey)};
+  background: ${p => (p.$isVersion ? 'royalblue' : blmGrey)};
   color: white;
   font-size: 0.75rem;
   font-family: ${headerFont};

next.config.js → next.config.mjs

@@ -1,10 +1,14 @@
-const withMDX = require('@next/mdx');
-const withSourceMaps = require('@zeit/next-source-maps');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+import withMDX from '@next/mdx';
+import withSourceMaps from '@zeit/next-source-maps';
+import remarkPlugin from 'remark-gfm'
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 
-module.exports = withMDX({
+export default withMDX({
   // Use .md extension
   extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [remarkPlugin],
+  },
 })(
   withSourceMaps({
     compiler: {

package.json

@@ -16,9 +16,9 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@mdx-js/loader": "^1.6.22",
-    "@mdx-js/mdx": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/loader": "^2.3.0",
+    "@mdx-js/mdx": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^12.3.4",
     "@styled-icons/boxicons-regular": "^10.47.0",
     "@styled-icons/fa-brands": "^10.47.0",
@@ -37,17 +37,17 @@
     "react-is": "^17.0.2",
     "react-live-runner": "^1.0.5",
     "react-transition-group": "^4.4.5",
-    "styled-components": "beta",
+    "styled-components": "^6.0.0-rc.2",
     "styled-theming": "^2.2.0",
-    "stylis": "^4",
-    "stylis-plugin-rtl": "^2"
+    "stylis": "^4.2.0",
+    "stylis-plugin-rtl": "^2.1.1"
   },
   "devDependencies": {
-    "@types/enzyme": "^3.10.12",
-    "@types/jest": "^29.5.0",
-    "@types/mdx": "^2.0.4",
-    "@types/node": "^18.15.11",
-    "@types/react": "^17.0.56",
+    "@types/enzyme": "^3.10.13",
+    "@types/jest": "^29.5.1",
+    "@types/mdx": "^2.0.5",
+    "@types/node": "^18.16.14",
+    "@types/react": "^17.0.59",
     "@types/webpack-bundle-analyzer": "^4.6.0",
     "@types/zeit__next-source-maps": "^0.0.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
@@ -57,12 +57,13 @@
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-styled-components": "^7.1.1",
-    "lint-staged": "^13.2.0",
-    "prettier": "^2.8.7",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8",
     "react-test-renderer": "^17.0.2",
+    "remark-gfm": "^3.0.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.1.0",
-    "typescript": "^5.0.3",
+    "typescript": "^5.0.4",
     "webpack-bundle-analyzer": "^4.8.0"
   },
   "packageManager": "[email protected]"

pages/docs/advanced.md → pages/docs/advanced.mdx

@@ -12,14 +12,14 @@ export default function({ children }) {
   )
 }
 
-import Theming from '../../sections/advanced/theming.md'
-import Refs from '../../sections/advanced/refs.md'
-import Security from '../../sections/advanced/security.md'
-import ExistingCSS from '../../sections/advanced/existing-css.md'
-import TaggedTemplateLiterals from '../../sections/advanced/tagged-template-literals.md'
-import ServerSideRendering from '../../sections/advanced/server-side-rendering.md'
-import ComponentsAsSelectors from '../../sections/advanced/components-as-selectors.md'
-import StyleObjects from '../../sections/advanced/style-objects.md'
+import Theming from '../../sections/advanced/theming.mdx'
+import Refs from '../../sections/advanced/refs.mdx'
+import Security from '../../sections/advanced/security.mdx'
+import ExistingCSS from '../../sections/advanced/existing-css.mdx'
+import TaggedTemplateLiterals from '../../sections/advanced/tagged-template-literals.mdx'
+import ServerSideRendering from '../../sections/advanced/server-side-rendering.mdx'
+import ComponentsAsSelectors from '../../sections/advanced/components-as-selectors.mdx'
+import StyleObjects from '../../sections/advanced/style-objects.mdx'
 
 <Theming />
 <Refs />

pages/docs/api.md → pages/docs/api.mdx

@@ -1,13 +1,13 @@
 import DocsLayout from '../../components/DocsLayout'
 import NextPage from '../../components/NextPage'
 
-import Primary from '../../sections/api/primary/index.md'
-import Helpers from '../../sections/api/helpers/index.md'
-import SupportedCSS from '../../sections/api/supported-css.md'
-import Flow from '../../sections/api/flow.md'
-import TypeScript from '../../sections/api/typescript.md'
-import OldAPIs from '../../sections/api/old/index.md'
-import TestUtilities from '../../sections/api/test-utils/index.md'
+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'
 
 export default ({ children }) => (
   <DocsLayout title="API Reference" description="API Reference of styled-components">

pages/docs/basics.md → pages/docs/basics.mdx

@@ -1,17 +1,17 @@
 import DocsLayout from '../../components/DocsLayout'
 import NextPage from '../../components/NextPage'
 
-import Motivation from '../../sections/basics/motivation.md'
-import GettingStarted from '../../sections/basics/getting-started.md'
-import ComingFromCSS from '../../sections/basics/coming-from-css.md'
-import Installation from '../../sections/basics/installation.md'
-import PassedProps from '../../sections/basics/passed-props.md'
-import AdaptingBasedOnProps from '../../sections/basics/adapting-based-on-props.md'
-import StylingAnyComponents from '../../sections/basics/styling-any-component.md'
-import ExtendingStyles from '../../sections/basics/extending-styles.md'
-import AttachingAdditionalProps from '../../sections/basics/attaching-additional-props.md'
-import Animations from '../../sections/basics/animations.md'
-import ReactNative from '../../sections/basics/react-native.md'
+import Motivation from '../../sections/basics/motivation.mdx'
+import GettingStarted from '../../sections/basics/getting-started.mdx'
+import ComingFromCSS from '../../sections/basics/coming-from-css.mdx'
+import Installation from '../../sections/basics/installation.mdx'
+import PassedProps from '../../sections/basics/passed-props.mdx'
+import AdaptingBasedOnProps from '../../sections/basics/adapting-based-on-props.mdx'
+import StylingAnyComponents from '../../sections/basics/styling-any-component.mdx'
+import ExtendingStyles from '../../sections/basics/extending-styles.mdx'
+import AttachingAdditionalProps from '../../sections/basics/attaching-additional-props.mdx'
+import Animations from '../../sections/basics/animations.mdx'
+import ReactNative from '../../sections/basics/react-native.mdx'
 
 export default ({ children }) => (
   <DocsLayout title="Basics" description="Get Started with styled-components basics.">

pages/docs/faqs.md → pages/docs/faqs.mdx

@@ -1,21 +1,21 @@
 import DocsLayout from '../../components/DocsLayout'
-import Nesting from '../../sections/faqs/nesting.md'
-import CSSFrameworks from '../../sections/faqs/support-for-css-frameworks.md'
-import OverrideStyles from '../../sections/faqs/override-styles-with-higher-specificity.md'
-import OverrideInlineStyles from '../../sections/faqs/override-inline-styles.md'
-import TwoDomClasses from '../../sections/faqs/dom-two-classes.md'
-import WhenToUseAttrs from '../../sections/faqs/when-to-use-attrs.md'
-import LibraryAuthors from '../../sections/faqs/library-authors.md'
-import DuplicatedStyledComponents from '../../sections/faqs/duplicated-styled-components.md'
-import HTMLAttributeWarnings from '../../sections/faqs/html-attribute-warnings.md'
-import BrowserSupport from '../../sections/faqs/browser-support.md'
-import MigrationV4 from '../../sections/faqs/migration-v4.md'
-import MigrationV5 from '../../sections/faqs/migration-v5.md'
-import CRA from '../../sections/faqs/create-react-app.md'
-import NPMLink from '../../sections/faqs/npm-link.md'
-import FlickeringText from '../../sections/faqs/flickering-text.md'
-import DeclareComponentsInRenderMethod from '../../sections/faqs/declare-components-in-render-method.md'
-import MissingNativeImport from '../../sections/faqs/missing-native-import.md'
+import Nesting from '../../sections/faqs/nesting.mdx'
+import CSSFrameworks from '../../sections/faqs/support-for-css-frameworks.mdx'
+import OverrideStyles from '../../sections/faqs/override-styles-with-higher-specificity.mdx'
+import OverrideInlineStyles from '../../sections/faqs/override-inline-styles.mdx'
+import TwoDomClasses from '../../sections/faqs/dom-two-classes.mdx'
+import WhenToUseAttrs from '../../sections/faqs/when-to-use-attrs.mdx'
+import LibraryAuthors from '../../sections/faqs/library-authors.mdx'
+import DuplicatedStyledComponents from '../../sections/faqs/duplicated-styled-components.mdx'
+import HTMLAttributeWarnings from '../../sections/faqs/html-attribute-warnings.mdx'
+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 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">

pages/docs/tooling.md → pages/docs/tooling.mdx

@@ -1,13 +1,13 @@
 import DocsLayout from '../../components/DocsLayout'
 import NextPage from '../../components/NextPage'
 
-import BabelPlugin from '../../sections/tooling/babel-plugin.md'
-import BabelMacro from '../../sections/tooling/babel-macro.md'
-import TypeScriptPlugin from '../../sections/tooling/typescript-plugin.md'
-import Jest from '../../sections/tooling/jest.md'
-import Stylelint from '../../sections/tooling/stylelint.md'
-import StyledTheming from '../../sections/tooling/styled-theming.md'
-import SyntaxHighlighting from '../../sections/tooling/syntax-highlighting.md'
+import BabelPlugin from '../../sections/tooling/babel-plugin.mdx'
+import BabelMacro from '../../sections/tooling/babel-macro.mdx'
+import TypeScriptPlugin from '../../sections/tooling/typescript-plugin.mdx'
+import Jest from '../../sections/tooling/jest.mdx'
+import Stylelint from '../../sections/tooling/stylelint.mdx'
+import StyledTheming from '../../sections/tooling/styled-theming.mdx'
+import SyntaxHighlighting from '../../sections/tooling/syntax-highlighting.mdx'
 
 export default ({ children }) => (
   <DocsLayout

pages/index.js

@@ -9,7 +9,7 @@ import { editorMixin, StyledError } from '../components/LiveEdit';
 import Link from '../components/Link';
 import { Content } from '../components/Layout';
 import SeoHead from '../components/SeoHead';
-import HomepageGettingStarted from '../sections/homepage/getting-started.md';
+import HomepageGettingStarted from '../sections/homepage/getting-started.mdx';
 import WithIsScrolled from '../components/WithIsScrolled';
 import Footer from '../components/Footer';
 import Nav from '../components/Nav';

sections/api/helpers/index.mdx

@@ -0,0 +1,26 @@
+import CSS from './css.mdx'
+import Keyframes from './keyframes.mdx'
+import IsStyledComponent from './is-styled-component.mdx'
+import WithTheme from './with-theme.mdx'
+import CreateGlobalStyle from './create-global-style.mdx'
+import ThemeConsumer from './theme-consumer.mdx'
+import StyleSheetManager from './style-sheet-manager.mdx'
+import UseTheme from './use-theme.mdx'
+
+## Helpers
+
+<CreateGlobalStyle />
+
+<CSS />
+
+<Keyframes />
+
+<StyleSheetManager />
+
+<IsStyledComponent />
+
+<WithTheme />
+
+<UseTheme />
+
+<ThemeConsumer />

sections/api/old/extend.md → sections/api/old/extend.mdx

@@ -3,7 +3,7 @@ import Table, { Row, Column } from 'components/Table'
 
 ### _[Deprecated]_ `.extend`
 
-> The `.extend` API was removed in styled-components v4. Use `styled(StyledComponent)` instead. For more information, see: <https://github.com/styled-components/styled-components/issues/1546>
+> The `.extend` API was removed in styled-components v4. Use `styled(StyledComponent)` instead. For more information, see: https://github.com/styled-components/styled-components/issues/1546
 
 This is a method that creates a new `StyledComponent` and extends its rules.
 

sections/api/old/index.mdx

@@ -0,0 +1,11 @@
+import Extend from './extend.mdx'
+import InjectGlobal from './inject-global.mdx'
+import InnerRef from './inner-ref.mdx'
+
+## Previous APIs
+
+<Extend />
+
+<InjectGlobal />
+
+<InnerRef />

sections/api/primary/css-prop.md → sections/api/primary/css-prop.mdx

@@ -61,4 +61,4 @@ To prevent TypeScript errors on the `css` prop on arbitrary elements, install `@
 ```ts
 import {} from 'styled-components/cssprop'
 ```
-See <https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-446011384> for more information.
+See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-446011384 for more information.

sections/api/primary/index.mdx

@@ -0,0 +1,17 @@
+import Styled from './styled.mdx'
+import TaggedTemplateLiteral from './tagged-template-literal.mdx'
+import StyledComponent from './styled-component.mdx'
+import ThemeProvider from './theme-provider.mdx'
+import CssProp from './css-prop.mdx'
+
+## Primary
+
+<Styled />
+
+<TaggedTemplateLiteral />
+
+<StyledComponent />
+
+<ThemeProvider />
+
+<CssProp />

sections/api/primary/styled-component.md → sections/api/primary/styled-component.mdx

@@ -49,13 +49,13 @@ Returns another `StyledComponent`.
 
 const Input = styled.input.attrs(props => ({
   type: 'text',
-  size: props.small ? 5 : undefined,
-}))`
+  size: props.$small ? 5 : undefined,
+}))<{ $padding?: string; $small?: boolean; }>`
   border-radius: 3px;
   border: 1px solid #BF4F74;
   display: block;
   margin: 0 0 1em;
-  padding: ${props => props.padding};
+  padding: ${props => props.$padding};
 
   ::placeholder {
     color: #BF4F74;
@@ -64,9 +64,9 @@ const Input = styled.input.attrs(props => ({
 
 render(
   <>
-    <Input small placeholder="Small" />
+    <Input $small placeholder="Small" />
     <Input placeholder="Normal" />
-    <Input padding="2em" placeholder="Padded" />
+    <Input $padding="2em" placeholder="Padded" />
   </>
 )
 ```