lukeed/componenets-App-index.js

## componenets-App-index.js
import React from 'react';
import { HMR } from '@pwa/preset-react';
import Button from '@components/Button';
import style from './index.css';

class App extends React.Component {
	render() {
		return (
			<div className={ style.app }>
				<main className={ style.wrapper }>
					<h1>hello workd</h1>

					<section className={ style.section }>
						<h2>button goes here</h2>
						<Button>Normal</Button>
						<Button primary>Primary</Button>
					</section>
				</main>
			</div>
		);
	}
}

export default HMR(App, module);

## components-Button-index.js
import styled from 'styled-components';

const Button = styled.button`
	background: transparent;
	border-radius: 3px;
	border: 2px solid palevioletred;
	color: palevioletred;
	margin: 0.5em 1em;
	padding: 0.25em 1em;
`;

export default Button;

## index.js
import React from 'react';
import ReactDOM from 'react-dom';
import GAnalytics from 'ganalytics';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
import App from '@components/App';
import './index.css';

if (process.env.NODE_ENV === 'production') {
	window.ga = new GAnalytics('UA-XXXXXXXX-X');

	const sheet = new ServerStyleSheet();

	ReactDOM.hydrate([
		<StyleSheetManager sheet={ sheet.instance }>
			<App/>
		</StyleSheetManager>,
		React.createElement(() => sheet.getStyleElement())
	],
		document.getElementById('app')
	);
} else {
	ReactDOM.render(<App />, document.getElementById('app'));
}

## pwa.config.js
exports.babel = function (config) {
	config.plugins.unshift(
		['babel-plugin-styled-components', {
			transpileTemplateLiterals: true,
			pure: true,
		}]
	);
}

## view-source:index.html
<!DOCTYPE html><html lang="en"><head><title>PWA</title><meta charset="utf-8"><meta name="theme-color" content="#1e88e5"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="The universal PWA builder &amp; CLI tool~!"><link rel="preload" as="font" crossorigin="anonymous" href="https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2"><link rel="preload" as="font" crossorigin="anonymous" href="https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_aZA3gnD_vx3rCs.woff2"><link rel="preload" as="font" crossorigin="anonymous" href="https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_c5H3gfD_vx3rCubqg.woff2"><link rel="shortcut icon" href="/assets/favicon.png"><link rel="manifest" href="/assets/manifest.json"><link href="/bundle.67a08433.css" rel="stylesheet"></head><body><div id="app"><div class="CSJXU"><main class="_1NMZs"><h1>hello workd</h1><section class="_3EdU5"><h2>button goes here</h2><button class="Button-sc-17n8azk-0 bgCpow">Normal</button><button class="Button-sc-17n8azk-0 bgCpow">Primary</button></section></main></div><style data-styled="" data-styled-version="5.1.0">.bgCpow{background:0 0;border-radius:3px;border:2px solid #db7093;color:#db7093;margin:.5em 1em;padding:.25em 1em}/*!sc*/data-styled.g1[id=Button-sc-17n8azk-0]{content:"bgCpow,"}/*!sc*/</style></div><script src="/bundle.1ebe6085.js"></script></body></html>
	import React from 'react';
	import { HMR } from '@pwa/preset-react';
	import Button from '@components/Button';
	import style from './index.css';

	class App extends React.Component {
	render() {
	return (
	<div className={ style.app }>
	<main className={ style.wrapper }>
	<h1>hello workd</h1>

	<section className={ style.section }>
	<h2>button goes here</h2>
	<Button>Normal</Button>
	<Button primary>Primary</Button>
	</section>
	</main>
	</div>
	);
	}
	}

	export default HMR(App, module);
	import styled from 'styled-components';

	const Button = styled.button`
	background: transparent;
	border-radius: 3px;
	border: 2px solid palevioletred;
	color: palevioletred;
	margin: 0.5em 1em;
	padding: 0.25em 1em;
	`;

	export default Button;
	import React from 'react';
	import ReactDOM from 'react-dom';
	import GAnalytics from 'ganalytics';
	import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
	import App from '@components/App';
	import './index.css';

	if (process.env.NODE_ENV === 'production') {
	window.ga = new GAnalytics('UA-XXXXXXXX-X');

	const sheet = new ServerStyleSheet();

	ReactDOM.hydrate([
	<StyleSheetManager sheet={ sheet.instance }>
	<App/>
	</StyleSheetManager>,
	React.createElement(() => sheet.getStyleElement())
	],
	document.getElementById('app')
	);
	} else {
	ReactDOM.render(<App />, document.getElementById('app'));
	}
	exports.babel = function (config) {
	config.plugins.unshift(
	['babel-plugin-styled-components', {
	transpileTemplateLiterals: true,
	pure: true,
	}]
	);
	}