Skip to content

Commit

Permalink
Merge branch 'master' into externals
Browse files Browse the repository at this point in the history 
* master:
  fix: case insensitivity of @import (webpack-contrib#514)
  chore: update comment (webpack-contrib#515)
  docs(README): improve importLoaders section and example (webpack-contrib#512)
  docs(README): fix link (webpack-contrib#508)
  docs(README): fix typo in example (webpack-contrib#507)
  docs(README): fix typo in maintainers link (webpack-contrib#505)
  fix: imported variables are replaced in exports if followed by a comma (webpack-contrib#504)
  docs(README): standardize (webpack-contrib#503)
  test: `charset` directive (webpack-contrib#502)
  fix: url with a trailing space is now handled correctly (webpack-contrib#494)
  fix: use `btoa` instead `Buffer` (webpack-contrib#501)
  test: add test for escaped characters (webpack-contrib#493)
  test: add tests for encoded svg data uri (webpack-contrib#492)
  test: add tests when css contain data uri and source maps are enabled (webpack-contrib#491)
  fix: loader now correctly handles `url` with space(s) (webpack-contrib#495)
  • Loading branch information
@fahad19
fahad19 committed Apr 24, 2017
2 parents e2befc3 + de4356b commit 145e9ac
Show file tree
Hide file tree
Showing 12 changed files with 459 additions and 250 deletions.
476 changes: 250 additions & 226 deletions README.md
View file

Large diffs are not rendered by default.

9 changes: 5 additions & 4 deletions lib/css-base.js
View file
Expand Up @@ -54,7 +54,7 @@ function cssWithMappingToString(item, useSourceMap) {
return content;
}

if (useSourceMap) {
if (useSourceMap && typeof btoa === 'function') {
var sourceMapping = toComment(cssMapping);
var sourceURLs = cssMapping.sources.map(function (source) {
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
Expand All @@ -68,8 +68,9 @@ function cssWithMappingToString(item, useSourceMap) {

// Adapted from convert-source-map (MIT)
function toComment(sourceMap) {
var base64 = new Buffer(JSON.stringify(sourceMap)).toString('base64');
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
// eslint-disable-next-line no-undef
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;

return '/*# ' + data + ' */';
return '/*# ' + data + ' */';
}
25 changes: 17 additions & 8 deletions lib/processCss.js
View file
Expand Up @@ -13,6 +13,7 @@ var localByDefault = require("postcss-modules-local-by-default");
var extractImports = require("postcss-modules-extract-imports");
var modulesScope = require("postcss-modules-scope");
var modulesValues = require("postcss-modules-values");
var valueParser = require('postcss-value-parser');

var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
return function(css) {
Expand All @@ -23,21 +24,24 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {

function replaceImportsInString(str) {
if(options.import) {
var tokens = str.split(/(\S+)/);
tokens = tokens.map(function (token) {
var tokens = valueParser(str);
tokens.walk(function (node) {
if (node.type !== 'word') {
return;
}
var token = node.value;
var importIndex = imports["$" + token];
if(typeof importIndex === "number") {
return "___CSS_LOADER_IMPORT___" + importIndex + "___";
node.value = "___CSS_LOADER_IMPORT___" + importIndex + "___";
}
return token;
});
return tokens.join("");
})
return tokens.toString();
}
return str;
}

if(options.import) {
css.walkAtRules("import", function(rule) {
css.walkAtRules(/import/i, function(rule) {
var values = Tokenizer.parseValues(rule.params);
var url = values.nodes[0].nodes[0];
if(url.type === "url") {
Expand Down Expand Up @@ -98,7 +102,10 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
break;
case "url":
if (options.url && !/^#/.test(item.url) && loaderUtils.isUrlRequest(item.url, options.root)) {
item.stringType = "";
// Don't remove quotes around url when contain space
if (item.url.indexOf(" ") === -1) {
item.stringType = "";
}
delete item.innerSpacingBefore;
delete item.innerSpacingAfter;
var url = item.url;
Expand Down Expand Up @@ -153,6 +160,8 @@ module.exports = function processCss(inputSource, inputMap, options, callback) {
mode: options.mode,
rewriteUrl: function(global, url) {
if(parserOptions.url){
url = url.trim(" ");

if(!loaderUtils.isUrlRequest(url, root)) {
return url;
}
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Expand Up @@ -23,6 +23,7 @@
"postcss-modules-local-by-default": "^1.0.1",
"postcss-modules-scope": "^1.0.0",
"postcss-modules-values": "^1.1.0",
"postcss-value-parser": "^3.3.0",
"source-list-map": "^0.1.7"
},
"devDependencies": {
Expand Down
33 changes: 32 additions & 1 deletion test/cssBaseTest.js
View file
@@ -1,8 +1,26 @@
/*globals describe it*/
/*eslint-env mocha*/

var base = require("../lib/css-base");

describe("css-base", function() {
before(function() {
global.btoa = function btoa(str) {
var buffer = null;

if (str instanceof Buffer) {
buffer = str;
} else {
buffer = new Buffer(str.toString(), 'binary');
}

return buffer.toString('base64');
}
})

after(function () {
global.btoa = null;
})

it("should toString a single module", function() {
var m = base();
m.push([1, "body { a: 1; }", ""]);
Expand Down Expand Up @@ -46,4 +64,17 @@ describe("css-base", function() {
}]);
m.toString().should.be.eql("body { a: 1; }\n/*# sourceURL=webpack://./path/to/test.scss */\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJmaWxlIjoidGVzdC5zY3NzIiwic291cmNlcyI6WyIuL3BhdGgvdG8vdGVzdC5zY3NzIl0sIm1hcHBpbmdzIjoiQUFBQTsiLCJzb3VyY2VSb290Ijoid2VicGFjazovLyJ9 */");
});
it("should toString without source mapping if btoa not avalibale", function() {
global.btoa = null;
var m = base(true);
m.push([1, "body { a: 1; }", "", {
file: "test.scss",
sources: [
'./path/to/test.scss'
],
mappings: "AAAA;",
sourceRoot: "webpack://"
}]);
m.toString().should.be.eql("body { a: 1; }");
});
});
6 changes: 6 additions & 0 deletions test/importTest.js
View file
Expand Up @@ -9,6 +9,12 @@ describe("import", function() {
], "", {
"./test.css": [[2, ".test{a: b}", ""]]
});
test("import camelcase", "@IMPORT url(test.css);\n.class { a: b c d; }", [
[2, ".test{a: b}", ""],
[1, ".class { a: b c d; }", ""]
], "", {
"./test.css": [[2, ".test{a: b}", ""]]
});
test("import with string", "@import \"test.css\";\n.class { a: b c d; }", [
[2, ".test{a: b}", ""],
[1, ".class { a: b c d; }", ""]
Expand Down
2 changes: 2 additions & 0 deletions test/moduleTestCases/urls/expected.css
View file
@@ -1,6 +1,8 @@
._a_ {
background: url({./module});
background: url({./module});
background: url("{./module module}");
background: url('{./module module}');
background: url({./module});
background: url({./module}#?iefix);
background: url("#hash");
Expand Down
2 changes: 2 additions & 0 deletions test/moduleTestCases/urls/source.css
View file
@@ -1,6 +1,8 @@
.a {
background: url(./module);
background: url("./module");
background: url("./module module");
background: url('./module module');
background: url('./module');
background: url("./module#?iefix");
background: url("#hash");
Expand Down
36 changes: 25 additions & 11 deletions test/simpleTest.js
View file
Expand Up @@ -18,18 +18,32 @@ describe("simple", function() {
test("simple2", ".class { a: b c d; }\n.two {}", [
[1, ".class { a: b c d; }\n.two {}", ""]
]);
test("escape characters (uppercase)", ".class { content: \"\\F10C\" }", [
[1, ".class { content: \"\\F10C\" }", ""]
]);
// Need uncomment after resolve https://github.com/css-modules/postcss-modules-local-by-default/issues/108
/*test("escape characters (lowercase)", ".class { content: \"\\f10C\" }", [
[1, ".class { content: \"\\f10C\" }", ""]
]);*/
// Need uncomment after resolve https://github.com/mathiasbynens/cssesc/issues/10
/*test("escape characters (two)", ".class { content: \"\\F10C \\F10D\" }", [
[1, ".class { content: \"\\F10C \\F10D\" }", ""]
]);*/
testMinimize("minimized simple", ".class { a: b c d; }", [
[1, ".class{a:b c d}", ""]
]);
testError("error formatting", ".some {\n invalid css;\n}", function(err) {
assert.equal(err.message, [
'Unknown word (2:2)',
'',
' 1 | .some {',
'> 2 | invalid css;',
' | ^',
' 3 | }',
'',
].join('\n'));
});
test("charset directive", "@charset \"UTF-8\";\n .class { a: b c d; }", [
[1, "@charset \"UTF-8\";\n .class { a: b c d; }", ""]
]);
testError("error formatting", ".some {\n invalid css;\n}", function(err) {
assert.equal(err.message, [
'Unknown word (2:2)',
'',
' 1 | .some {',
'> 2 | invalid css;',
' | ^',
' 3 | }',
'',
].join('\n'));
});
});
34 changes: 34 additions & 0 deletions test/sourceMapTest.js
View file
Expand Up @@ -44,6 +44,40 @@ describe("source maps", function() {
version: 3
}]
]);
testMap("generate sourceMap (1 loader, data url)", ".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>\"); }", undefined, {
loaders: [{request: "/path/css-loader"}],
options: { context: "/" },
resource: "/folder/test.css",
request: "/path/css-loader!/folder/test.css",
query: "?sourceMap"
}, [
[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>\"); }", "", {
file: 'test.css',
mappings: 'AAAA,SAAS,6WAA6W,EAAE',
names: [],
sourceRoot: '',
sources: [ '/folder/test.css' ],
sourcesContent: [ '.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>"); }' ],
version: 3
}]
]);
testMap("generate sourceMap (1 loader, encoded data url)", ".class { background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2042%2026%27%20fill%3D%27%23007aff%27%3E%3Crect%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%271%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2711%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2712%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2722%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2723%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3C%2Fsvg%3E\"); }", undefined, {
loaders: [{request: "/path/css-loader"}],
options: { context: "/" },
resource: "/folder/test.css",
request: "/path/css-loader!/folder/test.css",
query: "?sourceMap"
}, [
[1, ".class { background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2042%2026%27%20fill%3D%27%23007aff%27%3E%3Crect%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%271%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2711%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2712%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2722%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2723%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3C%2Fsvg%3E\"); }", "", {
file: 'test.css',
mappings: 'AAAA,SAAS,mmBAAmmB,EAAE',
names: [],
sourceRoot: '',
sources: [ '/folder/test.css' ],
sourcesContent: [ '.class { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2042%2026%27%20fill%3D%27%23007aff%27%3E%3Crect%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%271%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2711%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2712%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2722%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2723%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3C%2Fsvg%3E"); }' ],
version: 3
}]
]);
testMap("generate sourceMap (2 loaders)", ".class { a: b c d; }", undefined, {
loaders: [{request: "/path/css-loader"}, {request: "/path/sass-loader"}],
options: { context: "/" },
Expand Down

0 comments on commit 145e9ac

Please sign in to comment.