Replacing glam with emotion

JedWatson · Apr 24, 2018 · 3fa147d · 3fa147d
1 parent ec76e1d
commit 3fa147d
Show file tree

Hide file tree

Showing 27 changed files with 1,252 additions and 1,790 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,5 +1,9 @@
 {
-  "plugins": ["transform-class-properties", "transform-object-rest-spread"],
+  "plugins": [
+    "emotion",
+    "transform-class-properties",
+    "transform-object-rest-spread"
+  ],
   "presets": ["env", "react"],
   "ignore": ["node_modules"],
   "env": {

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,7 +14,6 @@ module.exports = {
         argsIgnorePattern: '^event$',
         ignoreRestSiblings: true,
         vars: 'all',
-        varsIgnorePattern: '^glam$',
       },
     ],
     curly: [2, 'multi-line'],

diff --git a/docs/App/Footer.js b/docs/App/Footer.js
@@ -1,7 +1,5 @@
 // @flow
-// @jsx glam
 
-import glam from 'glam';
 import React from 'react';
 
 // const smallDevice = '@media (max-width: 769px)';

diff --git a/docs/App/GitHubButton.js b/docs/App/GitHubButton.js
@@ -1,7 +1,5 @@
 // @flow
-// @jsx glam
 
-import glam from 'glam';
 import React from 'react';
 
 type Props = { count: number, repo: string };

diff --git a/docs/App/Header.js b/docs/App/Header.js
@@ -1,7 +1,5 @@
 // @flow
-// @jsx glam
 
-import glam from 'glam';
 import fetch from 'unfetch';
 import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
@@ -51,23 +49,39 @@ function getLabel({ icon, label }) {
   );
 }
 
