diff --git a/ui/component/common/tooltip.jsx b/ui/component/common/tooltip.jsx index 1d52bf8db..fd06493ab 100644 --- a/ui/component/common/tooltip.jsx +++ b/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, diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index 95482991b..d0cec1678 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/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'; diff --git a/ui/component/wunderbarSuggestions/view.jsx b/ui/component/wunderbarSuggestions/view.jsx index 61a92d6b6..ad497fb22 100644 --- a/ui/component/wunderbarSuggestions/view.jsx +++ b/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'; diff --git a/ui/index.jsx b/ui/index.jsx index 2760d6d1e..5d473888e 100644 --- a/ui/index.jsx +++ b/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 }); diff --git a/ui/scss/third-party.scss b/ui/scss/third-party.scss new file mode 100644 index 000000000..886593207 --- /dev/null +++ b/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';