fix: replace styled-components with react-emotion (#184)

* chore: replace styled-components with react-emotion

* refactor: consistently use react-emotion

Drops direct usage of emotion. Drops emotion as a peer-dep as we're not using it directly anymore.

* chore: make emotion dep

Author: montezume

materials/colors/colors.story.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import styled from 'styled-components';
+import styled from 'react-emotion';
 import { Text } from '../../src';
 import isVariation from '../../src/utils/is-variation';
 import colorGroups from './decisions/base-colors.json';

materials/shadows/shadows.story.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import styled from 'styled-components';
+import styled from 'react-emotion';
 import { flatMap } from 'lodash';
 import { Text } from '../../src';
 import shadowGroups from './decisions/base-shadows.json';

package.json

@@ -57,6 +57,7 @@
     "common-tags": "1.8.0",
     "dom-helpers": "3.3.1",
     "downshift": "3.1.1",
+    "emotion": "9.2.12",
     "is-touch-device": "1.0.1",
     "lodash.flatmap": "4.5.0",
     "lodash.has": "4.5.2",
@@ -67,6 +68,7 @@
     "lodash.uniq": "4.5.0",
     "lodash.without": "4.4.0",
     "prop-types": "15.6.2",
+    "react-emotion": "9.2.12",
     "react-required-if": "1.0.3",
     "recompose": "0.30.0",
     "tiny-invariant": "1.0.1",
@@ -109,7 +111,6 @@
     "cross-env": "5.2.0",
     "css": "2.2.4",
     "css-loader": "1.0.0",
-    "emotion": "9.2.12",
     "enzyme": "3.7.0",
     "enzyme-adapter-react-16": "1.6.0",
     "enzyme-to-json": "3.3.4",
@@ -187,15 +188,13 @@
     "shelljs": "0.8.2",
     "storybook-readme": "4.0.2",
     "style-loader": "0.23.1",
-    "styled-components": "4.0.2",
     "stylelint": "9.6.0",
     "stylelint-config-standard": "18.2.0",
     "stylelint-order": "1.0.0",
     "url-loader": "1.1.2",
     "webpack": "4.21.0"
   },
   "peerDependencies": {
-    "emotion": "^9.1.2",
     "flatpickr": ">4.5.0",
     "moment": ">2.2",
     "moment-timezone": "^0.5",

rollup.config.js

@@ -76,10 +76,12 @@ const plugins = [
   resolve(),
   // For shimming nodejs builtins
   builtins(),
-  // To automatically externalize `peerDependencies`
+  // To automatically externalize `peerDependencies` and `dependencies`
   // so that they do not end up in the bundle.
   // See also https://medium.com/@kelin2025/so-you-wanna-use-es6-modules-714f48b3a953
-  peerDepsExternal(),
+  peerDepsExternal({
+    dependencies: true,
+  }),
   // Transpile sources using our custom babel preset.
   babel({
     exclude: ['node_modules/**'],

src/components/collapsible-motion/collapsible-motion.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import invariant from 'tiny-invariant';
-import { keyframes } from 'emotion';
+import { keyframes } from 'react-emotion';
 import Collapsible from '../collapsible';
 
 const createOpeningAnimation = height =>

src/components/constraints/horizontal/horizontal.story.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, select } from '@storybook/addon-knobs';
 import withReadme from 'storybook-readme/with-readme';
-import styled from 'styled-components';
+import styled from 'react-emotion';
 import Horizontal from './horizontal';
 import Readme from './README.md';
 

src/components/icons/icon.story.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, select } from '@storybook/addon-knobs';
 import withReadme from 'storybook-readme/with-readme';
-import styled from 'styled-components';
+import styled from 'react-emotion';
 import kebabCase from 'lodash.kebabcase';
 import Text from '../typography/text';
 import Readme from './README.md';

src/components/spacings/inline/inline.story.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, select } from '@storybook/addon-knobs';
 import withReadme from 'storybook-readme/with-readme';
-import styled from 'styled-components';
+import styled from 'react-emotion';
 import Text from '../../typography/text';
 import Inset from '../inset';
 import Inline from './inline';

src/components/spacings/inset-squish/inset-squish.story.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import withReadme from 'storybook-readme/with-readme';
-import styled from 'styled-components';
+import styled from 'react-emotion';
 import { Text } from '../../../index';
 import Inline from '../inline';
 import Inset from '../inset';

src/components/spacings/inset/inset.story.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import withReadme from 'storybook-readme/with-readme';
-import styled from 'styled-components';
+import styled from 'react-emotion';
 import { Text } from '../../../index';
 import Inline from '../inline';
 import Inset from './inset';

src/components/spacings/stack/stack.story.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, select } from '@storybook/addon-knobs';
 import withReadme from 'storybook-readme/with-readme';
-import styled from 'styled-components';
+import styled from 'react-emotion';
 import { Text } from '../../../index';
 import Inline from '../inline';
 import Inset from '../inset';

src/components/typography/typography.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'react-emotion';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import withReadme from 'storybook-readme/with-readme';