Update Emotion deps

storybookjs · Mar 6, 2022 · 50b1731 · 50b1731
1 parent 2430fe0
commit 50b1731
Show file tree

Hide file tree

Showing 15 changed files with 221 additions and 82 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -55,7 +55,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,
@@ -90,7 +90,7 @@ module.exports = {
         ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
         ['@babel/plugin-proposal-class-properties', { loose: true }],
         'babel-plugin-macros',
-        ['emotion', { sourceMap: true, autoLabel: true }],
+        ['@emotion', { sourceMap: true, autoLabel: 'always' }],
         'babel-plugin-add-react-displayname',
       ],
       env: {
@@ -125,7 +125,7 @@ module.exports = {
         ],
       ],
       plugins: [
-        'emotion',
+        '@emotion',
         'babel-plugin-macros',
         '@babel/plugin-transform-arrow-functions',
         '@babel/plugin-transform-shorthand-properties',

diff --git a/addons/docs/package.json b/addons/docs/package.json
@@ -103,8 +103,8 @@
   "devDependencies": {
     "@angular/core": "^11.2.14",
     "@babel/core": "^7.12.10",
-    "@emotion/core": "^10.3.1",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
     "@storybook/angular": "6.5.0-alpha.46",
     "@storybook/html": "6.5.0-alpha.46",
     "@storybook/mdx2-csf": "canary",

diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
@@ -69,6 +69,7 @@
   "devDependencies": {
     "@angular/core": "^11.2.0",
     "@angular/platform-browser-dynamic": "^11.2.0",
+    "@emotion/jest": "^11.8.0",
     "@storybook/addon-docs": "6.5.0-alpha.46",
     "@storybook/angular": "6.5.0-alpha.46",
     "@storybook/react": "6.5.0-alpha.46",
@@ -77,7 +78,6 @@
     "babel-loader": "^8.0.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.1",
-    "jest-emotion": "^10.0.32",
     "jest-preset-angular": "^8.3.2",
     "jest-vue-preprocessor": "^1.7.1",
     "rxjs": "^6.6.3",

diff --git a/addons/storyshots/storyshots-core/stories/storyshot.enzyme.test.js b/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/ts3.9';
 
 initStoryshots({

diff --git a/app/angular/src/server/framework-preset-angular-cli.test.ts b/app/angular/src/server/framework-preset-angular-cli.test.ts
@@ -797,9 +797,6 @@ const newWebpackConfiguration = (
       modules: ['node_modules'],
       mainFields: ['browser', 'main'],
       alias: {
-        '@emotion/core': '/Users/joe/storybook/node_modules/@emotion/core',
-        '@emotion/styled': '/Users/joe/storybook/node_modules/@emotion/styled',
-        'emotion-theming': '/Users/joe/storybook/node_modules/emotion-theming',
         '@storybook/addons': '/Users/joe/storybook/lib/addons',
         '@storybook/api': '/Users/joe/storybook/lib/api',
         '@storybook/channels': '/Users/joe/storybook/lib/channels',

diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
@@ -12,6 +12,7 @@
     "storyshots-puppeteer": "yarn run build-storybook && yarn run do-storyshots-puppeteer"
   },
   "devDependencies": {
+    "@emotion/jest": "^11.8.0",
     "@packtracker/webpack-plugin": "^2.3.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@storybook/addon-a11y": "6.5.0-alpha.46",
@@ -49,7 +50,6 @@
     "express": "^4.17.1",
     "format-json": "^1.0.3",
     "global": "^4.4.0",
-    "jest-emotion": "^10.0.32",
     "lodash": "^4.17.21",
     "paths.macro": "^3.0.1",
     "prop-types": "^15.7.2",

diff --git a/jest.config.js b/jest.config.js
@@ -85,7 +85,11 @@ module.exports = {
     PREVIEW_URL: undefined,
     SNAPSHOT_OS: os.platform() === 'win32' ? 'windows' : 'posix',
   },
-  snapshotSerializers: ['jest-emotion', 'enzyme-to-json/serializer', 'jest-serializer-html'],
+  snapshotSerializers: [
+    '@emotion/jest/serializer',
+    'enzyme-to-json/serializer',
+    'jest-serializer-html',
+  ],
   coverageDirectory: 'coverage',
   setupFilesAfterEnv: ['./scripts/jest.init.ts'],
   coverageReporters: ['lcov'],

diff --git a/lib/components/src/blocks/DocsPage.stories.tsx b/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 '@emotion/react';
 
 import { Title, Subtitle, DocsPageWrapper } from './DocsPage';
 import { ArgsTable, Source, Description } from './index';

diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-windows b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-windows
@@ -466,8 +466,6 @@ Object {
         "options": Object {
           "docgenOptions": Object {
             "alias": Object {
-              "@emotion/core": "NODE_MODULES\\\\@emotion\\\\core",
-              "@emotion/styled": "NODE_MODULES\\\\@emotion\\\\styled",
               "@storybook/addons": "ROOT\\\\lib\\\\addons",
               "@storybook/api": "ROOT\\\\lib\\\\api",
               "@storybook/channel-postmessage": "ROOT\\\\lib\\\\channel-postmessage",
@@ -481,7 +479,6 @@ Object {
               "@storybook/semver": "NODE_MODULES\\\\@storybook\\\\semver",
               "@storybook/store": "ROOT\\\\lib\\\\store",
               "@storybook/theming": "ROOT\\\\lib\\\\theming",
-              "emotion-theming": "NODE_MODULES\\\\emotion-theming",
               "react": "NODE_MODULES\\\\react",
               "react-dom": "NODE_MODULES\\\\react-dom",
               "vue$": "NODE_MODULES\\\\vue\\\\dist\\\\vue.esm-bundler.js",

diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-windows b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-windows
@@ -465,8 +465,6 @@ Object {
         "options": Object {
           "docgenOptions": Object {
             "alias": Object {
-              "@emotion/core": "NODE_MODULES\\\\@emotion\\\\core",
-              "@emotion/styled": "NODE_MODULES\\\\@emotion\\\\styled",
               "@storybook/addons": "ROOT\\\\lib\\\\addons",
               "@storybook/api": "ROOT\\\\lib\\\\api",
               "@storybook/channel-postmessage": "ROOT\\\\lib\\\\channel-postmessage",
@@ -480,7 +478,6 @@ Object {
               "@storybook/semver": "NODE_MODULES\\\\@storybook\\\\semver",
               "@storybook/store": "ROOT\\\\lib\\\\store",
               "@storybook/theming": "ROOT\\\\lib\\\\theming",
-              "emotion-theming": "NODE_MODULES\\\\emotion-theming",
               "react": "NODE_MODULES\\\\react",
               "react-dom": "NODE_MODULES\\\\react-dom",
               "vue$": "NODE_MODULES\\\\vue\\\\dist\\\\vue.esm-bundler.js",

diff --git a/lib/theming/package.json b/lib/theming/package.json
@@ -45,12 +45,11 @@
     "regenerator-runtime": "^0.13.7"
   },
   "devDependencies": {
-    "@emotion/core": "^10.3.1",
-    "@emotion/is-prop-valid": "^0.8.6",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/is-prop-valid": "^1.1.2",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
     "@types/node": "^14.14.20 || ^16.0.0",
     "deep-object-diff": "^1.1.0",
-    "emotion-theming": "^10.0.27",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.0.5",

diff --git a/lib/theming/src/animation.ts b/lib/theming/src/animation.ts
@@ -1,4 +1,4 @@
-import { css, keyframes, Keyframes, SerializedStyles } from '@emotion/core';
+import { css, keyframes, Keyframes, SerializedStyles } from '@emotion/react';
 
 export const easing = {
   rubber: 'cubic-bezier(0.175, 0.885, 0.335, 1.05)',

diff --git a/lib/theming/src/index.ts b/lib/theming/src/index.ts
@@ -1,20 +1,26 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="./typings.d.ts" />
 
-import emotionStyled, { CreateStyled } from '@emotion/styled';
-
-import { Theme } from './types';
+import emotionStyled from '@emotion/styled';
 
 export type { StyledComponent } from '@emotion/styled';
-export { Global, keyframes, css, jsx, ClassNames } from '@emotion/core';
-export type { CSSObject, Keyframes } from '@emotion/core';
-
-export const styled = emotionStyled as CreateStyled<Theme>;
+export {
+  Global,
+  keyframes,
+  css,
+  jsx,
+  ClassNames,
+  withTheme,
+  useTheme,
+  ThemeProvider,
+} from '@emotion/react';
+export type { CSSObject, Keyframes } from '@emotion/react';
+
+export const styled = emotionStyled;
 
 export * from './base';
 export * from './types';
 
-export { withTheme, useTheme, ThemeProvider } from 'emotion-theming';
 export { default as isPropValid } from '@emotion/is-prop-valid';
 
 export { createGlobal, createReset } from './global';

diff --git a/package.json b/package.json
@@ -120,7 +120,8 @@
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "^7.17.2",
     "@compodoc/compodoc": "^1.1.18",
-    "@emotion/snapshot-serializer": "^0.8.2",
+    "@emotion/babel-plugin": "^11.7.2",
+    "@emotion/jest": "^11.8.0",
     "@linear/sdk": "^1.21.0",
     "@nicolo-ribaudo/chokidar-2": "^2.1.8",
     "@nrwl/cli": "12.3.4",
@@ -215,7 +216,6 @@
     "babel-loader": "^8.0.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-emotion": "^10.0.33",
     "babel-plugin-macros": "^3.0.1",
     "chalk": "^4.1.0",
     "chromatic": "^6.0.2",
@@ -245,7 +245,6 @@
     "http-server": "^0.12.3",
     "husky": "^4.3.7",
     "jest": "^26.6.3",
-    "jest-emotion": "^10.0.32",
     "jest-environment-jsdom": "^26.6.2",
     "jest-environment-jsdom-thirteen": "^1.0.1",
     "jest-enzyme": "^7.1.2",