Permalink
Browse files

export placeholder

  • Loading branch information...
sokra committed Apr 21, 2015
1 parent 77cc7f2 commit d2c9c25721a711b0fe041c597b43646e82d9f145
Showing with 73 additions and 71 deletions.
  1. +32 −0 README.md
  2. +16 −6 lib/loader.js
  3. +5 −2 lib/parseSource.js
  4. +0 −63 lib/parser.js
  5. +20 −0 test/urlTest.js
View
@@ -37,6 +37,38 @@ module.exports = {
};
```
### Placeholders
(experimental)
Special selectors are automatically replaced with random identifiers, which are exported:
``` css
.[className] { background: red; }
#[someId] { background: green; }
.[className] .[subClass] { color: green; }
#[someId] .[subClass] { color: blue; }
```
is transformed to
``` css
.ze24205081ae540afa51bd4cce768e8b7 { background: red; }
#zdf12049771f7fc796a63a3945da3a66d { background: green; }
.ze24205081ae540afa51bd4cce768e8b7 .z9f634213cd27594c1a13d18554d47a8c { color: green; }
#zdf12049771f7fc796a63a3945da3a66d .z9f634213cd27594c1a13d18554d47a8c { color: blue; }
```
and the identifiers are exported:
``` js
exports.placeholders = {
className: "ze24205081ae540afa51bd4cce768e8b7",
someId: "zdf12049771f7fc796a63a3945da3a66d",
subClass: "z9f634213cd27594c1a13d18554d47a8c"
}
```
### 'Root-relative' urls
For urls that start with a `/`, the default behavior is to not translate them:
View
@@ -49,12 +49,18 @@ module.exports = function(content, map) {
});
var placeholders = {};
stuff.placeholders.forEach(function(placeholder) {
var hash = require("crypto").createHash("md5");
hash.update(this.request);
hash.update(placeholder.name);
var ident = "z" + hash.digest("hex");
placeholders[placeholder.name] = ident;
replacer.replace(placeholder.start, placeholder.length, ident);
if(!placeholders[placeholder.name]) {
var hash = require("crypto").createHash("md5");
hash.update(this.options && typeof this.options.context === "string" ?
loaderUtils.stringifyRequest({ context: this.options.context }, this.request) :
this.request);
hash.update(placeholder.name);
var ident = "z" + hash.digest("hex");
placeholders[placeholder.name] = ident;
} else {
var ident = placeholders[placeholder.name];
}
replacer.replace(placeholder.start, placeholder.length, placeholder.prefix + ident);
}, this);
var cssContent = replacer.run(content);
@@ -125,6 +131,10 @@ module.exports = function(content, map) {
result.push("exports.push([module.id, " + css + ", \"\"]);");
}
if(Object.keys(placeholders).length > 0) {
result.push("exports.placeholders = " + JSON.stringify(placeholders) + ";");
}
return "exports = module.exports = require(" + loaderUtils.stringifyRequest(this, require.resolve("./css-base.js")) + ")();\n" +
result.join("\n");
}
View
@@ -13,9 +13,10 @@ function urlMatch(match, textBeforeUrl, replacedText, url, index) {
});
}
function placeholderMatch(match, name, index) {
function placeholderMatch(match, prefix, name, index) {
this.placeholders.push({
name: name,
prefix: prefix,
start: index,
length: match.length
});
@@ -47,7 +48,9 @@ var parser = new Parser({
"(url\\s*\\()(\\s*([^)]*)\\s*)\\)": urlMatch,
// placeholder
"{{([A-Za-z_0-9]+)}}": placeholderMatch
"()\\{\\{([A-Za-z_0-9]+)\\}\\}": placeholderMatch,
"(\\.)\\[([A-Za-z_0-9]+)\\]": placeholderMatch,
"(#)\\[([A-Za-z_0-9]+)\\]": placeholderMatch,
},
comment: {
"\\*/": "source"
View

This file was deleted.

Oops, something went wrong.
View
@@ -6,10 +6,14 @@ var vm = require("vm");
function test(name, input, result, query, modules) {
it(name, function() {
var output = cssLoader.call({
options: {
context: ""
},
loaders: [{request: "loader"}],
loaderIndex: 0,
context: "",
resource: "test.css",
request: "css-loader!test.css",
query: query
}, input);
assetEvaluated(output, result, modules);
@@ -19,10 +23,14 @@ function test(name, input, result, query, modules) {
function testMinimize(name, input, result, query, modules) {
it(name, function() {
var output = cssLoader.call({
options: {
context: ""
},
loaders: [{request: "loader"}],
loaderIndex: 0,
context: "",
resource: "test.css",
request: "css-loader!test.css",
minimize: true,
query: query
}, input);
@@ -134,6 +142,18 @@ describe("url", function() {
test("media query", "@media (min-width: 500px) { body { background: url(image.png); } }", [
[1, "@media (min-width: 500px) { body { background: url({./image.png}); } }", ""]
]);
test("placeholder", ".[className] { background: red; }\n#[someId] { background: green; }\n" +
".[className] .[subClass] { color: green; }\n#[someId] .[subClass] { color: blue; }", function() { var r = [
[1, ".ze24205081ae540afa51bd4cce768e8b7 { background: red; }\n#zdf12049771f7fc796a63a3945da3a66d { background: green; }\n" +
".ze24205081ae540afa51bd4cce768e8b7 .z9f634213cd27594c1a13d18554d47a8c { color: green; }\n#zdf12049771f7fc796a63a3945da3a66d .z9f634213cd27594c1a13d18554d47a8c { color: blue; }", ""]
];
r.placeholders = {
className: "ze24205081ae540afa51bd4cce768e8b7",
someId: "zdf12049771f7fc796a63a3945da3a66d",
subClass: "z9f634213cd27594c1a13d18554d47a8c"
};
return r;
}());
testMinimize("minimized simple", ".class { a: b c d; }", [
[1, ".class{a:b c d}", ""]
]);

0 comments on commit d2c9c25

Please sign in to comment.