Added new JSX entry points for the automatic runtime

.gitignore

@@ -10,5 +10,6 @@ package-lock.json
 .cache
 public/
 !playgrounds/cra/public
+!playgrounds/minimal-react/public
 .env
 .vscode

package.json

@@ -26,8 +26,8 @@
     "release": "yarn build && changeset publish"
   },
   "resolutions": {
-    "**/react": "16.8.1",
-    "**/react-dom": "16.8.1",
+    "**/react": "17.0.0-rc.0",
+    "**/react-dom": "17.0.0-rc.0",
     "**/browserslist": "^3.2.8",
     "**/graphql-type-json": "0.2.4"
   },
@@ -121,7 +121,8 @@
       "packages/*"
     ],
     "globals": {
-      "react": "React"
+      "react": "React",
+      "@emotion/core": "emotionCore"
     }
   },
   "bugs": {

packages/babel-preset-css-prop/package.json

@@ -7,7 +7,7 @@
   "license": "MIT",
   "repository": "https://github.com/emotion-js/emotion/tree/master/packages/babel-preset-css-prop",
   "dependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/plugin-transform-react-jsx": "^7.10.4",
     "@babel/runtime": "^7.5.5",
     "@emotion/babel-plugin-jsx-pragmatic": "^0.1.5",
     "babel-plugin-emotion": "^10.0.27"

packages/babel-preset-css-prop/src/index.js

@@ -13,17 +13,22 @@ export default (
   api,
   { pragma, sourceMap, autoLabel, labelFormat, instances, ...options } = {}
 ) => {
+  const isAutomaticRuntime = options.runtime === 'automatic'
+  console.log({ isAutomaticRuntime })
+  const jsxOptions = isAutomaticRuntime
+    ? { importSource: '@emotion/core' }
+    : { pragma: pragmaName, pragmaFrag: 'React.Fragment' }
   return {
     plugins: [
-      [
+      !isAutomaticRuntime && [
         pragmatic,
         {
           export: 'jsx',
           module: '@emotion/core',
           import: pragmaName
         }
       ],
-      [jsx, { pragma: pragmaName, pragmaFrag: 'React.Fragment', ...options }],
+      [jsx, { ...jsxOptions, ...options }],
       [
         emotion,
         {
@@ -34,6 +39,6 @@ export default (
           cssPropOptimization: true
         }
       ]
-    ]
+    ].filter(Boolean)
   }
 }

packages/core/jsx-runtime/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "dist/core.cjs.js",
+  "module": "dist/core.esm.js",
+  "browser": {
+    "./dist/core.cjs.js": "./dist/core.browser.cjs.js",
+    "./dist/core.esm.js": "./dist/core.browser.esm.js"
+  },
+  "preconstruct": {
+    "source": "../src/jsx-runtime"
+  }
+}

packages/core/package.json

@@ -27,7 +27,7 @@
     "@emotion/utils": "0.11.3"
   },
   "peerDependencies": {
-    "react": ">=16.3.0"
+    "react": "17.0.0-rc.0"
   },
   "devDependencies": {
     "@emotion/styled": "^10.0.27",
@@ -37,15 +37,18 @@
     "emotion-server": "^10.0.27",
     "emotion-theming": "^10.0.27",
     "html-tag-names": "^1.1.2",
-    "react": "^16.5.2",
+    "react": "17.0.0-rc.0",
     "svg-tag-names": "^1.1.1"
   },
   "repository": "https://github.com/emotion-js/emotion/tree/master/packages/core",
   "publishConfig": {
     "access": "public"
   },
-  "umd:main": "dist/core.umd.min.js",
   "preconstruct": {
-    "umdName": "emotionCore"
+    "source": "src/index.js",
+    "entrypoints": [
+      ".",
+      "jsx-runtime"
+    ]
   }
 }

packages/core/src/jsx-runtime.js

