Skip to content

Commit 7ac0fff

Browse files
sokrasokra
committed
Merge branch 'fix-102' of https://github.com/ShyykoSerhiy/css-loader into ShyykoSerhiy-fix-102
# Conflicts: # lib/processCss.js # test/urlTest.js
2 parents 94af250 + c3afc4f commit 7ac0fff

File tree

3 files changed

+90
-33
lines changed

3 files changed

+90
-33
lines changed

‎lib/loader.js‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -64,23 +64,28 @@ module.exports = function(content, map) {
6464
"[" + JSON.stringify(importItem.export) + "] + \"";
6565
}
6666

67-
cssAsString = cssAsString.replace(result.importItemRegExpG, importItemMatcher.bind(this)).replace(result.urlItemRegExpG, function(item) {
68-
var match = result.urlItemRegExp.exec(item);
69-
var idx = +match[1];
70-
var urlItem = result.urlItems[idx];
71-
var url = urlItem.url;
72-
idx = url.indexOf("?#");
73-
if(idx < 0) idx = url.indexOf("#");
74-
var urlRequest;
75-
if(idx > 0) { // idx === 0 is catched by isUrlRequest
76-
// in cases like url('webfont.eot?#iefix')
77-
urlRequest = url.substr(0, idx);
78-
return "\" + require(" + loaderUtils.stringifyRequest(this, urlRequest) + ") + \"" +
79-
url.substr(idx);
80-
}
81-
urlRequest = url;
82-
return "\" + require(" + loaderUtils.stringifyRequest(this, urlRequest) + ") + \"";
83-
}.bind(this));
67+
if(query.import !== false) {
68+
cssAsString = cssAsString.replace(result.importItemRegExpG, importItemMatcher.bind(this));
69+
}
70+
if(query.url !== false) {
71+
cssAsString = cssAsString.replace(result.urlItemRegExpG, function(item) {
72+
var match = result.urlItemRegExp.exec(item);
73+
var idx = +match[1];
74+
var urlItem = result.urlItems[idx];
75+
var url = urlItem.url;
76+
idx = url.indexOf("?#");
77+
if(idx < 0) idx = url.indexOf("#");
78+
var urlRequest;
79+
if(idx > 0) { // idx === 0 is catched by isUrlRequest
80+
// in cases like url('webfont.eot?#iefix')
81+
urlRequest = url.substr(0, idx);
82+
return "\" + require(" + loaderUtils.stringifyRequest(this, urlRequest) + ") + \"" +
83+
url.substr(idx);
84+
}
85+
urlRequest = url;
86+
return "\" + require(" + loaderUtils.stringifyRequest(this, urlRequest) + ") + \"";
87+
}.bind(this));
88+
}
8489

8590

8691
var exportJs = compileExports(result, importItemMatcher.bind(this), camelCaseKeys);

‎lib/processCss.js‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,18 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
2222
var urlItems = [];
2323

2424
function replaceImportsInString(str) {
25-
var tokens = str.split(/(\S+)/);
26-
tokens = tokens.map(function(token) {
27-
var importIndex = imports["$" + token];
28-
if(typeof importIndex === "number") {
29-
return "___CSS_LOADER_IMPORT___" + importIndex + "___";
30-
}
31-
return token;
32-
});
33-
return tokens.join("");
25+
if(options.import) {
26+
var tokens = str.split(/(\S+)/);
27+
tokens = tokens.map(function (token) {
28+
var importIndex = imports["$" + token];
29+
if(typeof importIndex === "number") {
30+
return "___CSS_LOADER_IMPORT___" + importIndex + "___";
31+
}
32+
return token;
33+
});
34+
return tokens.join("");
35+
}
36+
return str;
3437
}
3538

