From c623f3d0be7b300572583cdac7ed3ab3e2bb0668 Mon Sep 17 00:00:00 2001 From: Evan Jacobs <570070+probablyup@users.noreply.github.com> Date: Wed, 24 May 2023 08:06:29 -0400 Subject: [PATCH] chore: update mdx (#917) * chore: update mdx * chore: other upgrades * chore: update test snaps --- components/Label.js | 2 +- next.config.js => next.config.mjs | 12 +- package.json | 29 +- pages/docs/{advanced.md => advanced.mdx} | 16 +- pages/docs/{api.md => api.mdx} | 14 +- pages/docs/{basics.md => basics.mdx} | 22 +- pages/docs/{faqs.md => faqs.mdx} | 34 +- pages/docs/{tooling.md => tooling.mdx} | 14 +- pages/index.js | 2 +- ...lectors.md => components-as-selectors.mdx} | 0 .../{existing-css.md => existing-css.mdx} | 0 sections/advanced/{refs.md => refs.mdx} | 0 .../advanced/{security.md => security.mdx} | 0 ...rendering.md => server-side-rendering.mdx} | 0 .../{style-objects.md => style-objects.mdx} | 0 ...terals.md => tagged-template-literals.mdx} | 0 sections/advanced/{theming.md => theming.mdx} | 0 sections/api/{flow.md => flow.mdx} | 0 ...lobal-style.md => create-global-style.mdx} | 0 sections/api/helpers/{css.md => css.mdx} | 0 sections/api/helpers/index.md | 26 - sections/api/helpers/index.mdx | 26 + ...d-component.md => is-styled-component.mdx} | 0 .../helpers/{keyframes.md => keyframes.mdx} | 0 ...eet-manager.md => style-sheet-manager.mdx} | 0 .../{theme-consumer.md => theme-consumer.mdx} | 0 .../helpers/{use-theme.md => use-theme.mdx} | 0 .../helpers/{with-theme.md => with-theme.mdx} | 0 sections/api/old/{extend.md => extend.mdx} | 2 +- sections/api/old/index.md | 11 - sections/api/old/index.mdx | 11 + .../{inject-global.md => inject-global.mdx} | 0 .../api/old/{inner-ref.md => inner-ref.mdx} | 0 .../api/primary/{css-prop.md => css-prop.mdx} | 2 +- sections/api/primary/index.md | 17 - sections/api/primary/index.mdx | 17 + ...yled-component.md => styled-component.mdx} | 10 +- .../api/primary/{styled.md => styled.mdx} | 0 ...literal.md => tagged-template-literal.mdx} | 0 .../{theme-provider.md => theme-provider.mdx} | 0 .../{supported-css.md => supported-css.mdx} | 0 .../{enzyme-find.md => enzyme-find.mdx} | 0 .../test-utils/{find-all.md => find-all.mdx} | 0 sections/api/test-utils/{find.md => find.mdx} | 0 sections/api/test-utils/index.md | 11 - sections/api/test-utils/index.mdx | 11 + .../api/{typescript.md => typescript.mdx} | 0 ...n-props.md => adapting-based-on-props.mdx} | 0 .../basics/{animations.md => animations.mdx} | 0 ...rops.md => attaching-additional-props.mdx} | 0 ...coming-from-css.md => coming-from-css.mdx} | 0 ...tending-styles.md => extending-styles.mdx} | 0 ...getting-started.md => getting-started.mdx} | 0 .../{installation.md => installation.mdx} | 0 .../basics/{motivation.md => motivation.mdx} | 0 .../{passed-props.md => passed-props.mdx} | 0 .../{react-native.md => react-native.mdx} | 0 ...component.md => styling-any-component.mdx} | 0 ...browser-support.md => browser-support.mdx} | 0 ...eate-react-app.md => create-react-app.mdx} | 0 ...> declare-components-in-render-method.mdx} | 0 ...dom-two-classes.md => dom-two-classes.mdx} | 0 ...ts.md => duplicated-styled-components.mdx} | 0 ...flickering-text.md => flickering-text.mdx} | 0 ...arnings.md => html-attribute-warnings.mdx} | 0 ...library-authors.md => library-authors.mdx} | 0 .../{migration-v4.md => migration-v4.mdx} | 0 .../{migration-v5.md => migration-v5.mdx} | 0 ...ve-import.md => missing-native-import.mdx} | 0 sections/faqs/{nesting.md => nesting.mdx} | 0 sections/faqs/{npm-link.md => npm-link.mdx} | 0 ...e-styles.md => override-inline-styles.mdx} | 0 ...erride-styles-with-higher-specificity.mdx} | 0 ...rse-selectors.md => reverse-selectors.mdx} | 0 ...orks.md => support-for-css-frameworks.mdx} | 0 ...-to-use-attrs.md => when-to-use-attrs.mdx} | 0 ...getting-started.md => getting-started.mdx} | 0 .../{babel-macro.md => babel-macro.mdx} | 0 .../{babel-plugin.md => babel-plugin.mdx} | 0 sections/tooling/{jest.md => jest.mdx} | 0 .../{styled-theming.md => styled-theming.mdx} | 0 .../tooling/{stylelint.md => stylelint.mdx} | 2 - ...ighlighting.md => syntax-highlighting.mdx} | 0 ...script-plugin.md => typescript-plugin.mdx} | 0 .../__snapshots__/Note.spec.js.snap | 14 +- utils/mdx-components.js | 14 +- yarn.lock | 2618 +++++++++-------- 87 files changed, 1482 insertions(+), 1455 deletions(-) rename next.config.js => next.config.mjs (73%) rename pages/docs/{advanced.md => advanced.mdx} (78%) rename pages/docs/{api.md => api.mdx} (57%) rename pages/docs/{basics.md => basics.mdx} (69%) rename pages/docs/{faqs.md => faqs.mdx} (72%) rename pages/docs/{tooling.md => tooling.mdx} (70%) rename sections/advanced/{components-as-selectors.md => components-as-selectors.mdx} (100%) rename sections/advanced/{existing-css.md => existing-css.mdx} (100%) rename sections/advanced/{refs.md => refs.mdx} (100%) rename sections/advanced/{security.md => security.mdx} (100%) rename sections/advanced/{server-side-rendering.md => server-side-rendering.mdx} (100%) rename sections/advanced/{style-objects.md => style-objects.mdx} (100%) rename sections/advanced/{tagged-template-literals.md => tagged-template-literals.mdx} (100%) rename sections/advanced/{theming.md => theming.mdx} (100%) rename sections/api/{flow.md => flow.mdx} (100%) rename sections/api/helpers/{create-global-style.md => create-global-style.mdx} (100%) rename sections/api/helpers/{css.md => css.mdx} (100%) delete mode 100644 sections/api/helpers/index.md create mode 100644 sections/api/helpers/index.mdx rename sections/api/helpers/{is-styled-component.md => is-styled-component.mdx} (100%) rename sections/api/helpers/{keyframes.md => keyframes.mdx} (100%) rename sections/api/helpers/{style-sheet-manager.md => style-sheet-manager.mdx} (100%) rename sections/api/helpers/{theme-consumer.md => theme-consumer.mdx} (100%) rename sections/api/helpers/{use-theme.md => use-theme.mdx} (100%) rename sections/api/helpers/{with-theme.md => with-theme.mdx} (100%) rename sections/api/old/{extend.md => extend.mdx} (85%) delete mode 100644 sections/api/old/index.md create mode 100644 sections/api/old/index.mdx rename sections/api/old/{inject-global.md => inject-global.mdx} (100%) rename sections/api/old/{inner-ref.md => inner-ref.mdx} (100%) rename sections/api/primary/{css-prop.md => css-prop.mdx} (94%) delete mode 100644 sections/api/primary/index.md create mode 100644 sections/api/primary/index.mdx rename sections/api/primary/{styled-component.md => styled-component.mdx} (96%) rename sections/api/primary/{styled.md => styled.mdx} (100%) rename sections/api/primary/{tagged-template-literal.md => tagged-template-literal.mdx} (100%) rename sections/api/primary/{theme-provider.md => theme-provider.mdx} (100%) rename sections/api/{supported-css.md => supported-css.mdx} (100%) rename sections/api/test-utils/{enzyme-find.md => enzyme-find.mdx} (100%) rename sections/api/test-utils/{find-all.md => find-all.mdx} (100%) rename sections/api/test-utils/{find.md => find.mdx} (100%) delete mode 100644 sections/api/test-utils/index.md create mode 100644 sections/api/test-utils/index.mdx rename sections/api/{typescript.md => typescript.mdx} (100%) rename sections/basics/{adapting-based-on-props.md => adapting-based-on-props.mdx} (100%) rename sections/basics/{animations.md => animations.mdx} (100%) rename sections/basics/{attaching-additional-props.md => attaching-additional-props.mdx} (100%) rename sections/basics/{coming-from-css.md => coming-from-css.mdx} (100%) rename sections/basics/{extending-styles.md => extending-styles.mdx} (100%) rename sections/basics/{getting-started.md => getting-started.mdx} (100%) rename sections/basics/{installation.md => installation.mdx} (100%) rename sections/basics/{motivation.md => motivation.mdx} (100%) rename sections/basics/{passed-props.md => passed-props.mdx} (100%) rename sections/basics/{react-native.md => react-native.mdx} (100%) rename sections/basics/{styling-any-component.md => styling-any-component.mdx} (100%) rename sections/faqs/{browser-support.md => browser-support.mdx} (100%) rename sections/faqs/{create-react-app.md => create-react-app.mdx} (100%) rename sections/faqs/{declare-components-in-render-method.md => declare-components-in-render-method.mdx} (100%) rename sections/faqs/{dom-two-classes.md => dom-two-classes.mdx} (100%) rename sections/faqs/{duplicated-styled-components.md => duplicated-styled-components.mdx} (100%) rename sections/faqs/{flickering-text.md => flickering-text.mdx} (100%) rename sections/faqs/{html-attribute-warnings.md => html-attribute-warnings.mdx} (100%) rename sections/faqs/{library-authors.md => library-authors.mdx} (100%) rename sections/faqs/{migration-v4.md => migration-v4.mdx} (100%) rename sections/faqs/{migration-v5.md => migration-v5.mdx} (100%) rename sections/faqs/{missing-native-import.md => missing-native-import.mdx} (100%) rename sections/faqs/{nesting.md => nesting.mdx} (100%) rename sections/faqs/{npm-link.md => npm-link.mdx} (100%) rename sections/faqs/{override-inline-styles.md => override-inline-styles.mdx} (100%) rename sections/faqs/{override-styles-with-higher-specificity.md => override-styles-with-higher-specificity.mdx} (100%) rename sections/faqs/{reverse-selectors.md => reverse-selectors.mdx} (100%) rename sections/faqs/{support-for-css-frameworks.md => support-for-css-frameworks.mdx} (100%) rename sections/faqs/{when-to-use-attrs.md => when-to-use-attrs.mdx} (100%) rename sections/homepage/{getting-started.md => getting-started.mdx} (100%) rename sections/tooling/{babel-macro.md => babel-macro.mdx} (100%) rename sections/tooling/{babel-plugin.md => babel-plugin.mdx} (100%) rename sections/tooling/{jest.md => jest.mdx} (100%) rename sections/tooling/{styled-theming.md => styled-theming.mdx} (100%) rename sections/tooling/{stylelint.md => stylelint.mdx} (99%) rename sections/tooling/{syntax-highlighting.md => syntax-highlighting.mdx} (100%) rename sections/tooling/{typescript-plugin.md => typescript-plugin.mdx} (100%) diff --git a/components/Label.js b/components/Label.js index 0473af478..ab34c5f66 100644 --- a/components/Label.js +++ b/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}; diff --git a/next.config.js b/next.config.mjs similarity index 73% rename from next.config.js rename to next.config.mjs index a9f292310..359c6f2e5 100644 --- a/next.config.js +++ b/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: { diff --git a/package.json b/package.json index 51fc7ab0d..d0aa2bcf4 100644 --- a/package.json +++ b/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": "yarn@3.5.0" diff --git a/pages/docs/advanced.md b/pages/docs/advanced.mdx similarity index 78% rename from pages/docs/advanced.md rename to pages/docs/advanced.mdx index 11b63c83b..587819e1d 100644 --- a/pages/docs/advanced.md +++ b/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' diff --git a/pages/docs/api.md b/pages/docs/api.mdx similarity index 57% rename from pages/docs/api.md rename to pages/docs/api.mdx index 07267fa65..a9b90e7f7 100644 --- a/pages/docs/api.md +++ b/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 }) => ( diff --git a/pages/docs/basics.md b/pages/docs/basics.mdx similarity index 69% rename from pages/docs/basics.md rename to pages/docs/basics.mdx index 3d0043729..2cae3efbf 100644 --- a/pages/docs/basics.md +++ b/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 }) => ( diff --git a/pages/docs/faqs.md b/pages/docs/faqs.mdx similarity index 72% rename from pages/docs/faqs.md rename to pages/docs/faqs.mdx index 3f03ce2aa..24af24bad 100644 --- a/pages/docs/faqs.md +++ b/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 }) => ( diff --git a/pages/docs/tooling.md b/pages/docs/tooling.mdx similarity index 70% rename from pages/docs/tooling.md rename to pages/docs/tooling.mdx index 2a26c3485..4eb1bab43 100644 --- a/pages/docs/tooling.md +++ b/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 }) => ( - - - - - - - - - - - - - - diff --git a/sections/api/helpers/index.mdx b/sections/api/helpers/index.mdx new file mode 100644 index 000000000..19b830a94 --- /dev/null +++ b/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 + + + + + + + + + + + + + + + + diff --git a/sections/api/helpers/is-styled-component.md b/sections/api/helpers/is-styled-component.mdx similarity index 100% rename from sections/api/helpers/is-styled-component.md rename to sections/api/helpers/is-styled-component.mdx diff --git a/sections/api/helpers/keyframes.md b/sections/api/helpers/keyframes.mdx similarity index 100% rename from sections/api/helpers/keyframes.md rename to sections/api/helpers/keyframes.mdx diff --git a/sections/api/helpers/style-sheet-manager.md b/sections/api/helpers/style-sheet-manager.mdx similarity index 100% rename from sections/api/helpers/style-sheet-manager.md rename to sections/api/helpers/style-sheet-manager.mdx diff --git a/sections/api/helpers/theme-consumer.md b/sections/api/helpers/theme-consumer.mdx similarity index 100% rename from sections/api/helpers/theme-consumer.md rename to sections/api/helpers/theme-consumer.mdx diff --git a/sections/api/helpers/use-theme.md b/sections/api/helpers/use-theme.mdx similarity index 100% rename from sections/api/helpers/use-theme.md rename to sections/api/helpers/use-theme.mdx diff --git a/sections/api/helpers/with-theme.md b/sections/api/helpers/with-theme.mdx similarity index 100% rename from sections/api/helpers/with-theme.md rename to sections/api/helpers/with-theme.mdx diff --git a/sections/api/old/extend.md b/sections/api/old/extend.mdx similarity index 85% rename from sections/api/old/extend.md rename to sections/api/old/extend.mdx index 1a71b78b6..afe350b51 100644 --- a/sections/api/old/extend.md +++ b/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: +> 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. diff --git a/sections/api/old/index.md b/sections/api/old/index.md deleted file mode 100644 index 610f31f95..000000000 --- a/sections/api/old/index.md +++ /dev/null @@ -1,11 +0,0 @@ -import Extend from './extend.md' -import InjectGlobal from './inject-global.md' -import InnerRef from './inner-ref.md' - -## Previous APIs - - - - - - diff --git a/sections/api/old/index.mdx b/sections/api/old/index.mdx new file mode 100644 index 000000000..842e67328 --- /dev/null +++ b/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 + + + + + + diff --git a/sections/api/old/inject-global.md b/sections/api/old/inject-global.mdx similarity index 100% rename from sections/api/old/inject-global.md rename to sections/api/old/inject-global.mdx diff --git a/sections/api/old/inner-ref.md b/sections/api/old/inner-ref.mdx similarity index 100% rename from sections/api/old/inner-ref.md rename to sections/api/old/inner-ref.mdx diff --git a/sections/api/primary/css-prop.md b/sections/api/primary/css-prop.mdx similarity index 94% rename from sections/api/primary/css-prop.md rename to sections/api/primary/css-prop.mdx index 75b2662a5..a2c7ea29b 100644 --- a/sections/api/primary/css-prop.md +++ b/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 for more information. +See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-446011384 for more information. diff --git a/sections/api/primary/index.md b/sections/api/primary/index.md deleted file mode 100644 index 8dfefb208..000000000 --- a/sections/api/primary/index.md +++ /dev/null @@ -1,17 +0,0 @@ -import Styled from './styled.md' -import TaggedTemplateLiteral from './tagged-template-literal.md' -import StyledComponent from './styled-component.md' -import ThemeProvider from './theme-provider.md' -import CssProp from './css-prop.md' - -## Primary - - - - - - - - - - diff --git a/sections/api/primary/index.mdx b/sections/api/primary/index.mdx new file mode 100644 index 000000000..13196a407 --- /dev/null +++ b/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 + + + + + + + + + + diff --git a/sections/api/primary/styled-component.md b/sections/api/primary/styled-component.mdx similarity index 96% rename from sections/api/primary/styled-component.md rename to sections/api/primary/styled-component.mdx index 0a0baa1e6..6592b00ed 100644 --- a/sections/api/primary/styled-component.md +++ b/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( <> - + - + ) ``` diff --git a/sections/api/primary/styled.md b/sections/api/primary/styled.mdx similarity index 100% rename from sections/api/primary/styled.md rename to sections/api/primary/styled.mdx diff --git a/sections/api/primary/tagged-template-literal.md b/sections/api/primary/tagged-template-literal.mdx similarity index 100% rename from sections/api/primary/tagged-template-literal.md rename to sections/api/primary/tagged-template-literal.mdx diff --git a/sections/api/primary/theme-provider.md b/sections/api/primary/theme-provider.mdx similarity index 100% rename from sections/api/primary/theme-provider.md rename to sections/api/primary/theme-provider.mdx diff --git a/sections/api/supported-css.md b/sections/api/supported-css.mdx similarity index 100% rename from sections/api/supported-css.md rename to sections/api/supported-css.mdx diff --git a/sections/api/test-utils/enzyme-find.md b/sections/api/test-utils/enzyme-find.mdx similarity index 100% rename from sections/api/test-utils/enzyme-find.md rename to sections/api/test-utils/enzyme-find.mdx diff --git a/sections/api/test-utils/find-all.md b/sections/api/test-utils/find-all.mdx similarity index 100% rename from sections/api/test-utils/find-all.md rename to sections/api/test-utils/find-all.mdx diff --git a/sections/api/test-utils/find.md b/sections/api/test-utils/find.mdx similarity index 100% rename from sections/api/test-utils/find.md rename to sections/api/test-utils/find.mdx diff --git a/sections/api/test-utils/index.md b/sections/api/test-utils/index.md deleted file mode 100644 index 7bef8e14b..000000000 --- a/sections/api/test-utils/index.md +++ /dev/null @@ -1,11 +0,0 @@ -import Find from './find.md' -import FindAll from './find-all.md' -import EnzymeFind from './enzyme-find.md' - -## Test Utilities - - - - - - diff --git a/sections/api/test-utils/index.mdx b/sections/api/test-utils/index.mdx new file mode 100644 index 000000000..3a9a3b1ae --- /dev/null +++ b/sections/api/test-utils/index.mdx @@ -0,0 +1,11 @@ +import Find from './find.mdx' +import FindAll from './find-all.mdx' +import EnzymeFind from './enzyme-find.mdx' + +## Test Utilities + + + + + + diff --git a/sections/api/typescript.md b/sections/api/typescript.mdx similarity index 100% rename from sections/api/typescript.md rename to sections/api/typescript.mdx diff --git a/sections/basics/adapting-based-on-props.md b/sections/basics/adapting-based-on-props.mdx similarity index 100% rename from sections/basics/adapting-based-on-props.md rename to sections/basics/adapting-based-on-props.mdx diff --git a/sections/basics/animations.md b/sections/basics/animations.mdx similarity index 100% rename from sections/basics/animations.md rename to sections/basics/animations.mdx diff --git a/sections/basics/attaching-additional-props.md b/sections/basics/attaching-additional-props.mdx similarity index 100% rename from sections/basics/attaching-additional-props.md rename to sections/basics/attaching-additional-props.mdx diff --git a/sections/basics/coming-from-css.md b/sections/basics/coming-from-css.mdx similarity index 100% rename from sections/basics/coming-from-css.md rename to sections/basics/coming-from-css.mdx diff --git a/sections/basics/extending-styles.md b/sections/basics/extending-styles.mdx similarity index 100% rename from sections/basics/extending-styles.md rename to sections/basics/extending-styles.mdx diff --git a/sections/basics/getting-started.md b/sections/basics/getting-started.mdx similarity index 100% rename from sections/basics/getting-started.md rename to sections/basics/getting-started.mdx diff --git a/sections/basics/installation.md b/sections/basics/installation.mdx similarity index 100% rename from sections/basics/installation.md rename to sections/basics/installation.mdx diff --git a/sections/basics/motivation.md b/sections/basics/motivation.mdx similarity index 100% rename from sections/basics/motivation.md rename to sections/basics/motivation.mdx diff --git a/sections/basics/passed-props.md b/sections/basics/passed-props.mdx similarity index 100% rename from sections/basics/passed-props.md rename to sections/basics/passed-props.mdx diff --git a/sections/basics/react-native.md b/sections/basics/react-native.mdx similarity index 100% rename from sections/basics/react-native.md rename to sections/basics/react-native.mdx diff --git a/sections/basics/styling-any-component.md b/sections/basics/styling-any-component.mdx similarity index 100% rename from sections/basics/styling-any-component.md rename to sections/basics/styling-any-component.mdx diff --git a/sections/faqs/browser-support.md b/sections/faqs/browser-support.mdx similarity index 100% rename from sections/faqs/browser-support.md rename to sections/faqs/browser-support.mdx diff --git a/sections/faqs/create-react-app.md b/sections/faqs/create-react-app.mdx similarity index 100% rename from sections/faqs/create-react-app.md rename to sections/faqs/create-react-app.mdx diff --git a/sections/faqs/declare-components-in-render-method.md b/sections/faqs/declare-components-in-render-method.mdx similarity index 100% rename from sections/faqs/declare-components-in-render-method.md rename to sections/faqs/declare-components-in-render-method.mdx diff --git a/sections/faqs/dom-two-classes.md b/sections/faqs/dom-two-classes.mdx similarity index 100% rename from sections/faqs/dom-two-classes.md rename to sections/faqs/dom-two-classes.mdx diff --git a/sections/faqs/duplicated-styled-components.md b/sections/faqs/duplicated-styled-components.mdx similarity index 100% rename from sections/faqs/duplicated-styled-components.md rename to sections/faqs/duplicated-styled-components.mdx diff --git a/sections/faqs/flickering-text.md b/sections/faqs/flickering-text.mdx similarity index 100% rename from sections/faqs/flickering-text.md rename to sections/faqs/flickering-text.mdx diff --git a/sections/faqs/html-attribute-warnings.md b/sections/faqs/html-attribute-warnings.mdx similarity index 100% rename from sections/faqs/html-attribute-warnings.md rename to sections/faqs/html-attribute-warnings.mdx diff --git a/sections/faqs/library-authors.md b/sections/faqs/library-authors.mdx similarity index 100% rename from sections/faqs/library-authors.md rename to sections/faqs/library-authors.mdx diff --git a/sections/faqs/migration-v4.md b/sections/faqs/migration-v4.mdx similarity index 100% rename from sections/faqs/migration-v4.md rename to sections/faqs/migration-v4.mdx diff --git a/sections/faqs/migration-v5.md b/sections/faqs/migration-v5.mdx similarity index 100% rename from sections/faqs/migration-v5.md rename to sections/faqs/migration-v5.mdx diff --git a/sections/faqs/missing-native-import.md b/sections/faqs/missing-native-import.mdx similarity index 100% rename from sections/faqs/missing-native-import.md rename to sections/faqs/missing-native-import.mdx diff --git a/sections/faqs/nesting.md b/sections/faqs/nesting.mdx similarity index 100% rename from sections/faqs/nesting.md rename to sections/faqs/nesting.mdx diff --git a/sections/faqs/npm-link.md b/sections/faqs/npm-link.mdx similarity index 100% rename from sections/faqs/npm-link.md rename to sections/faqs/npm-link.mdx diff --git a/sections/faqs/override-inline-styles.md b/sections/faqs/override-inline-styles.mdx similarity index 100% rename from sections/faqs/override-inline-styles.md rename to sections/faqs/override-inline-styles.mdx diff --git a/sections/faqs/override-styles-with-higher-specificity.md b/sections/faqs/override-styles-with-higher-specificity.mdx similarity index 100% rename from sections/faqs/override-styles-with-higher-specificity.md rename to sections/faqs/override-styles-with-higher-specificity.mdx diff --git a/sections/faqs/reverse-selectors.md b/sections/faqs/reverse-selectors.mdx similarity index 100% rename from sections/faqs/reverse-selectors.md rename to sections/faqs/reverse-selectors.mdx diff --git a/sections/faqs/support-for-css-frameworks.md b/sections/faqs/support-for-css-frameworks.mdx similarity index 100% rename from sections/faqs/support-for-css-frameworks.md rename to sections/faqs/support-for-css-frameworks.mdx diff --git a/sections/faqs/when-to-use-attrs.md b/sections/faqs/when-to-use-attrs.mdx similarity index 100% rename from sections/faqs/when-to-use-attrs.md rename to sections/faqs/when-to-use-attrs.mdx diff --git a/sections/homepage/getting-started.md b/sections/homepage/getting-started.mdx similarity index 100% rename from sections/homepage/getting-started.md rename to sections/homepage/getting-started.mdx diff --git a/sections/tooling/babel-macro.md b/sections/tooling/babel-macro.mdx similarity index 100% rename from sections/tooling/babel-macro.md rename to sections/tooling/babel-macro.mdx diff --git a/sections/tooling/babel-plugin.md b/sections/tooling/babel-plugin.mdx similarity index 100% rename from sections/tooling/babel-plugin.md rename to sections/tooling/babel-plugin.mdx diff --git a/sections/tooling/jest.md b/sections/tooling/jest.mdx similarity index 100% rename from sections/tooling/jest.md rename to sections/tooling/jest.mdx diff --git a/sections/tooling/styled-theming.md b/sections/tooling/styled-theming.mdx similarity index 100% rename from sections/tooling/styled-theming.md rename to sections/tooling/styled-theming.mdx diff --git a/sections/tooling/stylelint.md b/sections/tooling/stylelint.mdx similarity index 99% rename from sections/tooling/stylelint.md rename to sections/tooling/stylelint.mdx index 0b3a7f58d..85cd2092c 100644 --- a/sections/tooling/stylelint.md +++ b/sections/tooling/stylelint.mdx @@ -256,7 +256,6 @@ if (condition) { **Wrong** - ```js if (condition) { const Button = styled.button` @@ -271,6 +270,5 @@ if (condition) { color: red;` } ``` - It may be that other tagged template literal styles are coincidentally supported, but no issues will be handled regarding indentation unless the above style was used. diff --git a/sections/tooling/syntax-highlighting.md b/sections/tooling/syntax-highlighting.mdx similarity index 100% rename from sections/tooling/syntax-highlighting.md rename to sections/tooling/syntax-highlighting.mdx diff --git a/sections/tooling/typescript-plugin.md b/sections/tooling/typescript-plugin.mdx similarity index 100% rename from sections/tooling/typescript-plugin.md rename to sections/tooling/typescript-plugin.mdx diff --git a/test/components/__snapshots__/Note.spec.js.snap b/test/components/__snapshots__/Note.spec.js.snap index e32a3b006..a0646e244 100644 --- a/test/components/__snapshots__/Note.spec.js.snap +++ b/test/components/__snapshots__/Note.spec.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Note renders correctly 1`] = ` -.c1 { +.c0 { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; background: #e0e0e0; padding: 0.3888888888888889rem 0.5555555555555556rem 0.2777777777777778rem 0.7777777777777778rem; @@ -10,16 +10,16 @@ exports[`Note renders correctly 1`] = ` border-radius: 0.16666666666666666rem; } -.c1 >p { +.c0 >p { margin: 0 0 0.2777777777777778rem 0; } -.sc-fHIiac+.c0, -.sc-izzqae+.c1 { +.sc-hzvfaM+.c0, +.sc-clmipK+.c0 { margin-top: 1.9444444444444444rem; } -.c2 { +.c1 { display: block; font-weight: 600; font-family: "Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; @@ -29,10 +29,10 @@ exports[`Note renders correctly 1`] = ` }
Note diff --git a/utils/mdx-components.js b/utils/mdx-components.js index 83d372d8e..bd0be6322 100644 --- a/utils/mdx-components.js +++ b/utils/mdx-components.js @@ -1,7 +1,7 @@ import React from 'react'; -import elementToText from '../utils/elementToText'; -import titleToDash from '../utils/titleToDash'; +import elementToText from './elementToText'; +import titleToDash from './titleToDash'; // Components to be used as renderers import Code from '../components/Code'; @@ -38,7 +38,7 @@ const Heading = ({ level, children }) => { {labels.length > 0 && ( {labels.map((label, index) => ( -