fix: Dependency install loader

package.json

@@ -92,10 +92,6 @@
     "jest": "^20.0.4",
     "lodash": "^4.17.4",
     "ncp": "^2.0.0",
-    "node-sass": "^4.5.3",
-    "sass-loader": "^6.0.6",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.1",
     "uuid": "^3.0.1"
   },
   "dependencies": {

src/lib/webpack/dependency-install-loader.js

@@ -58,7 +58,6 @@ module.exports = function(source, map) {
 	Promise.all(deps.map(isInstalled))
 		.then( installed => {
 			let toInstall = deps.filter( (dep, index) => !installed[index] );
-
 			if (toInstall.length) {
 				return installDeps(toInstall, query.save);
 			}

src/lib/webpack/proxy-loader.js

@@ -0,0 +1,45 @@
+var utils = require('loader-utils');
+var requireRelative = require('require-relative');
+
+function proxyLader(source, map) {
+	var options = utils.getOptions(this);
+
+	// First loader run store passed options & remove proxy-loader specific
+	if (!this.query.__proxy_loader__) {
+		this.query.__proxy_loader__ = { loader: options.loader, cwd: options.cwd };
+
+		// remove proxy-loader options and make this.query act as requested loader query
+		swapOptions(this, options);
+	}
+	// Save it for future calls that use this loader (via this.addDependency)
+	var proxyOptions = this.query.__proxy_loader__;
+
+	var loader;
+	try {
+		loader = requireRelative(proxyOptions.loader, proxyOptions.cwd);
+	} catch (e) {
+		loader = require(proxyOptions.loader);
+	}
+
+	// run loader
+	return loader.bind(this)(source, map);
+}
+
+function swapOptions(loaderContext, newOptions) {
+	var copy = {};
+	var key = '';
+
+	for (key in loaderContext.options) {
+		copy[key] = newOptions[key];
+	}
+
+	delete loaderContext.query.options;
+	delete loaderContext.query.loader;
+	delete loaderContext.query.cwd;
+
+	for (key in copy) {
+		loaderContext.query[key] = copy[key];
+	}
+}
+
+module.exports = proxyLader;

src/lib/webpack/webpack-base-config.js

@@ -79,7 +79,10 @@ export default (env) => {
 				modules: [
 					resolve(__dirname, '../../../node_modules'),
 					resolve(cwd, 'node_modules')
-				]
+				],
+				alias: {
+					'proxy-loader': require.resolve('./proxy-loader')
+				}
 			}
 		}),
 
@@ -108,50 +111,65 @@ export default (env) => {
 						enforce: 'pre',
 						test: /\.less$/,
 						use: [
+							{
+								loader: 'proxy-loader',
+								options: {
+									cwd,
+									loader: 'less-loader',
+									options: {
+										sourceMap: true
+									}
+								}
+							},
 							{
 								loader: resolve(__dirname, './dependency-install-loader'),
 								options: {
 									modules: ['less', 'less-loader'],
 									save: true
 								}
-							},
-							{
-								loader: 'less-loader',
-								options: { sourceMap: true }
 							}
 						]
 					},
 					{
 						enforce: 'pre',
 						test: /\.s[ac]ss$/,
 						use: [
+							{
+								loader: 'proxy-loader',
+								options: {
+									cwd,
+									loader: 'sass-loader',
+									options: { sourceMap: true }
+								}
+							},
 							{
 								loader: resolve(__dirname, './dependency-install-loader'),
 								options: {
 									modules: ['node-sass', 'sass-loader'],
 									save: true
 								}
-							},
-							{
-								loader: 'sass-loader',
-								options: { sourceMap: true }
 							}
 						]
 					},
 					{
 						enforce: 'pre',
 						test: /\.styl$/,
 						use: [
+							{
+								loader: 'proxy-loader',
+								options: {
+									cwd,
+									loader: 'stylus-loader',
+									options: { sourceMap: true }
+								}
+							},
 							{
 								loader: resolve(__dirname, './dependency-install-loader'),
 								options: {
+									cwd,
 									modules: ['stylus', 'stylus-loader'],
 									save: true
 								}
-							},
-							{
-								loader: 'stylus-loader',
-								options: { sourceMap: true }
 							}
 						]
 					},

tests/build.snapshot.js

@@ -74,12 +74,12 @@ export default {
 		'route-profile.chunk.*.js.map': { size: 8607 },
 		'index.html': { size: 870 },
 		'style.*.css': { size: 1065 },
-		'style.*.css.map': { size: 2246 },
+		'style.*.css.map': { size: 2345 },
 		'ssr-build': {
 			'ssr-bundle.js': { size: 39459 },
 			'ssr-bundle.js.map': { size: 65629 },
 			'style.*.css': { size: 1065 },
-			'style.*.css.map': { size: 2250 },
+			'style.*.css.map': { size: 2345 },
 		}
 	},
 	'full': {
@@ -92,12 +92,12 @@ export default {
 		'route-profile.chunk.*.js.map': { size: 8609 },
 		'index.html': { size: 850 },
 		'style.*.css': { size: 1065 },
-		'style.*.css.map': { size: 2345 },
+		'style.*.css.map': { size: 1947 },
 		'ssr-build': {
 			'ssr-bundle.js': { size: 41715 },
 			'ssr-bundle.js.map': { size: 66661 },
 			'style.*.css': { size: 1065 },
-			'style.*.css.map': { size: 2345 },
+			'style.*.css.map': { size: 1947 },
 		}
 	}
 };