From 0d5b80cb011b90285427a5853ace44aa241690a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Mon, 9 Nov 2020 23:00:53 +0100 Subject: [PATCH 1/2] Fixed the example showcasing how to use `next/babel` with automatic runtimes --- docs/css-prop.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/css-prop.mdx b/docs/css-prop.mdx index bd78ceaf3..1f36c0b8e 100644 --- a/docs/css-prop.mdx +++ b/docs/css-prop.mdx @@ -58,7 +58,7 @@ In case you want to use the new JSX runtimes with [Next.js](https://nextjs.org/) { "presets": [ [ - "next-babel", + "next/babel", { "preset-react": { "runtime": "automatic", From e67a57b14c7fc69932fb693a8762539d14b06291 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Mon, 9 Nov 2020 23:05:46 +0100 Subject: [PATCH 2/2] Use cssPropOptimization flag in automatic runtimes examples and add more info regarding its default to the plugin's README --- docs/css-prop.mdx | 4 ++-- packages/babel-plugin-emotion/README.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/css-prop.mdx b/docs/css-prop.mdx index 1f36c0b8e..019aacf4a 100644 --- a/docs/css-prop.mdx +++ b/docs/css-prop.mdx @@ -46,7 +46,7 @@ If you are using the compatible React version (`>=16.14.0`) and a compatible ver { "runtime": "automatic", "importSource": "@emotion/core" } ] ], - "plugins": ["babel-plugin-emotion"] + "plugins": [["babel-plugin-emotion", { "cssPropOptimization": true }]] } ``` @@ -67,7 +67,7 @@ In case you want to use the new JSX runtimes with [Next.js](https://nextjs.org/) } ] ], - "plugins": ["babel-plugin-emotion"] + "plugins": [["babel-plugin-emotion", { "cssPropOptimization": true }]] } ``` diff --git a/packages/babel-plugin-emotion/README.md b/packages/babel-plugin-emotion/README.md index 2e43db403..16000d681 100644 --- a/packages/babel-plugin-emotion/README.md +++ b/packages/babel-plugin-emotion/README.md @@ -303,7 +303,7 @@ resolved relative to `process.cwd()`(the current working directory). ### `cssPropOptimization` -`boolean`, defaults to `true`. +`boolean`, defaults to `true` if an import from `@emotion/core` is found in a file. This option assumes that you are using something to make `@emotion/core`'s `jsx` function work for all jsx. If you are not doing so and you do not want such optimizations to occur, disable this option.