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-examples-with-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,114 @@
+"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";
+    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"
+        })
+      ]
+    };
+
+    const cssConfig = modules =>
+      [
+        {
+          loader: require.resolve("css-loader"),
+          options: {
+            importLoaders: 1,
+            minimize: !dev,
+            sourceMap: !dev,
+            modules: modules,
+            localIdentName: modules ? "[path]__[name]___[local]" : undefined
+          }
+        },
+        isServer && {
+          loader: require.resolve("postcss-loader"),
+          options: postCSSLoaderOptions
+        }
+      ].filter(x => !!x);
+    const css = cssConfig(false);
+    const cssModules = cssConfig(true);
+
+    const i = appConfig.module.rules.findIndex(
+      rule => rule.test && !!".css".match(rule.test)
+    );
+
+    if (!dev && !isServer) {
+      appConfig.module.rules[i] = {
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: {
+            loader: require.resolve("style-loader"),
+            options: {
+              hmr: false
+            }
+          },
+          use: css
+        })
+      };
+      appConfig.module.rules.push({
+        test: /\.module\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: {
+            loader: require.resolve("style-loader"),
+            options: {
+              hmr: false
+            }
+          },
+          use: cssModules
+        })
+      });
+      appConfig.plugins.push(
+        new ExtractTextPlugin("static/css/[name].[contenthash:8].css")
+      );
+    } else if (!dev && isServer) {
+      appConfig.module.rules[i] = {
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: css
+      };
+      appConfig.module.rules.push({
+        test: /\.module\.css$/,
+        use: [
+          isServer && require.resolve("isomorphic-style-loader"),
+          ...cssModules
+        ].filter(x => !!x)
+      });
+    } else {
+      appConfig.module.rules[i] = {
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: [!isServer && require.resolve("style-loader"), ...css].filter(
+          x => !!x
+        )
+      };
+      appConfig.module.rules.push({
+        test: /\.module\.css$/,
+        use: [
+          isServer
+            ? require.resolve("isomorphic-style-loader")
+            : require.resolve("style-loader"),
+          ...cssModules
+        ].filter(x => !!x)
+      });
+    }
+
+    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;
+  });
+}

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

@@ -0,0 +1,47 @@
+import App from './App';
+import React from 'react';
+import { StaticRouter } from 'react-router-dom';
+import express from 'express';
+import { renderToString } from 'react-dom/server';
+
+const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
+
+const server = express();
+server
+  .disable('x-powered-by')
+  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
+  .get('/*', (req, res) => {
+    const context = {};
+    const markup = renderToString(
+      <StaticRouter context={context} location={req.url}>
+        <App />
+      </StaticRouter>
+    );
+
+    if (context.url) {
+      res.redirect(context.url);
+    } else {
+      res.status(200).send(
+        `<!doctype html>
+    <html lang="">
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta charSet='utf-8' />
+        <title>Welcome to Razzle</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        ${assets.client.css
+          ? `<link rel="stylesheet" href="${assets.client.css}">`
+          : ''}
+        ${process.env.NODE_ENV === 'production'
+          ? `<script src="${assets.client.js}" defer></script>`
+          : `<script src="${assets.client.js}" defer crossorigin></script>`}
+    </head>
+    <body>
+        <div id="root">${markup}</div>
+    </body>
+</html>`
+      );
+    }
+  });
+
+export default server;

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

@@ -0,0 +1 @@
+import 'raf/polyfill';