adding cleanslate support for style scoping

src/components/widget.scss

@@ -1,6 +1,7 @@
 @keyframes slideInUp {
   from {
     transform: translate3d(0, 100%, 0);
+    display: inherit;
     visibility: visible;
   }
 
@@ -15,6 +16,7 @@
   }
 
   to {
+    display: none;
     visibility: hidden;
     transform: translate3d(0, 100%, 0);
   }
@@ -25,6 +27,7 @@
   bottom: 0px;
   right: 10px;
   width: 200px;
+  z-index: 9999;
 }
 
 .dock {
@@ -35,6 +38,7 @@
   padding: 10px;
   width: 180px;
   border: 1px solid grey;
+  background: white;
 }
 
 
@@ -49,12 +53,14 @@
     animation-name: slideInUp;
   }
   &-entered {
+    display: inherit;
     visibility: visible;
   }
   &-exiting {
     animation-name: slideOutDown;
   }
   &-exited {
+    display: none;
     visibility: hidden;
   }
 

src/outputs/bookmarklet.js

@@ -1,12 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Widget from '../components/widget';
+import EmbeddableWidget from './embeddable-widget';
 
-  const component = <Widget />;
-  const el = document.createElement('div');
-  document.body.appendChild(el);
-  console.log('running bookmarklet');
-  ReactDOM.render(
-    component,
-    el,
-  );
+(function bookmarklet() {
+  if (window.EmbeddableWidget) {
+    return;
+  }
+  window.EmbeddableWidget = EmbeddableWidget;
+
+  EmbeddableWidget.mount();
+}());

src/outputs/embeddable-widget.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Widget from '../components/widget';
+import '../../vendor/cleanslate.css';
 
 export default class EmbeddableWidget {
   static el;
@@ -13,6 +14,7 @@ export default class EmbeddableWidget {
         throw new Error('EmbeddableWidget is already mounted, unmount first');
       }
       const el = document.createElement('div');
+      el.setAttribute('class', 'cleanslate');
       document.body.appendChild(el);
       ReactDOM.render(
         component,