fix for react-shadow update

app/content-scripts/rewards/index.jsx

@@ -25,6 +25,7 @@ import OfferCard from './OfferCard';
 import msgModule from '../utils/msg';
 import history from '../../panel/utils/history';
 import globals from '../../../src/classes/Globals';
+import styles from '../../../dist/css/rewards_styles.css';
 
 const msg = msgModule('rewards');
 const { sendMessage } = msg;
@@ -78,6 +79,9 @@ class RewardsApp {
 	start() {
 		if (document.head.createShadowRoot || document.head.attachShadow) {
 			this.renderShadow();
+			setTimeout(() => {
+				document.getElementById('ghostery-shadow-root').style.opacity = 1;
+			}, 150);
 		} else {
 			// use iframe to encapsulate CSS - fallback for everything else besides chrome
 			this.renderIframe();
@@ -95,8 +99,9 @@ class RewardsApp {
 		document.body.appendChild(this.rewardsContainer);
 		this.mainView = props => (
 			<Router history={history}>
-				<ShadowDOM include={[chrome.extension.getURL('dist/css/rewards_styles.css')]}>
-					<div id="ghostery-shadow-root">
+				<div id="ghostery-shadow-root">
+					<ShadowDOM.span>
+						<style type="text/css">{styles}</style>
 						<Route
 							exact
 							path="/"
@@ -116,8 +121,8 @@ class RewardsApp {
 								() => <OfferCard reward={props.reward} conf={props.conf} port={this.port} actions={props.actions} />
 							}
 						/>
-					</div>
-				</ShadowDOM>
+					</ShadowDOM.span>
+				</div>
 			</Router>
 		);
 		this.initListener();

app/scss/rewards.scss

@@ -25,6 +25,7 @@
 
 #ghostery-shadow-root {
 	opacity: 0;
+	transition: 'opacity 200ms ease-in';
 	&.resolved {
 		opacity: 1;
 	}

package.json

@@ -102,6 +102,7 @@
     "react-test-renderer": "^16.8.6",
     "redux-mock-store": "^1.5.1",
     "sass-loader": "^7.1.0",
+    "to-string-loader": "^1.1.5",
     "seamless-immutable": "^7.1.3",
     "sinon": "^7.3.2",
     "sinon-chrome": "^3.0.1",

webpack.config.js

@@ -119,6 +119,9 @@ module.exports = {
 				use: {
 					loader: 'underscore-template-loader'
 				}
+			}, {
+				test: /\.css$/,
+				loader: ['to-string-loader', 'css-loader'],
 			}, {
 				test: /\.(js|jsx)$/,
 				include: [SHARED_COMP_DIR, PANEL_ANDROID_DIR, PANEL_DIR, HUB_DIR, LICENSES_DIR, CONTENT_SCRIPTS_DIR, REWARDS_DIR],