CSS Modules example

examples/with-css-modules/.gitignore

@@ -0,0 +1,10 @@
+logs
+*.log
+npm-debug.log*
+.DS_Store
+
+coverage
+node_modules
+build
+public/static
+.env.*.local

examples/with-css-modules/README.md

@@ -0,0 +1 @@
+# Razzle and CSS modules

examples/with-css-modules/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "razzle-cssmodules",
+  "version": "0.1.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "razzle start",
+    "build": "razzle build",
+    "test": "razzle test --env=jsdom",
+    "start:prod": "NODE_ENV=production node build/server.js"
+  },
+  "dependencies": {
+    "express": "^4.16.2",
+    "isomorphic-style-loader": "^4.0.0",
+    "raf": "^3.4.0",
+    "razzle": "^0.8.7",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-router-dom": "^4.2.2"
+  }
+}

examples/with-css-modules/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+

examples/with-css-modules/razzle.config.js

@@ -0,0 +1,198 @@
+"use strict";
+
+const autoprefixer = require("autoprefixer");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const path = require("path");
+
+module.exports = {
+  modify(config, { target, dev }, webpack) {
+    const appConfig = Object.assign({}, config);
+    const isServer = target !== "web";
+
+    // Options for PostCSS as we reference these options twice
+    // Adds vendor prefixing to support IE9 and above
+    const postCSSLoaderOptions = {
+      ident: "postcss", // https://webpack.js.org/guides/migrating/#complex-options
+      plugins: () => [
+        require("postcss-flexbugs-fixes"),
+        autoprefixer({
+          browsers: [
+            ">1%",
+            "last 4 versions",
+            "Firefox ESR",
+            "not ie < 9" // React doesn't support IE8 anyway
+          ],
+          flexbox: "no-2009"
+        })
+      ]
+    };
+
+    if (dev) {
+      appConfig.module.rules = appConfig.module.rules.map(rule => {
+        if (rule.test && !!".css".match(rule.test)) {
+          return {
+            test: /\.css$/,
+            exclude: /\.module\.css$/,
+            use: isServer
+              ? [
+                  {
+                    loader: "css-loader",
+                    options: {
+                      importLoaders: 1
+                    }
+                  }
+                ]
+              : [
+                  require.resolve("style-loader"),
+                  {
+                    loader: require.resolve("css-loader"),
+                    options: {
+                      importLoaders: 1
+                    }
+                  },
+                  {
+                    loader: require.resolve("postcss-loader"),
+                    options: postCSSLoaderOptions
+                  }
+                ]
+          };
+        }
+        return rule;
+      });
+
+      appConfig.module.rules.push({
+        test: /\.module\.css$/,
+        use: isServer
+          ? [
+              "isomorphic-style-loader",
+              {
+                loader: require.resolve("css-loader"),
+                options: {
+                  importLoaders: 1,
+                  modules: true,
+                  localIdentName: "[path]__[name]___[local]"
+                }
+              }
+            ]
+          : [
+              require.resolve("style-loader"),
+              {
+                loader: require.resolve("css-loader"),
+                options: {
+                  importLoaders: 1,
+                  modules: true,
+                  localIdentName: "[path]__[name]___[local]"
+                }
+              },
+              {
+                loader: require.resolve("postcss-loader"),
+                options: postCSSLoaderOptions
+              }
+            ]
+      });
+    } else if (!dev && !isServer) {
+      appConfig.module.rules = appConfig.module.rules.map(rule => {
+        if (rule.test && !!".css".match(rule.test)) {
+          return {
+            test: /\.css$/,
+            exclude: /\.module\.css$/,
+            use: ExtractTextPlugin.extract({
+              fallback: {
+                loader: require.resolve("style-loader"),
+                options: {
+                  hmr: false
+                }
+              },
+              use: [
+                {
+                  loader: require.resolve("css-loader"),
+                  options: {
+                    importLoaders: 1,
+                    minimize: true,
+                    sourceMap: true
+                  }
+                },
+                {
+                  loader: require.resolve("postcss-loader"),
+                  options: postCSSLoaderOptions
+                }
+              ]
+            })
+          };
+        }
+        return rule;
+      });
+
+      appConfig.module.rules.push({
+        test: /\.module\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: {
+            loader: require.resolve("style-loader"),
+            options: {
+              hmr: false
+            }
+          },
+          use: [
+            {
+              loader: require.resolve("css-loader"),
+              options: {
+                importLoaders: 1,
+                minimize: true,
+                sourceMap: true,
+                modules: true,
+                localIdentName: "[path]__[name]___[local]"
+              }
+            },
+            {
+              loader: require.resolve("postcss-loader"),
+              options: postCSSLoaderOptions
+            }
+          ]
+        })
+      });
+
+      appConfig.plugins.push(
+        new ExtractTextPlugin("static/css/[name].[contenthash:8].css")
+      );
+    } else if (!dev && isServer) {
+      appConfig.module.rules = appConfig.module.rules.map(rule => {
+        if (rule.test && !!".css".match(rule.test)) {
+          return {
+            test: /\.css$/,
+            exclude: /\.module\.css$/,
+            use: [
+              {
+                loader: require.resolve("css-loader"),
+                options: {
+                  importLoaders: 1,
+                  minimize: true,
+                  sourceMap: true
+                }
+              }
+            ]
+          };
+        }
+        return rule;
+      });
+
+      appConfig.module.rules.push({
+        test: /\.module\.css$/,
+        use: [
+          "isomorphic-style-loader",
+          {
+            loader: require.resolve("css-loader"),
+            options: {
+              importLoaders: 1,
+              minimize: true,
+              sourceMap: true,
+              modules: true,
+              localIdentName: "[path]__[name]___[local]"
+            }
+          }
+        ]
+      });
+    }
+
+    loader: return appConfig;
+  }
+};

