From 364daa319e69ddcf8ab3b45c6590ae9aab2c7310 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Fri, 30 Aug 2019 11:26:41 +0300
Subject: [PATCH] use css modules in app styles

---
 src/App/App.js      | 3 ++-
 src/App/styles.less | 9 ++++++---
 webpack.config.js   | 3 +--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/App/App.js b/src/App/App.js
index fb8ad8217..86ef2b1c2 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -2,7 +2,7 @@ const React = require('react');
 const { Router } = require('stremio-router');
 const { KeyboardNavigation, ServicesProvider } = require('stremio/services');
 const routerViewsConfig = require('./routerViewsConfig');
-require('./styles');
+const styles = require('./styles');
 
 const App = () => {
     const onPathNotMatch = React.useCallback(() => {
@@ -18,6 +18,7 @@ const App = () => {
         <React.StrictMode>
             <ServicesProvider services={services}>
                 <Router
+                    className={styles['router']}
                     homePath={'/'}
                     viewsConfig={routerViewsConfig}
                     onPathNotMatch={onPathNotMatch}
diff --git a/src/App/styles.less b/src/App/styles.less
index 41e8871b9..60b8a399e 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -1,7 +1,10 @@
 @import (inline, once, css) 'stremio-colors/css/stremio-colors.css';
-@import (inline, once, css) 'router/styles.css';
 @import (reference) 'common/screen-sizes.less';
 
+:global {
+    @import (once, less) 'router/styles.css';
+}
+
 @font-face {
     font-family: 'Roboto';
     src: url('/fonts/Roboto-Light.ttf') format('truetype');
@@ -85,7 +88,7 @@
     background-color: var(--color-backgroundlight);
 }
 
-html, body, #app {
+html, body, :global(#app) {
     position: relative;
     z-index: 0;
     width: 100vw;
@@ -95,7 +98,7 @@ html, body, #app {
     font-family: 'Roboto', 'sans-serif';
     overflow: auto;
 
-    .routes-container {
+    .router {
         width: 100%;
         height: 100%;
     }
diff --git a/webpack.config.js b/webpack.config.js
index 7bb799fa4..5f5229746 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -44,8 +44,7 @@ module.exports = {
                             importLoaders: 2,
                             modules: {
                                 getLocalIdent: (context, localIdentName, localName, options) => {
-                                    if (context.resourcePath.startsWith(path.resolve(__dirname, 'src/routes')) ||
-                                        context.resourcePath.startsWith(path.resolve(__dirname, 'src/App'))) {
+                                    if (context.resourcePath.startsWith(path.resolve(__dirname, 'src/routes'))) {
                                         localIdentName = '[local]';
                                     } else {
                                         localIdentName = '[local]-[hash:base64:5]';