decaporg · yanthomasdev · Jul 8, 2026
@@ -10,12 +10,13 @@ module.exports = {
   parserOptions: {
     requireConfigFile: false,
     babelOptions: {
-      presets: ['@babel/preset-react'],
+      presets: [['@babel/preset-react', { runtime: 'automatic', importSource: '@emotion/react' }]],
     },
   },
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
     'plugin:cypress/recommended',
     'prettier',
     'plugin:import/recommended',
@@ -84,6 +85,7 @@ module.exports = {
       extends: [
         'eslint:recommended',
         'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
         'plugin:cypress/recommended',
         'plugin:@typescript-eslint/recommended',
         'prettier',

@@ -9,7 +9,15 @@ const isESM = process.env.NODE_ENV === 'esm';
 console.log('Build Package:', path.basename(process.cwd()));
 
 // Always enabled plugins
-const basePlugins = ['babel-plugin-inline-json-import'];
+const basePlugins = [
+  'babel-plugin-inline-json-import',
+  [
+    '@emotion/babel-plugin',
+    {
+      autoLabel: 'always',
+    },
+  ],
+];
 
 // All legacy transforms have been removed as they are now included in @babel/preset-env
 // Features like class properties, optional chaining, nullish coalescing are now standard in modern JS
@@ -29,17 +37,31 @@ const svgo = {
   ],
 };
 
+const slateSerializerSpec =
+  /packages[\\/]decap-cms-widget-(markdown|richtext)[\\/]src[\\/]serializers[\\/]__tests__[\\/]slate\.spec\.js$/;
+
+const automaticReactPreset = [
+  '@babel/preset-react',
+  {
+    runtime: 'automatic',
+    importSource: '@emotion/react',
+  },
+];
+
 function presets() {
+  return [...(!isESM ? [['@babel/preset-env', {}]] : []), '@babel/preset-typescript'];
+}
+
+function overrides() {
   return [
-    '@babel/preset-react',
-    ...(!isESM ? [['@babel/preset-env', {}]] : []),
-    [
-      '@emotion/babel-preset-css-prop',
-      {
-        autoLabel: 'always',
-      },
-    ],
-    '@babel/preset-typescript',
+    {
+      exclude: slateSerializerSpec,
+      presets: [automaticReactPreset],
+    },
+    {
+      test: slateSerializerSpec,
+      presets: [['@babel/preset-react', { runtime: 'classic', pragma: 'h' }]],
+    },
   ];
 }
 
@@ -91,4 +113,5 @@ function plugins() {
 module.exports = {
   presets: presets(),
   plugins: plugins(),
+  overrides: overrides(),
 };
@@ -55,6 +55,7 @@
     "@babel/preset-typescript": "^7.10.4",
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.3",
+    "@emotion/babel-plugin": "^11.13.5",
     "@emotion/eslint-plugin": "^11.0.0",
     "@emotion/jest": "^11.11.0",
     "@octokit/rest": "^21.1.1",
@@ -145,7 +146,6 @@
   },
   "private": true,
   "dependencies": {
-    "@emotion/babel-preset-css-prop": "^11.11.0",
     "buffer": "^6.0.3",
     "emotion": "^11.0.0",
     "eslint-config-prettier": "^8.0.0",

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { GitHubBackend } from 'decap-cms-backend-github';
 import { PKCEAuthenticationPage } from 'decap-cms-ui-auth';
 

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import semaphore from 'semaphore';
 import trimStart from 'lodash/trimStart';
 import { stripIndent } from 'common-tags';

@@ -1,5 +1,4 @@
 import './lib/polyfill';
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider, connect } from 'react-redux';
 import { Route, Router } from 'react-router-dom';

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { translate } from 'react-polyglot';
 import { lengths } from 'decap-cms-ui-default';

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { lengths } from 'decap-cms-ui-default';
 

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import React from 'react';
 import styled from '@emotion/styled';
 import { translate } from 'react-polyglot';
 import { Link } from 'react-router-dom';

@@ -1,4 +1,3 @@
-import React from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { buttons, StyledDropdownButton, colors } from 'decap-cms-ui-default';

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 import styled from '@emotion/styled';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { translate } from 'react-polyglot';

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { Set, fromJS } from 'immutable';
 import configureStore from 'redux-mock-store';
@@ -11,7 +10,6 @@ import ConnectedEntriesCollection, {
 import Entries from '../Entries';
 
 jest.mock('../Entries', () => {
-  const React = require('react');
   return jest.fn(props => <mock-entries {...props} />);
 });
 

@@ -1,4 +1,3 @@
-import React from 'react';
 import { translate } from 'react-polyglot';
 import { Dropdown, DropdownCheckedItem } from 'decap-cms-ui-default';
 

@@ -1,4 +1,3 @@
-import React from 'react';
 import { translate } from 'react-polyglot';
 import { Dropdown, DropdownItem } from 'decap-cms-ui-default';
 

@@ -1,4 +1,3 @@
-import React from 'react';
 import { translate } from 'react-polyglot';
 import { Dropdown, DropdownItem } from 'decap-cms-ui-default';
 

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Icon, buttons, colors } from 'decap-cms-ui-default';
 

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { fromJS } from 'immutable';
 import configureStore from 'redux-mock-store';

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { render, fireEvent } from '@testing-library/react';
 import { fromJS } from 'immutable';

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 import { fromJS } from 'immutable';

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { css, Global } from '@emotion/react';
 import styled from '@emotion/styled';

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import styled from '@emotion/styled';
 import { colors, transitions } from 'decap-cms-ui-default';
 

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
 import { List } from 'immutable';

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
 import { colors, transitions } from 'decap-cms-ui-default';

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
 

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { fromJS } from 'immutable';
 

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { fromJS } from 'immutable';
 

@@ -1,4 +1,3 @@
-import React from 'react';
 import { translate } from 'react-polyglot';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';

@@ -1,4 +1,3 @@
-import React from 'react';
 import { translate } from 'react-polyglot';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { colors } from 'decap-cms-ui-default';

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Waypoint } from 'react-waypoint';

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Icon, shadows, colors, buttons } from 'decap-cms-ui-default';

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Map } from 'immutable';