examples/with-css-modules/src/App.css

@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}

examples/with-css-modules/src/App.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Route from 'react-router-dom/Route';
+import Switch from 'react-router-dom/Switch';
+import Home from './Home';
+import './App.css';
+
+const App = () => (
+  <Switch>
+    <Route exact path="/" component={Home} />
+  </Switch>
+);
+
+export default App;

examples/with-css-modules/src/App.test.js

@@ -0,0 +1,16 @@
+import App from './App';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import MemoryRouter from 'react-router-dom/MemoryRouter';
+
+describe('<App />', () => {
+  test('renders without exploding', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(
+      <MemoryRouter>
+        <App />
+      </MemoryRouter>,
+      div
+    );
+  });
+});

examples/with-css-modules/src/Home.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import logo from './react.svg';
+import styles from './Home.module.css';
+
+class Home extends Component {
+  render() {
+    return (
+      <div className={styles.Home}>
+        <div className={styles.header}>
+          <img src={logo} className={styles.logo} alt="logo" />
+          <h2>Welcome to Razzle</h2>
+        </div>
+        <p className={styles.intro}>
+          To get started, edit <code>src/App.js</code> or{' '}
+          <code>src/Home.js</code> and save to reload.
+        </p>
+        <ul className={styles.resources}>
+          <li>
+            <a href="https://github.com/jaredpalmer/razzle">Docs</a>
+          </li>
+          <li>
+            <a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
+          </li>
+          <li>
+            <a href="https://palmer.chat">Community Slack</a>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default Home;

examples/with-css-modules/src/Home.module.css

@@ -0,0 +1,33 @@
+.Home {
+  text-align: center;
+}
+
+.logo {
+  animation: Home-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.intro {
+  font-size: large;
+}
+
+.resources {
+  list-style: none;
+}
+
+.resources > li {
+  display: inline-block;
+  padding: 1rem;
+}
+
+@keyframes Home-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

examples/with-css-modules/src/client.js

@@ -0,0 +1,15 @@
+import App from './App';
+import BrowserRouter from 'react-router-dom/BrowserRouter';
+import React from 'react';
+import { hydrate } from 'react-dom';
+
+hydrate(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+  document.getElementById('root')
+);
+
+if (module.hot) {
+  module.hot.accept();
+}

examples/with-css-modules/src/index.js

@@ -0,0 +1,26 @@
+import app from './server';
+import http from 'http';
+
+const server = http.createServer(app);
+
+let currentApp = app;
+
+server.listen(process.env.PORT || 3000, (error) => {
+  if (error) {
+    console.log(error)
+  }
+
+  console.log('🚀 started')
+});
+
+if (module.hot) {
+  console.log('✅  Server-side HMR Enabled!');
+
+  module.hot.accept('./server', () => {
+    console.log('🔁  HMR Reloading `./server`...');
+    server.removeListener('request', currentApp);
+    const newApp = require('./server').default;
+    server.on('request', newApp);
+    currentApp = newApp;
+  });
+}