From 20adf55c11e0ac07d4fe78cb0f6bffe37f7c6623 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Tue, 13 Feb 2018 17:12:02 -0500
Subject: [PATCH] Breaking up main stylesheet into per-component styles

---
 package.json                                  |   1 +
 postcss.config.js                             |   1 +
 src/components/Footer/index.js                |   2 +
 src/components/Footer/style.css               |  11 ++
 .../Header/__snapshots__/test.js.snap         |   1 -
 src/components/Header/index.js                |   3 +-
 src/components/Header/style.css               |  63 ++++++++
 .../Message/__snapshots__/test.js.snap        |  20 +--
 src/components/Message/index.js               |  14 +-
 src/components/Message/style.css              |  41 +++++
 .../RavenError/__snapshots__/test.js.snap     |   2 +-
 src/components/RavenError/index.js            |   2 +-
 src/globals.css                               |  12 ++
 src/pages/404/Component.js                    |   2 +-
 src/pages/index/Component.js                  |   2 +-
 src/style.css                                 | 140 +-----------------
 yarn.lock                                     |  23 ++-
 17 files changed, 182 insertions(+), 158 deletions(-)
 create mode 100644 src/components/Footer/style.css
 create mode 100644 src/components/Header/style.css
 create mode 100644 src/components/Message/style.css
 create mode 100644 src/globals.css

diff --git a/package.json b/package.json
index 3f8914d..1d842f4 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "json-loader": "^0.5.7",
     "npm-run-all": "^4.1.2",
     "postcss-cssnext": "^3.1.0",
+    "postcss-import": "^11.1.0",
     "postcss-loader": "^2.1.0",
     "raven-js": "^3.22.2",
     "react": "^16.2.0",
diff --git a/postcss.config.js b/postcss.config.js
index c4a0414..5fc6079 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: [
+    require('postcss-import'),
     require('postcss-cssnext')
   ]
 };
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index 9b91a29..3992ca6 100644
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { translate, Trans } from 'react-i18next';
 
