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' })` | + + + + + + + + + + + + + + + + + + + + +
InputOutput
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' })` | + + + + + + + + + + + + + + + + + + + + +
InputOutput
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"