use plain css for router styles

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');
-const styles = require('./styles');
+require('./styles');
 
 const App = () => {
     const onPathNotMatch = React.useCallback(() => {
@@ -18,7 +18,6 @@ const App = () => {
         <React.StrictMode>
             <ServicesProvider services={services}>
                 <Router
-                    className={styles['router']}
                     homePath={'/'}
                     viewsConfig={routerViewsConfig}
                     onPathNotMatch={onPathNotMatch}

src/App/styles.less

@@ -1,4 +1,5 @@
 @import (inline, once, css) 'stremio-colors/css/stremio-colors.css';
+@import (inline, once, css) 'router/styles.css';
 @import (reference) 'common/screen-sizes.less';
 
 @font-face {
@@ -70,7 +71,7 @@ html {
     --scroll-bar-width: 6px;
     --color-facebook: #4267b2;
 
-    &, body, :global(#app) {
+    &, body, #app {
         position: relative;
         z-index: 0;
         width: 100vw;
@@ -81,7 +82,7 @@ html {
         overflow: auto;
     }
 
-    .router {
+    .router-container {
         width: 100%;
         height: 100%;
     }

src/router/Modal/Modal.js

@@ -14,7 +14,7 @@ const Modal = ({ children }) => {
     }, []);
     return ReactDOM.createPortal(
         <FocusableProvider onRoutesContainerDomTreeChange={onRoutesContainerDomTreeChange} onModalsContainerDomTreeChange={onModalsContainerDomTreeChange}>
-            <div>{children}</div>
+            <div className={'modal-container'}>{children}</div>
         </FocusableProvider>,
         modalsContainer
     );

src/router/ModalsContainerContext/ModalsContainerProvider.js

@@ -2,18 +2,17 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const ModalsContainerContext = require('./ModalsContainerContext');
 
-const ModalsContainerProvider = ({ containerClassName, children }) => {
+const ModalsContainerProvider = ({ children }) => {
     const [container, setContainer] = React.useState(null);
     return (
         <ModalsContainerContext.Provider value={container}>
             {container instanceof HTMLElement ? children : null}
-            <div ref={setContainer} className={containerClassName} />
+            <div ref={setContainer} className={'modals-container'} />
         </ModalsContainerContext.Provider>
     );
 };
 
 ModalsContainerProvider.propTypes = {
-    containerClassName: PropTypes.string,
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node

src/router/Router/Route.js

@@ -2,7 +2,6 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const { FocusableProvider } = require('../FocusableContext');
 const { ModalsContainerProvider } = require('../ModalsContainerContext');
-const styles = require('./styles');
 
 const Route = ({ children }) => {
     const onRoutesContainerDomTreeChange = React.useCallback(({ routesContainer, contentContainer }) => {
@@ -12,10 +11,10 @@ const Route = ({ children }) => {
         return modalsContainer.childElementCount === 0;
     }, []);
     return (
-        <div className={styles['route-container']}>
+        <div className={'route-container'}>
-            <ModalsContainerProvider containerClassName={styles['modals-container']}>
+            <ModalsContainerProvider>
                 <FocusableProvider onRoutesContainerDomTreeChange={onRoutesContainerDomTreeChange} onModalsContainerDomTreeChange={onModalsContainerDomTreeChange}>
-                    <div className={styles['route-content']}>{children}</div>
+                    <div className={'route-content'}>{children}</div>
                 </FocusableProvider>
             </ModalsContainerProvider>
         </div>

src/router/Router/Router.js

@@ -1,12 +1,10 @@
 const React = require('react');
 const PropTypes = require('prop-types');
-const classnames = require('classnames');
 const UrlUtils = require('url');
 const { RoutesContainerProvider } = require('../RoutesContainerContext');
 const Route = require('./Route');
-const styles = require('./styles');
 
-const Router = ({ className, homePath, viewsConfig, onPathNotMatch }) => {
+const Router = ({ homePath, viewsConfig, onPathNotMatch }) => {
     const [views, setViews] = React.useState(() => {
         return Array(viewsConfig.length).fill({
             routeConfig: null,
@@ -92,7 +90,7 @@ const Router = ({ className, homePath, viewsConfig, onPathNotMatch }) => {
         };
     }, []);
     return (
-        <RoutesContainerProvider containerClassName={classnames(className, styles['router-container'])}>
+        <RoutesContainerProvider>
             {
                 views
                     .filter(({ routeConfig }) => routeConfig !== null)
@@ -107,7 +105,6 @@ const Router = ({ className, homePath, viewsConfig, onPathNotMatch }) => {
 };
 
 Router.propTypes = {
-    className: PropTypes.string,
     homePath: PropTypes.string,
     onPathNotMatch: PropTypes.func,
     viewsConfig: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.exact({

src/router/Router/styles.less

@@ -1,42 +0,0 @@
-.router-container {
-    position: relative;
-    z-index: 0;
-
-    .route-container {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 0;
-
-        &:not(:last-child) {
-            display: none;
-        }
-
-        .route-content {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            z-index: 0;
-            overflow: hidden;
-        }
-
-        .modals-container {
-            width: 0;
-            height: 0;
-
-            >* {
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
-                z-index: 1;
-                overflow: hidden;
-            }
-        }
-    }
-}

src/router/RoutesContainerContext/RoutesContainerProvider.js

@@ -2,11 +2,11 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const RoutesContainerContext = require('./RoutesContainerContext');
 
-const RoutesContainerProvider = ({ containerClassName, children }) => {
+const RoutesContainerProvider = ({ children }) => {
     const [container, setContainer] = React.useState(null);
     return (
         <RoutesContainerContext.Provider value={container}>
-            <div ref={setContainer} className={containerClassName}>
+            <div ref={setContainer} className={'router-container'}>
                 {container instanceof HTMLElement ? children : null}
             </div>
         </RoutesContainerContext.Provider>
@@ -14,7 +14,6 @@ const RoutesContainerProvider = ({ containerClassName, children }) => {
 };
 
 RoutesContainerProvider.propTypes = {
-    containerClassName: PropTypes.string,
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node

src/router/styles.css

@@ -0,0 +1,42 @@
+.router-container {
+    position: relative;
+    z-index: 0;
+}
+
+.router-container .route-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 0;
+}
+
+.router-container .route-container:not(:last-child) {
+    display: none;
+}
+
+.router-container .route-container .route-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 0;
+    overflow: hidden;
+}
+
+.router-container .route-container .modals-container {
+    width: 0;
+    height: 0;
+}
+
+.router-container .route-container .modals-container .modal-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    overflow: hidden;
+}

webpack.config.js

@@ -44,7 +44,8 @@ module.exports = {
                             importLoaders: 2,
                             modules: {
                                 getLocalIdent: (context, localIdentName, localName, options) => {
-                                    if (context.resourcePath.startsWith(path.resolve(__dirname, 'src/routes'))) {
+                                    if (context.resourcePath.startsWith(path.resolve(__dirname, 'src/routes')) ||
+                                        context.resourcePath.startsWith(path.resolve(__dirname, 'src/App'))) {
                                         localIdentName = '[local]';
                                     } else {
                                         localIdentName = '[local]-[hash:base64:5]';