Upgrade to emotion 10 in pretty-proptypes (#81)

* Upgrade to emotion 10 in pretty-proptypes

* Change a thing back to how it was

Author: emmatown

.changeset/poor-beds-occur/changes.json

@@ -0,0 +1 @@
+{ "releases": [{ "name": "pretty-proptypes", "type": "major" }], "dependents": [] }

.changeset/poor-beds-occur/changes.md

@@ -0,0 +1 @@
+Upgrade to emotion 10. If you've been using emotion-server to server render this package, you can remove it now because server rendering will work without it.

package.json

@@ -40,6 +40,7 @@
     "@babel/runtime": "^7.4.4",
     "@babel/types": "^7.0.0-beta.56",
     "@changesets/cli": "^1.3.0",
+    "@emotion/core": "^10.0.14",
     "ast-pretty-print": "^2.0.1",
     "babel-errors": "^1.1.1",
     "babel-eslint": "^10.0.1",
@@ -53,7 +54,6 @@
     "babel-type-scopes": "^1.1.0",
     "babylon": "^7.0.0-beta.22",
     "babylon-options": "^2.0.1",
-    "emotion": "^9.1.1",
     "eslint": "^5.13.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^4.0.0",
@@ -74,16 +74,8 @@
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "babel-cli": "^6.26.0",
     "babel-jest": "^24.7.1",
-    "babel-plugin-emotion": "^9.1.0",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-flow": "^6.23.0",
-    "babel-preset-react": "^6.24.1",
+    "babel-plugin-emotion": "^10.0.14",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "flow-bin": "^0.98.0",

packages/pretty-proptypes/package.json

@@ -15,23 +15,14 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.4.4",
-    "emotion": "^9.1.1",
+    "@emotion/core": "^10.0.14",
     "kind2string": "^0.6.2",
     "react-markings": "^1.2.0"
   },
   "files": [
     "dist"
   ],
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-plugin-emotion": "^9.1.0",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-flow": "^6.23.0",
-    "babel-preset-react": "^6.24.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "extract-react-types": "^0.21.0",
@@ -43,4 +34,4 @@
   "peerDependencies": {
     "react": ">=16"
   }
-}
+}

packages/pretty-proptypes/src/PrettyConvert/AddBrackets.js

@@ -1,5 +1,7 @@
 // @flow
