Fix handling of unicode in source code

Author: rtsao

core/index.js

@@ -65,8 +65,7 @@ export function renderCSS() {
     mappings,
     sourcesContent: sources.map(source => state.sourceCache.get(source)),
   };
-  const json = JSON.stringify(map);
-  const base64 = btoa(json);
+  const base64 = encodeBase64(JSON.stringify(map));
 
   const comment = `/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${base64} */`;
   return `${rules.join("\n")}\n${comment}`;
@@ -206,9 +205,29 @@ function parseDataUrl(url) {
   if (match) {
     const sourceMapStart = match[0].length;
     const encodedSource = url.substr(sourceMapStart);
-    const source = atob(encodedSource);
+    const source = decodeBase64(encodedSource);
     return JSON.parse(source);
   } else {
     throw new Error("The encoding of the inline sourcemap is not supported");
   }
 }
+
+const encoder = new TextEncoder();
+const decoder = new TextDecoder();
+
+function encodeBase64(str) {
+  return btoa(String.fromCharCode(...encoder.encode(str)));
+}
+
+function decodeBase64(str) {
+  return decoder.decode(toArrayBuffer(atob(str)));
+}
+
+function toArrayBuffer(str) {
+  const buf = new ArrayBuffer(str.length);
+  const bufView = new Uint8Array(buf);
+  for (let i = 0; i < str.length; i++) {
+    bufView[i] = str.charCodeAt(i);
+  }
+  return buf;
+}

fixtures/app/client.js

@@ -14,3 +14,6 @@ function toErrorLikeObject(err) {
   const {stack, stacktrace, message} = err;
   return {stack, stacktrace, message};
 }
+
+// A unicode character: 🤪 to ensure the base64 encoding can handle unicode
+// See: https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#The_Unicode_Problem

tests/mapper.js

@@ -2,7 +2,6 @@
 
 const SourceMapURL = require("source-map-url");
 const {SourceMapConsumer} = require("source-map/lib/source-map-consumer");
-const {atob} = require("abab");
 
 module.exports = {
   getConsumer,
@@ -18,15 +17,24 @@ function getConsumer(src) {
   return new SourceMapConsumer(map);
 }
 
+/**
+ * Source maps are not supported in puppeteer so it is not possible
+ * to test against the built-in source mapping implementation.
+ */
+
 function parseDataUrl(url) {
   const supportedEncodingRegexp = /^data:application\/json;([\w=:"-]+;)*base64,/;
   const match = url.match(supportedEncodingRegexp);
   if (match) {
     const sourceMapStart = match[0].length;
     const encodedSource = url.substr(sourceMapStart);
-    const source = atob(encodedSource);
+    const source = decodeBase64(encodedSource);
     return JSON.parse(source);
   } else {
     throw new Error("The encoding of the inline sourcemap is not supported");
   }
 }
+
+function decodeBase64(str) {
+  return new Buffer(str, "base64").toString("utf-8");
+}

tests/package.json

@@ -6,7 +6,6 @@
     "test": "node worker.js"
   },
   "dependencies": {
-    "abab": "2.0.0",
     "css-to-js-sourcemap-fixture-app": "0.0.0-workspace",
     "css-to-js-sourcemap-worker": "*",
     "get-port": "3.2.0",