Version Packages

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

Releases

@emotion/[email protected]

Minor Changes

• 71514b06 #1970 Thanks @FLGMwt! - A new runtime option has been added that can be configured to 'automatic' to opt into the new JSX runtimes. To use this a compatible React version has to be used.

@emotion/[email protected]

Minor Changes

• 71514b06 #1970 Thanks @FLGMwt! - Support for the new JSX runtimes has been added. They require compatible React versions and shouldn't be manually used.

  To use 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.

[morlay]

Seems the generated files are not clean enough. May break tree-shaking

@Andarist is this as expect?

// file: @emotion/core/jsx-runtime/dist/core.esm.js

import '@babel/runtime/helpers/inheritsLoose';
import 'react';
import '@emotion/cache';
import { h as hasOwnProperty, E as Emotion, c as createEmotionProps } from '../../dist/emotion-element-cfcfecf4.esm.js';
import '@emotion/utils';
import '@emotion/serialize';
import { Fragment as Fragment$1, jsx as jsx$1, jsxs as jsxs$1 } from 'react/jsx-runtime';

var Fragment = Fragment$1;
function jsx(type, props, key) {
  if (!hasOwnProperty.call(props, 'css')) {
    return jsx$1(type, props, key);
  }

  return jsx$1(Emotion, createEmotionProps(type, props), key);
}
function jsxs(type, props, key) {
  if (!hasOwnProperty.call(props, 'css')) {
    return jsxs$1(type, props, key);
  }

  return jsxs$1(Emotion, createEmotionProps(type, props), key);
}

export { Fragment, jsx, jsxs };

[Andarist]

Do u refer to the imports that do not import anything? If yes - this should not affect tree-shaking if it's implemented correctly. If you know any situation in which this is causing problems then please create a repro case so we could report it to the appropriate tool.

You might be wondering why the output looks like this and the answer is here: https://rollupjs.org/guide/en/#why-do-additional-imports-turn-up-in-my-entry-chunks-when-code-splitting

[morlay]

Yes. This not affect tree-shaking, cause all deps are required.

But unnecessary require() will be remained in jsx-runtime.
This is not big problem, just my personal tastes. 😄

Webpack results (mangle: false)

   "use strict";
    __webpack_require__.d(__webpack_exports__, { HY: () => Fragment, tZ: () => jsx, BX: () => jsxs });
   
   // here just a little redundancy
   __webpack_require__(79292), __webpack_require__(66204), __webpack_require__(40168);
    var _dist_emotion_element_57a3a7a3_browser_esm_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(66738),
      react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = (__webpack_require__(74454), __webpack_require__(43188)),
      Fragment = react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment;

    function jsx(type, props, key) {
      return _dist_emotion_element_57a3a7a3_browser_esm_js__WEBPACK_IMPORTED_MODULE_3__.h.call(props, "css") ? (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_dist_emotion_element_57a3a7a3_browser_esm_js__WEBPACK_IMPORTED_MODULE_3__.E, (0, _dist_emotion_element_57a3a7a3_browser_esm_js__WEBPACK_IMPORTED_MODULE_3__.c)(type, props), key) : (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(type, props, key);
    }

    function jsxs(type, props, key) {
      return _dist_emotion_element_57a3a7a3_browser_esm_js__WEBPACK_IMPORTED_MODULE_3__.h.call(props, "css") ? (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_dist_emotion_element_57a3a7a3_browser_esm_js__WEBPACK_IMPORTED_MODULE_3__.E, (0, _dist_emotion_element_57a3a7a3_browser_esm_js__WEBPACK_IMPORTED_MODULE_3__.c)(type, props), key) : (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(type, props, key);
    }

[Andarist]

Is this a production build? I would have expected most of this to vanish thanks to module concatenation.

[morlay]

Yes. This is production build, just disable mingle for show clear.

Webpack v5 （old version will got same result）

import "react" will be always require("react")
as side effect.

module concatenation will not work for @emotion/core/jsx-runtime.
it is a new entry point, which not will be treat as module of @emotion/core