diff --git a/docs/css-prop.mdx b/docs/css-prop.mdx
index 2fc404c9f5..496dbde70c 100644
--- a/docs/css-prop.mdx
+++ b/docs/css-prop.mdx
@@ -14,10 +14,35 @@ There are 2 ways to get started with the `css` prop.
Both methods result in the same compiled code.
After adding the preset or setting the pragma as a comment, compiled jsx code will use emotion's `jsx` function instead of `React.createElement`.
-| | Input | Output |
-| ------ | -------------------------- | --------------------------------------------------- |
-| Before | `
` | `React.createElement('img', { src: 'avatar.png' })` |
-| After | `
` | `jsx('img', { src: 'avatar.png' })` |
+
+
+
+ |
+ Input |
+ Output |
+
+
+
+
+ Before |
+
+ <img src="avatar.png" />
+ |
+
+ React.createElement('img', { src: 'avatar.png' })
+ |
+
+
+ After |
+
+ <img src="avatar.png" />
+ |
+
+ jsx('img', { src: 'avatar.png' })
+ |
+
+
+
#### Babel Preset
diff --git a/package.json b/package.json
index e38f489376..57dd7ea7ae 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,6 @@
"resolutions": {
"**/react": "16.14.0",
"**/react-dom": "16.14.0",
- "**/@types/react": "16.14.21",
"**/browserslist": "^3.2.8",
"**/graphql-type-json": "0.2.4"
},
diff --git a/packages/babel-preset-css-prop/README.md b/packages/babel-preset-css-prop/README.md
index 7040d6187b..a281f0650a 100644
--- a/packages/babel-preset-css-prop/README.md
+++ b/packages/babel-preset-css-prop/README.md
@@ -77,10 +77,27 @@ require('@babel/core').transform(code, {
This preset enables the `css` prop for an entire project via a single entry to the babel configuration. After adding the preset, compiled JSX code will use Emotion's `jsx` function instead of `React.createElement`.
-| | Input | Output |
-| ------ | -------------------------- | --------------------------------------------------- |
-| Before | `
` | `React.createElement('img', { src: 'avatar.png' })` |
-| After | `
` | `jsx('img', { src: 'avatar.png' })` |
+
+
+
+ |
+ Input |
+ Output |
+
+
+
+
+ Before |
+ <img src="avatar.png" /> |
+ React.createElement('img', { src: 'avatar.png' }) |
+
+
+ After |
+ <img src="avatar.png" /> |
+ jsx('img', { src: 'avatar.png' }) |
+
+
+
`import { jsx } from '@emotion/react'` is automatically added to the top of files where required.
diff --git a/site/next.config.js b/site/next.config.js
index 7e68ddd280..42c168c753 100644
--- a/site/next.config.js
+++ b/site/next.config.js
@@ -1,8 +1,6 @@
const path = require('path')
// To run bundle analyzer, set the `ANALYZE` environment variable to 'true'.
-// For example with PowerShell, run:
-// $Env:ANALYZE='true'; yarn build
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true'
})
diff --git a/site/package.json b/site/package.json
index 7fd856c2bb..a3d20748af 100644
--- a/site/package.json
+++ b/site/package.json
@@ -14,7 +14,13 @@
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
+ "@next/bundle-analyzer": "^12.1.5",
+ "@types/babel__standalone": "^7.1.4",
+ "@types/js-yaml": "^4.0.5",
+ "@types/node": "^12.20.37",
"@types/prismjs": "^1.26.0",
+ "@types/react": "^18.0.9",
+ "@types/remark-prism": "^1.3.3",
"escape-goat": "^4.0.0",
"facepaint": "^1.2.1",
"gray-matter": "^4.0.3",
@@ -27,15 +33,7 @@
"react-simple-code-editor": "^0.11.0",
"remark-prism": "^1.3.6",
"sharp": "^0.30.4",
+ "typescript": "^4.5.5",
"unist-util-visit": "^4.1.0"
- },
- "devDependencies": {
- "@next/bundle-analyzer": "^12.1.5",
- "@types/babel__standalone": "^7.1.4",
- "@types/js-yaml": "^4.0.5",
- "@types/node": "^12.20.37",
- "@types/react": "^18.0.9",
- "@types/remark-prism": "^1.3.3",
- "typescript": "^4.5.5"
}
}
diff --git a/site/pages/docs/[slug].tsx b/site/pages/docs/[slug].tsx
index 9f1c5e1d96..d10c561f0a 100644
--- a/site/pages/docs/[slug].tsx
+++ b/site/pages/docs/[slug].tsx
@@ -34,7 +34,8 @@ export async function getStaticProps({ params }: GetStaticPropsContext) {
const { title, content } = docQueries.getMdx(slug)
// mdxOptions is duplicated in an attempt to prevent the client-side bundle
- // from containing any mdx/remark JS
+ // from containing any mdx/remark JS. This is recommended by the
+ // next-mdx-remote README.
const mdx = await serialize(content, {
mdxOptions: {
// remarkLiveEditor must come before remarkPrism
diff --git a/yarn.lock b/yarn.lock
index a70fa567b0..a7cc6aaa13 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5256,7 +5256,7 @@
dependencies:
"@types/react" "*"
-"@types/react@*", "@types/react@16.14.21", "@types/react@>=16", "@types/react@^18.0.9":
+"@types/react@*", "@types/react@>=16":
version "16.14.21"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.21.tgz#35199b21a278355ec7a3c40003bd6a334bd4ae4a"
integrity sha512-rY4DzPKK/4aohyWiDRHS2fotN5rhBSK6/rz1X37KzNna9HJyqtaGAbq9fVttrEPWF5ywpfIP1ITL8Xi2QZn6Eg==
@@ -5265,6 +5265,15 @@
"@types/scheduler" "*"
csstype "^3.0.2"
+"@types/react@^18.0.9":
+ version "18.0.14"
+ resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.14.tgz#e016616ffff51dba01b04945610fe3671fdbe06d"
+ integrity sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q==
+ dependencies:
+ "@types/prop-types" "*"
+ "@types/scheduler" "*"
+ csstype "^3.0.2"
+
"@types/remark-prism@^1.3.3":
version "1.3.3"
resolved "https://registry.yarnpkg.com/@types/remark-prism/-/remark-prism-1.3.3.tgz#ed001b50ee30e0ef6a782c17966f58f3e9abb3a6"
@@ -7496,7 +7505,12 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001010:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001012.tgz#653ec635e815b9e0fb801890923b0c2079eb34ec"
integrity sha512-7RR4Uh04t9K1uYRWzOJmzplgEOAXbfK72oVNokCdMzA67trrhPzy93ahKk1AWHiA0c58tD2P+NHqxrA8FZ+Trg==
-caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001283:
+caniuse-lite@^1.0.30000844:
+ version "1.0.30001361"
+ resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001361.tgz#ba2adb2527566fb96f3ac7c67698ae7fc495a28d"
+ integrity sha512-ybhCrjNtkFji1/Wto6SSJKkWk6kZgVQsDq5QI83SafsF6FXv2JB4df9eEdH6g8sdGgqTXrFLjAxqBGgYoU3azQ==
+
+caniuse-lite@^1.0.30001283:
version "1.0.30001299"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz#d753bf6444ed401eb503cbbe17aa3e1451b5a68c"
integrity sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw==
@@ -9499,9 +9513,9 @@ ejs@^3.1.6:
jake "^10.6.1"
electron-to-chromium@^1.3.47:
- version "1.4.46"
- resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.46.tgz#c88a6fedc766589826db0481602a888864ade1ca"
- integrity sha512-UtV0xUA/dibCKKP2JMxOpDtXR74zABevuUEH4K0tvduFSIoxRVcYmQsbB51kXsFTX8MmOyWMt8tuZAlmDOqkrQ==
+ version "1.4.177"
+ resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.177.tgz#b6a4436eb788ca732556cd69f384b8a3c82118c5"
+ integrity sha512-FYPir3NSBEGexSZUEeht81oVhHfLFl6mhUKSkjHN/iB/TwEIt/WHQrqVGfTLN5gQxwJCQkIJBe05eOXjI7omgg==
elegant-spinner@^1.0.1:
version "1.0.1"