Merge branch 'master' into next

# Conflicts: # .circleci/config.yml # babel.config.js # docs/css-prop.mdx # package.json # packages/babel-preset-css-prop/CHANGELOG.md # packages/babel-preset-css-prop/README.md # packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap # packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap # packages/babel-preset-css-prop/package.json # packages/babel-preset-css-prop/src/index.js # packages/core/CHANGELOG.md # packages/core/package.json # packages/core/src/index.js # packages/css/test/no-babel/index.test.js # packages/emotion-theming/package.json # packages/native/package.json # packages/primitives-core/package.json # packages/primitives/package.json # packages/primitives/test/emotion-primitives.test.js # packages/react/__tests__/automatic-dev-runtime.js # packages/react/__tests__/automatic-runtime.js # packages/react/__tests__/css.js # packages/react/__tests__/warnings.js # packages/react/jsx-dev-runtime/package.json # packages/react/jsx-runtime/package.json # packages/react/src/emotion-element.js # packages/react/src/jsx-dev-runtime.js # packages/react/src/jsx-runtime.js # packages/react/src/jsx.js # packages/styled-base/package.json # packages/styled/package.json # playgrounds/cra/package.json # playgrounds/razzle/package.json # removed-packages/jest-emotion/package.json # scripts/benchmarks/package.json # site/package.json # yarn.lock
emotion-js · Nov 8, 2020 · d627db4 · d627db4
2 parents 2d59785 + 4ce6a7c
commit d627db4
Show file tree

Hide file tree

Showing 52 changed files with 2,102 additions and 497 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -31,5 +31,8 @@
       "emotion-theming"
     ]
   ],
-  "access": "public"
+  "access": "public",
+  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+    "onlyUpdatePeerDependentsWhenOutOfRange": true
+  }
 }
diff --git a/.github/ISSUE_TEMPLATE/--support-question.md b/.github/ISSUE_TEMPLATE/--support-question.md
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: 🤔 Support question
+    url: https://stackoverflow.com/questions/ask?tags=emotion
+    about: Issues are dedicated to feature requests and bugs, if you have questions, please use Stack Overflow.
diff --git a/babel.config.js b/babel.config.js
@@ -1,7 +1,11 @@
 const path = require('path')
+const emotionDevPreset = require('babel-preset-emotion-dev')
 
-let needsBabelPluginEmotion = filename =>
-  filename.includes(path.join('.test.js'))
+let needsBabelPluginEmotion = filename => /\.test\.js$/.test(filename)
+
+let isTestFile = filename =>
+  /\.test\.js$/.test(filename) ||
+  filename.includes(`${path.sep}__tests__${path.sep}`)
 
 module.exports = api => {
   api.cache(true)
@@ -14,14 +18,32 @@ module.exports = api => {
           ((!filename.includes('no-babel') &&
             needsBabelPluginEmotion(filename)) ||
             filename.includes(path.join('__tests__', 'babel'))),
-        plugins: ['@emotion/babel-plugin']
+        presets: [[emotionDevPreset, { useEmotionPlugin: true }]]
       },
       {
         test: filename =>
           filename &&
           filename.includes('source-map') &&
           needsBabelPluginEmotion(filename),
-        plugins: [['@emotion/babel-plugin', { sourceMap: true }]]
+        presets: [
+          [emotionDevPreset, { useEmotionPlugin: true, sourceMap: true }]
+        ]
+      },
+      {
+        test: filename =>
+          filename &&
+          isTestFile(filename) &&
+          filename.includes('automatic-runtime'),
+        presets: [[emotionDevPreset, { runtime: 'automatic' }]]
+      },
+      {
+        test: filename =>
+          filename &&
+          isTestFile(filename) &&
+          filename.includes('automatic-dev-runtime'),
+        presets: [
+          [emotionDevPreset, { runtime: 'automatic', development: true }]
+        ]
       }
     ]
   }

diff --git a/docs/css-prop.mdx b/docs/css-prop.mdx
@@ -21,7 +21,7 @@ After adding the preset or setting the pragma as a comment, compiled jsx code wi
 
 #### Babel Preset
 