@@ -0,0 +1,174 @@
+/* eslint-disable no-unused-vars */
+import * as React from 'react'
+import { withEmotionCache, ThemeContext } from './context'
+import { getRegisteredStyles, insertStyles } from '@emotion/utils'
+import { isBrowser } from './utils'
+import { serializeStyles } from '@emotion/serialize'
+
+import { jsx as reactJsx, Fragment, createElement } from 'react/jsx-runtime'
+
+const sanitizeIdentifier = identifier => identifier.replace(/\$/g, '-')
+
+let typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__'
+
+let labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__'
+
+let hasOwnProperty = Object.prototype.hasOwnProperty
+
+let render = (cache, props, theme, ref) => {
+  let cssProp = theme === null ? props.css : props.css(theme)
+
+  // so that using `css` from `emotion` and passing the result to the css prop works
+  // not passing the registered cache to serializeStyles because it would
+  // make certain babel optimisations not possible
+  if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
+    cssProp = cache.registered[cssProp]
+  }
+
+  let type = props[typePropName]
+  let registeredStyles = [cssProp]
+  let className = ''
+
+  if (typeof props.className === 'string') {
+    className = getRegisteredStyles(
+      cache.registered,
+      registeredStyles,
+      props.className
+    )
+  } else if (props.className != null) {
+    className = `${props.className} `
+  }
+
+  let serialized = serializeStyles(registeredStyles)
+
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    serialized.name.indexOf('-') === -1
+  ) {
+    let labelFromStack = props[labelPropName]
+    if (labelFromStack) {
+      serialized = serializeStyles([
+        serialized,
+        'label:' + labelFromStack + ';'
+      ])
+    }
+  }
+  const rules = insertStyles(cache, serialized, typeof type === 'string')
+  className += `${cache.key}-${serialized.name}`
+
+  const newProps = {}
+  for (let key in props) {
+    if (
+      hasOwnProperty.call(props, key) &&
+      key !== 'css' &&
+      key !== typePropName &&
+      (process.env.NODE_ENV === 'production' || key !== labelPropName)
+    ) {
+      newProps[key] = props[key]
+    }
+  }
+  newProps.ref = ref
+  newProps.className = className
+
+  const ele = jsx(type, newProps)
+  if (!isBrowser && rules !== undefined) {
+    let serializedNames = serialized.name
+    let next = serialized.next
+    while (next !== undefined) {
+      serializedNames += ' ' + next.name
+      next = next.next
+    }
+    return (
+      <React.Fragment>
+        <style
+          {...{
+            [`data-emotion-${cache.key}`]: serializedNames,
+            dangerouslySetInnerHTML: { __html: rules },
+            nonce: cache.sheet.nonce
+          }}
+        />
+        {ele}
+      </React.Fragment>
+    )
+  }
+  return ele
+}
+
+let Emotion = /* #__PURE__ */ withEmotionCache((props, cache, ref) => {
+  // use Context.read for the theme when it's stable
+  if (typeof props.css === 'function') {
+    return (
+      <ThemeContext.Consumer>
+        {theme => render(cache, props, theme, ref)}
+      </ThemeContext.Consumer>
+    )
+  }
+  return render(cache, props, null, ref)
+})
+
+if (process.env.NODE_ENV !== 'production') {
+  Emotion.displayName = 'EmotionCssPropInternal'
+}
+
+const jsx = (type, props, maybeKey) => {
+  let args = arguments
+
+  if (props == null || !hasOwnProperty.call(props, 'css')) {
+    return reactJsx(type, props, maybeKey)
+  }
+
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    typeof props.css === 'string' &&
+    // check if there is a css declaration
+    props.css.indexOf(':') !== -1
+  ) {
+    throw new Error(
+      `Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/css' like this: css\`${
+        props.css
+      }\``
+    )
+  }
+
+  let argsLength = args.length
+
+  let createElementArgArray = new Array(argsLength)
+
+  createElementArgArray[0] = Emotion
+  let newProps = {}
+
+  for (let key in props) {
+    if (hasOwnProperty.call(props, key)) {
+      newProps[key] = props[key]
+    }
+  }
+  newProps[typePropName] = type
+  if (process.env.NODE_ENV !== 'production') {
+    let error = new Error()
+    if (error.stack) {
+      // chrome
+      let match = error.stack.match(
+        /at (?:Object\.|Module\.|)jsx.*\n\s+at ([A-Z][A-Za-z$]+) /
+      )
+      if (!match) {
+        // safari and firefox
+        match = error.stack.match(/.*\n([A-Z][A-Za-z$]+)@/)
+      }
+      if (match) {
+        newProps[labelPropName] = sanitizeIdentifier(match[1])
+      }
+    }
+  }
+
+  createElementArgArray[1] = newProps
+
+  for (let i = 2; i < argsLength; i++) {
+    createElementArgArray[i] = args[i]
+  }
+  // $FlowFixMe
+  return reactJsx.apply(null, createElementArgArray)
+}
+
+const jsxs = jsx
+
+export { jsx, jsxs, Fragment, createElement }

playgrounds/minimal-react/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "minimal-react",
+  "version": "1.0.0",
+  "main": "index.js",
+  "private": true,
+  "license": "private",
+  "scripts": {
+    "start": "webpack-dev-server"
+  },
+  "dependencies": {
+    "@babel/core": "^7.11.1",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-react": "^7.10.4",
+    "@emotion/babel-preset-css-prop": "^10.0.27",
+    "@emotion/core": "^10.0.34",
+    "react": "17.0.0-rc.0",
+    "react-dom": "17.0.0-rc.0"
+  },
+  "devDependencies": {
+    "babel-loader": "^8.1.0",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "eslintConfig": {
+    "rules": {
+      "react/react-in-jsx-scope": "off"
+    }
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      [
+        "@babel/preset-react",
+        {
+          "runtime": "automatic"
+        }
+      ],
+      [
+        "@emotion/babel-preset-css-prop",
+        {
+          "runtime": "automatic"
+        }
+      ]
+    ]
+  }
+}

playgrounds/minimal-react/public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Minimal React</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="bundle.js"></script>
+</body>
+
+</html>

playgrounds/minimal-react/src/App.js

@@ -0,0 +1,34 @@
+import { Global, keyframes } from '@emotion/core'
+
+let animation = keyframes({
+  'from,to': {
+    transform: 'scale(1)'
+  },
+  '50%': {
+    transform: 'scale(0.5)'
+  }
+})
+
+const App = () => (
+  <>
+    <Global
+      styles={{
+        body: {
+          padding: 0,
+          margin: 0,
+          fontFamily: 'sans-serif'
+        }
+      }}
+    />
+    <h1
+      css={{
+        color: 'hotpink',
+        animation: `${animation} 1s infinite`
+      }}
+    >
+      wow, some hotpink text!!
+    </h1>
+  </>
+)
+
+export default App

playgrounds/minimal-react/src/index.js

@@ -0,0 +1,10 @@
+import { render } from 'react-dom'
+import App from './App'
+
+let root = document.getElementById('root')
+
+if (!root) {
+  throw new Error('could not find root element')
+}
+
+render(<App />, root)