Fix sass resolving

Author: Ives van Hoorne

packages/app/src/sandbox/compile.js

@@ -134,7 +134,7 @@ async function compile({
   try {
     clearErrorTransformers();
     initializeErrorTransformers();
-    unmount(!hadError);
+    unmount(manager && manager.webpackHMR ? true : hadError);
   } catch (e) {
     console.error(e);
   }

packages/app/src/sandbox/eval/transpilers/sass/sass-worker.js

@@ -1,4 +1,5 @@
 import resolve from 'browser-resolve';
+import { join, basename, absolute, dirname } from 'common/utils/path';
 import delay from 'common/utils/delay';
 
 self.importScripts([
@@ -15,8 +16,95 @@ declare var Sass: {
   registerPlugin: (name: string, plugin: Function) => void,
 };
 
+const existsPromise = (fs, file) =>
+  new Promise(r => {
+    fs.stat(file, (err, stats) => {
+      if (err || stats.isDirectory()) {
+        return r(false);
+      }
+
+      return r(file);
+    });
+  });
+
+const getExistingPath = async (fs, p) => {
+  const underscoredPath = join(dirname(p), '_' + basename(p));
+  const possiblePaths = [
+    p,
+    `${p}.css`,
+    `${p}.scss`,
+    `${p}.sass`,
+    underscoredPath,
+    `${underscoredPath}.css`,
+    `${underscoredPath}.scss`,
+    `${underscoredPath}.sass`,
+  ];
+
+  let existedFile = false;
+
+  for (let i = 0; i < possiblePaths.length; i++) {
+    if (!existedFile) {
+      existedFile = await existsPromise(fs, possiblePaths[i]); // eslint-disable-line
+    }
+  }
+
+  return existedFile;
+};
+
+const resolveSass = (fs, p, path) =>
+  new Promise((r, reject) => {
+    resolve(
+      p,
+      {
+        filename: path,
+        extensions: ['.scss', '.css', '.sass'],
+        moduleDirectory: ['node_modules'],
+        isFile: async (pp, cb) => {
+          const exists = !!await getExistingPath(fs, pp);
+
+          if (!exists) {
+            const err = new Error('Could not find ' + pp);
+            // $FlowIssue
+            err.code = 'ENOENT';
+
+            return cb(err);
+          }
+
+          return cb(null, exists);
+        },
+        readFile: async (pp, encoding, cb) => {
+          const foundPath = await getExistingPath(fs, pp);
+
+          if (!foundPath) {
+            const err = new Error('Could not find ' + pp);
+            // $FlowIssue
+            err.code = 'ENOENT';
+
+            return cb(err);
+          }
+
+          return fs.readFile(foundPath, encoding, cb);
+        },
+      },
+      async (err, resolvedPath) => {
+        if (err) {
+          if (/^\w/.test(p)) {
+            r(resolveSass(fs, '.' + absolute(p), path));
+          }
+
+          reject(err);
+        } else {
+          const foundPath = await getExistingPath(fs, resolvedPath);
+
+          r(foundPath);
+        }
+      }
+    );
+  });
+
 function initializeBrowserFS() {
   return new Promise(res => {
+    // eslint-disable-next-line
     BrowserFS.configure(
       {
         fs: 'WorkerFS',
@@ -51,40 +139,32 @@ self.addEventListener('message', async event => {
   }
 
   // register a custom importer callback
-  Sass.importer((request, done) => {
-    resolve(
-      request.current,
-      {
-        filename: path,
-        extensions: ['.scss', '.css', '.sass'],
-        moduleDirectory: ['node_modules'],
-      },
-      (err, resolvedPath) => {
-        if (err) {
-          done({ error: err.message });
-          return;
-        }
+  Sass.importer(async (request, done) => {
+    // eslint-disable-next-line
+    const fs = BrowserFS.BFSRequire('fs');
 
-        self.postMessage({
-          type: 'add-transpilation-dependency',
-          path: resolvedPath,
-          isAbsolute: true,
-        });
+    try {
+      const foundPath = await resolveSass(fs, request.current, path);
 
-        const fs = BrowserFS.BFSRequire('fs');
+      self.postMessage({
+        type: 'add-transpilation-dependency',
+        path: foundPath,
+        isAbsolute: true,
+      });
 
-        fs.readFile(resolvedPath, {}, (error, data) => {
-          if (error) {
-            done({ error: error.message });
-            return;
-          }
+      fs.readFile(foundPath, {}, (error, data) => {
+        if (error) {
+          done({ error: error.message });
+          return;
+        }
 
-          done({
-            content: data.toString(),
-          });
+        done({
+          content: data.toString(),
         });
-      }
-    );
+      });
+    } catch (e) {
+      done({ error: e.message });
+    }
   });
 
   Sass.compile(

packages/app/src/sandbox/eval/transpilers/vue/loader.js

@@ -430,10 +430,14 @@ export default function(content: string, loaderContext: LoaderContext) {
   }
 
   function getRequireForImportString(type, impt, scoped) {
-    return loaderUtils.stringifyRequest(
+    const depPath = loaderUtils.stringifyRequest(
       loaderContext,
       '!!' + getLoaderString(type, impt, -1, scoped) + impt.src
     );
+
+    loaderContext.addDependency(JSON.parse(depPath));
+
+    return depPath;
   }
 
   function addCssModulesToLoader(loader, part, index) {

standalone-packages/codesandbox-browserfs/src/backend/CodeSandboxFS.ts

@@ -145,8 +145,8 @@ export default class CodeSandboxFS extends SynchronousFileSystem
 
   public renameSync(oldPath: string, newPath: string) {
     const tModules = this.manager.getTranspiledModules();
-    const modulesWithPath = Object.keys(tModules).filter((p: string) =>
-      p.startsWith(oldPath)
+    const modulesWithPath = Object.keys(tModules).filter(
+      (p: string) => p.startsWith(oldPath) + '/' || p === oldPath
     );
 
     if (modulesWithPath.length === 0) {
@@ -165,7 +165,7 @@ export default class CodeSandboxFS extends SynchronousFileSystem
 
     if (!moduleInfo) {
       const modulesStartingWithPath = Object.keys(tModules).filter(
-        (pa: string) => pa.startsWith(p)
+        (pa: string) => pa.startsWith(p + '/') || pa === p
       );
 
       if (modulesStartingWithPath.length > 0) {
@@ -221,7 +221,7 @@ export default class CodeSandboxFS extends SynchronousFileSystem
   public rmdirSync(p: string) {
     const tModules = this.manager.getTranspiledModules();
     Object.keys(tModules)
-      .filter((pa: string) => pa.startsWith(p))
+      .filter((pa: string) => pa.startsWith(p + '/') || p === pa)
       .forEach((pa: string) => {
         const { module } = tModules[pa];
 
@@ -239,7 +239,9 @@ export default class CodeSandboxFS extends SynchronousFileSystem
 
     const p = path.endsWith('/') ? path : path + '/';
 
-    const pathsInDir = paths.filter((secondP: string) => secondP.startsWith(p));
+    const pathsInDir = paths.filter(
+      (secondP: string) => secondP.startsWith(p + '/') || secondP === p
+    );
     if (pathsInDir.length === 0) {
       return [];
     }