Added css module related config to Test.js (#76)

Prior to this fix running the tests for components created w/ css modules and css preprocessors (less, s(a|c)ss, stylus) would fail because the loader was configured to be the null-loader for these file types. As a result, the style object required by css modules would resolve to `undefined`, which in turn lets tests on these components fail with a 'CSS Module is undefined' error. Additionally: - fixed eslint warnings on Base.js - moved webpack from devDependencies to dependencies
react-webpack-generators · Nov 23, 2016 · 19d8af9 · 19d8af9
1 parent eec550d
commit 19d8af9
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 17 deletions.
diff --git a/conf/webpack/Base.js b/conf/webpack/Base.js
@@ -1,10 +1,11 @@
-'use strict';
+'use strict';  // eslint-disable-line
 
 /**
  * Webpack configuration base class
  */
 const fs = require('fs');
 const path = require('path');
+
 const npmBase = path.join(__dirname, '../../node_modules');
 
 class WebpackBaseConfig {
@@ -34,7 +35,7 @@ class WebpackBaseConfig {
 
   /**
    * Get the global config
-   * @param {Object} config Final webpack config
+   * @return {Object} config Final webpack config
    */
   get config() {
     return this._config;
@@ -151,7 +152,7 @@ class WebpackBaseConfig {
           {
             test: /\.cssmodule\.(sass|scss)$/,
             loaders: [
-              { loader: 'style-loader'},
+              { loader: 'style-loader' },
               {
                 loader: 'css-loader',
                 query: cssModulesQuery
@@ -162,7 +163,7 @@ class WebpackBaseConfig {
           {
             test: /\.cssmodule\.css$/,
             loaders: [
-              { loader: 'style-loader'},
+              { loader: 'style-loader' },
               {
                 loader: 'css-loader',
                 query: cssModulesQuery
@@ -172,7 +173,7 @@ class WebpackBaseConfig {
           {
             test: /\.cssmodule\.less$/,
             loaders: [
-              { loader: 'style-loader'},
+              { loader: 'style-loader' },
               {
                 loader: 'css-loader',
                 query: cssModulesQuery
@@ -183,7 +184,7 @@ class WebpackBaseConfig {
           {
             test: /\.cssmodule\.styl$/,
             loaders: [
-              { loader: 'style-loader'},
+              { loader: 'style-loader' },
               {
                 loader: 'css-loader',
                 query: cssModulesQuery

diff --git a/conf/webpack/Test.js b/conf/webpack/Test.js
@@ -1,4 +1,4 @@
-'use strict';
+'use strict';  // eslint-disable-line
 
 /**
  * Default test configuration.
@@ -10,13 +10,20 @@ class WebpackTestConfig extends WebpackBaseConfig {
 
   constructor() {
     super();
+
+    const cssModulesQuery = {
+      modules: true,
+      importLoaders: 1,
+      localIdentName: '[name]-[local]-[hash:base64:5]'
+    };
+
     this.config = {
       devtool: 'inline-source-map',
       entry: [
         './client.js'
       ],
       externals: {
-        'cheerio': 'window',
+        cheerio: 'window',
         'react/addons': 'true',
         'react/lib/ExecutionEnvironment': 'true',
         'react/lib/ReactContext': 'true'
@@ -26,23 +33,64 @@ class WebpackTestConfig extends WebpackBaseConfig {
           {
             test: /\.cssmodule\.css$/,
             loaders: [
-              { loader: 'style-loader'},
+              { loader: 'style-loader' },
               {
                 loader: 'css-loader',
-                query: {
-                  modules: true,
-                  importLoaders: 1,
-                  localIdentName: '[name]-[local]-[hash:base64:5]'
-                }
+                query: cssModulesQuery
               }
             ]
           },
+          {
+            test: /\.cssmodule\.less$/,
+            loaders: [
+              { loader: 'style-loader' },
+              {
+                loader: 'css-loader',
+                query: cssModulesQuery
+              },
+              { loader: 'less-loader' }
+            ]
+          },
+          {
+            test: /\.cssmodule\.styl$/,
+            loaders: [
+              { loader: 'style-loader' },
+              {
+                loader: 'css-loader',
+                query: cssModulesQuery
+              },
+              { loader: 'stylus-loader' }
+            ]
+          },
+          {
+            test: /\.cssmodule\.(sass|scss)$/,
+            loaders: [
+              { loader: 'style-loader' },
+              {
+                loader: 'css-loader',
+                query: cssModulesQuery
+              },
+              { loader: 'sass-loader' }
+            ]
+          },
           {
             test: /^.((?!cssmodule).)*\.css$/,
             loader: 'null-loader'
           },
           {
-            test: /\.(sass|scss|less|styl|png|jpg|gif|mp4|ogg|svg|woff|woff2)$/,
+            test: /^.((?!cssmodule).)*\.(sass|scss)$/,
+            loader: 'null-loader'
+          },
+          {
+            test: /^.((?!cssmodule).)*\.less$/,
+            loader: 'null-loader'
+          },
+          {
+            test: /^.((?!cssmodule).)*\.styl$/,
+            loader: 'null-loader'
+          },
+          {
+            test: /\.(png|jpg|gif|mp4|ogg|svg|woff|woff2)$/,
             loader: 'null-loader'
           },
           {

diff --git a/package.json b/package.json
@@ -77,14 +77,14 @@
     "sinon": "^1.17.3",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
-    "webpack": "^2.1.0-beta.6",
     "webpack-dev-server": "^2.1.0-beta"
   },
   "dependencies": {
     "cross-env": "^3.1.0",
     "react": "^15.0.1",
     "react-dom": "^15.0.1",
-    "react-hot-loader": "^3.0.0-beta.6"
+    "react-hot-loader": "^3.0.0-beta.6",
+    "webpack": "^2.1.0-beta.6"
   },
   "engines": {
     "node": ">= 4.0.0",