From e83115b231bb79ad7e5894bea233004cb0f13571 Mon Sep 17 00:00:00 2001 From: sballesteros Date: Fri, 8 Nov 2019 19:54:19 -0800 Subject: [PATCH] close https://github.com/PREreview/rapid-prereview/issues/18 --- package-lock.json | 83 +++++++++++++++++++++++--- package.json | 1 + src/components/extension-body.css | 18 ++++++ src/components/login-required-modal.js | 1 + src/components/modal.css | 12 ++-- src/components/modal.js | 45 +++++++++----- src/components/welcome-modal.css | 2 +- src/constants.js | 2 + src/content-script.css | 30 ++++------ src/content-script.js | 8 ++- src/index.css | 8 +-- src/popup.js | 4 +- views/index.ejs | 2 +- webpack-extension.config.js | 15 ++++- 14 files changed, 173 insertions(+), 58 deletions(-) create mode 100644 src/components/extension-body.css diff --git a/package-lock.json b/package-lock.json index 3601cda..72293a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3312,8 +3312,7 @@ "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "ansi-styles": { "version": "3.2.1", @@ -6464,8 +6463,7 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "escodegen": { "version": "1.12.0", @@ -8651,7 +8649,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", - "dev": true, "requires": { "ansi-regex": "^2.0.0" } @@ -9677,6 +9674,11 @@ "integrity": "sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc=", "dev": true }, + "js-base64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz", + "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==" + }, "js-levenshtein": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz", @@ -12598,6 +12600,15 @@ "postcss-values-parser": "^2.0.0" } }, + "postcss-plugin-namespace": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/postcss-plugin-namespace/-/postcss-plugin-namespace-0.0.2.tgz", + "integrity": "sha512-mpRtNFI7o+5Ad96SCFRNIDgxTfneCTRDy5LjAlYnTS6qlriCB/m3wlJKv5oY8IXoelgmWBLH46AhkIoUHR/0wg==", + "dev": true, + "requires": { + "postcss": "^7.0.6" + } + }, "postcss-preset-env": { "version": "6.7.0", "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz", @@ -12713,6 +12724,64 @@ "postcss": "^7.0.2" } }, + "postcss-scopify": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/postcss-scopify/-/postcss-scopify-0.1.9.tgz", + "integrity": "sha1-w3N2BqdsMkEtVc4uUJXomrWGrFY=", + "requires": { + "postcss": "^5.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=" + }, + "chalk": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "requires": { + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + }, + "dependencies": { + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" + } + } + }, + "has-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", + "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=" + }, + "postcss": { + "version": "5.2.18", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz", + "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==", + "requires": { + "chalk": "^1.1.3", + "js-base64": "^2.1.9", + "source-map": "^0.5.6", + "supports-color": "^3.2.3" + } + }, + "supports-color": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", + "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", + "requires": { + "has-flag": "^1.0.0" + } + } + } + }, "postcss-selector-matches": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz", @@ -14735,8 +14804,7 @@ "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" }, "source-map-resolve": { "version": "0.5.2", @@ -15041,7 +15109,6 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, "requires": { "ansi-regex": "^2.0.0" } diff --git a/package.json b/package.json index bd72839..b45997c 100644 --- a/package.json +++ b/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", diff --git a/src/components/extension-body.css b/src/components/extension-body.css new file mode 100644 index 0000000..c169273 --- /dev/null +++ b/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); + } + } +} diff --git a/src/components/login-required-modal.js b/src/components/login-required-modal.js index 6c48f12..d6998f0 100644 --- a/src/components/login-required-modal.js +++ b/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={ diff --git a/src/components/modal.css b/src/components/modal.css index bd615a4..3297b65 100644 --- a/src/components/modal.css +++ b/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); } } diff --git a/src/components/modal.js b/src/components/modal.js index 0fd0bd0..1cfa6ab 100644 --- a/src/components/modal.js +++ b/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 ( -
- {(title || showCloseButton) && ( -
- {title ?

{title}

: } - {showCloseButton && ( - - Close - - - )} -
- )} -
{children}
+
+
+ {(title || showCloseButton) && ( +
+ {title ? ( +

{title}

+ ) : ( + + )} + {showCloseButton && ( + + Close + + + )} +
+ )} +
{children}
+
diff --git a/src/components/welcome-modal.css b/src/components/welcome-modal.css index c0721dc..51514f3 100644 --- a/src/components/welcome-modal.css +++ b/src/components/welcome-modal.css @@ -1,5 +1,5 @@ .welcome-modal { - & .modal__content { + & .rpos-modal__content { padding: 0; } diff --git a/src/constants.js b/src/constants.js index bc5e55a..6e78745 100644 --- a/src/constants.js +++ b/src/constants.js @@ -253,4 +253,6 @@ export const CONTACT_EMAIL_HREF = 'mailto:contact@outbreaksci.prereview.org'; 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'; diff --git a/src/content-script.css b/src/content-script.css index c096dea..d363202 100644 --- a/src/content-script.css +++ b/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'; diff --git a/src/content-script.js b/src/content-script.js index 8020214..2e0c18b 100644 --- a/src/content-script.js +++ b/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() { diff --git a/src/index.css b/src/index.css index 8f2483e..3eff2f5 100644 --- a/src/index.css +++ b/src/index.css @@ -2,6 +2,9 @@ @import 'normalize.css'; @import '@reach/tooltip/styles.css'; +@import '@reach/menu-button/styles.css'; +@import '@reach/dialog/styles.css'; +@import '@reach/combobox/styles.css'; @import './components/variables.css'; @import './components/app.css'; @@ -58,8 +61,3 @@ @import './components/suspense-loading.css'; @import './components/api.css'; @import './components/api-section.css'; - -/* reach ui */ -@import '../node_modules/@reach/menu-button/styles.css'; -@import '../node_modules/@reach/dialog/styles.css'; -@import '../node_modules/@reach/combobox/styles.css'; diff --git a/src/popup.js b/src/popup.js index 5c0858d..95aabef 100644 --- a/src/popup.js +++ b/src/popup.js @@ -6,10 +6,12 @@ import { BrowserRouter as Router } from 'react-router-dom'; import { UserProvider } from './contexts/user-context'; import { StoresProvider } from './contexts/store-context'; import Popup from './components/popup'; -import { CHECK_PREPRINT } from './constants'; +import { CHECK_PREPRINT, CSS_SCOPE_ID } from './constants'; import './popup.css'; document.addEventListener('DOMContentLoaded', () => { + document.documentElement.id = CSS_SCOPE_ID; + chrome.cookies.get( { url: process.env.COOKIE_URL, diff --git a/views/index.ejs b/views/index.ejs index 045f725..c969f8e 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -31,7 +31,7 @@ - +
<%- locals.html %>
diff --git a/webpack-extension.config.js b/webpack-extension.config.js index a17ebdc..626c783 100644 --- a/webpack-extension.config.js +++ b/webpack-extension.config.js @@ -1,7 +1,8 @@ const path = require('path'); const webpack = require('webpack'); -const { babel } = require('./package.json'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const { babel } = require('./package.json'); + const isProd = process.env.NODE_ENV === 'production'; module.exports = { @@ -84,7 +85,17 @@ module.exports = { 'custom-media-queries': true } }), - require('postcss-nested') /*replace cssnext nesting with this one which allows for sass style nesting*/ + require('postcss-nested'), // replace cssnext nesting with this one which allows for sass style nesting + require('postcss-plugin-namespace')('#rpos-ext', { + ignore: [ + ':root', + 'html', + /^body/, + /^\[data-reach/, + /#rpos-ext/ + ] + }) + // require('postcss-scopify')('#rpos-ext') ]; } }