Core: upgrade emotion

.babelrc.js

@@ -36,7 +36,7 @@ module.exports = {
     '@babel/plugin-syntax-dynamic-import',
     ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
     'babel-plugin-macros',
-    ['emotion', { sourceMap: true, autoLabel: true }],
+    ['@emotion', { sourceMap: true, autoLabel: 'always' }],
   ],
   env: {
     test: withTests,
@@ -61,7 +61,7 @@ module.exports = {
         '@babel/plugin-syntax-dynamic-import',
         ['@babel/plugin-proposal-class-properties', { loose: true }],
         'babel-plugin-macros',
-        ['emotion', { sourceMap: true, autoLabel: true }],
+        '@emotion',
         'babel-plugin-add-react-displayname',
       ],
       env: {

addons/a11y/src/components/Report/Item.tsx

@@ -19,7 +19,7 @@ const Wrapper = styled.div<{}>(({ theme }) => ({
   },
 }));
 
-const Icon = styled<any, any>(Icons)(({ theme }) => ({
+const Icon = styled<any>(Icons)(({ theme }) => ({
   height: 10,
   width: 10,
   minWidth: 10,

addons/actions/src/components/ActionLogger/index.tsx

@@ -7,7 +7,7 @@ import { ActionBar, ScrollArea } from '@storybook/components';
 import { Action, InspectorContainer, Counter } from './style';
 import { ActionDisplay } from '../../models';
 
-export const Wrapper = styled(({ children, className }) => (
+export const Wrapper = styled(({ children, className }: any) => (
   <ScrollArea horizontal vertical className={className}>
     {children}
   </ScrollArea>

addons/docs/package.json

@@ -19,13 +19,6 @@
   "license": "MIT",
   "main": "dist/public_api.js",
   "types": "dist/public_api.d.ts",
-  "typesVersions": {
-    "<3.8": {
-      "*": [
-        "ts3.4/*"
-      ]
-    }
-  },
   "files": [
     "dist/**/*",
     "angular/**/*",
@@ -90,8 +83,8 @@
   "devDependencies": {
     "@angular/core": "^11.0.0",
     "@babel/core": "^7.12.3",
-    "@emotion/core": "^10.1.1",
-    "@emotion/styled": "^10.0.23",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
     "@storybook/react": "6.1.6",
     "@storybook/vue": "6.1.6",
     "@storybook/web-components": "6.1.6",
@@ -154,5 +147,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1f89b5b967974abd3badb3b63d88303dfee4467b"
+  "gitHead": "1f89b5b967974abd3badb3b63d88303dfee4467b",
+  "typesVersions": {
+    "<3.8": {
+      "*": [
+        "ts3.4/*"
+      ]
+    }
+  }
 }

addons/jest/src/components/Panel.tsx

@@ -41,7 +41,7 @@ const SuiteHead = styled.div({
   marginTop: 15,
 });
 
-const SuiteTotals = styled(({ result, className, width }) => (
+const SuiteTotals = styled(({ result, className, width }: any) => (
   <div className={className}>
     <Fragment>
       {width > 325 && result.assertionResults ? (

addons/jest/src/components/Result.tsx

@@ -29,7 +29,7 @@ const HeaderBar = styled.div<{ status: string }>(({ theme, status }) => ({
   },
 }));
 
-const Icon = styled<any, any>(Icons)(({ theme }) => ({
+const Icon = styled<any>(Icons)(({ theme }) => ({
   height: 10,
   width: 10,
   minWidth: 10,

addons/knobs/src/components/Panel.tsx

@@ -25,7 +25,7 @@ const getTimestamp = () => +new Date();
 
 export const DEFAULT_GROUP_ID = 'Other';
 
-const PanelWrapper = styled(({ children, className }) => (
+const PanelWrapper = styled(({ children, className }: any) => (
   <ScrollArea horizontal vertical className={className}>
     {children}
   </ScrollArea>

addons/knobs/src/components/types/Options.tsx

@@ -48,7 +48,7 @@ export interface OptionsTypeProps<T extends OptionsTypeKnobValue> extends KnobCo
   display: OptionsKnobOptionsDisplay;
 }
 
-const OptionsSelect = styled(ReactSelect)({
+const OptionsSelect = styled<any>(ReactSelect)({
   width: '100%',
   maxWidth: '300px',
   color: 'black',

addons/storyshots/storyshots-core/package.json

@@ -18,13 +18,6 @@
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "typesVersions": {
-    "<3.8": {
-      "*": [
-        "ts3.4/*"
-      ]
-    }
-  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -58,12 +51,12 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@emotion/jest": "11.0.0",
     "@storybook/addon-docs": "6.1.6",
     "@storybook/react": "6.1.6",
     "babel-loader": "^8.0.6",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.4.1",
-    "jest-emotion": "^10.0.17",
     "jest-preset-angular": "^8.3.2",
     "jest-vue-preprocessor": "^1.5.0"
   },
@@ -98,5 +91,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1f89b5b967974abd3badb3b63d88303dfee4467b"
+  "gitHead": "1f89b5b967974abd3badb3b63d88303dfee4467b",
+  "typesVersions": {
+    "<3.8": {
+      "*": [
+        "ts3.4/*"
+      ]
+    }
+  }
 }

addons/storyshots/storyshots-core/stories/storyshot.enzyme.test.js

@@ -1,7 +1,7 @@
 import path from 'path';
 import { mount } from 'enzyme';
 import { createSerializer as enzymeSerializer } from 'enzyme-to-json';
-import { createSerializer as emotionSerializer } from 'jest-emotion';
+import { createSerializer as emotionSerializer } from '@emotion/jest';
 import initStoryshots from '../dist';
 
 initStoryshots({

examples/official-storybook/main.ts

@@ -64,7 +64,7 @@ module.exports = {
                   '@babel/plugin-proposal-object-rest-spread',
                   '@babel/plugin-proposal-class-properties',
                   '@babel/plugin-syntax-dynamic-import',
-                  ['babel-plugin-emotion', { sourceMap: true, autoLabel: true }],
+                  ['@emotion', { sourceMap: true, autoLabel: 'always' }],
                   'babel-plugin-macros',
                   'babel-plugin-add-react-displayname',
                   [

examples/official-storybook/package.json

@@ -13,6 +13,7 @@
     "storyshots-puppeteer": "yarn run build-storybook && yarn run do-storyshots-puppeteer"
   },
   "devDependencies": {
+    "@emotion/jest": "11.0.0",
     "@packtracker/webpack-plugin": "^2.0.1",
     "@storybook/addon-a11y": "6.1.6",
     "@storybook/addon-actions": "6.1.6",
@@ -51,7 +52,6 @@
     "format-json": "^1.0.3",
     "global": "^4.3.2",
     "graphql": "^15.0.0",
-    "jest-emotion": "^10.0.17",
     "lodash": "^4.17.15",
     "paths.macro": "^2.0.2",
     "prop-types": "^15.7.2",

jest.config.js

@@ -78,7 +78,7 @@ module.exports = {
     DOCS_MODE: false,
     PREVIEW_URL: undefined,
   },
-  snapshotSerializers: ['jest-emotion', 'enzyme-to-json/serializer', 'jest-serializer-html'],
+  snapshotSerializers: ['@emotion/jest', 'enzyme-to-json/serializer', 'jest-serializer-html'],
   coverageDirectory: 'coverage',
   setupFilesAfterEnv: ['./scripts/jest.init.ts'],
   coverageReporters: ['lcov'],

lib/components/src/bar/bar.tsx

@@ -35,7 +35,7 @@ const Side = styled.div<SideProps>(
 );
 Side.displayName = 'Side';
 
-export const Bar = styled(({ children, className }) => (
+export const Bar = styled(({ children, className }: any) => (
   <ScrollArea horizontal vertical={false} className={className}>
     {children}
   </ScrollArea>

lib/components/src/blocks/DocsPage.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Global, css } from '@emotion/core';
+import { Global, css } from '@storybook/theming';
 
 import { Title, Subtitle, DocsPageWrapper } from './DocsPage';
 import { ArgsTable, Source, Description } from './index';

lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx

@@ -75,7 +75,7 @@ const Wrapper = styled.div<WrapperProps>(
       : {}
 );
 
-const Scroller = styled(({ children, className }) => (
+const Scroller = styled(({ children, className }: any) => (
   <ScrollArea horizontal vertical className={className}>
     {children}
   </ScrollArea>

lib/core/src/server/common/babel.ts

@@ -47,7 +47,7 @@ export const babelConfig: () => TransformOptions = () => {
     presets: [...presets],
     plugins: [
       ...plugins,
-      [require.resolve('babel-plugin-emotion'), { sourceMap: true, autoLabel: true }],
+      [require.resolve('@emotion/babel-plugin'), { sourceMap: true, autoLabel: 'always' }],
     ],
   };
 };

lib/theming/package.json

@@ -17,13 +17,6 @@
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "typesVersions": {
-    "<3.8": {
-      "*": [
-        "ts3.4/*"
-      ]
-    }
-  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -35,13 +28,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@emotion/core": "^10.1.1",
-    "@emotion/is-prop-valid": "^0.8.6",
-    "@emotion/styled": "^10.0.23",
+    "@emotion/is-prop-valid": "^1.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/serialize": "^1.0.0",
+    "@emotion/styled": "^11.0.0",
     "@storybook/client-logger": "6.1.6",
     "core-js": "^3.0.1",
     "deep-object-diff": "^1.1.0",
-    "emotion-theming": "^10.0.19",
     "global": "^4.3.2",
     "memoizerific": "^1.11.3",
     "polished": "^3.4.4",
@@ -55,5 +48,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1f89b5b967974abd3badb3b63d88303dfee4467b"
+  "gitHead": "1f89b5b967974abd3badb3b63d88303dfee4467b",
+  "typesVersions": {
+    "<3.8": {
+      "*": [
+        "ts3.4/*"
+      ]
+    }
+  }
 }

lib/theming/paths.js

@@ -6,7 +6,6 @@ const resolve = resolveFrom.bind(null, __dirname);
 // These paths need to be aliased in the manager webpack config to ensure that all
 // code running inside the manager uses the *same* versions of each package.
 module.exports = {
-  '@emotion/core': dirname(resolve('@emotion/core/package.json')),
+  '@emotion/react': dirname(resolve('@emotion/react/package.json')),
   '@emotion/styled': dirname(resolve('@emotion/styled/package.json')),
-  'emotion-theming': dirname(resolve('emotion-theming/package.json')),
 };

lib/theming/src/animation.ts

@@ -1,4 +1,5 @@
-import { css, keyframes } from '@emotion/core';
+import { css, keyframes } from '@emotion/react';
+import { Keyframes, SerializedStyles } from '@emotion/serialize';
 
 export const easing = {
   rubber: 'cubic-bezier(0.175, 0.885, 0.335, 1.05)',
@@ -51,7 +52,16 @@ const hoverable = css`
   }
 `;
 
-export const animation = {
+interface Animation {
+  rotate360: Keyframes;
+  glow: Keyframes;
+  float: Keyframes;
+  jiggle: Keyframes;
+  inlineGlow: SerializedStyles;
+  hoverable: SerializedStyles;
+}
+
+export const animation: Animation = {
   rotate360,
   glow,
   float,

lib/theming/src/convert.ts

@@ -1,7 +1,7 @@
 import { opacify } from 'polished';
-
+import { Theme } from '@emotion/react';
 import { background, typography, color } from './base';
-import { Theme, Color, ThemeVars } from './types';
+import { Color, ThemeVars } from './types';
 import { easing, animation } from './animation';
 import { create as createSyntax, chromeLight, chromeDark } from './modules/syntax';
 import { getPreferredColorScheme } from './utils';

lib/theming/src/ensure.ts

@@ -1,10 +1,11 @@
 import { logger } from '@storybook/client-logger';
+import { Theme } from '@emotion/react';
 
 import { deletedDiff } from 'deep-object-diff';
 import dedent from 'ts-dedent';
 
 import light from './themes/light';
-import { Theme, ThemeVars } from './types';
+import { ThemeVars } from './types';
 import { convert } from './convert';
 
 export const ensure = (input: ThemeVars): Theme => {

lib/theming/src/index.ts

@@ -1,13 +1,11 @@
 import emotionStyled, { CreateStyled } from '@emotion/styled';
-import { Theme } from './types';
 
-export const styled = emotionStyled as CreateStyled<Theme>;
+export const styled = emotionStyled as CreateStyled;
 
 export * from './base';
 export * from './types';
 
-export * from '@emotion/core';
-export * from 'emotion-theming';
+export * from '@emotion/react';
 export { default as isPropValid } from '@emotion/is-prop-valid';
 
 export { createGlobal, createReset } from './global';