ui/component/common/tooltip.jsx

@@ -2,7 +2,7 @@
 import type { Node } from 'react';
 import React from 'react';
 import ReachTooltip from '@reach/tooltip';
-import '@reach/tooltip/styles.css';
+// import '@reach/tooltip/styles.css'; --> 'scss/third-party.scss'
 
 type Props = {
   label: string | Node,

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -4,7 +4,7 @@ import Button from 'component/button';
 import * as ICONS from 'constants/icons';
 import classnames from 'classnames';
 import videojs from 'video.js/dist/video.min.js';
-import 'video.js/dist/alt/video-js-cdn.min.css';
+// import 'video.js/dist/alt/video-js-cdn.min.css'; --> 'scss/third-party.scss'
 import eventTracking from 'videojs-event-tracking';
 import * as OVERLAY from './overlays';
 import './plugins/videojs-mobile-ui/plugin';

ui/component/wunderbarSuggestions/view.jsx

@@ -8,7 +8,7 @@ import classnames from 'classnames';
 import Icon from 'component/common/icon';
 import { isURIValid, normalizeURI, parseURI } from 'lbry-redux';
 import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList, ComboboxOption } from '@reach/combobox';
-import '@reach/combobox/styles.css';
+// import '@reach/combobox/styles.css'; --> 'scss/third-party.scss'
 import useLighthouse from 'effects/use-lighthouse';
 import { Form } from 'component/common/form';
 import Button from 'component/button';

ui/index.jsx

@@ -37,6 +37,9 @@ import {
 import { X_LBRY_AUTH_TOKEN } from 'constants/token';
 import { LBRY_WEB_API, DEFAULT_LANGUAGE, LBRY_API_URL } from 'config';
 
+// Import 3rd-party styles before ours for the current way we are code-splitting.
+import 'scss/third-party.scss';
+
 // Import our app styles
 // If a style is not necessary for the initial page load, it should be removed from `all.scss`
 // and loaded dynamically in the component that consumes it
@@ -73,7 +76,7 @@ Lbry.setDaemonConnectionString(proxyURL);
 
 Lbry.setOverride(
   'publish',
-  params =>
+  (params) =>
     new Promise((resolve, reject) => {
       apiPublishCallViaWeb(
         apiCall,
@@ -117,7 +120,7 @@ doAuthTokenRefresh();
 // We keep a local variable for authToken because `ipcRenderer.send` does not
 // contain a response, so there is no way to know when it's been set
 let authToken;
-Lbryio.setOverride('setAuthToken', authToken => {
+Lbryio.setOverride('setAuthToken', (authToken) => {
   setAuthToken(authToken);
   return authToken;
 });
@@ -125,7 +128,7 @@ Lbryio.setOverride('setAuthToken', authToken => {
 Lbryio.setOverride(
   'getAuthToken',
   () =>
-    new Promise(resolve => {
+    new Promise((resolve) => {
       const authTokenToReturn = authToken || getAuthToken();
       resolve(authTokenToReturn);
     })
@@ -135,7 +138,7 @@ rewards.setCallback('claimFirstRewardSuccess', () => {
   app.store.dispatch(doOpenModal(MODALS.FIRST_REWARD));
 });
 
-rewards.setCallback('claimRewardSuccess', reward => {
+rewards.setCallback('claimRewardSuccess', (reward) => {
   if (reward && reward.type === rewards.TYPE_REWARD_CODE) {
     app.store.dispatch(doHideModal());
   }
@@ -195,11 +198,11 @@ ipcRenderer.on('devtools-is-opened', () => {
 
 // Force exit mode for html5 fullscreen api
 // See: https://github.com/electron/electron/issues/18188
-remote.getCurrentWindow().on('leave-full-screen', event => {
+remote.getCurrentWindow().on('leave-full-screen', (event) => {
   document.webkitExitFullscreen();
 });
 
-document.addEventListener('click', event => {
+document.addEventListener('click', (event) => {
   let { target } = event;
 
   while (target && target !== document) {
@@ -213,10 +216,10 @@ document.addEventListener('click', event => {
 });
 // @endif
 
-document.addEventListener('dragover', event => {
+document.addEventListener('dragover', (event) => {
   event.preventDefault();
 });
-document.addEventListener('drop', event => {
+document.addEventListener('drop', (event) => {
   event.preventDefault();
 });
 
@@ -229,7 +232,7 @@ function AppWrapper() {
     // @if TARGET='app'
     moment.locale(remote.app.getLocale());
 
-    autoUpdater.on('error', error => {
+    autoUpdater.on('error', (error) => {
       console.error(error.message); // eslint-disable-line no-console
     });
 

ui/scss/third-party.scss

@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+@import '~@reach/combobox/styles.css';
+@import '~@reach/tooltip/styles.css';
+@import '~video.js/dist/alt/video-js-cdn.min.css';