[added] support for the server-side usage of the SCSS Modules

thealjey · Jan 11, 2016 · 0dce231 · 0dce231
1 parent 10f9884
commit 0dce231
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 22 deletions.
diff --git a/config/babel.json b/config/babel.json
@@ -5,7 +5,8 @@
       "plugins": [
         "transform-class-properties",
         "transform-react-display-name",
-        "transform-runtime"
+        "transform-runtime",
+        ["webpack-loaders", {"config": "./config/webpack.node.js"}]
       ]
     },
     "production": {
@@ -14,6 +15,7 @@
         "transform-class-properties",
         "transform-react-display-name",
         "transform-runtime",
+        ["webpack-loaders", {"config": "./config/webpack.node.js"}],
         "transform-member-expression-literals",
         "transform-property-literals",
         "transform-merge-sibling-variables",

diff --git a/config/webpack.node.js b/config/webpack.node.js
@@ -0,0 +1,21 @@
+var autoprefixer = require('autoprefixer');
+var importer = require('node-sass-import-once');
+
+module.exports = {
+  output: {libraryTarget: 'commonjs2'},
+  module: {
+    loaders: [{
+      test: /\.scss$/,
+      loaders: ['style?singleton', 'css?modules&minimize&importLoaders=1&sourceMap', 'postcss', 'sass?sourceMap']
+    }]
+  },
+  postcss: function () {
+    return [autoprefixer];
+  },
+  sassLoader: {
+    importer: importer,
+    importOnce: {index: true, css: false, bower: false},
+    includePaths: ['node_modules/bootstrap-sass/assets/stylesheets', 'node_modules'],
+    precision: 8
+  }
+};
diff --git a/docs/Compiler.html b/docs/Compiler.html
@@ -409,7 +409,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="Compiler.js.html">Compiler.js</a>,
-				 <a href="Compiler.js.html#sunlight-1-line-55">line 55</a>
+				 <a href="Compiler.js.html#sunlight-1-line-58">line 58</a>
 			</li>
 		</ul>
 	</dd>
@@ -601,7 +601,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="Compiler.js.html">Compiler.js</a>,
-				 <a href="Compiler.js.html#sunlight-1-line-72">line 72</a>
+				 <a href="Compiler.js.html#sunlight-1-line-75">line 75</a>
 			</li>
 		</ul>
 	</dd>
@@ -769,7 +769,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="Compiler.js.html">Compiler.js</a>,
-				 <a href="Compiler.js.html#sunlight-1-line-42">line 42</a>
+				 <a href="Compiler.js.html#sunlight-1-line-45">line 45</a>
 			</li>
 		</ul>
 	</dd>
@@ -955,7 +955,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="Compiler.js.html">Compiler.js</a>,
-				 <a href="Compiler.js.html#sunlight-1-line-104">line 104</a>
+				 <a href="Compiler.js.html#sunlight-1-line-107">line 107</a>
 			</li>
 		</ul>
 	</dd>
@@ -1171,7 +1171,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="Compiler.js.html">Compiler.js</a>,
-				 <a href="Compiler.js.html#sunlight-1-line-125">line 125</a>
+				 <a href="Compiler.js.html#sunlight-1-line-128">line 128</a>
 			</li>
 		</ul>
 	</dd>

diff --git a/docs/Compiler.js.html b/docs/Compiler.js.html
@@ -113,6 +113,9 @@ <h1 class="page-title">Source: Compiler.js</h1>
 
   constructor() {
     this.isProduction = 'production' === process.env.NODE_ENV;
+    if (!this.isProduction) {
+      process.env.NODE_ENV = 'development';
+    }
   }
 
   /**

diff --git a/docs/JSCompiler.html b/docs/JSCompiler.html
@@ -772,7 +772,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="Compiler.js.html">Compiler.js</a>,
-				 <a href="Compiler.js.html#sunlight-1-line-55">line 55</a>
+				 <a href="Compiler.js.html#sunlight-1-line-58">line 58</a>
 			</li>
 		</ul>
 	</dd>
@@ -1237,7 +1237,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="Compiler.js.html">Compiler.js</a>,
-				 <a href="Compiler.js.html#sunlight-1-line-72">line 72</a>
+				 <a href="Compiler.js.html#sunlight-1-line-75">line 75</a>
 			</li>
 		</ul>
 	</dd>
@@ -1611,7 +1611,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="Compiler.js.html">Compiler.js</a>,
-				 <a href="Compiler.js.html#sunlight-1-line-104">line 104</a>
+				 <a href="Compiler.js.html#sunlight-1-line-107">line 107</a>
 			</li>
 		</ul>
 	</dd>
@@ -1836,7 +1836,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="Compiler.js.html">Compiler.js</a>,
-				 <a href="Compiler.js.html#sunlight-1-line-125">line 125</a>
+				 <a href="Compiler.js.html#sunlight-1-line-128">line 128</a>
 			</li>
 		</ul>
 	</dd>

diff --git a/docs/JSCompiler.js.html b/docs/JSCompiler.js.html
@@ -295,6 +295,12 @@ <h1 class="page-title">Source: JSCompiler.js</h1>
    * compiler.fe('/path/to/an/input/file.js', '/path/to/the/output/file.js', callback);
    */
   fe(inPath: string, outPath: string, callback: () => void = emptyFn) {
+    const {plugins} = this.options;
+
+    if (plugins) {
+      this.options.plugins = plugins.filter(plugin => 'webpack-loaders' !== plugin &amp;&amp; 'webpack-loaders' !== plugin[0]);
+    }
+
     const compiler = webpack({
       cache,
       debug: true,

diff --git a/docs/SASSCompiler.html b/docs/SASSCompiler.html
@@ -751,7 +751,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="Compiler.js.html">Compiler.js</a>,
-				 <a href="Compiler.js.html#sunlight-1-line-55">line 55</a>
+				 <a href="Compiler.js.html#sunlight-1-line-58">line 58</a>
 			</li>
 		</ul>
 	</dd>
@@ -1190,7 +1190,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="Compiler.js.html">Compiler.js</a>,
-				 <a href="Compiler.js.html#sunlight-1-line-72">line 72</a>
+				 <a href="Compiler.js.html#sunlight-1-line-75">line 75</a>
 			</li>
 		</ul>
 	</dd>
@@ -1564,7 +1564,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="Compiler.js.html">Compiler.js</a>,
-				 <a href="Compiler.js.html#sunlight-1-line-104">line 104</a>
+				 <a href="Compiler.js.html#sunlight-1-line-107">line 107</a>
 			</li>
 		</ul>
 	</dd>
@@ -1789,7 +1789,7 @@ <h5>Parameters:</h5>
 		<ul class="dummy">
 			<li>
 				<a href="Compiler.js.html">Compiler.js</a>,
-				 <a href="Compiler.js.html#sunlight-1-line-125">line 125</a>
+				 <a href="Compiler.js.html#sunlight-1-line-128">line 128</a>
 			</li>
 		</ul>
 	</dd>

diff --git a/docs/quicksearch.html b/docs/quicksearch.html
diff --git a/lib/Compiler.js b/lib/Compiler.js
@@ -47,6 +47,9 @@ var Compiler = exports.Compiler = function () {
     (0, _classCallCheck3.default)(this, Compiler);
 
     this.isProduction = 'production' === process.env.NODE_ENV;
+    if (!this.isProduction) {
+      process.env.NODE_ENV = 'development';
+    }
   }
 
   /**

diff --git a/lib/JSCompiler.js b/lib/JSCompiler.js
@@ -315,6 +315,13 @@ var JSCompiler = exports.JSCompiler = function (_Compiler) {
       var _this6 = this;
 
       var callback = arguments.length <= 2 || arguments[2] === undefined ? emptyFn : arguments[2];
+      var plugins = this.options.plugins;
+
+      if (plugins) {
+        this.options.plugins = plugins.filter(function (plugin) {
+          return 'webpack-loaders' !== plugin && 'webpack-loaders' !== plugin[0];
+        });
+      }
 
       var compiler = (0, _webpack2.default)({
         cache: cache,

diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "babel-plugin-transform-react-inline-elements": "^6.4.0",
     "babel-plugin-transform-remove-debugger": "^6.3.13",
     "babel-plugin-transform-runtime": "^6.4.0",
+    "babel-plugin-webpack-loaders": "^0.1.2",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-2": "^6.3.13",
@@ -92,7 +93,7 @@
     "style-loader": "^0.13.0",
     "tiny-lr": "^0.2.1",
     "uglify-js": "^2.6.1",
-    "webpack": "^1.12.10",
+    "webpack": "^1.12.11",
     "webpack-dev-server": "^1.14.0"
   },
   "devDependencies": {

diff --git a/src/Compiler.js b/src/Compiler.js
@@ -37,6 +37,9 @@ export class Compiler {
 
   constructor() {
     this.isProduction = 'production' === process.env.NODE_ENV;
+    if (!this.isProduction) {
+      process.env.NODE_ENV = 'development';
+    }
   }
 
   /**

diff --git a/src/JSCompiler.js b/src/JSCompiler.js
@@ -219,6 +219,12 @@ export class JSCompiler extends Compiler {
    * compiler.fe('/path/to/an/input/file.js', '/path/to/the/output/file.js', callback);
    */
   fe(inPath: string, outPath: string, callback: () => void = emptyFn) {
+    const {plugins} = this.options;
+
+    if (plugins) {
+      this.options.plugins = plugins.filter(plugin => 'webpack-loaders' !== plugin && 'webpack-loaders' !== plugin[0]);
+    }
+
     const compiler = webpack({
       cache,
       debug: true,

diff --git a/test/JSCompiler.spec.js b/test/JSCompiler.spec.js
@@ -153,9 +153,7 @@ describe('JSCompiler', () => {
       compiler = {outputFileSystem: 'realFS', run};
       webpack = stub().returns(compiler);
       JSCompiler = req({webpack});
-      process.env.NODE_ENV = 'development';
       cmp = new JSCompiler();
-      delete process.env.NODE_ENV;
       stub(cmp, 'done');
       stub(cmp, 'optimize');
       cmp.fe('/path/to/the/input/file.js', '/path/to/the/output/file.js');
@@ -166,10 +164,6 @@ describe('JSCompiler', () => {
       cmp.optimize.restore();
     });
 
-    it('inits options', () => {
-      expect(cmp.options).eql(Object.assign({}, config.env.development));
-    });
-
     it('prints the error on screen', () => {
       expect(console.error).calledWith('something');
       expect(console.error).calledWith('bad');
@@ -294,7 +288,9 @@ describe('JSCompiler', () => {
     beforeEach(() => {
       transformFile = stub().callsArgWith(2, 'something bad happened');
       JSCompiler = req({'babel-core': {transformFile}});
+      process.env.NODE_ENV = 'development';
       cmp = new JSCompiler();
+      delete process.env.NODE_ENV;
       stub(cmp, 'fsWrite').callsArg(2);
       stub(cmp, 'done');
     });
@@ -304,6 +300,10 @@ describe('JSCompiler', () => {
       cmp.done.restore();
     });
 
+    it('inits options', () => {
+      expect(cmp.options).eql(Object.assign({}, config.env.development));
+    });
+
     describe('minify', () => {
 
       beforeEach(() => {