Added new JSX entry points for the automatic runtime

.changeset/nine-waves-play.md

@@ -0,0 +1,7 @@
+---
+'@emotion/core': minor
+---
+
+Support for [the new JSX runtimes](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) has been added. They require compatible React versions and shouldn't be manually used.
+
+To use them them you can use the new `@jsxImportSource @emotion/core` pragma instead of the old `@jsx jsx` or you can use `@emotion/babel-preset-css-prop` with `{ runtime: 'automatic' }` option to have it handled automatically for you for the whole project.

.changeset/soft-icons-drum.md

@@ -0,0 +1,5 @@
+---
+'@emotion/babel-preset-css-prop': minor
+---
+
+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.

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
   flow:
     docker:
-      - image: circleci/node:10.6.0-browsers
+      - image: circleci/node:10.13.0-browsers
     working_directory: ~/repo
     steps:
       - checkout
@@ -25,7 +25,7 @@ jobs:
 
   test:
     docker:
-      - image: circleci/node:10.6.0
+      - image: circleci/node:10.13.0
     working_directory: ~/repo
     steps:
       - checkout
@@ -48,7 +48,7 @@ jobs:
 
   test_dist:
     docker:
-      - image: circleci/node:10.6.0
+      - image: circleci/node:10.13.0
     working_directory: ~/repo
     steps:
       - checkout
@@ -66,7 +66,7 @@ jobs:
 
   lint_and_typescript:
     docker:
-      - image: circleci/node:10.6.0
+      - image: circleci/node:10.13.0
     working_directory: ~/repo
     steps:
       - checkout

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: ['babel-plugin-emotion']
+        presets: [[emotionDevPreset, { useEmotionPlugin: true }]]
       },
       {
         test: filename =>
           filename &&
           filename.includes('source-map') &&
           needsBabelPluginEmotion(filename),
-        plugins: [['babel-plugin-emotion', { 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 }]
+        ]
       }
     ]
   }

package.json

@@ -26,8 +26,8 @@
     "release": "yarn build && changeset publish"
   },
   "resolutions": {
-    "**/react": "16.8.1",
-    "**/react-dom": "16.8.1",
+    "**/react": "16.14.0",
+    "**/react-dom": "16.14.0",
     "**/browserslist": "^3.2.8",
     "**/graphql-type-json": "0.2.4"
   },
@@ -64,6 +64,7 @@
       "prettier/prettier": "error",
       "react/prop-types": 0,
       "react/no-unused-prop-types": 0,
+      "react/react-in-jsx-scope": 0,
       "standard/computed-property-even-spacing": 0,
       "no-template-curly-in-string": 0,
       "camelcase": 0,
@@ -121,7 +122,9 @@
       "packages/*"
     ],
     "globals": {
-      "react": "React"
+      "react": "React",
+      "react/jsx-runtime": "ReactJSX",
+      "react/jsx-dev-runtime": "ReactJSXDev"
     }
   },
   "bugs": {
@@ -161,19 +164,20 @@
     "@babel/core": "^7.5.5",
     "@babel/helper-module-imports": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-syntax-jsx": "^7.2.0",
+    "@babel/plugin-syntax-jsx": "^7.12.1",
     "@babel/plugin-transform-flow-strip-types": "^7.4.4",
-    "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/plugin-transform-react-jsx": "^7.12.1",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-react": "^7.12.1",
     "@babel/register": "^7.5.5",
     "@babel/runtime": "^7.5.5",
     "@changesets/changelog-github": "^0.1.0",
     "@changesets/cli": "^2.3.0",
     "@manypkg/cli": "^0.5.2",
     "@mdx-js/mdx": "^1.1.0",
     "@mdx-js/react": "^1.0.27",
+    "@preconstruct/cli": "1.1.29",
     "@testing-library/react": "^8.0.2",
     "@types/jest": "^23.0.2",
     "@types/node": "^10.11.4",
@@ -231,14 +235,13 @@
     "npm-run-all": "^4.0.2",
     "opencollective": "^1.0.3",
     "polished": "^1.2.1",
-    "preconstruct": "^0.0.81",
     "prettier": "1.14.3",
     "puppeteer": "^1.6.0",
     "raf": "^3.4.0",
     "razzle": "^2.4.0",
-    "react": "^16.5.2",
+    "react": "16.14.0",
     "react-art": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react-dom": "16.14.0",
     "react-helmet": "^5.2.0",
     "react-icons": "^2.2.7",
     "react-live": "1.10.0",

packages/babel-plugin-jsx-pragmatic/package.json

@@ -7,7 +7,7 @@
   "license": "MIT",
   "repository": "https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-jsx-pragmatic",
   "dependencies": {
-    "@babel/plugin-syntax-jsx": "^7.2.0"
+    "@babel/plugin-syntax-jsx": "^7.12.1"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0"

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>}
+    </>
+  )
+}

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>
+  )
+}

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}
+    />
+  )
+}

packages/babel-preset-css-prop/__tests__/__fixtures__/static-children.js

@@ -0,0 +1,11 @@
+export let Button = () => {
+  return (
+    <button
+      css={{
+        color: 'hotpink'
+      }}
+    >
+      {'Test'}
+    </button>
+  )
+}