Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: use btoa instead Buffer #501

Merged
merged 1 commit into from Apr 20, 2017
Merged

fix: use btoa instead Buffer #501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 5 additions & 4 deletions lib/css-base.js
View file
Open in desktop
Expand Up @@ -54,7 +54,7 @@ function cssWithMappingToString(item, useSourceMap) {
return content;
}

if (useSourceMap) {
if (useSourceMap && typeof btoa === 'function') {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can't use Buffer.from in browser

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code for browser

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 + ' */';
}
33 changes: 32 additions & 1 deletion test/cssBaseTest.js
View file
Open in desktop
@@ -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() {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why CSS should be extracted without source mapping if btoa not avalibale?
This is BREAKING CHANGE. In node <= 14 the CSS has not the inline source map.
If btoa not avalibale then shoul be used the Buffer.from(string).toString('base64') instead of btoa(string).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can't use Buffer.from in browser

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, I understand.

P.S: I use the css-loader runtime in a webpack plugin to generate inline source-map. In node 16 it works, but not in older node.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because it was not design for this, you can send a PR and improve it

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; }");
});
});