-import React, { Component, Fragment, type Node } from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { Component, Fragment, type Node } from 'react';
 import { colors } from '../components/constants';
 
 const StateBit = ({
@@ -18,7 +20,7 @@ const StateBit = ({
   <button
     type="button"
     onClick={onClick}
-    css={`
+    css={css`
       background-color: ${isHovered ? colors.P300 : colors.N20};
       color: ${isHovered ? 'white' : colors.subtleText};
       border: 0;

packages/pretty-proptypes/src/PrettyConvert/Toggle.js

@@ -1,5 +1,7 @@
 // @flow
-import React, { Component, type Node, type ElementRef } from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { Component, type Node, type ElementRef } from 'react';
 
 const Collapse = ({
   height,
@@ -13,7 +15,7 @@ const Collapse = ({
 }) => (
   <div
     ref={innerRef}
-    css={`
+    css={css`
       height: ${isCollapsed ? 0 : `${height}px`};
       overflow: hidden;
       transition: height 260ms cubic-bezier(0.2, 0, 0, 1);

packages/pretty-proptypes/src/PrettyConvert/index.js

@@ -1,5 +1,7 @@
 // @flow
-import React, { Component, type Node } from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { Component, type Node } from 'react';
 import { resolveFromGeneric } from 'kind2string';
 import { gridSize } from '../components/constants';
 import allComponents, { type Components } from '../components';
@@ -8,7 +10,7 @@ import prettyConvert, { SIMPLE_TYPES } from './converters';
 
 const Wrapper = (props: { children: Node }) => (
   <code
-    css={`
+    css={css`
       display: inline-block;
       font-size: 0.8rem;
       line-height: 1.4;

packages/pretty-proptypes/src/Prop/Heading.js

@@ -1,10 +1,12 @@
 // @flow
-import React, { type Node } from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { type Node } from 'react';
 import { colors, gridSize, borderRadius } from '../components/constants';
 
 const Heading = ({ children, ...rest }: { children: Node }) => (
   <h3
-    css={`
+    css={css`
       border-bottom: 2px solid ${colors.N20};
       font-size: 0.9rem;
       font-weight: normal;
@@ -20,7 +22,7 @@ const Heading = ({ children, ...rest }: { children: Node }) => (
 
 const HeadingDefault = (props: { children: Node }) => (
   <code
-    css={`
+    css={css`
       color: ${colors.subtleText};
     `}
     {...props}
@@ -29,7 +31,7 @@ const HeadingDefault = (props: { children: Node }) => (
 
 const HeadingRequired = (props: { children: Node }) => (
   <code
-    css={`
+    css={css`
       color: ${colors.R500};
     `}
     {...props}
@@ -38,7 +40,7 @@ const HeadingRequired = (props: { children: Node }) => (
 
 const HeadingType = (props: { children: Node }) => (
   <code
-    css={`
+    css={css`
       background: ${colors.N20};
       border-radius: ${borderRadius}px;
       color: ${colors.N300};
@@ -51,7 +53,7 @@ const HeadingType = (props: { children: Node }) => (
 
 const HeadingName = (props: { children: Node }) => (
   <code
-    css={`
+    css={css`
       background: ${colors.B50};
       color: ${colors.B500};
       border-radius: ${borderRadius}px;

packages/pretty-proptypes/src/Prop/index.js

@@ -1,5 +1,7 @@
 // @flow
-import React, { Component, type ComponentType, type Node } from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { Component, type ComponentType, type Node } from 'react';
 import md from 'react-markings';
 import { gridSize } from '../components/constants';
 import PrettyPropType from '../PrettyConvert';
@@ -8,7 +10,7 @@ import type { CommonProps } from '../types';
 
 const PropTypeWrapper = (props: { children: Node }) => (
   <div
-    css={`
+    css={css`
       margin-top: ${gridSize * 4}px;
     `}
     {...props}

packages/pretty-proptypes/src/Props/Wrapper.js

@@ -1,10 +1,12 @@
 // @flow
-import React, { type Node } from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { type Node } from 'react';
 import { gridSize } from '../components/constants';
 
 const Wrapper = (props: { children: Node }) => (
   <div
-    css={`
+    css={css`
       margin-top: ${gridSize * 1.5}px;
 
       @media (min-width: 780px) {
@@ -18,7 +20,7 @@ const Wrapper = (props: { children: Node }) => (
 
 const H2 = ({ children, ...rest }: { children: Node }) => (
   <h2
-    css={`
+    css={css`
       margintop: 1em;
     `}
     {...rest}

packages/pretty-proptypes/src/components/Button.js

@@ -1,10 +1,11 @@
 // @flow
-import React from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 
 const Button = (props: { isCollapsed: boolean }) => (
   <button
     type="button"
-    css={`
+    css={css`
       background: linear-gradient(to bottom, #1f8be6 0%, #1178ce 100%) #1385e5;
       border-width: 1px;
       border-style: solid;

packages/pretty-proptypes/src/components/Description.js

@@ -1,12 +1,14 @@
 // @flow
-import React, { type Node } from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { type Node } from 'react';
 
 const ReadmeDescription = (props: { children: Node }) =>
   typeof props.children === 'string' ? (
     <p {...props} />
   ) : (
     <div
-      css={`
+      css={css`
         margin-top: 12px;
       `}
       {...props}

packages/pretty-proptypes/src/components/Indent.js

@@ -1,10 +1,12 @@
 // @flow
-import React, { type Node } from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { type Node } from 'react';
 
 export default function Indent(props: { children: Node }) {
   return (
     <div
-      css={`
+      css={css`
         padding-left: 1.3em;
       `}
       {...props}

packages/pretty-proptypes/src/components/Outline.js

@@ -1,10 +1,12 @@
 // @flow
-import React, { type Node } from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { type Node } from 'react';
 import { colors } from './constants';
 
 const Outline = (props: { children: Node }) => (
   <span
-    css={`
+    css={css`
       color: ${colors.subtleText};
       line-height: 1;
     `}

packages/pretty-proptypes/src/components/Required.js

@@ -1,10 +1,12 @@
 // @flow
-import React, { type Node } from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { type Node } from 'react';
 import { colors } from './constants';
 
 const Required = (props: { children: Node }) => (
   <span
-    css={`
+    css={css`
       color: ${colors.R500};
     `}
     {...props}

packages/pretty-proptypes/src/components/Type.js

@@ -1,6 +1,7 @@
 // @flow
-import React, { type Node } from 'react';
-import { css } from 'emotion';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { type Node } from 'react';
 import { borderRadius, colors } from './constants';
 
 const baseType = css`
@@ -26,13 +27,13 @@ const stringType = css`
 
 const functionType = css``;
 
-const Type = (props: { children: Node }) => <span className={baseType} {...props} />;
+const Type = (props: { children: Node }) => <span css={baseType} {...props} />;
 
-const TypeMeta = (props: { children: Node }) => <span className={typeMeta} {...props} />;
+const TypeMeta = (props: { children: Node }) => <span css={typeMeta} {...props} />;
 
-const StringType = (props: { children: Node }) => <span className={stringType} {...props} />;
+const StringType = (props: { children: Node }) => <span css={stringType} {...props} />;
 
-const FunctionType = (props: { children: Node }) => <span className={functionType} {...props} />;
+const FunctionType = (props: { children: Node }) => <span css={functionType} {...props} />;
 
 export { TypeMeta, StringType, FunctionType };
 export default Type;