#1: Support referencing local files

Author: koluch

index.js

@@ -3,6 +3,7 @@ const sass = require("sass");
 const util = require("util");
 const tmp = require("tmp");
 const path = require("path");
+const csstree = require("css-tree");
 
 const sassRender = util.promisify(sass.render);
 const writeFile = util.promisify(fs.writeFile);
@@ -16,20 +17,24 @@ module.exports = (options = {}) => ({
     build.onResolve(
       { filter: /.\.(scss|sass)$/, namespace: "file" },
       async (args) => {
-        const fullFileName = path.resolve(args.resolveDir, args.path);
-        const fileExt = path.extname(fullFileName);
-        const baseFileName = path.basename(fullFileName, fileExt);
+        const sourceFullPath = path.resolve(args.resolveDir, args.path);
+        const sourceExt = path.extname(sourceFullPath);
+        const sourceBaseName = path.basename(sourceFullPath, sourceExt);
+        const sourceDir = path.dirname(sourceFullPath);
+        const sourceRelDir = path.relative(path.dirname(rootDir), sourceDir);
 
-        const sassBuildResult = await sassRender({ file: fullFileName });
+        const tmpDir = path.resolve(tmpDirPath, sourceRelDir);
+        const tmpFilePath = path.resolve(tmpDir, `${sourceBaseName}.css`);
+        await ensureDir(tmpDir);
 
-        const relativeDir = path.relative(
-          path.dirname(rootDir),
-          path.dirname(fullFileName)
-        );
-        const tmpDirFullPath = path.resolve(tmpDirPath, relativeDir);
-        const tmpFilePath = path.resolve(tmpDirFullPath, `${baseFileName}.css`);
-        await ensureDir(tmpDirFullPath);
-        await writeFile(tmpFilePath, sassBuildResult.css);
+        // Compile SASS to CSS
+        let css = (await sassRender({ file: sourceFullPath })).css.toString();
+
+        // Replace all relative urls
+        css = await replaceUrls(css, tmpFilePath, sourceDir, rootDir);
+
+        // Write result file
+        await writeFile(tmpFilePath, css);
 
         return {
           path: tmpFilePath,
@@ -38,3 +43,76 @@ module.exports = (options = {}) => ({
     );
   },
 });
+
+async function replaceUrls(css, newCssFileName, sourceDir, rootDir) {
+  const ast = csstree.parse(css);
+
+  csstree.walk(ast, {
+    enter(node) {
+      if (node.type === "Url") {
+        const value = node.value;
+        const stringValue = value.value;
+
+        let normalizedUrl;
+        if (value.type === "String") {
+          const match = stringValue.match(/^['"](.*)["']$/s);
+          if (match) {
+            normalizedUrl = match[1];
+          } else {
+            normalizedUrl = stringValue;
+          }
+        } else {
+          normalizedUrl = stringValue;
+        }
+
+        if (isLocalFileUrl(normalizedUrl)) {
+          const resolved = resolveUrl(normalizedUrl, sourceDir, rootDir);
+          const relativePath = path.relative(newCssFileName, resolved.file);
+
+          node.value = {
+            ...node.value,
+            type: "String",
+            // disable keeping query and hash parts of original url, since esbuild doesn't support it yet
+            // value: `"${relativePath}${resolved.query}${resolved.hash}"`,
+            value: `"${relativePath}"`,
+          };
+        }
+      }
+    },
+  });
+
+  return csstree.generate(ast);
+}
+
+function isLocalFileUrl(url) {
+  if (/^https?:\/\//i.test(url)) {
+    return false;
+  }
+  if (/^data:/.test(url)) {
+    return false;
+  }
+  if (/^#/.test(url)) {
+    return false;
+  }
+
+  return true;
+}
+
+function resolveUrl(url, originalFolder, rootDir) {
+  const [_, pathname, query, hash] = url.match(/^(.*?)(\?.*?)?(#.*?)?$/);
+
+  let file = "";
+  if (pathname.startsWith("/")) {
+    file = path.resolve(rootDir, pathname.substring(1));
+    // todo: resolve by root dir
+  } else {
+    file = path.resolve(originalFolder, pathname);
+  }
+
+  return {
+    file,
+    pathname,
+    query: query || "",
+    hash: hash || "",
+  };
+}

package-lock.json

@@ -4,7 +4,7 @@
   "description": "Plugin for esbuild to support SASS styles",
   "main": "index.js",
   "scripts": {
-    "test": "tape tests/*.js | tap-spec"
+    "test": "tape 'tests/*.js' | tap-spec"
   },
   "author": {
     "name": "Nikolai Mavrenkov",
@@ -22,6 +22,7 @@
     "sass"
   ],
   "dependencies": {
+    "css-tree": "^1.1.2",
     "fs-extra": "^9.0.1",
     "sass": "^1.32.4",
     "tmp": "^0.2.1"

package.json

@@ -0,0 +1,28 @@
+const test = require("tape");
+const path = require("path");
+const fs = require("fs-extra");
+
+process.chdir(path.resolve(__dirname));
+
+const sassPlugin = require("../index.js");
+
+test("resolving images", function (t) {
+  (async () => {
+    fs.removeSync(".output");
+
+    await require("esbuild").build({
+      entryPoints: ["images/index.js"],
+      bundle: true,
+      outfile: ".output/bundle.js",
+      loader: { ".png": "file", ".svg": "file" },
+      plugins: [sassPlugin()],
+    });
+
+    t.ok(fs.existsSync("./.output/bundle.js"), "Bundled js file should exist");
+    t.ok(
+      fs.existsSync("./.output/bundle.css"),
+      "Bundled css file should exist"
+    );
+    t.end();
+  })().catch((e) => t.fail(e.message));
+});

tests/images.js

@@ -0,0 +1,26 @@
+body {
+  &.isRed {
+    background: red;
+  }
+  &.withImage {
+    background: url("image.png");
+  }
+  &.withImageUsingComplexUrl {
+    background: url("../images/image.png");
+  }
+  &.withRawImage {
+    background: url(image.png);
+  }
+  &.withAbsoluteImage {
+    background: url("/images/image.png"); // relative to tests root, since we set working dir to test dir everytime
+  }
+  &.dataUrl {
+    background: url("data:should_be_ignored");
+  }
+  &.absoluteUrl {
+    background: url("https://should-be-ignored.com/image.png");
+  }
+  &.pathToLocalSvg {
+    background: url("atom.svg#content"); // we ignore #content at the output path, since esbuild doesn't support it yet
+  }
+}

tests/images/atom.svg

@@ -0,0 +1 @@
+import "./example.scss";