From e2c02444b1e7c6ec349511aa9b2da1a52aba5474 Mon Sep 17 00:00:00 2001
From: Dmitri Pisarev <dimaip@gmail.com>
Date: Thu, 7 Apr 2016 23:32:11 +0300
Subject: [PATCH] Step 3a: switch to CSS modules

Everybody loves CSS modules, and the great news is that they come free with Webpack.
The bad news is that we can't use them with server-side rendering, as we don't use
Webpack when rendering on the server-side.
So at this step we broke everything, and the only way to continue from here, is to
start using Webpack to pre-build code for server-side rendering too, and that's
what we'll do at the next step.
---
 Hello.js                | 6 ++----
 Hello.css => Hello.scss | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)
 rename Hello.css => Hello.scss (89%)

diff --git a/Hello.js b/Hello.js
index 011b32f..632ff97 100644
--- a/Hello.js
+++ b/Hello.js
@@ -1,11 +1,9 @@
 import React from 'react';
-if (process.env.BROWSER) {
-    require('Hello.css');
-}
+import s from 'Hello.scss';
 
 const Hello = React.createClass({
   render: function() {
-    return <div className="Hello">Hello {this.props.name}</div>;
+    return <div className={s.root}>Hello {this.props.name}</div>;
   }
 });
 
diff --git a/Hello.css b/Hello.scss
similarity index 89%
rename from Hello.css
rename to Hello.scss
index a73bee7..ce80c30 100644
--- a/Hello.css
+++ b/Hello.scss
@@ -1,4 +1,4 @@
-.Hello {
+.root {
     font-size: 3em;
     font-family: sans-serif;
     color: rebeccapurple;