Navigation Menu

Skip to content

Commit

Permalink
export placeholder
Browse files Browse the repository at this point in the history
  • Loading branch information
sokra committed Apr 21, 2015
1 parent 77cc7f2 commit d2c9c25
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 71 deletions.
32 changes: 32 additions & 0 deletions README.md
Expand Up @@ -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:
Expand Down
22 changes: 16 additions & 6 deletions lib/loader.js
Expand Up @@ -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);
Expand Down Expand Up @@ -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");
}
7 changes: 5 additions & 2 deletions lib/parseSource.js
Expand Up @@ -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
});
Expand Down Expand Up @@ -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"
Expand Down
63 changes: 0 additions & 63 deletions lib/parser.js

This file was deleted.

20 changes: 20 additions & 0 deletions test/urlTest.js
Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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}", ""]
]);
Expand Down

0 comments on commit d2c9c25

Please sign in to comment.