chore(monorepo): upgrade emotion from v10 to v11 (#2376)

* chore(styling-library): updated emotion deps

* chore(storybook): add webpack alias resolutions for emotion

* chore(monorepo): update jest emotion matcher args

* chore(monorepo): fix eslint config

* chore(monorepo): update types in box primitive

* chore(monorepo): udpate changeset and update box tests

* chore(monorepo): add more context to babel preset comments

* chore(monorepo): clean install

* chore(monorepo): update changesets

* chore(monorepo): add modal changeset

* chore(monorepo): add changeset for text area

* chore(monorepo): remove rogue console.log statement

* chore(monorepo): bump styling library update to a major upgrade

* chore(monorepo): split box and text changeset as well as cleanup

* chore(emotion): re-trigger netlify

.changeset/forty-bats-knock.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/modal': patch
+'@twilio-paste/core': patch
+---
+
+[Modal] Remove comment for obsolete ESLint rule.

.changeset/nervous-crabs-smash.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/text': minor
+'@twilio-paste/core': minor
+---
+
+[Text] Update tests to account for `stylis` parser change in jest emotion matchers.

.changeset/olive-dryers-nail.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/box': minor
+'@twilio-paste/core': minor
+---
+
+[Box] Small updates to usage of `styled` to create the `Box` component. Small type updates (to adopt utility types).

.changeset/tame-feet-applaud.md

@@ -0,0 +1,11 @@
+---
+'@twilio-paste/styling-library': major
+'@twilio-paste/core': major
+---
+
+[Styling Library] Upgrade to Emotion v11
+
+- replace `@emotion/core` with `@emotion/react`
+- bump `@emotion/styled` to v11
+- remove `emotion`, remove `emotion-themeing`
+- both packages now included with `@emotion/react`

.changeset/unlucky-oranges-notice.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/sibling-box': patch
+'@twilio-paste/core': patch
+---
+
+[Sibling Box] Remove obsolete eslint ignore statement; cosmetic change only.

.changeset/young-bears-wonder.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/theme': patch
+'@twilio-paste/core': patch
+---
+
+[Theme] Small edit to cased named imports and usage of `keyof` in types.

.changeset/young-chicken-fix.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/textarea': patch
+'@twilio-paste/core': patch
+---
+
+[Textarea] Remove comment for obsolete lint rule

.eslintrc.js

@@ -8,7 +8,16 @@ module.exports = {
   parserOptions: {
     project: './tsconfig.json',
   },
-  plugins: ['@typescript-eslint', 'eslint-comments', 'jest', 'promise', 'unicorn', 'emotion', 'import', 'jsx-a11y'],
+  plugins: [
+    '@typescript-eslint',
+    'eslint-comments',
+    'jest',
+    'promise',
+    'unicorn',
+    '@emotion/eslint-plugin',
+    'import',
+    'jsx-a11y',
+  ],
   extends: [
     'airbnb-typescript',
     'plugin:@typescript-eslint/recommended',

.jest/@types/index.d.ts

@@ -1,12 +1,13 @@
 import type { GenericThemeShape } from '@twilio-paste/theme';
-import type { EmotionMatchers } from 'jest-emotion'
+import type { EmotionMatchers } from '@emotion/jest';
 
 declare global {
   const TestTheme: GenericThemeShape;
 }
 
-declare module 'jest-emotion' {
-  interface Jest {
-    JestMatchers: EmotionMatchers;
-  }
+declare module '@emotion/jest' {
+    interface Jest {
+      JestMatchers: EmotionMatchers;
+    }
+
 }

.jest/setupFilesAfterEnv.js

@@ -1,4 +1,4 @@
-const {matchers: jestEmotionMatchers} = require('jest-emotion');
+const {matchers: jestEmotionMatchers} = require('@emotion/jest');
 require('@testing-library/jest-dom');
 const {toHaveNoViolations} = require('jest-axe');
 expect.extend(toHaveNoViolations);

.storybook/.babelrc

@@ -15,12 +15,23 @@
     "@babel/preset-react",
     "@babel/preset-typescript",
     [
+      /** [@emotion/babel-preset-css-prop]
+       * This preset is used to automatically enable Emotion’s css prop when using the classic JSX runtime.
+       * This plugin is configurable with all options from the following plugins:
+       *  - `babel-plugin-transform-react-jsx`: https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#options
+       * - `@emotion/babel-plugin`: https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin
+       *
+       * React 17 introduced new JSX Transformations, which you can read about here: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
+       * @NOTE If/when we adopt these new transformations, we should:
+       * 1. remove this preset
+       * 2. add the `@emotion/babel` plugin to our plugin section.
+       */
       "@emotion/babel-preset-css-prop",
       {
-        "sourceMap": "true",
-        "autoLabel": "true",
+        "sourceMap": true,
+        "autoLabel": "always",
         "labelFormat": "[local]",
-        "cssPropOptimization": "false"
+        "cssPropOptimization": false
       }
     ]
   ],

.storybook/main.js

@@ -38,6 +38,7 @@ module.exports = {
             'packages/paste-nextjs-template/**/*',
             'packages/paste-website/**/*',
             'packages/paste-cra-template/template/**/*',
+            '**/__tests__/**',
           ],
         },
       },
@@ -69,6 +70,9 @@ module.exports = {
     const customAlias = {
       'react-dom': path.resolve(__dirname, '../node_modules/react-dom/profiling'),
       'scheduler/tracing': 'scheduler/tracing-profiling',
+      '@emotion/core': path.resolve(__dirname, '../node_modules/@emotion/react'),
+      '@emotion/styled': path.resolve(__dirname, '../node_modules/@emotion/styled'),
+      'emotion-theming': path.resolve(__dirname, '../node_modules/@emotion/react'),
     };
     config.resolve.alias = config.resolve.alias == null ? customAlias : {...config.resolve.alias, ...customAlias};
 

babel.config.js

@@ -14,11 +14,21 @@ const getPresets = (isDev) => [
   '@babel/preset-react',
   '@babel/preset-typescript',
   [
-    // Automatically includes the 'emotion' preset.
+    /** [@emotion/babel-preset-css-prop]
+     * This preset is used to automatically enable Emotion’s css prop when using the classic JSX runtime.
+     * This plugin is configurable with all options from the following plugins:
+     *  - `babel-plugin-transform-react-jsx`: https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#options
+     * - `@emotion/babel-plugin`: https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin
+     *
+     * React 17 introduced new JSX Transformations, which you can read about here: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
+     * @NOTE If/when we adopt these new transformations, we should:
+     * 1. remove this preset
+     * 2. add the `@emotion/babel` plugin to our plugin section.
+     */
     '@emotion/babel-preset-css-prop',
     {
       sourceMap: isDev,
-      autoLabel: isDev,
+      autoLabel: 'dev-only',
       labelFormat: '[local]',
       cssPropOptimization: !isDev,
     },

jest.config.js

@@ -34,7 +34,7 @@ module.exports = {
   },
   extensionsToTreatAsEsm: ['.ts', '.tsx'],
   setupFilesAfterEnv: ['<rootDir>/.jest/setupFilesAfterEnv.js'],
-  snapshotSerializers: ['jest-emotion'],
+  snapshotSerializers: ['@emotion/jest/serializer'],
 };
 
 if (process.env.USE_REACT_16 === 'true') {

package.json

@@ -104,7 +104,10 @@
     "@changesets/cli": "^2.13.1",
     "@commitlint/cli": "16.2.1",
     "@commitlint/config-conventional": "16.2.1",
-    "@emotion/babel-preset-css-prop": "^10.0.14",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
+    "@emotion/css": "^11.9.0",
+    "@emotion/eslint-plugin": "^11.7.0",
+    "@emotion/jest": "^11.9.1",
     "@expo/spawn-async": "^1.5.0",
     "@manypkg/cli": "0.17.0",
     "@netlify/functions": "^0.7.2",
@@ -162,13 +165,11 @@
     "del": "^5.1.0",
     "directory-named-webpack-plugin": "^4.0.1",
     "dotenv": "^16.0.0",
-    "emotion": "10.0.27",
     "esbuild": "^0.14.14",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-typescript": "16.2.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-emotion": "10.0.27",
     "eslint-plugin-eslint-comments": "3.2.0",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jest": "26.1.3",
@@ -191,7 +192,6 @@
     "immutable": "^4.0.0-rc.12",
     "jest": "27.5.1",
     "jest-axe": "^4.1.0",
-    "jest-emotion": "^10.0.32",
     "lerna": "^4.0.0",
     "lodash": "^4.17.19",
     "lodash.camelcase": "^4.3.0",
@@ -233,10 +233,12 @@
     "webpack": "^5.70.0"
   },
   "resolutions": {
-    "@emotion/core": "10.0.28",
     "@storybook/react/webpack": "^5",
     "react-hot-loader": "^4.13.0",
-    "csstype": "^3.0.11"
+    "csstype": "^3.0.11",
+    "@emotion/core": "npm:@emotion/react@11.9.0",
+    "@emotion/css": "11.9.0",
+    "@storybook/theming/emotion-theming": "npm:@emotion/react@11.9.0"
   },
   "husky": {
     "hooks": {

packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx

@@ -64,30 +64,30 @@ describe('Alert Dialog `element` prop', () => {
 describe('Alert Dialog customization', () => {
   it('should apply styles to Alert Dialog', () => {
     const {container} = render(<CustomizedAlertDialog />);
-    expect(screen.getByTestId('alert_dialog')).toHaveStyleRule('background-color', 'rgb(255,241,179)');
+    expect(screen.getByTestId('alert_dialog')).toHaveStyleRule('background-color', 'rgb(255, 241, 179)');
     expect(container.querySelector('[data-paste-element="ALERT_DIALOG_HEADER_WRAPPER"]')).toHaveStyleRule(
       'border',
       'inherit'
     );
-    expect(screen.getByText('Alert Dialog')).toHaveStyleRule('background-color', 'rgb(235,244,255)');
+    expect(screen.getByText('Alert Dialog')).toHaveStyleRule('background-color', 'rgb(235, 244, 255)');
     expect(
       screen.getByText(
         'Are you sure you want to submit this application? No information can be changed after submitting.'
       )
-    ).toHaveStyleRule('background-color', 'rgb(237,253,243)');
+    ).toHaveStyleRule('background-color', 'rgb(237, 253, 243)');
     expect(container.querySelector('[data-paste-element="ALERT_DIALOG_FOOTER"]')).toHaveStyleRule(
       'padding-top',
       '1rem'
     );
   });
   it('should apply styles to Alert Dialog with custom element prop', () => {
     const {container} = render(<CustomizedDestructiveAlertDialog />);
-    expect(screen.getByTestId('destructive_alert_dialog')).toHaveStyleRule('background-color', 'rgb(214,31,31)');
+    expect(screen.getByTestId('destructive_alert_dialog')).toHaveStyleRule('background-color', 'rgb(214, 31, 31)');
     expect(container.querySelector('[data-paste-element="FOO_HEADER_WRAPPER"]')).toHaveStyleRule('border', 'inherit');
-    expect(screen.getByText('Alert Dialog')).toHaveStyleRule('background-color', 'rgb(235,244,255)');
+    expect(screen.getByText('Alert Dialog')).toHaveStyleRule('background-color', 'rgb(235, 244, 255)');
     expect(
       screen.getByText('Are you sure you want to delete this data? This action cannot be undone.')
-    ).toHaveStyleRule('background-color', 'rgb(237,253,243)');
+    ).toHaveStyleRule('background-color', 'rgb(237, 253, 243)');
     expect(container.querySelector('[data-paste-element="FOO_FOOTER"]')).toHaveStyleRule('padding-top', '1rem');
   });
 });

packages/paste-core/components/alert/__tests__/index.spec.tsx

@@ -152,15 +152,15 @@ describe('Alert', () => {
 
       const alert = screen.getByTestId('alert-customization');
 
-      expect(alert).toHaveStyleRule('background-color', 'rgb(244,244,246)');
-      expect(alert.querySelector('[data-paste-element="ALERT_ICON"]')).toHaveStyleRule('color', 'rgb(0,20,137)');
+      expect(alert).toHaveStyleRule('background-color', 'rgb(244, 244, 246)');
+      expect(alert.querySelector('[data-paste-element="ALERT_ICON"]')).toHaveStyleRule('color', 'rgb(0, 20, 137)');
       expect(alert.querySelector('[data-paste-element="ALERT_DISMISS_BUTTON"]')).toHaveStyleRule(
         'background-color',
-        'rgb(18,28,45)'
+        'rgb(18, 28, 45)'
       );
       expect(alert.querySelector('[data-paste-element="ALERT_DISMISS_ICON"]')).toHaveStyleRule(
         'color',
-        'rgb(255,255,255)'
+        'rgb(255, 255, 255)'
       );
     });
 
@@ -196,15 +196,15 @@ describe('Alert', () => {
       expect(alert.querySelector('[data-paste-element="MYALERT_DISMISS_BUTTON"]')).toBeInTheDocument();
       expect(alert.querySelector('[data-paste-element="MYALERT_DISMISS_ICON"]')).toBeInTheDocument();
 
-      expect(alert).toHaveStyleRule('background-color', 'rgb(244,244,246)');
-      expect(alert.querySelector('[data-paste-element="MYALERT_ICON"]')).toHaveStyleRule('color', 'rgb(0,20,137)');
+      expect(alert).toHaveStyleRule('background-color', 'rgb(244, 244, 246)');
+      expect(alert.querySelector('[data-paste-element="MYALERT_ICON"]')).toHaveStyleRule('color', 'rgb(0, 20, 137)');
       expect(alert.querySelector('[data-paste-element="MYALERT_DISMISS_BUTTON"]')).toHaveStyleRule(
         'background-color',
-        'rgb(18,28,45)'
+        'rgb(18, 28, 45)'
       );
       expect(alert.querySelector('[data-paste-element="MYALERT_DISMISS_ICON"]')).toHaveStyleRule(
         'color',
-        'rgb(255,255,255)'
+        'rgb(255, 255, 255)'
       );
     });
   });

packages/paste-core/components/anchor/__tests__/anchor.test.tsx

@@ -212,8 +212,8 @@ describe('Anchor', () => {
         </CustomizationProvider>
       );
       const renderedAnchor = screen.getByTestId('customizable-anchor');
-      expect(renderedAnchor).toHaveStyleRule('background-color', 'rgb(244,244,246)');
-      expect(renderedAnchor).toHaveStyleRule('border-color', 'rgb(214,31,31)');
+      expect(renderedAnchor).toHaveStyleRule('background-color', 'rgb(244, 244, 246)');
+      expect(renderedAnchor).toHaveStyleRule('border-color', 'rgb(214, 31, 31)');
     });
     it('should add custom styles to Anchor when a custom element data attribute is used', (): void => {
       render(
@@ -228,8 +228,8 @@ describe('Anchor', () => {
         </CustomizationProvider>
       );
       const renderedAnchor = screen.getByTestId('customizable-anchor');
-      expect(renderedAnchor).toHaveStyleRule('background-color', 'rgb(244,244,246)');
-      expect(renderedAnchor).toHaveStyleRule('border-color', 'rgb(214,31,31)');
+      expect(renderedAnchor).toHaveStyleRule('background-color', 'rgb(244, 244, 246)');
+      expect(renderedAnchor).toHaveStyleRule('border-color', 'rgb(214, 31, 31)');
     });
   });