Merge pull request #17640 from storybookjs/emotion11

Migration to Emotion 11
storybookjs · Apr 7, 2022 · 4418703 · 4418703
2 parents 1b0e934 + a263bf7
commit 4418703
Show file tree

Hide file tree

Showing 19 changed files with 1,015 additions and 591 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/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.58",
     "@storybook/angular": "6.5.0-alpha.58",
     "@storybook/react": "6.5.0-alpha.58",
@@ -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,12 +1,9 @@
 import path from 'path';
 import { mount } from 'enzyme';
-import { createSerializer as enzymeSerializer } from 'enzyme-to-json';
-import { createSerializer as emotionSerializer } from 'jest-emotion';
 import initStoryshots from '../dist/ts3.9';
 
 initStoryshots({
   framework: 'react',
   configPath: path.join(__dirname, '..', '.storybook'),
   renderer: mount,
-  snapshotSerializers: [enzymeSerializer(), emotionSerializer()],
 });
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
@@ -11,6 +11,7 @@
     "storyshots-puppeteer": "yarn run build-storybook && yarn run do-storyshots-puppeteer"
   },
   "devDependencies": {
+    "@emotion/jest": "^11.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@storybook/addon-a11y": "6.5.0-alpha.58",
     "@storybook/addon-actions": "6.5.0-alpha.58",
@@ -47,7 +48,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",