FormidableLabs · carloskelly13 · Oct 20, 2017 · Oct 19, 2017 · Oct 19, 2017
diff --git a/.babelrc b/.babelrc
@@ -5,7 +5,8 @@
     "react"
   ],
   "plugins": [
-    "transform-decorators-legacy"
+    "transform-decorators-legacy",
+    "emotion"
   ],
   "env": {
     "production": {
@@ -15,7 +16,8 @@
         "transform-react-constant-elements",
         "transform-react-inline-elements",
         "transform-runtime",
-        "transform-decorators-legacy"
+        "transform-decorators-legacy",
+        "emotion"
       ]
     },
     "test": {

diff --git a/example/src/index.js b/example/src/index.js
@@ -69,7 +69,6 @@ export default class Presentation extends React.Component {
             source={require('raw-loader!../assets/deck.example')}
             margin="20px auto"
             overflow = "overflow"
-            height = "80vh"
           />
         </Slide>
         <Slide>

diff --git a/index.html b/index.html
@@ -6,12 +6,12 @@
     <title>Spectacle</title>
     <link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
-    <link href="https://unpkg.com/prismjs@1/themes/prism-tomorrow.css" rel="stylesheet" type="text/css">
+    <link href="https://unpkg.com/prismjs@1.8.1/themes/prism-tomorrow.css" rel="stylesheet" type="text/css">
 </head>
 <body>
     <div id="root"></div>
-    <script src="https://unpkg.com/prismjs@1/prism.js"></script>
-    <script src="https://unpkg.com/prismjs@1/components/prism-jsx.min.js"></script>
+    <script src="https://unpkg.com/prismjs@1.8.1/prism.js"></script>
+    <script src="https://unpkg.com/prismjs@1.8.1/components/prism-jsx.min.js"></script>
     <script src="./dist/bundle.js"></script>
 </body>
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -23,17 +23,18 @@
   "license": "MIT",
   "dependencies": {
     "component-playground": "^3.0.0",
+    "emotion": "^8.0.8",
     "history": "^4.6.1",
     "lodash": "^4.17.4",
     "marksy": "^0.4.2",
     "normalize.css": "^7.0.0",
     "radium": "^0.19.1",
+    "react-emotion": "^8.0.8",
     "react-redux": "^5.0.5",
     "react-transition-group": "^1.1.3",
     "react-typography": "^0.16.5",
     "redux": "^3.0.4",
     "redux-actions": "^2.0.3",
-    "styled-components": "^1.4.6",
     "victory-core": "^15.2.0"
   },
   "peerDependencies": {
@@ -47,6 +48,7 @@
     "babel-eslint": "^7.2.3",
     "babel-jest": "^20.0.3",
     "babel-loader": "^7.0.0",
+    "babel-plugin-emotion": "^8.0.6",
     "babel-plugin-react-transform": "^2.0.0-beta1",
     "babel-plugin-transform-decorators-legacy": "^1.2.0",
     "babel-plugin-transform-react-constant-elements": "^6.23.0",
@@ -93,7 +95,12 @@
     "moduleNameMapper": {
       "\\.(css)$": "<rootDir>/__mocks__/styleMock.js"
     },
-    "snapshotSerializers": ["enzyme-to-json/serializer"],
-    "setupFiles": ["raf/polyfill", "<rootDir>/jest-setup.js"]
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
+    "setupFiles": [
+      "raf/polyfill",
+      "<rootDir>/jest-setup.js"
+    ]
   }
 }
diff --git a/src/components/__snapshots__/component-playground.test.js.snap b/src/components/__snapshots__/component-playground.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
 <div
-  class="theme-dark jELORc"
+  class="theme-dark css-4o0hkq"
 >
   <div
     class="playground"
@@ -33,7 +33,7 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
 
 exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
 <div
-  class="theme-light jELORc"
+  class="theme-light css-4o0hkq"
 >
   <div
     class="playground"
@@ -64,7 +64,7 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
 
 exports[`<ComponentPlayground /> Should render with a custom background color 1`] = `
 <div
-  class="theme-light TlFwj"
+  class="theme-light css-13q1kal"
 >
   <div
     class="playground"
@@ -95,7 +95,7 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
 
 exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
 <div
-  class="theme-light TlFwj"
+  class="theme-light css-13q1kal"
 >
   <div
     class="playground"

diff --git a/src/components/__snapshots__/fill.test.js.snap b/src/components/__snapshots__/fill.test.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Fill /> should render with style \`flex: 1\` 1`] = `
-<styled.div>
+<Styled(div)>
   <div
-    className="fSVTfK"
+    className="css-1rr4qq7"
   >
     Spectacle
   </div>
-</styled.div>
+</Styled(div)>
 `;
diff --git a/src/components/__snapshots__/fit.test.js.snap b/src/components/__snapshots__/fit.test.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Fit /> should render with style \`flex: 0\` 1`] = `
-<styled.div>
+<Styled(div)>
   <div
-    className="fSnuyn"
+    className="css-72fd9l"
   >
     Hello
   </div>
-</styled.div>
+</Styled(div)>
 `;
diff --git a/src/components/__snapshots__/manager.test.js.snap b/src/components/__snapshots__/manager.test.js.snap
@@ -352,9 +352,9 @@ exports[`<Manager /> should render the export configuration when specified. 1`]
           ]
         }
       >
-        <styled.div>
+        <Styled(div)>
           <div
-            className="djkYse"
+            className="css-v2kfba"
           >
             <MockSlide
               export={true}
@@ -381,7 +381,7 @@ exports[`<Manager /> should render the export configuration when specified. 1`]
               </div>
             </MockSlide>
           </div>
-        </styled.div>
+        </Styled(div)>
       </Export>
       <Style
         key=".6"
@@ -486,19 +486,19 @@ exports[`<Manager /> should render the overview configuration when specified. 1`
           ]
         }
       >
-        <styled.div>
+        <Styled(div)>
           <div
-            className="kxQqKR"
+            className="css-gv2ckq"
           >
-            <styled.div
+            <Styled(div)
               index={0}
               key="0"
               onClick={[Function]}
               screen={0}
               slideIndex={0}
             >
               <div
-                className="cAopeV"
+                className="css-13mtebb"
                 onClick={[Function]}
               >
                 <MockSlide
@@ -515,16 +515,16 @@ exports[`<Manager /> should render the overview configuration when specified. 1`
                   </div>
                 </MockSlide>
               </div>
-            </styled.div>
-            <styled.div
+            </Styled(div)>
+            <Styled(div)
               index={1}
               key="1"
               onClick={[Function]}
               screen={0}
               slideIndex={0}
             >
               <div
-                className="gtMIIo"
+                className="css-13d6elb"
                 onClick={[Function]}
               >
                 <MockSlide
@@ -541,9 +541,9 @@ exports[`<Manager /> should render the overview configuration when specified. 1`
                   </div>
                 </MockSlide>
               </div>
-            </styled.div>
+            </Styled(div)>
           </div>
-        </styled.div>
+        </Styled(div)>
       </Overview>
       <Fullscreen
         key=".4"