Merge pull request #51 from PocketDerm/update-jest-emotion

[Emotion v10] Finish upgrading all things to emotion 10
curology · Feb 14, 2019 · 648e2e3 · 648e2e3
2 parents 7a4661b + 3c79a0e
commit 648e2e3
Show file tree

Hide file tree

Showing 33 changed files with 309 additions and 265 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -2,9 +2,9 @@ module.exports = {
   presets: [
     '@babel/env',
     '@babel/react',
+    '@emotion/babel-preset-css-prop',
   ],
   plugins: [
-    'emotion',
     '@babel/plugin-proposal-export-namespace-from',
     '@babel/plugin-proposal-export-default-from',
     ['@babel/plugin-proposal-class-properties', { 'loose': true }],

diff --git a/docs/constants.md b/docs/constants.md
@@ -2,9 +2,10 @@
 ### Usage
 
 ```jsx
+import { css } from '@emotion/core';
 import { SPACING } from 'radiance-ui/lib/constants';
 
-<div css={`padding: ${SPACING.small}`}>Hello World!</div>
+<div css={css`padding: ${SPACING.small}`}>Hello World!</div>
 ```
 
 The following displays named imports and available values.

diff --git a/docs/typography.md b/docs/typography.md
@@ -29,7 +29,7 @@ designs specify that we do. In order to override the style, use the
 
 Using a `css` prop:
 ```jsx
-<Typography.Display css={ color: COLORS.failure }>
+<Typography.Display css={css`color: ${COLORS.failure};`}>
   Override!
 </Typography.Display>
 ```
diff --git a/docs/typography_style.md b/docs/typography_style.md
@@ -28,8 +28,6 @@ export const Container = styled.div`
 <div css={`TYPOGRAPHY_STYLE.button`}>button</div>
 ```
 
-**Note**: The above code uses [babel-emotion-plugin](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion) to write the `css` prop.
-
 <!-- STORY -->
 
 ### Proptypes

diff --git a/jest.config.js b/jest.config.js
@@ -1,6 +1,7 @@
 const { defaults } = require('jest-config');
 
 module.exports = {
+  snapshotSerializers: ['jest-emotion'],
   setupTestFrameworkScriptFile: "<rootDir>tests/setupTests.js",
   testPathIgnorePatterns: [...defaults.testPathIgnorePatterns, "/lib/"],
   moduleNameMapper: {

diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
+    "@emotion/babel-preset-css-prop": "^10.0.7",
     "@storybook/addon-actions": "^4.0.0",
     "@storybook/addon-info": "^4.0.0",
     "@storybook/addon-knobs": "^4.0.0",
@@ -68,10 +69,10 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.4",
-    "babel-plugin-emotion": "^9.2.11",
     "babel-plugin-transform-svg-import-to-string": "^0.0.1",
     "circular-dependency-plugin": "^5.0.2",
     "create-index": "PocketDerm/create-index#master",
+    "emotion": "^10.0.7",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
     "eslint": "^5.7.0",
@@ -108,7 +109,6 @@
   "dependencies": {
     "@emotion/core": "^10.0.6",
     "@emotion/styled": "^10.0.6",
-    "emotion": "^10.0.6",
     "prop-types": "^15.6.2",
     "react": "^16.6.0",
     "react-modal": "^3.8.1",

diff --git a/rollup.config.js b/rollup.config.js
@@ -23,10 +23,10 @@ export default {
       format: 'umd',
       name: 'radianceUi',
       globals: {
-        emotion: 'emotion',
+        '@emtion/styled': 'styled',
         'prop-types': 'PropTypes',
         react: 'React',
-        'react-emotion': 'styled',
+        '@emotion/core': '@emotion/core',
         tinycolor2: 'tinycolor',
       },
     },
@@ -54,10 +54,10 @@ export default {
     sizeSnapshot(),
   ],
   external: [
-    'emotion',
+    '@emotion/styled',
     'prop-types',
     'react',
-    'react-emotion',
+    '@emotion/core',
     'tinycolor2',
   ],
 };
diff --git a/src/.babelrc b/src/.babelrc
@@ -3,10 +3,8 @@
     ["@babel/env", {
       "modules": false
     }],
-    "@babel/react"
-  ],
-  "plugins": [
-    "emotion",
+    "@babel/react",
+    "@emotion/babel-preset-css-prop"
   ],
   "env": {
     "test": {

diff --git a/src/shared-components/alert/__snapshots__/test.js.snap b/src/shared-components/alert/__snapshots__/test.js.snap
@@ -65,12 +65,6 @@ exports[`Alert UI snapshots renders danger type and text 1`] = `
   }
 }
 
-.emotion-0 {
-  margin: 2.5px 1.5rem 0px 0px;
-  min-height: 1rem;
-  min-width: 1rem;
-}
-
 .emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -80,6 +74,12 @@ exports[`Alert UI snapshots renders danger type and text 1`] = `
   width: 100%;
 }
 
+.emotion-0 {
+  margin: 2.5px 1.5rem 0px 0px;
+  min-height: 1rem;
+  min-width: 1rem;
+}
+
 .emotion-3 {
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
@@ -249,12 +249,6 @@ exports[`Alert UI snapshots renders info type and text 1`] = `
   }
 }
 
-.emotion-0 {
-  margin: 2.5px 1.5rem 0px 0px;
-  min-height: 1rem;
-  min-width: 1rem;
-}
-
 .emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -264,6 +258,12 @@ exports[`Alert UI snapshots renders info type and text 1`] = `
   width: 100%;
 }
 
+.emotion-0 {
+  margin: 2.5px 1.5rem 0px 0px;
+  min-height: 1rem;
+  min-width: 1rem;
+}
+
 .emotion-3 {
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
@@ -367,12 +367,6 @@ exports[`Alert UI snapshots renders success type and text 1`] = `
   }
 }
 
-.emotion-0 {
-  margin: 2.5px 1.5rem 0px 0px;
-  min-height: 1rem;
-  min-width: 1rem;
-}
-
 .emotion-3 {
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
@@ -432,6 +426,12 @@ exports[`Alert UI snapshots renders success type and text 1`] = `
   width: 100%;
 }
 
+.emotion-0 {
+  margin: 2.5px 1.5rem 0px 0px;
+  min-height: 1rem;
+  min-width: 1rem;
+}
+
 <div
   className="emotion-3 emotion-4"
   onClick={[Function]}

diff --git a/src/shared-components/alert/index.js b/src/shared-components/alert/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { css } from '@emotion/core';
 
 import CheckmarkIcon from '../../svgs/icons/checkmark-icon.svg';
 import ErrorIcon from '../../svgs/icons/error-icon.svg';
@@ -82,7 +83,7 @@ class Alert extends React.Component {
       >
         <AlertContentContainer>
           <Icon
-            css={[alertIconStyles]}
+            css={css`${alertIconStyles};`}
             fill="currentColor"
           />
           {text}

diff --git a/src/shared-components/button/__snapshots__/test.js.snap b/src/shared-components/button/__snapshots__/test.js.snap
@@ -91,11 +91,7 @@ exports[`<Button /> UI snapshots renders with props 1`] = `
   }
 }
 
-.emotion-0 {
-  padding-top: 2px;
-}
-
-.emotion-7 {
+.emotion-6 {
   color: #5C5876;
   font-size: 0.75rem;
   line-height: 1.67;
@@ -134,23 +130,23 @@ exports[`<Button /> UI snapshots renders with props 1`] = `
   fill: #c3c0cd;
 }
 
-.emotion-7:hover {
+.emotion-6:hover {
   -webkit-transition: all 350ms ease-in-out;
   transition: all 350ms ease-in-out;
 }
 
-.emotion-7:active,
-.emotion-7:focus {
+.emotion-6:active,
+.emotion-6:focus {
   outline: none;
 }
 
-.emotion-7:visited,
-.emotion-7:hover {
+.emotion-6:visited,
+.emotion-6:hover {
   opacity: 1;
   color: #c3c0cd;
 }
 
-.emotion-3 {
+.emotion-2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -174,21 +170,22 @@ exports[`<Button /> UI snapshots renders with props 1`] = `
   transform: translateX(0);
 }
 
-.emotion-3 > svg {
+.emotion-2 > svg {
   opacity: 1;
   -webkit-transition: opacity 350ms;
   transition: opacity 350ms;
   margin-right: 1rem;
   margin-top: -5px;
 }
 
-.emotion-1 {
+.emotion-0 {
   line-height: 1.5;
   margin: 0;
   padding-top: 2px;
+  padding-top: 2px;
 }
 
-.emotion-5 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -210,37 +207,37 @@ exports[`<Button /> UI snapshots renders with props 1`] = `
   opacity: 0;
 }
 
-.emotion-5 span {
+.emotion-4 span {
   border-radius: 50%;
   display: inline-block;
   height: 4px;
   width: 4px;
   position: absolute;
 }
 
-.emotion-5 span:nth-of-type(1) {
+.emotion-4 span:nth-of-type(1) {
   -webkit-animation: animation-0 1750ms infinite linear;
   animation: animation-0 1750ms infinite linear;
 }
 
-.emotion-5 span:nth-of-type(2) {
+.emotion-4 span:nth-of-type(2) {
   -webkit-animation: animation-0 1750ms infinite linear -300ms;
   animation: animation-0 1750ms infinite linear -300ms;
 }
 
-.emotion-5 span:nth-of-type(3) {
+.emotion-4 span:nth-of-type(3) {
   -webkit-animation: animation-0 1750ms infinite linear -600ms;
   animation: animation-0 1750ms infinite linear -600ms;
 }
 
 <button
-  className="emotion-7 emotion-8"
+  className="emotion-6 emotion-7"
   disabled={true}
   onClick={[Function]}
   type="button"
 >
   <div
-    className="emotion-3 emotion-4"
+    className="emotion-2 emotion-3"
   >
     <<svg viewBox="0 0 14 14"
   xmlns="http://www.w3.org/2000/svg"
@@ -251,13 +248,13 @@ exports[`<Button /> UI snapshots renders with props 1`] = `
 </svg>
  />
     <span
-      className="emotion-0 emotion-1 emotion-2"
+      className="emotion-0 emotion-1"
     >
       Button Text
     </span>
   </div>
   <div
-    className="emotion-5 emotion-6"
+    className="emotion-4 emotion-5"
     disabled={true}
   >
     <div>