3639
css.walkAtRules("import", function(rule) {
@@ -92,7 +95,7 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
9295
}
9396
break;
9497
case "url":
95-
if (!/^#/.test(item.url) && loaderUtils.isUrlRequest(item.url, options.root)) {
98+
if (options.url && !/^#/.test(item.url) && loaderUtils.isUrlRequest(item.url, options.root)) {
9699
item.stringType = "";
97100
delete item.innerSpacingBefore;
98101
delete item.innerSpacingAfter;
@@ -137,18 +140,22 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
137140

138141
var parserOptions = {
139142
root: root,
140-
mode: options.mode
143+
mode: options.mode,
144+
url: query.url !== false,
145+
import: query.import !== false
141146
};
142147

143148
var pipeline = postcss([
144149
localByDefault({
145150
mode: options.mode,
146151
rewriteUrl: function(global, url) {
147-
if(!loaderUtils.isUrlRequest(url, root)) {
148-
return url;
149-
}
150-
if(global) {
151-
return loaderUtils.urlToRequest(url, root);
152+
if(parserOptions.url){
153+
if(!loaderUtils.isUrlRequest(url, root)) {
154+
return url;
155+
}
156+
if(global) {
157+
return loaderUtils.urlToRequest(url, root);
158+
}
152159
}
153160
return url;
154161
}

‎test/urlTest.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,4 +53,49 @@ describe("url", function() {
5353
test("-webkit-image-set", ".a { background-image: -webkit-image-set(url('url1x.png') 1x, url('url2x.png') 2x) }", [
5454
[1, ".a { background-image: -webkit-image-set(url({./url1x.png}) 1x, url({./url2x.png}) 2x) }", ""]
5555
]);
56+
57+
test("background img with url", ".class { background: green url( \"img.png\" ) xyz }", [
58+
[1, ".class { background: green url( \"img.png\" ) xyz }", ""]
59+
], "?-url");
60+
test("background img 2 with url", ".class { background: green url(~img/png) url(aaa) xyz }", [
61+
[1, ".class { background: green url(~img/png) url(aaa) xyz }", ""]
62+
], "?-url");
63+
test("background img 3 with url", ".class { background: green url( 'img.png' ) xyz }", [
64+
[1, ".class { background: green url( 'img.png' ) xyz }", ""]
65+
], "?-url");
66+
test("background img absolute with url", ".class { background: green url(/img.png) xyz }", [
67+
[1, ".class { background: green url(/img.png) xyz }", ""]
68+
], "?-url");
69+
test("background img external with url",
70+
".class { background: green url(data:image/png;base64,AAA) url(http://example.com/image.jpg) url(//example.com/image.png) xyz }", [
71+
[1, ".class { background: green url(data:image/png;base64,AAA) url(http://example.com/image.jpg) url(//example.com/image.png) xyz }", ""]
72+
], "?-url");
73+
test("background img external data with url",
74+
".class { background-image: url(\"data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>\") }", [
75+
[1, ".class { background-image: url(\"data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>\") }", ""]
76+
], "?-url");
77+
test("data url in filter with url",
78+
".class { filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"filter\"><feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"0\" /><feOffset dx=\"1\" dy=\"2\" result=\"offsetblur\" /><feFlood flood-color=\"rgba(255,255,255,1)\" /><feComposite in2=\"offsetblur\" operator=\"in\" /><feMerge><feMergeNode /><feMergeNode in=\"SourceGraphic\" /></feMerge></filter></svg>#filter'); }", [
79+
[1, ".class { filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"filter\"><feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"0\" /><feOffset dx=\"1\" dy=\"2\" result=\"offsetblur\" /><feFlood flood-color=\"rgba(255,255,255,1)\" /><feComposite in2=\"offsetblur\" operator=\"in\" /><feMerge><feMergeNode /><feMergeNode in=\"SourceGraphic\" /></feMerge></filter></svg>#filter'); }", ""]
80+
], "?-url");
81+
test("filter hash with url",
82+
".highlight { filter: url(#highlight); }", [
83+
[1, ".highlight { filter: url(#highlight); }", ""]
84+
], "?-url");
85+
test("filter hash quotation marks with url",
86+
".highlight { filter: url('#line-marker'); }", [
87+
[1, ".highlight { filter: url('#line-marker'); }", ""]
88+
], "?-url");
89+
test("font face with url", "@font-face { src: url(regular.woff) format('woff'), url(~truetype/regular.ttf) format('truetype') }", [
90+
[1, "@font-face { src: url(regular.woff) format('woff'), url(~truetype/regular.ttf) format('truetype') }", ""]
91+
], "?-url");
92+
test("media query with url", "@media (min-width: 500px) { body { background: url(image.png); } }", [
93+
[1, "@media (min-width: 500px) { body { background: url(image.png); } }", ""]
94+
], "?-url");
95+
test("url in string with url", "a { content: \"do not use url(path)\"; } b { content: 'do not \"use\" url(path)'; }", [
96+
[1, "a { content: \"do not use url(path)\"; } b { content: 'do not \"use\" url(path)'; }", ""]
97+
], "?-url");
98+
test("keyframe background img with url", "@keyframes anim { background: green url('img.png') xyz }", [
99+
[1, "@keyframes anim { background: green url('img.png') xyz }", ""]
100+
], "?-url");
56101
});

0 commit comments

Comments
 (0)