close #18

package.json

@@ -177,6 +177,7 @@
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-nested": "^4.2.1",
+    "postcss-plugin-namespace": "0.0.2",
     "postcss-preset-env": "^6.7.0",
     "postcss-url": "^8.0.0",
     "prettier": "^1.18.2",

src/components/extension-body.css

@@ -0,0 +1,18 @@
+/**
+ * Substitute for app.css for the extension content-script
+ * We do not include app.css to not pollute the body we use the following instead
+ */
+#rpos-ext {
+  background-color: white;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--ui-basic-font-color);
+  font: var(--ui-basic-font);
+  & :any-link {
+    color: var(--link-color);
+    &:hover {
+      color: var(--prereview-black);
+    }
+  }
+}

src/components/login-required-modal.js

@@ -10,6 +10,7 @@ export default function LoginRequiredModal({ onClose }) {
       className="login-required-modal"
       showCloseButton={true}
       onClose={onClose}
+      aria-label="log in required"
       title={
         <Fragment>
           <MdErrorOutline className="login-required-modal__title-icon" />

src/components/modal.css

@@ -2,22 +2,24 @@
   z-index: 100000;
 }
 
-.modal-container {
+/* Note the rpos- prefix as modal is a common class in the host sites where the content script is injected */
+.rpos-modal-container {
   max-width: 800px;
   min-width: 400px;
   width: fit-content !important;
 }
-.modal {
+
+.rpos-modal {
   font: var(--ui-basic-font--large);
 
-  & .modal__header-bar {
+  & .rpos-modal__header-bar {
     display: flex;
     justify-content: space-between;
     padding: var(--mgrd) var(--mgrd) var(--sgrd) var(--lgrd);
     align-items: baseline;
   }
 
-  & .modal__title {
+  & .rpos-modal__title {
     font: var(--ui-basic-font);
     color: var(--ui-basic-font-color--light);
     text-transform: uppercase;
@@ -27,7 +29,7 @@
     align-items: center;
   }
 
-  & .modal__content {
+  & .rpos-modal__content {
     padding: 0 var(--lgrd) var(--lgrd);
   }
 }

src/components/modal.js

@@ -6,6 +6,7 @@ import { DialogOverlay, DialogContent } from '@reach/dialog';
 import VisuallyHidden from '@reach/visually-hidden';
 import { MdClose } from 'react-icons/md';
 import IconButton from './icon-button';
+import { CSS_SCOPE_ID } from '../constants';
 
 export default function Modal({
   onClose = noop,
@@ -15,29 +16,43 @@ export default function Modal({
   className,
   ...others
 }) {
+  /* !! we prefix the classes with rpos- as `modal` is a verry common classnames that clashes a lot in the extension (the modal is rendered in a portal in body so we are vulnerable) */
+
   return (
     <DialogOverlay onDismiss={onClose}>
       <DialogContent
-        aria-label={others['aria-label'] || title}
-        className="modal-container"
+        aria-label={
+          others['aria-label'] ||
+          (typeof title === 'string' ? title : undefined)
+        }
+        className="rpos-modal-container"
         style={{
           padding: '0',
           boxShadow: '0 3px 10px rgba(0,0,0,.2)'
         }}
       >
-        <div className={classNames('modal', className)}>
-          {(title || showCloseButton) && (
-            <div className="modal__header-bar">
-              {title ? <h3 className="modal__title">{title}</h3> : <span />}
-              {showCloseButton && (
-                <IconButton className="modal__close-button" onClick={onClose}>
-                  <VisuallyHidden>Close</VisuallyHidden>
-                  <MdClose className="modal__close-button__icon" />
-                </IconButton>
-              )}
-            </div>
-          )}
-          <div className="modal__content">{children}</div>
+        <div id={CSS_SCOPE_ID}>
+          <div className={classNames('rpos-modal', className)}>
+            {(title || showCloseButton) && (
+              <div className="rpos-modal__header-bar">
+                {title ? (
+                  <h3 className="rpos-modal__title">{title}</h3>
+                ) : (
+                  <span />
+                )}
+                {showCloseButton && (
+                  <IconButton
+                    className="rpos-modal__close-button"
+                    onClick={onClose}
+                  >
+                    <VisuallyHidden>Close</VisuallyHidden>
+                    <MdClose className="rpos-modal__close-button__icon" />
+                  </IconButton>
+                )}
+              </div>
+            )}
+            <div className="rpos-modal__content">{children}</div>
+          </div>
         </div>
       </DialogContent>
     </DialogOverlay>

src/components/welcome-modal.css

@@ -1,5 +1,5 @@
 .welcome-modal {
-  & .modal__content {
+  & .rpos-modal__content {
     padding: 0;
   }
 

src/constants.js

@@ -253,4 +253,6 @@ export const CONTACT_EMAIL_HREF = 'mailto:[email protected]';
 export const PRODUCTION_DOMAIN = 'https://rapid-prereview.azurewebsites.net'; // 'https://oubreaksci.prereview.org'
 
 export const CSS_HEADER_HEIGHT = 72;
+export const CSS_SCOPE_ID = 'rpos-ext'; // keep in sync with webpack-extension.config.js
+
 export const ORG = 'Outbreak Science Rapid PREreview';

src/content-script.css

@@ -1,55 +1,47 @@
 @import 'normalize.css';
 
+/* reach ui */
+@import '@reach/tooltip/styles.css';
+@import '@reach/menu-button/styles.css';
+@import '@reach/dialog/styles.css';
+@import '@reach/combobox/styles.css';
+
 @import './components/extension-fonts.css';
 @import './components/variables.css';
 
-@import './components/app.css';
+@import './components/extension-body.css'; /* replaces app.css */
+@import './components/add-button.css';
 @import './components/button.css';
 @import './components/checkbox.css';
 @import './components/controls.css';
 @import './components/count-badge.css';
+@import './components/diseases.css';
 @import './components/extension-fallback.css';
-@import './components/facets.css';
 @import './components/header-bar.css';
-@import './components/home.css';
 @import './components/icon-button.css';
 @import './components/label-style.css';
-@import './components/left-side-panel.css';
 @import './components/menu.css';
 @import './components/modal.css';
-@import './components/new-preprint.css';
-@import './components/preprint-card.css';
 @import './components/radio-button.css';
 @import './components/rapid-form-fragment.css';
 @import './components/rapid-pre-review-logo.css';
 @import './components/role-editor.css';
 @import './components/score-badge.css';
-@import './components/search-bar.css';
 @import './components/share-menu.css';
 @import './components/shell.css';
-@import './components/sort-options.css';
 @import './components/tag-pill.css';
 @import './components/text-input.css';
 @import './components/shell-content.css';
 @import './components/login-required-modal.css';
 @import './components/barplot.css';
 @import './components/collapse.css';
-@import './components/login.css';
-@import './components/settings.css';
-@import './components/profile.css';
 @import './components/text-answers.css';
 @import './components/tooltip.css';
 @import './components/review-reader.css';
 @import './components/role-badge.css';
 @import './components/role-activity.css';
-@import './components/diseases.css';
 @import './components/subject-editor.css';
-@import './components/welcome-modal.css';
 @import './components/role-list.css';
 @import './components/preprint-preview.css';
-
-/* reach ui */
-@import '../node_modules/@reach/tooltip/styles.css';
-@import '../node_modules/@reach/menu-button/styles.css';
-@import '../node_modules/@reach/dialog/styles.css';
-@import '../node_modules/@reach/combobox/styles.css';
+@import './components/settings-roles.css';
+@import './components/suspense-loading.css';

src/content-script.js

@@ -2,7 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ExtensionShell from './components/extension-shell';
 import { parseGoogleScholar } from './utils/scholar';
-import { CHECK_SESSION_COOKIE, CHECK_PREPRINT, PREPRINT } from './constants';
+import {
+  CHECK_SESSION_COOKIE,
+  CHECK_PREPRINT,
+  PREPRINT,
+  CSS_SCOPE_ID
+} from './constants';
 import { PreprintsWithActionsStore } from './stores/preprint-stores';
 import { RoleStore } from './stores/user-stores';
 import { arrayify } from './utils/jsonld';
@@ -54,6 +59,7 @@ if (
 
 function start() {
   const $div = document.createElement('div');
+  $div.id = CSS_SCOPE_ID;
   document.body.appendChild($div);
 
   function detect() {