constelation · kylpo · Jul 13, 2017
diff --git a/.babelrc b/.babelrc
@@ -3,14 +3,17 @@
 // Preset ordering is reversed (last to first).
 {
   "plugins": [
+    ["emotion/babel", { "inline": 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/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.2.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": "^5.2.0",
     "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,17 +20,16 @@ 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),
+        // style: 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
@@ -34,6 +34,9 @@
         height: 100%;
       }
     </style>
+    <% if (data.style) { %>
+     <link rel="stylesheet" type="text/css" href="styles.css">
+    <% } %>
   </head>
   <body>
     <div id="root">
@@ -44,7 +47,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/Home/Home.js b/src/scenes/Home/Home.js
@@ -1,19 +1,49 @@
 // @flow
 // Imports {{{
-import { Col, View } from 'constelation-view'
+import { View } from 'constelation-view'
 import { bind } from 'decko'
 import { inject, observer } from 'mobx-react'
 import Event_ from 'constelation-event_'
 import Link from 'react-router/lib/Link'
 import React from 'react'
 import Style_ from 'constelation-style_'
 import Text from 'constelation-text'
+import { css, styled } from 'emotion'
 
 import CenteredOverlay from './_/CenteredOverlay'
 import FullOverlay from './_/FullOverlay'
 
 // }}}
 
+
+const col = css`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  flex-shrink: 0;
+  align-items: stretch;
+`
+
+const flex = css`
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  align-items: stretch;
+`
+
+const row = css`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  flex-shrink: 0;
+  align-items: stretch;
+`
+
+const center = css`
+  align-items: center;
+  justify-content: center;
+`
+
 @inject('AppOverlay')
 @observer
 export default class Home extends React.Component {
@@ -41,38 +71,55 @@ export default class Home extends React.Component {
 
   render() {
     return (
-      <Col
-        center
-        grow
+      <div
+        css={`
+          composes: ${col} ${center};
+          flex-grow: 1;
+        `}
       >
-        <Text size={20}>Home</Text>
+        <span
+          css={`
+            font-size: 20px;
+          `}
+        >
+          Home
+        </span>
 
         <Link to='other'>Other</Link>
 
-        <Event_ onClick={this.handleOpenFadeOverlay}>
-          <Style_ border='1px solid #111'>
-            <View padding={16}>
-              <Text size={16}>Open Fade Overlay</Text>
-            </View>
-          </Style_>
-        </Event_>
-
-        <Event_ onClick={this.handleOpenModal}>
-          <Style_ border='1px solid #111'>
-            <View padding={16}>
-              <Text size={16}>Open Overlay Light Outer</Text>
-            </View>
-          </Style_>
-        </Event_>
-
-        <Event_ onClick={this.handleOpenModalDark}>
-          <Style_ border='1px solid #111'>
-            <View padding={16}>
-              <Text size={16}>Open Modal Dark Outer</Text>
-            </View>
-          </Style_>
-        </Event_>
-      </Col>
+        <span
+          onClick={this.handleOpenFadeOverlay}
+          css={`
+            font-size: 16px;
+            padding: 16px;
+            border: 1px solid #111;
+          `}
+        >
+          Open Fade Overlay
+        </span>
+
+        <span
+          onClick={this.handleOpenModal}
+          css={`
+            font-size: 16px;
+            padding: 16px;
+            border: 1px solid #111;
+          `}
+        >
+          Open Overlay Light Outer
+        </span>
+
+        <span
+          onClick={this.handleOpenModalDark}
+          css={`
+            font-size: 16px;
+            padding: 16px;
+            border: 1px solid #111;
+          `}
+        >
+          Open Modal Dark Outer
+        </span>
+      </div>
     )
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -6,6 +6,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin')
 const BabiliPlugin = require('babili-webpack-plugin')
 const CompressionPlugin = require('compression-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin')
 
 // The routes that should generate *.html files for being served statically
@@ -64,6 +65,21 @@ module.exports = function (env = {}) {
           use: ['babel-loader'],
           exclude: /node_modules/,
         },
+        {
+          test: /emotion\.css$/,
+          use: env.prod ? ExtractTextPlugin.extract({
+            fallback: 'style-loader',
+            use: {
+              loader: 'css-loader',
+              options: {
+                sourceMap: true
+              }
+            }
+          }) : [
+            'style-loader',
+            { loader: 'css-loader' }
+          ]
+        },
         // {variable: 'data'} needed to avoid a 'with' error:
         // http://stackoverflow.com/questions/18679422/issue-with-with-use-strict-and-underscore-js
         { test: /\.ejs$/, loader: 'ejs-loader', options: { variable: 'data' }},
@@ -102,19 +118,22 @@ module.exports = function (env = {}) {
     config.output.libraryTarget = 'umd'
 
     // Builds the static files
-    config.plugins.push( new StaticSiteGeneratorPlugin({
-      entry: 'main',
-
-      // Rather than manually providing a list of paths, you can use the crawl option to automatically crawl your site
-      crawl: true,
-
-      // Note that this can be used in conjunction with the paths option to allow multiple crawler entry points:
-      // paths: [
-      //   '/', // required entry point for crawl if adding explicit paths
-      //   '/notFound',
-      //   // '/other',
-      // ],
-    }))
+    config.plugins.push(
+      new ExtractTextPlugin('styles.css'),
+      new StaticSiteGeneratorPlugin({
+        entry: 'main',
+
+        // Rather than manually providing a list of paths, you can use the crawl option to automatically crawl your site
+        crawl: true,
+
+        // Note that this can be used in conjunction with the paths option to allow multiple crawler entry points:
+        // paths: [
+        //   '/', // required entry point for crawl if adding explicit paths
+        //   '/notFound',
+        //   // '/other',
+        // ],
+      })
+    )
   }
   // Settings required for generating the js bundles
   else {
@@ -141,6 +160,8 @@ module.exports = function (env = {}) {
           debug: false,
         }),
 
+        new ExtractTextPlugin('styles.css'),
+
         // Minifier that understands es6 (vs Uglify)
         new BabiliPlugin(),
         new CompressionPlugin({