Add support for ~ resolving in sass

Fixes codesandbox#594

Author: Ives van Hoorne

packages/app/src/sandbox/eval/transpilers/sass/index.js

@@ -13,7 +13,10 @@ class SassTranspiler extends WorkerTranspiler {
     this.cacheable = false;
   }
 
-  doTranspilation(code: string, loaderContext: LoaderContext) {
+  doTranspilation(
+    code: string,
+    loaderContext: LoaderContext
+  ): Promise<{ transpiledCode: string }> {
     const extension =
       typeof loaderContext.options.indentedSyntax === 'undefined'
         ? 'scss'
@@ -22,6 +25,11 @@ class SassTranspiler extends WorkerTranspiler {
     const customPath = loaderContext.path + '.' + extension;
 
     return new Promise((resolve, reject) => {
+      if (code === '' || code == null) {
+        resolve({ transpiledCode: '' });
+        return;
+      }
+
       this.queueTask(
         {
           code,

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

@@ -51,10 +51,12 @@ const getExistingPath = async (fs, p) => {
   return existedFile;
 };
 
-const resolveSass = (fs, p, path) =>
-  new Promise((r, reject) => {
+const resolveSass = (fs, p, path) => {
+  const usedPath = p.startsWith('~') ? p.replace('~', '/node_modules/') : p;
+
+  return new Promise((r, reject) => {
     resolve(
-      p,
+      usedPath,
       {
         filename: path,
         extensions: ['.scss', '.css', '.sass'],
@@ -101,6 +103,7 @@ const resolveSass = (fs, p, path) =>
       }
     );
   });
+};
 
 function initializeBrowserFS() {
   return new Promise(res => {