fix: CSSResourcePlugin breaks source maps (#1058)

closes #1058

src/lib/CSSUrlParser.ts

@@ -0,0 +1,31 @@
+export class CSSUrlParser {
+    constructor() { }
+
+    private static extractValue(input: string) {
+        const first = input.charCodeAt(0);
+        const last = input.charCodeAt(input.length - 1);
+        if (first === 39 || first === 34) {
+            input = input.slice(1);
+        }
+        if (last === 39 || last === 34) {
+            input = input.slice(0, -1);
+        }
+        if (/data:/.test(input)) {
+            return;
+        }
+        return input;
+    };
+
+    public static walk(contents: string, fn: (value: string) => string): string {
+        const re = /url\(([^\)]+)\)/gm;
+        return contents.replace(re, (match, data, offset, input_string) => {
+            const value = this.extractValue(data);
+            const replaced = fn(value);
+            if (typeof replaced === "string") {
+                return `url("${replaced}")`
+            } else {
+                return replaced;
+            }
+        });
+    }
+}

src/plugins/stylesheet/CSSResourcePlugin.ts

@@ -4,10 +4,9 @@ import { ensureDir } from "../../Utils";
 import * as path from "path";
 import { utils } from "realm-utils";
 import * as fs from "fs";
-import { PostCSSResourcePlugin } from "../../lib/postcss/PostCSSResourcePlugin";
 import { SVG2Base64 } from "../../lib/SVG2Base64";
+import { CSSUrlParser } from '../../lib/CSSUrlParser';
 const base64Img = require("base64-img");
-const postcss = require("postcss");
 const IMG_CACHE = {};
 let resourceFolderChecked = false;
 
@@ -115,8 +114,6 @@ export class CSSResourcePluginClass implements Plugin {
     public transform(file: File) {
         file.addStringDependency("fuse-box-css");
         file.loadContents();
-        let contents = file.contents;
-
         if (this.distFolder) {
             this.createResouceFolder(file);
         }
@@ -125,79 +122,76 @@ export class CSSResourcePluginClass implements Plugin {
         const files = {};
         const tasks = [];
 
-        return postcss([PostCSSResourcePlugin({
-            fn: (url) => {
-                if (this.macros) {
-                    for (let key in this.macros) {
-                        url = url.replace('$' + key, this.macros[key])
-                    }
-                }
 
-                if (url.startsWith('https:') || url.startsWith('http:') || url.startsWith('//')) {
-                    return url
+        const walker = (url) => {
+            if (this.macros) {
+                for (let key in this.macros) {
+                    url = url.replace('$' + key, this.macros[key])
                 }
+            }
+
+            if (url.startsWith('https:') || url.startsWith('http:') || url.startsWith('//')) {
+                return url
+            }
 
-                let urlFile = path.isAbsolute(url) ? url : path.resolve(currentFolder, url);
-                urlFile = urlFile.replace(/[?\#].*$/, "");
+            let urlFile = path.isAbsolute(url) ? url : path.resolve(currentFolder, url);
+            urlFile = urlFile.replace(/[?\#].*$/, "");
 
-                if (file.context.extensionOverrides && file.belongsToProject()) {
-                  urlFile = file.context.extensionOverrides.getPathOverride(urlFile) || urlFile;
-                }
+            if (file.context.extensionOverrides && file.belongsToProject()) {
+              urlFile = file.context.extensionOverrides.getPathOverride(urlFile) || urlFile;
+            }
 
-                if (this.inlineImages) {
-                    if (IMG_CACHE[urlFile]) {
-                        return IMG_CACHE[urlFile];
-                    }
-                    if (!fs.existsSync(urlFile)) {
-                        if (this.resolveMissingFn) {
-                            urlFile = this.resolveMissingFn(urlFile, this)
-                            if (!urlFile || !fs.existsSync(urlFile)) {
-                                file.context.debug("CSSResourcePlugin", `Can't find (resolved) file ${urlFile}`);
-                                return
-                            }
-                        }
-                        else {
-                            file.context.debug("CSSResourcePlugin", `Can't find file ${urlFile}`);
-                            return;
+            if (this.inlineImages) {
+                if (IMG_CACHE[urlFile]) {
+                    return IMG_CACHE[urlFile];
+                }
+                if (!fs.existsSync(urlFile)) {
+                    if (this.resolveMissingFn) {
+                        urlFile = this.resolveMissingFn(urlFile, this)
+                        if (!urlFile || !fs.existsSync(urlFile)) {
+                            file.context.debug("CSSResourcePlugin", `Can't find (resolved) file ${urlFile}`);
+                            return
                         }
                     }
-                    const ext = path.extname(urlFile);
-                    let fontsExtensions = {
-                        ".woff": "application/font-woff",
-                        ".woff2": "application/font-woff2",
-                        ".eot": "application/vnd.ms-fontobject",
-                        ".ttf": "application/x-font-ttf",
-                        ".otf": "font/opentype",
-                    };
-                    if (fontsExtensions[ext]) {
-                        let content = new Buffer(fs.readFileSync(urlFile)).toString("base64");
-                        return `data:${fontsExtensions[ext]};charset=utf-8;base64,${content}`;
-                    }
-                    if (ext === ".svg") {
-                        let content = SVG2Base64.get(fs.readFileSync(urlFile).toString());
-                        IMG_CACHE[urlFile] = content;
-                        return content;
+                    else {
+                        file.context.debug("CSSResourcePlugin", `Can't find file ${urlFile}`);
+                        return;
                     }
-                    let result = base64Img.base64Sync(urlFile);
-                    IMG_CACHE[urlFile] = result;
-                    return result;
                 }
+                const ext = path.extname(urlFile);
+                let fontsExtensions = {
+                    ".woff": "application/font-woff",
+                    ".woff2": "application/font-woff2",
+                    ".eot": "application/vnd.ms-fontobject",
+                    ".ttf": "application/x-font-ttf",
+                    ".otf": "font/opentype",
+                };
+                if (fontsExtensions[ext]) {
+                    let content = new Buffer(fs.readFileSync(urlFile)).toString("base64");
+                    return `data:${fontsExtensions[ext]};charset=utf-8;base64,${content}`;
+                }
+                if (ext === ".svg") {
+                    let content = SVG2Base64.get(fs.readFileSync(urlFile).toString());
+                    IMG_CACHE[urlFile] = content;
+                    return content;
+                }
+                let result = base64Img.base64Sync(urlFile);
+                IMG_CACHE[urlFile] = result;
+                return result;
+            }
 
-                // copy files
-                if (this.distFolder) {
-                    let newFileName = generateNewFileName(urlFile);
-                    if (!files[urlFile]) {
-                        let newPath = path.join(this.distFolder, newFileName);
-                        tasks.push(copyFile(urlFile, newPath));
-                        files[urlFile] = true;
-                    }
-                    return this.resolveFn(newFileName);
+            // copy files
+            if (this.distFolder) {
+                let newFileName = generateNewFileName(urlFile);
+                if (!files[urlFile]) {
+                    let newPath = path.join(this.distFolder, newFileName);
+                    tasks.push(copyFile(urlFile, newPath));
+                    files[urlFile] = true;
                 }
-            },
-        })]).process(contents).then(result => {
-            file.contents = result.css;
-            return Promise.all(tasks);
-        });
+                return this.resolveFn(newFileName);
+            }
+        }
+        file.contents = CSSUrlParser.walk(file.contents, walker);
     }
 }