root
/
webpack
mirror of https://github.com/webpack/webpack.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

bugfixes, css and style loader

This commit is contained in:
Tobias Koppers 2012-04-07 03:20:45 +02:00
parent b40a43f37b
commit 295be3d5bc
12 changed files with 73 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -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

3
lib/buildDeps.js
View File

@ -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 {

6
lib/resolve.js
View File

@ -75,13 +75,13 @@ function doResolve(context, identifier, options, type, callback) {
options.paths = [];
if(!options.alias)
options.alias = {};
var identifiers = identifier.split(/!/g);
if(identifiers.length === 1) {
var identifiers = identifier.replace(/^!|!$/g, "").replace(/!!/g, "!").split(/!/g);
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;
}
}

1
lib/webpack.js
View File

@ -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);

10
lib/writeSource.js
View File

@ -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(ext.replace(/\\/g, "\\\\").replace(/"/g, "\\\""));
extensionsAccess.push("\"]");
extensionsAccess.push("map[name+\"" +
ext.replace(/\\/g, "\\\\").replace(/"/g, "\\\"") +
"\"]");
});
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;
@ -171,7 +171,7 @@ module.exports = function(module, options) {
result = ["eval(", JSON.stringify(result.join("")), ")"];
}
result.unshift.apply(result, modulePrepends.reverse());
result.push.apply(result, moduleAppends);
result.push.apply(result, moduleAppends);
return result.join("");
}

4
package.json
View File

@ -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": [
{

33
require-polyfill.js
View File

@ -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 postfixes = ["-webpack-loader", "-loader", ""]
var options = module.exports.options = {
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", ""]
}
};

5
test/browsertest/css/stylesheet-import1.css Normal file
View File

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

3
test/browsertest/css/stylesheet-import2.css Normal file
View File

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

5
test/browsertest/css/stylesheet.css Normal file
View File

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

5
test/browsertest/lib/index.web.js
View File

@ -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";

11
test/browsertest/test.html
View File

@ -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>