bugfixes, css and style loader

README.md

@@ -183,10 +183,12 @@ The following loaders are included as optional dependencies:
 * `json` (default at `.json`): Loads file as JSON
 * `jade` (default at `.jade`): Loads jade template and returns a function
 * `coffee` (default at `.coffee`): Loads coffee-script like javascript
+* `css`: Loads css file with resolved imports
+* `style`: Adds result of javascript execution to DOM
+* `.css` defaults to `style!css` loader, so all css rules are added to DOM
 
 TODO
 
-* `css`: CSS rules are added to DOM on require
 * `less`, `sass`: like `css` but compiles
 
 ## TL;DR

lib/buildDeps.js

@@ -101,6 +101,7 @@ function execLoaders(request, loaders, filenames, contents, options, callback) {
 						},
 						web: true,
 						debug: options.debug,
+						minimize: options.minimize,
 						values: undefined,
 						options: options
 					};
@@ -108,7 +109,7 @@ function execLoaders(request, loaders, filenames, contents, options, callback) {
 					if(!async)
 						nextLoader(retVal === undefined ? new Error("loader did not return a value") : null, retVal);
 				} catch(e) {
-					callback(err);
+					callback("Loader throwed exeception: " + e);
 					return;
 				}
 			} else {

lib/resolve.js

@@ -75,13 +75,13 @@ function doResolve(context, identifier, options, type, callback) {
 		options.paths = [];
 	if(!options.alias)
 		options.alias = {};
-	var identifiers = identifier.split(/!/g);
+	var identifiers = identifier.replace(/^!|!$/g, "").replace(/!!/g, "!").split(/!/g);
-	if(identifiers.length === 1) {
+	if(identifier.indexOf("!") === -1) {
 		var resource = identifiers.pop();
 		for(var i = 0; i < options.loaders.length; i++) {
 			var line = options.loaders[i];
 			if(line.test.test(resource)) {
-				identifiers.push(line.loader);
+				Array.prototype.push.apply(identifiers, line.loader.split(/!/g));
 				break;
 			}
 		}

lib/webpack.js

@@ -87,6 +87,7 @@ module.exports = function(context, moduleName, options, callback) {
 	options.resolve.loaders.push({test: /\.coffee$/, loader: "coffee"});
 	options.resolve.loaders.push({test: /\.json$/, loader: "json"});
 	options.resolve.loaders.push({test: /\.jade$/, loader: "jade"});
+	options.resolve.loaders.push({test: /\.css$/, loader: "style!css"});
 	buildDeps(context, moduleName, options, function(err, depTree) {
 		if(err) {
 			callback(err);

lib/writeSource.js

@@ -8,14 +8,14 @@ module.exports = function(module, options) {
 			var extensions = (options.resolve && options.resolve.extensions) || [".web.js", ".js"];
 			var extensionsAccess = [];
 			extensions.forEach(function(ext) {
-				extensionsAccess.push("||map[name+\"");
+				extensionsAccess.push("map[name+\"" +
-				extensionsAccess.push(ext.replace(/\\/g, "\\\\").replace(/"/g, "\\\""));
+						ext.replace(/\\/g, "\\\\").replace(/"/g, "\\\"") +
-				extensionsAccess.push("\"]");
+						"\"]");
 			});
 
 			return "/***/module.exports = function(name) {\n" +
 				"/***/\tvar map = " + JSON.stringify(module.requireMap) + ";\n" +
-				"/***/\treturn require(map[name]" + extensionsAccess.join("") + "||name);\n" +
+				"/***/\treturn require(" + extensionsAccess.join("||") + "||name);\n" +
 				"/***/};";
 		}
 		return;

package.json

@@ -13,7 +13,9 @@
 		"raw-loader": "0.1.x",
 		"json-loader": "0.1.x",
 		"jade-loader": "0.1.x",
-		"coffee-loader": "0.1.x"
+		"coffee-loader": "0.1.x",
+		"css-loader": "0.1.x",
+		"style-loader": "0.1.x"
 	},
 	"licenses": [
 		{

require-polyfill.js

@@ -10,7 +10,7 @@ module.exports = function(req) {
 		var oldReq = req;
 		req = function(name) {
 			if(name.indexOf("!") !== -1) {
-				var items = name.split(/!/g);
+				var items = name.replace(/^!|!$/g, "").replace(/!!/g, "!").split(/!/g);
 				var resource = oldReq.resolve(items.pop());
 				var resolved = [];
 				items.forEach(function(item, index) {
@@ -30,7 +30,7 @@ module.exports = function(req) {
 						relative = true;
 					var tries = [];
 					if(!relative) {
-						postfixes.forEach(function(postfix) {
+						module.exports.options.resolve.loaderPostfixes.forEach(function(postfix) {
 							if(item.indexOf("/") !== -1)
 								tries.push(item.replace("/", postfix+"/"));
 							else
@@ -38,6 +38,7 @@ module.exports = function(req) {
 						});
 					}
 					tries.push(item);
+					var extensions = module.exports.options.resolve.loaderExtensions;
 					for(var i = 0; i < tries.length; i++) {
 						for(var ext = 0; ext < extensions.length; ext++) {
 							try {
@@ -80,6 +81,10 @@ module.exports = function(req) {
 							err = content.shift();
 							values = context.values;
 						},
+						options: module.exports.options,
+						minimize: module.exports.options.minimize,
+						debug: module.exports.options.debug,
+						web: false,
 						inputValues: values,
 						values: undefined
 					};
@@ -94,8 +99,16 @@ module.exports = function(req) {
 				if(values !== undefined)
 					return values[0];
 				return exec(content[0], cacheLine);
-			} else
+			} else {
+				var resolved = oldReq.resolve(name);
+				var match = false;
+				var loaders = module.exports.resolve.loaders;
+				for(var i = 0; i < loaders.length; i++)
+					if(loaders[i].test.test(resolved))
+						return req(loader.loader + "!" + name);
+
 				return oldReq(name);
+			}
 		};
 		req.__proto__ = oldReq;
 		req.webpackPolyfill = true;
@@ -114,5 +127,15 @@ module.exports = function(req) {
 	}
 	return req;
 }
-var extensions = [".webpack-loader.js", ".loader.js", ".js", ""];
+var options = module.exports.options = {
-var postfixes = ["-webpack-loader", "-loader", ""]
+	resolve: {
+		loaders: [
+			{test: /\.coffee$/, loader: "coffee"},
+			// {test: /\.json$/, loader: "json"}, // This works out of the box in node.js
+			{test: /\.jade$/, loader: "jade"},
+			{test: /\.css$/, loader: "style!css"}
+		],
+		loaderExtensions: [".webpack-loader.js", ".loader.js", ".js", ""],
+		loaderPostfixes: ["-webpack-loader", "-loader", ""]
+	}
+};

test/browsertest/css/stylesheet-import1.css

@@ -0,0 +1,5 @@
+@import url(./stylesheet-import2.css);
+
+.rule-import1 {
+	background: green;
+}

test/browsertest/css/stylesheet-import2.css

@@ -0,0 +1,3 @@
+.rule-import2 {
+	background: green;
+}

test/browsertest/css/stylesheet.css

@@ -0,0 +1,5 @@
+@import url(./stylesheet-import1.css);
+
+.rule-direct {
+	background: green;
+}

test/browsertest/lib/index.web.js

@@ -121,6 +121,11 @@ window.test(require("json!../../../package.json").name === "webpack", "Buildin '
 window.test(require("../../../package.json").name === "webpack", "Buildin 'json' loader, by ext");
 window.test(require("coffee!../resources/script.coffee") === "coffee test", "Buildin 'coffee' loader");
 window.test(require("../resources/script.coffee") === "coffee test", "Buildin 'coffee' loader, by ext");
+window.test(require("css!../css/stylesheet.css").indexOf(".rule-direct") !== -1, "Buildin 'css' loader, direct content");
+window.test(require("css!../css/stylesheet.css").indexOf(".rule-import1") !== -1, "Buildin 'css' loader, imported rule");
+window.test(require("css!../css/stylesheet.css").indexOf(".rule-import2") !== -1, "Buildin 'css' loader, double imported rule");
+// Buildin 'style' loader adds css to document
+require("../css/stylesheet.css");
 
 // Loader & Context
 var abc = "abc", scr = "script.coffee";

test/browsertest/test.html

@@ -23,9 +23,18 @@
 		};
 		window.writing = false;
 	</script>
+	<style>
+		span {
+			background: red;
+		}
+	</style>
 </head>
 
 <body>
-
+	<p>
+		<span class="rule-direct">Buildin 'style' loader, direct content</span>
+		<span class="rule-import1">Buildin 'style' loader, imported rule</span>
+		<span class="rule-import2">Buildin 'style' loader, double imported rule</span>
+	</p>
 </body>
 </html>