LSPAY-33449: Emotion update

Author: ls-urs-keller

.eslintrc.js

@@ -16,6 +16,8 @@ module.exports = {
     // See https://github.com/lightspeedretail/web-tools/issues/65
     '@typescript-eslint/ban-types': 'error',
     'jest/valid-describe': 'off',
+    // Allow css prop from Emotion v11
+    'react/no-unknown-property': ['error', { ignore: ['css'] }],
   },
   overrides: [
     {
@@ -24,6 +26,12 @@ module.exports = {
         'import/no-extraneous-dependencies': 'off',
       },
     },
+    {
+      files: ['**/*.test.tsx', '**/*.test.ts', '**/__tests__/*.tsx', '**/__tests__/*.ts'],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
   ],
   settings: {
     // Using `export * ...` does not work with eslint-plugin-import and makes ESLint trips,

.nvmrc

@@ -1 +1 @@
-10.16.0
+20

.storybook/main.js

@@ -16,12 +16,17 @@ const babelOptions = {
         debug: false,
       },
     ],
-    '@babel/preset-react',
-    '@emotion/babel-preset-css-prop',
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+        importSource: '@emotion/react',
+      },
+    ],
   ],
   plugins: [
     '@babel/plugin-proposal-object-rest-spread',
-    'emotion',
+    '@emotion/babel-plugin',
     // need to resolve the dependency differently in storybook.
     // It's an issue on their side where they use an old version of
     // react-popper which magically clashes with ours

.storybook/preview.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Global } from '@emotion/core';
+import { Global } from '@emotion/react';
 import { addDecorator, addParameters } from '@storybook/react';
 import { FlameGlobalStyles, FlameTheme, themePicker } from '../packages/flame/src/Core/index.tsx';
 import './stories.scss';

README.md

