Approach to using css modules (jaredpalmer#460)

* udpates the home template * enables modules * readds normal css to template * add support for both normal css and css modules * removes added ws * remove exclude in css module loader definition * updates regex
ownerclan · Jan 17, 2018 · e3f61d6 · e3f61d6
1 parent 13c8484
commit e3f61d6
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 38 deletions.
diff --git a/packages/create-razzle-app/templates/default/src/Home.css b/packages/create-razzle-app/templates/default/src/Home.css
@@ -28,6 +28,10 @@
 }
 
 @keyframes Home-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/packages/create-razzle-app/templates/default/src/Home.js b/packages/create-razzle-app/templates/default/src/Home.js
@@ -1,20 +1,21 @@
 import React, { Component } from 'react';
 import logo from './react.svg';
+import styles from './Home.module.css';
 import './Home.css';
 
 class Home extends Component {
   render() {
     return (
-      <div className="Home">
-        <div className="Home-header">
+      <div className={styles.home}>
+        <div className={styles.header}>
           <img src={logo} className="Home-logo" alt="logo" />
           <h2>Welcome to Razzle</h2>
         </div>
-        <p className="Home-intro">
+        <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="Home-resources">
+        <ul className={styles.resources}>
           <li>
             <a href="https://github.com/jaredpalmer/razzle">Docs</a>
           </li>

diff --git a/packages/create-razzle-app/templates/default/src/Home.module.css b/packages/create-razzle-app/templates/default/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); }
+}
diff --git a/packages/razzle/config/createConfig.js b/packages/razzle/config/createConfig.js
@@ -16,6 +16,22 @@ const getClientEnv = require('./env').getClientEnv;
 const nodePath = require('./env').nodePath;
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 
+const postCssOptions = {
+  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',
+    }),
+  ],
+};
+
 // This is the Webpack configuration factory. It's the juice!
 module.exports = (
   target = 'web',
@@ -156,7 +172,7 @@ module.exports = (
         // Note: this yields the exact same CSS config as create-react-app.
         {
           test: /\.css$/,
-          exclude: [paths.appBuild],
+          exclude: [paths.appBuild, /\.module\.css$/],
           use: IS_NODE
             ? // Style-loader does not work in Node.js without some crazy
               // magic. Luckily we just need css-loader.
@@ -179,21 +195,7 @@ module.exports = (
                   },
                   {
                     loader: require.resolve('postcss-loader'),
-                    options: {
-                      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',
-                        }),
-                      ],
-                    },
+                    options: postCssOptions,
                   },
                 ]
               : ExtractTextPlugin.extract({
@@ -202,28 +204,68 @@ module.exports = (
                     {
                       loader: require.resolve('css-loader'),
                       options: {
-                        importLoaders: 1,
-                        minimize: true
+                        modules: true,
+                        minimize: true,
                       },
                     },
                     {
                       loader: require.resolve('postcss-loader'),
+                      options: postCssOptions,
+                    },
+                  ],
+                }),
+        },
+        {
+          test: /\.module\.css$/,
+          exclude: [paths.appBuild],
+          use: IS_NODE
+            ? // Style-loader does not work in Node.js without some crazy
+              // magic. Luckily we just need css-loader.
+              [
+                {
+                  loader: require.resolve('css-loader'),
+                  options: {
+                    modules: true,
+                    importLoaders: 1,
+                  },
+                },
+              ]
+            : IS_DEV
+              ? [
+                  'style-loader',
+                  {
+                    loader: require.resolve('css-loader'),
+                    options: {
+                      modules: true,
+                      importLoaders: 1,
+                    },
+                  },
+                  {
+                    loader: require.resolve('postcss-loader'),
+                    options: postCssOptions,
+                  },
+                ]
+              : ExtractTextPlugin.extract({
+                  fallback: {
+                    loader: require.resolve('style-loader'),
+                    options: {
+                      hmr: false,
+                    },
+                  },
+                  use: [
+                    {
+                      loader: require.resolve('css-loader'),
                       options: {
-                        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',
-                          }),
-                        ],
+                        modules: true,
+                        importLoaders: 1,
+                        minimize: true,
+                        localIdentName: '[path]__[name]___[local]',
                       },
                     },
+                    {
+                      loader: require.resolve('postcss-loader'),
+                      options: postCssOptions,
+                    },
                   ],
                 }),
         },