+import './style.css';
+
 const Footer = () => (
   <footer>
     <ul className="inline with-separator">
diff --git a/src/components/Footer/style.css b/src/components/Footer/style.css
new file mode 100644
index 0000000..3f9e926
--- /dev/null
+++ b/src/components/Footer/style.css
@@ -0,0 +1,11 @@
+@import url('../../globals.css');
+
+footer {
+  margin: var(--spacing-margin) 0;
+
+  & img {
+    vertical-align: text-top;
+    width: 80px;
+    height: 15px;
+  }
+}
diff --git a/src/components/Header/__snapshots__/test.js.snap b/src/components/Header/__snapshots__/test.js.snap
index 318d478..f038845 100644
--- a/src/components/Header/__snapshots__/test.js.snap
+++ b/src/components/Header/__snapshots__/test.js.snap
@@ -3,7 +3,6 @@
 exports[`Header rendering 1`] = `
 <header
   data-banner="testing"
-  id="main"
 >
   <h1>
     <a
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 98cf9c2..4597c65 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import { translate, Trans } from 'react-i18next';
 
+import style from './style.css';
 import GithubIcon from 'feather-icons/dist/icons/github.svg';
 
 const Header = () => (
-  <header id="main" data-banner={ process.env.BANNER }>
+  <header className={ style.header } data-banner={ process.env.BANNER }>
     <h1>
       <a href="/">Regexper</a>
     </h1>
diff --git a/src/components/Header/style.css b/src/components/Header/style.css
new file mode 100644
index 0000000..7361b03
--- /dev/null
+++ b/src/components/Header/style.css
@@ -0,0 +1,63 @@
+@import url('../../globals.css');
+
+.header {
+  background: var(--color-green) linear-gradient(to bottom,
+    var(--color-green) 0%,
+    color(var(--color-green) shade(40%)) 100%);
+  box-shadow: 0 0 1rem var(--color-black);
+  padding: 0 var(--content-margin);
+  margin: 0 calc(-1 * var(--content-margin)) var(--spacing-margin) calc(-1 * var(--content-margin));
+  position: relative;
+
+  &:after {
+    content: attr(data-banner);
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: var(--header-height);
+    line-height: var(--header-height);
+    text-transform: uppercase;
+    text-align: center;
+    font-size: calc(var(--header-height) * 0.7);
+    font-weight: bold;
+    opacity: 0.2;
+  }
+
+  & h1 {
+    font-family: 'Bangers', 'cursive';
+    font-size: 4rem;
+    font-weight: normal;
+    display: inline-block;
+    margin: 0;
+    line-height: var(--header-height);
+  }
+
+  & a {
+    text-decoration: none;
+    display: inline-block;
+  }
+
+  & ul {
+    line-height: var(--header-height);
+    position: absolute;
+    top: 0;
+    right: var(--content-margin);
+  }
+
+  & li {
+    & a:hover,
+    & a:active {
+      text-decoration: underline;
+    }
+
+    & svg {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      margin-right: 0.5rem;
+      vertical-align: text-top;
+    }
+  }
+}
diff --git a/src/components/Message/__snapshots__/test.js.snap b/src/components/Message/__snapshots__/test.js.snap
index da0c3da..656df9b 100644
--- a/src/components/Message/__snapshots__/test.js.snap
+++ b/src/components/Message/__snapshots__/test.js.snap
@@ -2,18 +2,14 @@
 
 exports[`Message rendering 1`] = `
 <div
-  className="message testing"
+  className=""
 >
-  <div
-    className="header"
-  >
+  <div>
     <h2>
       Testing
     </h2>
   </div>
-  <div
-    className="content"
-  >
+  <div>
     <p>
       Message content
     </p>
@@ -23,18 +19,14 @@ exports[`Message rendering 1`] = `
 
 exports[`Message rendering with icon 1`] = `
 <div
-  class="message"
+  class=""
 >
-  <div
-    class="header"
-  >
+  <div>
     <h2>
       Sample icon SVGTesting
     </h2>
   </div>
-  <div
-    class="content"
-  >
+  <div>
     <p>
       Message content
     </p>
diff --git a/src/components/Message/index.js b/src/components/Message/index.js
index f35b63a..585cd99 100644
--- a/src/components/Message/index.js
+++ b/src/components/Message/index.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import style from './style.css';
+
 const renderIcon = icon => {
   if (!icon) {
     return;
@@ -10,19 +12,21 @@ const renderIcon = icon => {
   return <Icon/>;
 };
 
-const Message = ({ className, icon, heading, children }) => (
-  <div className={ ['message', className].filter(Boolean).join(' ') }>
-    <div className="header">
+const Message = ({ type, icon, heading, children }) => (
+  <div className={ [ style.message, type && style[type] ].filter(Boolean).join(' ') }>
+    <div className={ style.header }>
       <h2>{ renderIcon(icon) }{ heading }</h2>
     </div>
-    <div className="content">
+    <div className={ style.content }>
       { children }
     </div>
   </div>
 );
 
 Message.propTypes = {
-  className: PropTypes.string,
+  type: PropTypes.oneOf([
+    'error'
+  ]),
   icon: PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.func
diff --git a/src/components/Message/style.css b/src/components/Message/style.css
new file mode 100644
index 0000000..9a9e573
--- /dev/null
+++ b/src/components/Message/style.css
@@ -0,0 +1,41 @@
+@import url('../../globals.css');
+
+.message {
+  background: var(--color-tan);
+  margin: var(--spacing-margin) 0;
+
+  & .header {
+    padding: var(--spacing-margin);
+
+    & h2 {
+      margin: 0;
+    }
+
+    & h2 svg {
+      margin-right: 0.5rem;
+      height: 3rem;
+      width: 3rem;
+      vertical-align: bottom;
+    }
+  }
+
+  & .content {
+    padding: var(--spacing-margin);
+  }
+
+  & p {
+    margin-top: 0;
+    margin-bottom: var(--spacing-margin) 0;
+  }
+
+  & p:last-child {
+    margin-bottom: 0;
+  }
+
+  &.error {
+    & .header {
+      background: var(--color-red);
+      color: var(--color-white);
+    }
+  }
+}
diff --git a/src/components/RavenError/__snapshots__/test.js.snap b/src/components/RavenError/__snapshots__/test.js.snap
index 14c595f..6cae96e 100644
--- a/src/components/RavenError/__snapshots__/test.js.snap
+++ b/src/components/RavenError/__snapshots__/test.js.snap
@@ -2,9 +2,9 @@
 
 exports[`RavenError rendering 1`] = `
 <Message
-  className="error"
   heading="translate(An error has occurred)"
   icon={[Function]}
+  type="error"
 >
   <p>
     <Trans
diff --git a/src/components/RavenError/index.js b/src/components/RavenError/index.js
index c05e288..7520e13 100644
--- a/src/components/RavenError/index.js
+++ b/src/components/RavenError/index.js
@@ -23,7 +23,7 @@ class RavenError extends React.Component {
   render() {
     const { t } = this.props;
 
-    return <Message className="error" icon={ AlertIcon } heading={ t('An error has occurred') }>
+    return <Message type="error" icon={ AlertIcon } heading={ t('An error has occurred') }>
       <p><Trans i18nKey="This error has been logged">
         This error has been logged. You may also <a href="#error-report" onClick={ this.reportError }>fill out a report</a>.
       </Trans></p>
diff --git a/src/globals.css b/src/globals.css
new file mode 100644
index 0000000..eaf466e
--- /dev/null
+++ b/src/globals.css
@@ -0,0 +1,12 @@
+:root {
+  --color-green: #bada55;
+  --color-brown: #6b6659;
+  --color-tan: #cbcbba;
+  --color-black: #000;
+  --color-white: #fff;
+  --color-red: #b3151a;
+
+  --header-height: 6rem;
+  --content-margin: 2rem;
+  --spacing-margin: 1rem;
+}
diff --git a/src/pages/404/Component.js b/src/pages/404/Component.js
index 8c23b7a..56b1ebc 100644
--- a/src/pages/404/Component.js
+++ b/src/pages/404/Component.js
@@ -9,7 +9,7 @@ import Footer from '../../components/Footer';
 const Component = ({ t }) => ( // eslint-disable-line react/prop-types
   <React.Fragment>
     <Header/>
-    <Message className="error" icon={ AlertIcon } heading={ t('404 Page Not Found') }>
+    <Message type="error" icon={ AlertIcon } heading={ t('404 Page Not Found') }>
       <p><Trans>The page you have requested could not be found</Trans></p>
     </Message>
     <Footer/>
diff --git a/src/pages/index/Component.js b/src/pages/index/Component.js
index fbc3a64..6eb6828 100644
--- a/src/pages/index/Component.js
+++ b/src/pages/index/Component.js
@@ -10,7 +10,7 @@ const Component = () => (
   <React.Fragment>
     <Header/>
     <noscript>
-      <Message className="error" icon={ AlertIcon } heading="JavaScript Required">
+      <Message type="error" icon={ AlertIcon } heading="JavaScript Required">
         <p>You need to enable JavaScript to use Regexper.</p>
         <p>Regexper and the tools used to create it are all open source. If you are concerned that the JavaScript being delivered is in any way malicious, please inspect the source by following the GitHub link in the header. There are two data collection tools integrated in the app:</p>
         <ul>
diff --git a/src/style.css b/src/style.css
index 5afa5f1..9ce8c2a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,17 +1,5 @@
 @import url('//fonts.googleapis.com/css?family=Bangers&text=Regxpr');
-
-:root {
-  --color-green: #bada55;
-  --color-brown: #6b6659;
-  --color-tan: #cbcbba;
-  --color-black: #000;
-  --color-white: #fff;
-  --color-red: #b3151a;
-
-  --header-height: 6rem;
-  --content-margin: 2rem;
-  --spacing-margin: 1rem;
-}
+@import url('./globals.css');
 
 html {
   font-size: 62.5%;
@@ -25,83 +13,11 @@ body {
   font-size: 1.6rem;
 }
 
-#main {
-  background: var(--color-green) linear-gradient(to bottom,
-    var(--color-green) 0%,
-    color(var(--color-green) shade(40%)) 100%);
-  box-shadow: 0 0 1rem var(--color-black);
-  padding: 0 var(--content-margin);
-  margin: 0 calc(-1 * var(--content-margin)) var(--spacing-margin) calc(-1 * var(--content-margin));
-  position: relative;
-
-  &:after {
-    content: attr(data-banner);
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: var(--header-height);
-    line-height: var(--header-height);
-    text-transform: uppercase;
-    text-align: center;
-    font-size: calc(var(--header-height) * 0.7);
-    font-weight: bold;
-    opacity: 0.2;
-  }
-
-  & h1 {
-    font-family: 'Bangers', 'cursive';
-    font-size: 4rem;
-    font-weight: normal;
-    display: inline-block;
-    margin: 0;
-    line-height: var(--header-height);
-  }
-
-  & a {
-    text-decoration: none;
-    display: inline-block;
-  }
-
-  & ul {
-    line-height: var(--header-height);
-    position: absolute;
-    top: 0;
-    right: var(--content-margin);
-  }
-
-  & li {
-    & a:hover,
-    & a:active {
-      text-decoration: underline;
-    }
-
-    & svg {
-      display: inline-block;
-      width: 1em;
-      height: 1em;
-      margin-right: 0.5rem;
-      vertical-align: text-top;
-    }
-  }
-}
-
-footer {
-  margin: var(--spacing-margin) 0;
-
-  & img {
-    vertical-align: text-top;
-    width: 80px;
-    height: 15px;
-  }
-}
-
 a {
   color: inherit;
 }
 
-.inline {
+ul.inline {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -111,55 +27,15 @@ a {
     display: inline-block;
     white-space: nowrap;
   }
-}
 
-.with-separator {
-  & li:after {
-    content: '//';
-    padding: 0 0.5rem;
-  }
-
-  & li:last-child:after {
-    content: '';
-  }
-}
-
-.message {
-  background: var(--color-tan);
-  margin: var(--spacing-margin) 0;
-
-  & .header {
-    padding: var(--spacing-margin);
-
-    & h2 {
-      margin: 0;
+  &.with-separator {
+    & li:after {
+      content: '//';
+      padding: 0 0.5rem;
     }
 
-    & h2 svg {
-      margin-right: 0.5rem;
-      height: 3rem;
-      width: 3rem;
-      vertical-align: bottom;
-    }
-  }
-
-  & .content {
-    padding: var(--spacing-margin);
-  }
-
-  & p {
-    margin-top: 0;
-    margin-bottom: var(--spacing-margin) 0;
-  }
-
-  & p:last-child {
-    margin-bottom: 0;
-  }
-
-  &.error {
-    & .header {
-      background: var(--color-red);
-      color: var(--color-white);
+    & li:last-child:after {
+      content: '';
     }
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 9b07ba8..cf66a73 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5743,7 +5743,7 @@ phantomjs-prebuilt@^2.1.10:
     request-progress "^2.0.1"
     which "^1.2.10"
 
-pify@^2.0.0:
+pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
 
@@ -6037,6 +6037,15 @@ postcss-image-set-polyfill@^0.3.5:
     postcss "^6.0.1"
     postcss-media-query-parser "^0.2.3"
 
+postcss-import@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-11.1.0.tgz#55c9362c9192994ec68865d224419df1db2981f0"
+  dependencies:
+    postcss "^6.0.1"
+    postcss-value-parser "^3.2.3"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
 postcss-initial@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-2.0.0.tgz#72715f7336e0bb79351d99ee65c4a253a8441ba4"
@@ -6599,6 +6608,12 @@ react-test-renderer@^16.0.0-0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  dependencies:
+    pify "^2.3.0"
+
 read-chunk@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-chunk/-/read-chunk-1.0.1.tgz#5f68cab307e663f19993527d9b589cace4661194"
@@ -6934,6 +6949,12 @@ resolve@1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
 
+resolve@^1.1.7:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
+  dependencies:
+    path-parse "^1.0.5"
+
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"