constelation · kylpo · Jul 13, 2017 · Jul 14, 2017 · Jul 17, 2017 · Jul 19, 2017
diff --git a/.babelrc b/.babelrc
@@ -3,14 +3,20 @@
 // Preset ordering is reversed (last to first).
 {
   "plugins": [
+    /* "./babel/constelation", */
+    "constelation-babel",
+
+    ["emotion/babel", { "extractStatic": true }],
+    /* "emotion/babel", */
+
     // able to use `class` instead of `className` and `for` instead of `htmlFor`
     "react-html-attrs",
 
     // handle decorators
     "transform-decorators-legacy",
 
     // handle do expressions (currently stage-0)
-    "transform-do-expressions",
+    /* "transform-do-expressions", */
   ],
   "presets": [
     ["es2015",

diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,9 @@
 .DS_Store
 .tern-port
 
+.idea/
+
 node_modules/
 public/
+
+*.emotion.css
diff --git a/package.json b/package.json
@@ -24,9 +24,9 @@
     "deploy": "npm run clean && npm run build-html:prod && npm run build-js:prod && rimraf docs && cp -r public docs"
   },
   "devDependencies": {
-    "babel-core": "^6.24.1",
+    "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.0.0",
+    "babel-loader": "^7.1.1",
     "babel-plugin-react-html-attrs": "^2.0.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-do-expressions": "^6.22.0",
@@ -37,29 +37,32 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-react-hmre": "^1.1.1",
     "babel-preset-stage-2": "^6.24.1",
-    "babili-webpack-plugin": "^0.0.11",
+    "babili-webpack-plugin": "^0.1.2",
     "compression-webpack-plugin": "^0.4.0",
-    "duplicate-package-checker-webpack-plugin": "^1.2.4",
+    "css-loader": "^0.28.4",
+    "duplicate-package-checker-webpack-plugin": "^1.2.5",
     "ejs-loader": "^0.3.0",
     "eslint": "^3.19.0",
     "eslint-config-constelation": "^1.2.0",
     "eslint-plugin-auto-import": "^0.0.4",
     "eslint-plugin-react": "snowypowers/eslint-plugin-react.git#max-props-per-line-fix",
-    "file-loader": "^0.11.1",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
     "flow-bin": "^0.44.2",
     "flow-coverage-report": "^0.3.0",
     "flow-typed": "^2.1.2",
-    "html-webpack-plugin": "^2.28.0",
-    "husky": "^0.13.3",
+    "html-webpack-plugin": "^2.29.0",
+    "husky": "^0.14.3",
     "local-url-qrcode": "^1.1.0",
     "react-hot-loader": "3.0.0-beta.6",
     "rimraf": "^2.6.1",
-    "serve": "^5.1.4",
-    "source-map-explorer": "^1.3.3",
+    "serve": "^6.0.2",
+    "source-map-explorer": "^1.4.0",
     "static-site-generator-webpack-plugin": "^3.4.1",
-    "url-loader": "^0.5.8",
-    "webpack": "^2.4.1",
-    "webpack-dev-server": "^2.4.5",
+    "style-loader": "^0.18.2",
+    "url-loader": "^0.5.9",
+    "webpack": "^3.3.0",
+    "webpack-dev-server": "^2.5.1",
     "why-did-you-update": "^0.0.8"
   },
   "dependencies": {
@@ -71,6 +74,7 @@
     "constelation-transition-group-view": "^14.0.0",
     "constelation-view": "^14.0.3",
     "decko": "^1.2.0",
+    "emotion": "beta",
     "glamor": "next",
     "glamor-react": "^3.0.0-1",
     "glamor-reset": "^3.0.0-1",

diff --git a/src/entry.client.js b/src/entry.client.js
@@ -1,7 +1,7 @@
 // @flow
 // Imports {{{
 
-import { rehydrate } from 'glamor'
+import { hydrate } from 'emotion'
 import { useScroll } from 'react-router-scroll'
 import React from 'react'
 import ReactDOM from 'react-dom'
@@ -15,7 +15,7 @@ import routes from './scenes/index.client'
 // }}}
 
 // Rehydrate glamor ids that were passed in from SSR
-rehydrate(window._glam)
+hydrate(window._styleIds)
 
 // match required for async rendering + SSR. Otherwise, there would be a flash of paint
 match(

diff --git a/src/entry.static.js b/src/entry.static.js
@@ -1,12 +1,12 @@
 // @flow
 // Imports {{{
 
-import { renderStatic } from 'glamor-server'
 import React from 'react'
 import ReactDOMServer from 'react-dom/server'
 import RouterContext from 'react-router/lib/RouterContext'
 import createMemoryHistory from 'react-router/lib/createMemoryHistory'
 import match from 'react-router/lib/match'
+import { extractCritical } from 'emotion/server'
 
 //$FlowIgnore
 import htmlTemplate from './html.ejs'
@@ -20,19 +20,17 @@ export default (locals: Object, callback: Function) => {
   const location = history.createLocation(locals.path)
 
   match({ routes, location }, (error, redirectLocation, renderProps) => {
-    const { html, css, ids } = renderStatic(() =>
-      ReactDOMServer.renderToStaticMarkup(<RouterContext {...renderProps} />),
-    )
+    const { html, css, ids } = extractCritical(ReactDOMServer.renderToStaticMarkup(<RouterContext {...renderProps} />))
 
     callback(
       null,
       htmlTemplate({
         css,
         html,
+        styleIds: JSON.stringify(ids),
+        externalStyleSheet: true,
         title: 'Constelation',
-        glamorIds: JSON.stringify(ids),
         js: [locals.assets.vendor, locals.assets.main],
-        // js: Object.keys(locals.assets).map(key => locals.assets[key]),
       }),
     )
   })

diff --git a/src/html.ejs b/src/html.ejs
@@ -6,9 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- The above 3 meta tags *must* come first in the head, according to https://github.com/joshbuchea/HEAD; any other head content must come *after* these tags -->
     <title><%= data.title %></title>
-    <% if (data.css) { %>
-      <style><%= data.css %></style>
-    <% } %>
     <style>
       /* box-sizing reset */
       *, *:before, *:after {
@@ -34,6 +31,14 @@
         height: 100%;
       }
     </style>
+    <% if (data.externalStyleSheet) { %>
+     <link rel="stylesheet" type="text/css" href="styles.css">
+    <% } %>
+
+    <% if (data.css) { %>
+      <style><%= data.css %></style>
+    <% } %>
+
   </head>
   <body>
     <div id="root">
@@ -44,7 +49,7 @@
 
     <script src="https://cdn.polyfill.io/v2/polyfill.min.js" defer async></script>
     <script>
-      window._glam = <%= data.glamorIds || '[]' %>
+      window._styleIds = <%= data.styleIds || '[]' %>
     </script>
     <% data.js && data.js.forEach(function(file){ %>
         <script src="<%= file %>?t=<%= new Date().getTime() %>" charset="utf-8"></script>

diff --git a/src/scenes/App/App.emotion.css b/src/scenes/App/App.emotion.css
@@ -0,0 +1,15 @@
+:root {
+    --main-bg-color: brown;
+  }
+.css-App-15txg9k { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
+            height: 100%;
+            width: 100%;
+            -webkit-flex-direction: column;
+            -ms-flex-direction: column;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+            flex-direction: column;
+            -webkit-justify-content: flex-start;
+            -ms-flex-pack: start;
+            -webkit-box-pack: start;
+            justify-content: flex-start; }
diff --git a/src/scenes/App/App.js b/src/scenes/App/App.js
@@ -8,6 +8,7 @@ import { Provider } from 'mobx-react'
 import React from 'react'
 import Text from 'constelation-text'
 import mobx from 'mobx'
+import { injectGlobal } from 'emotion'
 
 import AppOverlay from 'stores/AppOverlay'
 
@@ -38,6 +39,12 @@ const stores = {
   AppOverlay: new AppOverlay(),
 }
 
+injectGlobal`
+  :root {
+    --main-bg-color: brown;
+  }
+`
+
 export class AppBar extends React.Component {
   render() {
     return (
@@ -64,19 +71,24 @@ export default class App extends React.Component {
   render() {
     return (
       <Provider {...stores}>
-        <Col
-          fit
-          alignVertical='top'
+        <div
+          css={`
+            display: flex;
+            height: 100%;
+            width: 100%;
+            flex-direction: column;
+            justify-content: flex-start;
+          `}
         >
-          <AppBar />
-          <TabBar />
+          {/* <AppBar /> */}
+          {/* <TabBar /> */}
 
           {this.props.children}
 
           <OpacityOverlay />
           <Overlay />
 
-        </Col>
+        </div>
       </Provider>
     )
   }

diff --git a/src/scenes/Home/Home.emotion.css b/src/scenes/Home/Home.emotion.css
@@ -0,0 +1,84 @@
+.css-COL-10v8qy4 {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+  position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-align-items: stretch;
+  -ms-flex-align: stretch;
+  -webkit-box-align: stretch;
+  align-items: stretch; }
+.css-flex-lmjjie { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
+  position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-align-items: stretch;
+  -ms-flex-align: stretch;
+  -webkit-box-align: stretch;
+  align-items: stretch; }
+.css-row-1u1wvnz { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+  position: relative;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-align-items: stretch;
+  -ms-flex-align: stretch;
+  -webkit-box-align: stretch;
+  align-items: stretch; }
+.css-center-oon92y { -webkit-align-items: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  -webkit-box-pack: center;
+  justify-content: center; }
+.css-BOX-1fsgt63 { height: 200px;
+  width: 400px;
+  background-color: red; }
+.css-BOX_UPDATED-1pa2pyx {
+  background-color: green; }
+.css-Home-1s18j1e { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-align-items: center;-ms-flex-align: center;-webkit-box-align: center;align-items: center;-webkit-justify-content: center;-ms-flex-pack: center;-webkit-box-pack: center;justify-content: center;-webkit-flex-grow: var(--css-Home-1s18j1e-0);-ms-flex-positive: var(--css-Home-1s18j1e-0);flex-grow: var(--css-Home-1s18j1e-0); }
+.css-Home-kssq5x { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;width: 300px;height: 30px;margin: 20px;
+            background-color: purple; }
+.css-Home-rcx6r3 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;height: 200px;width: 400px;
+            background-color: var(--css-Home-rcx6r3-0); }
+.css-Home-1ibztja { -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-flex-basis: 40px;-ms-preferred-size: 40px;flex-basis: 40px; }
+.css-Home-1fqfn1l { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;-webkit-box-orient: horizontal;-webkit-box-direction: normal;flex-direction: row;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;height: 200px;width: 400px; }
+.css-Home-10n0dl7 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;
+              background-color: red; }
+.css-Home-asuv6 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;
+              background-color: green; }
+.css-Home-1twycd7 { -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-flex-basis: 20px;-ms-preferred-size: 20px;flex-basis: 20px; }
+.css-Home-cb9ahb { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;
+              background-color: blue; }
+.css-Home-1ibztja { -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-flex-basis: 40px;-ms-preferred-size: 40px;flex-basis: 40px; }
+.css-Home-ypm15r { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-flex-direction: var(--css-Home-ypm15r-0);-ms-flex-direction: var(--css-Home-ypm15r-0);-webkit-box-orient: horizontal;-webkit-box-direction: normal;flex-direction: var(--css-Home-ypm15r-0);height: 200px;width: 400px; }
+.css-Home-10n0dl7 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;
+              background-color: red; }
+.css-Home-asuv6 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;
+              background-color: green; }
+.css-Home-cb9ahb { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;position: relative;-webkit-flex-grow: 1;-ms-flex-positive: 1;flex-grow: 1;
+              background-color: blue; }
+.css-Home-18gaxx6 { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size: 20px; }
+.css-Home-15dla7k { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size: 16px;
+            padding: 16px;
+            border: 1px solid #111; }
+.css-Home-15dla7k { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size: 16px;
+            padding: 16px;
+            border: 1px solid #111; }
+.css-Home-15dla7k { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size: 16px;
+            padding: 16px;
+            border: 1px solid #111; }