@@ -98,7 +98,7 @@ If you have Emotion already installed and you would like to use the theme values
 ```jsx
 import React from 'react';
 import { FlameTheme, lightTheme } from '@lightspeed/flame/Core';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from '@emotion/react';
 
 class App extends React.Component {
   render() {

babel.config.js

@@ -7,15 +7,26 @@ module.exports = {
       },
     ],
     '@babel/preset-typescript',
-    '@babel/preset-react',
-    '@emotion/babel-preset-css-prop',
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+        importSource: '@emotion/react',
+      },
+    ],
   ],
-  plugins: ['@babel/plugin-proposal-object-rest-spread'],
+  plugins: ['@babel/plugin-proposal-object-rest-spread', '@emotion/babel-plugin'],
   env: {
     test: {
       presets: [
         '@babel/preset-typescript',
-        '@babel/preset-react',
+        [
+          '@babel/preset-react',
+          {
+            runtime: 'automatic',
+            importSource: '@emotion/react',
+          },
+        ],
         [
           '@babel/preset-env',
           {
@@ -26,17 +37,19 @@ module.exports = {
             },
           },
         ],
-        '@emotion/babel-preset-css-prop',
       ],
+      plugins: ['@emotion/babel-plugin'],
     },
     // for ESM builds
     production: {
-      plugins: ['transform-react-remove-prop-types'],
+      plugins: ['transform-react-remove-prop-types', '@emotion/babel-plugin'],
       presets: [
+        '@babel/preset-typescript',
         [
-          '@emotion/babel-preset-css-prop',
+          '@babel/preset-react',
           {
-            sourceMap: false,
+            runtime: 'automatic',
+            importSource: '@emotion/react',
           },
         ],
         [
@@ -45,23 +58,23 @@ module.exports = {
             modules: false,
           },
         ],
-        '@babel/preset-typescript',
       ],
     },
     cjs: {
-      plugins: ['transform-react-remove-prop-types'],
+      plugins: ['transform-react-remove-prop-types', '@emotion/babel-plugin'],
       presets: [
         '@babel/preset-typescript',
         [
-          '@babel/preset-env',
+          '@babel/preset-react',
           {
-            modules: 'commonjs',
+            runtime: 'automatic',
+            importSource: '@emotion/react',
           },
         ],
         [
-          '@emotion/babel-preset-css-prop',
+          '@babel/preset-env',
           {
-            sourceMap: false,
+            modules: 'commonjs',
           },
         ],
       ],

jest.setup.js

@@ -1,11 +1,9 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import '@testing-library/jest-dom';
 import { cleanup } from '@testing-library/react';
-import * as emotion from 'emotion';
-import { createSerializer, matchers as emotionMatchers } from 'jest-emotion';
+import { matchers } from '@emotion/jest';
 
-expect.addSnapshotSerializer(createSerializer(emotion));
-expect.extend(emotionMatchers);
+expect.extend(matchers);
 
 afterEach(cleanup);
 

package.json

@@ -35,15 +35,15 @@
     "percy": "build-storybook -c .storybook && percy-storybook --widths=1280"
   },
   "dependencies": {
-    "@emotion/core": "^10.1.1",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@styled-system/css": "^5.1.5",
     "@styled-system/theme-get": "5.0.16",
-    "emotion-theming": "^10.0.27",
     "polished": "^2.3.0",
     "prop-types": "^15.6.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "styled-system": "^5.0.16"
   },
   "devDependencies": {
@@ -54,7 +54,8 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/babel-preset-css-prop": "^10.0.14",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/jest": "^11.11.0",
     "@lightspeed/browserslist-config": "^0.1.2",
     "@lightspeed/config-prettier": "^0.1.2",
     "@lightspeed/config-typescript": "^0.2.0",
@@ -72,12 +73,12 @@
     "@types/jest": "^25.2.3",
     "@types/lodash": "^4.14.123",
     "@types/luxon": "^1.15.2",
+    "@types/minimatch": "^3.0.3",
     "@types/react": "^18.3.26",
     "@types/react-test-renderer": "^16.8.3",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.0.4",
-    "babel-plugin-emotion": "^10.0.0",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
@@ -96,7 +97,6 @@
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.0.1",
-    "jest-emotion": "^10.0.0",
     "lerna": "^3.10.2",
     "lint-staged": "^7.1.2",
     "plop": "^2.4.0",
@@ -106,10 +106,9 @@
     "prettier": "^1.16.1",
     "raw-loader": "4.0.1",
     "react-docgen-typescript": "~2.2.2",
-    "react-test-renderer": "^16.8.6",
+    "react-test-renderer": "^18.3.1",
     "sass": "^1.14.3",
     "sass-loader": "^7.1.0",
-    "storybook-readme": "^5.0.8",
     "style-loader": "^0.21.0",
     "typescript": "^4.9.5",
     "webpack": "^4.41.2",
@@ -119,7 +118,14 @@
   "resolutions": {
     "@types/react": "18.3.26",
     "@types/react-dom": "^18.0.0",
-    "react-docgen-typescript": "~2.2.2"
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-docgen-typescript": "~2.2.2",
+    "@emotion/react": "^11.11.0",
+    "@emotion/core": "npm:@emotion/react@^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@emotion/styled-base": "npm:@emotion/styled@^11.11.0",
+    "emotion-theming": "npm:@emotion/react@^11.11.0"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx,json,css,scss,md}": [

packages/flame-tokens/src/__tests__/typography.test.js

@@ -1,4 +1,4 @@
-const { fontSizes, fontSizeAliases } = require('../typography');
+const { fontSizes, fontSizeAliases } = require('../typography.ts');
 
 describe('fontSizes', () => {
   it('returns list of rem value by size', () => {

packages/flame-tokens/src/__tests__/utils.test.js

@@ -1,4 +1,4 @@
-const { pxToRem } = require('../utils');
+const { pxToRem } = require('../utils.ts');
 
 describe('pxToRem', () => {
   it('returns rem value with default base value', () => {