-const Gradient = ({ css, innerRef, style, ...props }) => (
+const headerSelectStyles = {
+  control: (base, { isFocused }) => ({
+    ...base,
+    backgroundClip: 'padding-box',
+    borderColor: 'rgba(0,0,0,0.1)',
+    boxShadow: isFocused ? '0 0 0 1px #4C9AFF' : null,
+
+    ':hover': {
+      borderColor: 'rgba(0,0,0,0.2)',
+    },
+  }),
+  option: base => ({
+    ...base,
+    padding: '4px 12px',
+  }),
+  placeholder: base => ({
+    ...base,
+    color: 'black',
+  }),
+};
+
+const Gradient = props => (
   <div
     css={{
       backgroundColor: '#2684FF',
+      backgroundImage: 'linear-gradient(135deg, #2684FF 0%, #0747A6 100%)',
       color: 'white',
       position: 'relative',
       zIndex: 2,
 
       [largeDevice]: {
         boxShadow: '0 5px 0 rgba(0, 0, 0, 0.08)',
       },
-      ...css,
-    }}
-    ref={innerRef}
-    style={{
-      backgroundImage: 'linear-gradient(135deg, #2684FF 0%, #0747A6 100%)',
-      ...style,
     }}
     {...props}
   />
@@ -198,6 +212,7 @@ const Collapse = ({ height, isCollapsed, innerRef, ...props }) => {
     />
   );
 };
+
 const Content = ({ onChange, stars }) => (
   <div
     css={{
@@ -242,26 +257,7 @@ const Content = ({ onChange, stars }) => (
           onChange={onChange}
           value={null}
           placeholder="🎉 What's new in V2"
-          styles={{
-            control: (css, { isFocused }) => ({
-              ...css,
-              backgroundClip: 'padding-box',
-              borderColor: 'rgba(0,0,0,0.1)',
-              boxShadow: isFocused ? '0 0 0 1px #4C9AFF' : null,
-
-              ':hover': {
-                borderColor: 'rgba(0,0,0,0.2)',
-              },
-            }),
-            option: css => ({
-              ...css,
-              padding: '4px 12px',
-            }),
-            placeholder: css => ({
-              ...css,
-              color: 'black',
-            }),
-          }}
+          styles={headerSelectStyles}
         />
       </div>
     </div>

diff --git a/docs/App/PageNav.js b/docs/App/PageNav.js
@@ -1,7 +1,5 @@
 // @flow
-// @jsx glam
 
-import glam from 'glam';
 import React, { Component, type ElementRef } from 'react';
 import { Route, Switch } from 'react-router-dom';
 

diff --git a/docs/App/ScrollSpy.js b/docs/App/ScrollSpy.js
@@ -1,7 +1,5 @@
 // @flow
-// @jsx glam
 
-import glam from 'glam';
 import React, {
   Component,
   type ElementRef,
@@ -11,9 +9,8 @@ import rafSchedule from 'raf-schd';
 import NodeResolver from 'react-node-resolver';
 
 type Props = {
-  children: ReactElement<*>, // Component | Element
+  children: ReactElement<*>,
   onChange: (Array<any>) => void,
-  query: '[data-hash]',
 };
 type State = {
   elements: Array<HTMLElement>,

diff --git a/docs/App/Sticky.js b/docs/App/Sticky.js
@@ -1,7 +1,5 @@
 // @flow
-// @jsx glam
 
-import glam from 'glam';
 import React, {
   Component,
   type ElementRef,

diff --git a/docs/App/TwitterButton.js b/docs/App/TwitterButton.js
@@ -1,7 +1,5 @@
 // @flow
-// @jsx glam
 
-import glam from 'glam';
 import React from 'react';
 
 const TwitterButton = () => (

diff --git a/docs/App/components.js b/docs/App/components.js
@@ -1,7 +1,5 @@
 // @flow
-// @jsx glam
 
-import glam from 'glam';
 import React, { Component } from 'react';
 import { Link, withRouter } from 'react-router-dom';
 

diff --git a/docs/App/index.js b/docs/App/index.js
@@ -1,7 +1,5 @@
 // @flow
-// @jsx glam
 
-import glam from 'glam';
 import React, { Component, Fragment } from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { Helmet } from 'react-helmet';

diff --git a/docs/ExampleWrapper.js b/docs/ExampleWrapper.js
@@ -1,6 +1,3 @@
-// @jsx glam
-
-import glam from 'glam';
 import React, { Component } from 'react';
 import CodeSandboxer from 'react-codesandboxer';
 import { replaceImports } from 'codesandboxer';
@@ -26,7 +23,7 @@ const sourceUrl = `https://github.com/${gitInfo.account}/react-select/tree/${
 }`;
 
 export default class ExampleWrapper extends Component {
-  state = { isHovered: false, showCode: false, };
+  state = { isHovered: false, showCode: false };
   static defaultProps = { isEditable: true };
   handleEnter = () => this.setState({ isHovered: true });
   handleLeave = () => this.setState({ isHovered: false });
@@ -52,7 +49,7 @@ export default class ExampleWrapper extends Component {
         />
       );
     }
-  }
+  };
 
   renderSourceViewOption = () => {
     let { raw } = this.props;
@@ -79,7 +76,7 @@ export default class ExampleWrapper extends Component {
         </Action>
       );
     }
-  }
+  };
 
   renderCSBButton = () => {
     let { isEditable, raw, urlPath } = this.props;
@@ -106,7 +103,7 @@ export default class ExampleWrapper extends Component {
     } else {
       return null;
     }
-  }
+  };
 
   render() {
     const { isHovered } = this.state;

diff --git a/docs/Svg.js b/docs/Svg.js
@@ -1,6 +1,3 @@
-// @jsx glam
-
-import glam from 'glam';
 import React from 'react';
 
 const Svg = ({ size, ...props }: { size: number }) => (

diff --git a/docs/markdown/renderer.js b/docs/markdown/renderer.js
@@ -1,6 +1,3 @@
-// @jsx glam
-
-import glam from 'glam';
 import React from 'react';
 import md from 'react-markings';
 import { Link as RRLink } from 'react-router-dom';
@@ -40,16 +37,6 @@ function slugify(str: string): string {
   return str.replace(/\W/g, '-').toLowerCase();
 }
 
-const Anchor = props => (
-  <RRLink
-    css={{
-      color: 'inherit',
-      textDecoration: 'none',
-    }}
-    {...props}
-  />
-);
-
 // ==============================
 // Renderers
 // ==============================
@@ -113,16 +100,18 @@ const Heading = props => {
 
   return linkify ? (
     <Tag id={slug} css={css}>
-      <Anchor
+      <RRLink
         to={`#${slug}`}
         css={{
+          color: 'inherit',
           position: 'relative',
+          textDecoration: 'none',
           '&:hover > svg': { opacity: 1, transitionDelay: '300ms' },
         }}
       >
         <Chain />
         {children}
-      </Anchor>
+      </RRLink>
     </Tag>
   ) : (
     <Tag css={css}>{children}</Tag>

diff --git a/docs/pages/styles/index.js b/docs/pages/styles/index.js
@@ -6,20 +6,20 @@ import { StyledSingle, StyledMulti } from '../../examples';
 
 export default function Styles() {
   return (
-  <Fragment>
-    <Helmet>
-      <title>Styles - React Select</title>
-      <meta
-        name="description"
-        content="React-Select offers a flexible, light-weight styling framework which is a thin abstraction over simple javascript objects"
-      />
-    </Helmet>
-    {md`
+    <Fragment>
+      <Helmet>
+        <title>Styles - React Select</title>
+        <meta
+          name="description"
+          content="React-Select offers a flexible, light-weight styling framework which is a thin abstraction over simple javascript objects"
+        />
+      </Helmet>
+      {md`
     # Styles
 
     React-Select offers a flexible, light-weight styling framework which is
     a thin abstraction over simple javascript objects using
-    [glam](https://github.com/threepointone/glam).
+    [emotion](https://emotion.sh/).
 
     ~~~jsx
     /**
@@ -91,7 +91,7 @@ export default function Styles() {
           urlPath="docs/examples/StyledSingle.js"
           raw={require('!!raw-loader!../../examples/StyledSingle.js')}
         >
-          <StyledSingle/>
+          <StyledSingle />
         </ExampleWrapper>
       )}
 
@@ -100,8 +100,8 @@ export default function Styles() {
           label="Customised styles for Multi Select"
           urlPath="docs/examples/StyledMulti.js"
           raw={require('!!raw-loader!../../examples/StyledMulti.js')}
-          >
-          <StyledMulti/>
+        >
+          <StyledMulti />
         </ExampleWrapper>
       )}
     `}

diff --git a/docs/pages/upgradeGuide/props.js b/docs/pages/upgradeGuide/props.js
@@ -1,8 +1,7 @@
 // @flow
-// @jsx glam
 
 import React, { Component, Fragment } from 'react';
-import glam from 'glam';
+
 import Select, { components } from '../../../src';
 import md from '../../markdown/renderer';
 

diff --git a/docs/styled-components.js b/docs/styled-components.js
@@ -1,7 +1,5 @@
 // @flow
-// @jsx glam
 
-import glam from 'glam';
 import React from 'react';
 
 import SyntaxHighlighter, {

diff --git a/package.json b/package.json
@@ -12,9 +12,10 @@
     "url": "https://github.com/JedWatson/react-select.git"
   },
   "dependencies": {
+    "babel-plugin-emotion": "^9.1.2",
     "classnames": "^2.2.5",
     "codesandboxer": "^0.1.1",
-    "glam": "^5.0.1",
+    "emotion": "^9.1.2",
     "prop-types": "^15.6.0",
     "raf": "^3.4.0",
     "react-input-autosize": "^2.2.1",

diff --git a/rollup.config.js b/rollup.config.js
@@ -10,7 +10,7 @@ const name = 'Select';
 const path = 'dist/react-select';
 const globals = {
   classnames: 'classNames',
-  glam: 'glam',
+  emotion: 'emotion',
   'prop-types': 'PropTypes',
   'react-dom': 'ReactDOM',
   'react-input-autosize': 'AutosizeInput',
@@ -22,6 +22,7 @@ const babelOptions = () => {
     babelrc: false,
     presets: [['env', { modules: false }], 'react'],
     plugins: [
+      'emotion',
       'transform-class-properties',
       'transform-object-rest-spread',
       'external-helpers',

diff --git a/src/Select.js b/src/Select.js
@@ -8,6 +8,7 @@ import { DummyInput, ScrollBlock, ScrollCaptor } from './internal/index';
 import {
   classNames,
   cleanValue,
+  emptyString,
   isTouchCapable,
   isMobileDevice,
   noop,
@@ -493,7 +494,7 @@ export default class Select extends Component<Props, State> {
     const { selectValue } = this.state;
     const hasValue = this.hasValue();
     const getValue = () => selectValue;
-    const cx = className ? classNames.bind(null, className) : noop;
+    const cx = className ? classNames.bind(null, className) : emptyString;
     return {
       cx,
       clearValue,