-This method will **not** work with [Create React App](https://github.com/facebook/create-react-app) or other projects that do not allow custom babel configurations.
+This method will **not** work with [Create React App](https://github.com/facebook/create-react-app) or other projects that do not allow custom Babel configurations.
 Use the [JSX Pragma](#jsx-pragma) method instead.
 
 **.babelrc**
@@ -34,6 +34,43 @@ Use the [JSX Pragma](#jsx-pragma) method instead.
 
 > [Full `@emotion/babel-preset-css-prop` documentation](https://emotion.sh/docs/@emotion/babel-preset-css-prop)
 
+If you are using the compatible React version (`>=16.14.0`) then you can opt into using [the new JSX runtimes](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) by using such configuration:
+
+**.babelrc**
+
+```json
+{
+  "presets": [
+    [
+      "@babel/preset-react",
+      { "runtime": "automatic", "importSource": "@emotion/react" }
+    ]
+  ],
+  "plugins": ["@emotion/babel-plugin"]
+}
+```
+
+In case you want to use the new JSX runtimes with [Next.js](https://nextjs.org/) and you are using their [`next/babel`](https://nextjs.org/docs/advanced-features/customizing-babel-config) preset then the configuration should look like this:
+
+**.babelrc**
+
+```json
+{
+  "presets": [
+    [
+      "next-babel",
+      {
+        "preset-react": {
+          "runtime": "automatic",
+          "importSource": "@emotion/react"
+        }
+      }
+    ]
+  ],
+  "plugins": ["@emotion/babel-plugin"]
+}
+```
+
 #### JSX Pragma
 
 Set the jsx pragma at the top of your source file that uses the `css` prop.
@@ -45,6 +82,8 @@ This option works best for testing out the `css` prop feature or in projects whe
 
 Similar to a comment containing linter configuration, this configures the [jsx babel plugin](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx) to use the `jsx` function instead of `React.createElement`.
 
+If you are using a zero-config tool with automatic detection of which runtime (classic vs. automatic) should be used and you are already using a React version that has [the new JSX runtimes](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) (hence `runtime: 'automatic'` being configured automatically for you) such as Create React App 4 then `/** @jsx jsx */` pragma might not work and you should use `/** @jsxImportSource @emotion/react */` instead.
+
 > [JSX Pragma Babel Documentation](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#pragma)
 
 #### Import the `jsx` function from `@emotion/react`

diff --git a/docs/styled.mdx b/docs/styled.mdx
@@ -87,7 +87,7 @@ render(
 
 ### Targeting another emotion component
 
-Similar to [styled-components](https://www.styled-components.com/docs/faqs#can-i-refer-to-other-components), emotion allows for emotion components to be targeted like regular CSS selectors when using [babel-plugin-emotion](/packages/babel-plugin-emotion.md).
+Similar to [styled-components](https://www.styled-components.com/docs/faqs#can-i-refer-to-other-components), emotion allows for emotion components to be targeted like regular CSS selectors when using [@emotion/babel-plugin](/packages/babel-plugin).
 
 ```jsx
 // @live

diff --git a/package.json b/package.json
@@ -27,8 +27,8 @@
     "release": "yarn build && changeset publish"
   },
   "resolutions": {
-    "**/react": "16.11.0",
-    "**/react-dom": "16.11.0",
+    "**/react": "16.14.0",
+    "**/react-dom": "16.14.0",
     "**/browserslist": "^3.2.8",
     "**/graphql-type-json": "0.2.4"
   },
@@ -79,6 +79,7 @@
       "react/jsx-handler-names": 0,
       "react/no-unused-prop-types": 0,
       "react/prop-types": 0,
+      "react/react-in-jsx-scope": 0,
       "standard/computed-property-even-spacing": 0,
       "@emotion/pkg-renaming": 2
     },
@@ -135,7 +136,9 @@
       "removed-packages/*"
     ],
     "globals": {
-      "react": "React"
+      "react": "React",
+      "react/jsx-runtime": "ReactJSX",
+      "react/jsx-dev-runtime": "ReactJSXDev"
     }
   },
   "bugs": {
@@ -175,16 +178,16 @@
     "@babel/core": "^7.7.2",
     "@babel/helper-module-imports": "^7.7.0",
     "@babel/plugin-proposal-class-properties": "^7.7.0",
-    "@babel/plugin-syntax-jsx": "^7.2.0",
+    "@babel/plugin-syntax-jsx": "^7.12.1",
     "@babel/plugin-transform-flow-strip-types": "^7.6.3",
-    "@babel/plugin-transform-react-jsx": "^7.7.0",
+    "@babel/plugin-transform-react-jsx": "^7.12.1",
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-react": "^7.7.0",
+    "@babel/preset-react": "^7.12.1",
     "@babel/register": "^7.7.0",
     "@babel/runtime": "^7.7.2",
     "@changesets/changelog-github": "^0.2.7",
-    "@changesets/cli": "^2.10.2",
+    "@changesets/cli": "2.11.2",
     "@manypkg/cli": "^0.16.1",
     "@mdx-js/mdx": "^1.1.0",
     "@mdx-js/react": "^1.0.27",
@@ -245,9 +248,9 @@
     "prettier": "1.14.3",
     "puppeteer": "^1.6.0",
     "raf": "^3.4.0",
-    "react": "^16.11.0",
+    "react": "16.14.0",
     "react-art": "^16.5.2",
-    "react-dom": "^16.11.0",
+    "react-dom": "16.14.0",
     "react-helmet": "^5.2.0",
     "react-icons": "^2.2.7",
     "react-live": "1.10.0",

diff --git a/packages/babel-plugin-jsx-pragmatic/package.json b/packages/babel-plugin-jsx-pragmatic/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/babel-plugin-jsx-pragmatic",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Insert code to load a module corresponding to JSX pragma.",
   "main": "dist/babel-plugin-jsx-pragmatic.cjs.js",
   "module": "dist/babel-plugin-jsx-pragmatic.esm.js",
@@ -10,7 +10,7 @@
     "test:typescript": "exit 0"
   },
   "dependencies": {
-    "@babel/plugin-syntax-jsx": "^7.2.0"
+    "@babel/plugin-syntax-jsx": "^7.12.1"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0"

diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@babel/helper-module-imports": "^7.7.0",
-    "@babel/plugin-syntax-jsx": "^7.2.0",
+    "@babel/plugin-syntax-jsx": "^7.12.1",
     "@babel/runtime": "^7.7.2",
     "@emotion/hash": "^0.8.0",
     "@emotion/memoize": "^0.7.4",

diff --git a/packages/babel-preset-css-prop/CHANGELOG.md b/packages/babel-preset-css-prop/CHANGELOG.md
@@ -72,6 +72,18 @@
 - Updated dependencies [[`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0), [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]:
   - babel-plugin-emotion@11.0.0-next.0
 
+## 10.2.0
+
+### Minor Changes
+
+- [`c55fadb4`](https://github.com/emotion-js/emotion/commit/c55fadb4c90f86e3c7837b4b3a5902f0e90a4f19) [#2074](https://github.com/emotion-js/emotion/pull/2074) Thanks [@Andarist](https://github.com/Andarist)! - `runtime` option has been deprecated. It still works and will continue to work in Emotion 10 but we have found out that including JSX plugin twice in the Babel configuration leads to hard to debug problems and it's not always obvious that some presets include it. If you want to configure `runtime: "automatic"` just replace `@emotion/babel-preset-css-prop` with `@babel/preset-react` and `babel-plugin-emotion`. You can find out how to configure things properly here: https://emotion.sh/docs/css-prop#babel-preset
+
+## 10.1.0
+
+### Minor Changes
+
+- [`71514b06`](https://github.com/emotion-js/emotion/commit/71514b06fe172517168f98321499f05e74388de6) [#1970](https://github.com/emotion-js/emotion/pull/1970) Thanks [@FLGMwt](https://github.com/FLGMwt)! - A new `runtime` option has been added that can be configured to `'automatic'` to opt into [the new JSX runtimes](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html). To use this a compatible React version has to be used.
+
 ## 10.0.27
 
 ### Patch Changes

diff --git a/packages/babel-preset-css-prop/README.md b/packages/babel-preset-css-prop/README.md
@@ -1,6 +1,6 @@
 # @emotion/babel-preset-css-prop
 
-> A babel preset to automatically enable emotion's css prop
+> A Babel preset to automatically enable Emotion's css prop when using the classic JSX runtime. If you want to use [the new JSX runtimes](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) please do not use this preset but rather just include our [`@emotion/babel-plugin`](/packages/babel-plugin) directly and follow instructions for configuring the new JSX runtimes [here](/docs/css-prop.mdx##babel-preset).
 
 - [@emotion/babel-preset-css-prop](#emotionbabel-preset-css-prop)
   - [Install](#install)
@@ -75,7 +75,7 @@ require('@babel/core').transform(code, {
 
 ## Features
 
-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`.
+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                                              |
 | ------ | -------------------------- | --------------------------------------------------- |
@@ -136,7 +136,7 @@ const Link = props =>
   )
 ```
 
-_In addition to the custom pragma, this example includes `@emotion/babel-plugin` transforms that are enabled by default._
+_In addition to the custom JSX factory, this example includes `@emotion/babel-plugin` transforms that are enabled by default._
 
 ## Options
 

diff --git a/packages/babel-preset-css-prop/__tests__/__fixtures__/fragment.js b/packages/babel-preset-css-prop/__tests__/__fixtures__/fragment.js
@@ -0,0 +1,8 @@
+export let Button = ({ loading, ...props }) => {
+  return (
+    <>
+      <button css={{ color: 'hotpink' }} {...props} />
+      {loading && <span>{'Loading...'}</span>}
+    </>
+  )
+}
diff --git a/packages/babel-preset-css-prop/__tests__/__fixtures__/key-after-spread.js b/packages/babel-preset-css-prop/__tests__/__fixtures__/key-after-spread.js
@@ -0,0 +1,17 @@
+export let Buttons = ({ buttons }) => {
+  return (
+    <div>
+      {buttons.map(({ id, label, ...rest }) => (
+        <button
+          {...rest}
+          key={id}
+          css={{
+            color: 'hotpink'
+          }}
+        >
+          {label}
+        </button>
+      ))}
+    </div>
+  )
+}
diff --git a/packages/babel-preset-css-prop/__tests__/__fixtures__/no-static-children.js b/packages/babel-preset-css-prop/__tests__/__fixtures__/no-static-children.js
@@ -0,0 +1,10 @@
+export let Button = props => {
+  return (
+    <button
+      css={{
+        color: 'hotpink'
+      }}
+      {...props}
+    />
+  )
+}
diff --git a/packages/babel-preset-css-prop/__tests__/__fixtures__/static-children.js b/packages/babel-preset-css-prop/__tests__/__fixtures__/static-children.js
@@ -0,0 +1,11 @@
+export let Button = () => {
+  return (
+    <button
+      css={{
+        color: 'hotpink'
+      }}
+    >
+      {'Test'}
+    </button>
+  )
+}