Unify global styles to make them works in app & storybook

.eslintrc

@@ -8,6 +8,7 @@
     "__PROD__": false,
     "__SENTRY_URL__": false,
     "__PRINT_MODE__": false,
+    "__GLOBAL_STYLES__": false,
     "__static": false,
     "window": false,
     "document": false,

flow-defs/globals.js

@@ -5,6 +5,7 @@ declare var __PROD__: boolean
 declare var __ENV__: string
 declare var __PRINT_MODE__: string
 declare var __SENTRY_URL__: string
+declare var __GLOBAL_STYLES__: string
 declare var __static: string
 
 declare var ResizeObserver: Class<any>

src/globals.js

@@ -5,3 +5,4 @@ const { NODE_ENV } = process.env
 global.__ENV__ = NODE_ENV === 'development' ? NODE_ENV : 'production'
 global.__DEV__ = global.__ENV__ === 'development'
 global.__PROD__ = !global.__DEV__
+global.__GLOBAL_STYLES__ = require('./styles/reset')

src/index.ejs

@@ -4,40 +4,8 @@
     <title><%= process.env.npm_package_productName %></title>
     <meta charset="utf-8">
     <style>
-      * {
-        -webkit-font-smoothing: antialiased;
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-        font: inherit;
-        color: inherit;
-        user-select: none;
-        min-width: 0;
 
-        /* it will surely make problem in the future... to be inspected. */
+      <%= __GLOBAL_STYLES__ %>
-        flex-shrink: 0;
-      }
-
-      body {
-        cursor: default;
-        font-family: "Museo Sans", "Open Sans", Arial, Helvetica, sans-serif;
-        font-size: 16px;
-        font-weight: 300;
-        line-height: 1.5;
-      }
-
-      input,
-      textarea {
-        font-family: "Open Sans", Arial, Helvetica, sans-serif;;
-        font-weight: 600;
-        line-height: normal;
-      }
-
-      #app {
-        display: none;
-        flex-direction: column;
-        min-height: 100vh;
-      }
 
       #preload {
         -webkit-app-region: drag;
@@ -55,18 +23,12 @@
         transition: opacity 0.4s ease-in-out;
         z-index: 100;
       }
+
       #preload video {
         height: 144px;
         width: 256px;
       }
 
-      b {
-        font-weight: bold;
-      }
-
-      em {
-        font-style: italic;
-      }
     </style>
     <script>
       <% if (htmlWebpackPlugin.options.nodeModules) { %>

src/styles/global.js

@@ -10,6 +10,7 @@ import '@fortawesome/fontawesome-free-brands'
 
 import { fontFace, rgba } from 'styles/helpers'
 import { radii, colors } from 'styles/theme'
+import reset from './reset'
 
 const fonts = {
   'Open Sans': [
@@ -86,37 +87,13 @@ function transformFonts(allFonts) {
 
 injectGlobal`
   ${transformFonts(fonts)};
-
+  ${reset};
-  .scroll-content {
-    height: 100%;
-
-    > div {
-      height: 100%;
-    }
-  }
-  .scrollbar-thumb {
-    background: rgb(102, 102, 102) !important;
-    padding: 2px;
-    background-clip: content-box !important;
-  }
-  .scrollbar-track {
-    background: transparent !important;
-    transition: opacity 0.2s ease-in-out !important;
-    z-index: 20 !important;
-  }
-
-  .recharts-wrapper {
-    cursor: inherit !important;
-  }
 
   .tippy-tooltip {
     background-color: ${rgba(colors.dark, 0.8)};
     border-radius: ${radii[1]}px;
-    padding: 0;
-  }
-  .tippy-tooltip .tippy-content {
-    background: transparent;
   }
+
   .tippy-popper .tippy-roundarrow {
     fill: ${rgba(colors.dark, 0.8)};
   }

src/styles/reset.js

@@ -0,0 +1,72 @@
+module.exports = `* {
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  user-select: none;
+  min-width: 0;
+
+  /* it will surely make problem in the future... to be inspected. */
+  flex-shrink: 0;
+}
+
+body {
+  cursor: default;
+  font-family: 'Museo Sans', 'Open Sans', Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 1.5;
+}
+
+input,
+textarea {
+  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+  font-weight: 600;
+  line-height: normal;
+}
+
+#app {
+  display: none;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+b {
+  font-weight: bold;
+}
+
+em {
+  font-style: italic;
+}
+
+.scroll-content {
+  height: 100%;
+
+  > div {
+    height: 100%;
+  }
+}
+.scrollbar-thumb {
+  background: rgb(102, 102, 102) !important;
+  padding: 2px;
+  background-clip: content-box !important;
+}
+.scrollbar-track {
+  background: transparent !important;
+  transition: opacity 0.2s ease-in-out !important;
+  z-index: 20 !important;
+}
+
+.recharts-wrapper {
+  cursor: inherit !important;
+}
+
+.tippy-tooltip .tippy-content {
+  background: transparent;
+}
+
+.tippy-tooltip {
+  padding: 0;
+}`

webpack/plugins.js

@@ -4,6 +4,7 @@ require('../src/globals')
 
 module.exports = [
   new webpack.DefinePlugin({
+    __GLOBAL_STYLES__: JSON.stringify(__GLOBAL_STYLES__),
     __DEV__,
     __PROD__,
     'process.env.NODE_ENV': JSON.stringify(__ENV__),