Skip to content

Commit 19d8af9

Browse files
authored
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
1 parent eec550d commit 19d8af9

File tree

3 files changed

+66
-17
lines changed

3 files changed

+66
-17
lines changed

conf/webpack/Base.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
'use strict';
1+
'use strict'; // eslint-disable-line
22

33
/**
44
* Webpack configuration base class
55
*/
66
const fs = require('fs');
77
const path = require('path');
8+
89
const npmBase = path.join(__dirname, '../../node_modules');
910

1011
class WebpackBaseConfig {
@@ -34,7 +35,7 @@ class WebpackBaseConfig {
3435

3536
/**
3637
* Get the global config
37-
* @param {Object} config Final webpack config
38+
* @return {Object} config Final webpack config
3839
*/
3940
get config() {
4041
return this._config;
@@ -151,7 +152,7 @@ class WebpackBaseConfig {
151152
{
152153
test: /\.cssmodule\.(sass|scss)$/,
153154
loaders: [
154-
{ loader: 'style-loader'},
155+
{ loader: 'style-loader' },
155156
{
156157
loader: 'css-loader',
157158
query: cssModulesQuery
@@ -162,7 +163,7 @@ class WebpackBaseConfig {
162163
{
163164
test: /\.cssmodule\.css$/,
164165
loaders: [
165-
{ loader: 'style-loader'},
166+
{ loader: 'style-loader' },
166167
{
167168
loader: 'css-loader',
168169
query: cssModulesQuery
@@ -172,7 +173,7 @@ class WebpackBaseConfig {
172173
{
173174
test: /\.cssmodule\.less$/,
174175
loaders: [
175-
{ loader: 'style-loader'},
176+
{ loader: 'style-loader' },
176177
{
177178
loader: 'css-loader',
178179
query: cssModulesQuery
@@ -183,7 +184,7 @@ class WebpackBaseConfig {
183184
{
184185
test: /\.cssmodule\.styl$/,
185186
loaders: [
186-
{ loader: 'style-loader'},
187+
{ loader: 'style-loader' },
187188
{
188189
loader: 'css-loader',
189190
query: cssModulesQuery

conf/webpack/Test.js

Lines changed: 57 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
'use strict';
1+
'use strict'; // eslint-disable-line
22

33
/**
44
* Default test configuration.
@@ -10,13 +10,20 @@ class WebpackTestConfig extends WebpackBaseConfig {
1010

1111
constructor() {
1212
super();
13+
14+
const cssModulesQuery = {
15+
modules: true,
16+
importLoaders: 1,
17+
localIdentName: '[name]-[local]-[hash:base64:5]'
18+
};
19+
1320
this.config = {
1421
devtool: 'inline-source-map',
1522
entry: [
1623
'./client.js'
1724
],
1825
externals: {
19-
'cheerio': 'window',
26+
cheerio: 'window',
2027
'react/addons': 'true',
2128
'react/lib/ExecutionEnvironment': 'true',
2229
'react/lib/ReactContext': 'true'
@@ -26,23 +33,64 @@ class WebpackTestConfig extends WebpackBaseConfig {
2633
{
2734
test: /\.cssmodule\.css$/,
2835
loaders: [
29-
{ loader: 'style-loader'},
36+
{ loader: 'style-loader' },
3037
{
3138
loader: 'css-loader',
32-
query: {
33-
modules: true,
34-
importLoaders: 1,
35-
localIdentName: '[name]-[local]-[hash:base64:5]'
36-
}
39+
query: cssModulesQuery
3740
}
3841
]
3942
},
43+
{
44+
test: /\.cssmodule\.less$/,
45+
loaders: [
46+
{ loader: 'style-loader' },
47+
{
48+
loader: 'css-loader',
49+
query: cssModulesQuery
50+
},
51+
{ loader: 'less-loader' }
52+
]
53+
},
54+
{
55+
test: /\.cssmodule\.styl$/,
56+
loaders: [
57+
{ loader: 'style-loader' },
58+
{
59+
loader: 'css-loader',
60+
query: cssModulesQuery
61+
},
62+
{ loader: 'stylus-loader' }
63+
]
64+
},
65+
{
66+
test: /\.cssmodule\.(sass|scss)$/,
67+
loaders: [
68+
{ loader: 'style-loader' },
69+
{
70+
loader: 'css-loader',
71+
query: cssModulesQuery
72+
},
73+
{ loader: 'sass-loader' }
74+
]
75+
},
4076
{
4177
test: /^.((?!cssmodule).)*\.css$/,
4278
loader: 'null-loader'
4379
},
4480
{
45-
test: /\.(sass|scss|less|styl|png|jpg|gif|mp4|ogg|svg|woff|woff2)$/,
81+
test: /^.((?!cssmodule).)*\.(sass|scss)$/,
82+
loader: 'null-loader'
83+
},
84+
{
85+
test: /^.((?!cssmodule).)*\.less$/,
86+
loader: 'null-loader'
87+
},
88+
{
89+
test: /^.((?!cssmodule).)*\.styl$/,
90+
loader: 'null-loader'
91+
},
92+
{
93+
test: /\.(png|jpg|gif|mp4|ogg|svg|woff|woff2)$/,
4694
loader: 'null-loader'
4795
},
4896
{

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,14 +77,14 @@
7777
"sinon": "^1.17.3",
7878
"style-loader": "^0.13.1",
7979
"url-loader": "^0.5.7",
80-
"webpack": "^2.1.0-beta.6",
8180
"webpack-dev-server": "^2.1.0-beta"
8281
},
8382
"dependencies": {
8483
"cross-env": "^3.1.0",
8584
"react": "^15.0.1",
8685
"react-dom": "^15.0.1",
87-
"react-hot-loader": "^3.0.0-beta.6"
86+
"react-hot-loader": "^3.0.0-beta.6",
87+
"webpack": "^2.1.0-beta.6"
8888
},
8989
"engines": {
9090
"node": ">= 4.0.0",

0 commit comments

Comments
 (0)