Fix all sass resolving (codesandbox#621)

* Fix all sass resolving

* Remove unused code

* Fix indented syntax

Author: CompuIves

packages/app/integration-tests/tests/__image_snapshots__/2ppkvzx570-snap.png

@@ -25,6 +25,10 @@ const SANDBOXES = [
   'github/cssinjs/egghead/tree/master/from-sass-to-cssinjs/templates-and-variables', // postcss egghead
   'xp5qy8r93q', // babel example
   'angular', // angular template
+
+  // Sass importing
+  '2ppkvzx570', // nested imports
+  'rl2m3xklyo', // node_modules import
 ];
 
 function pageLoaded(page) {

packages/app/integration-tests/tests/__image_snapshots__/rl2m3xklyo-snap.png

@@ -270,6 +270,7 @@ async function compile({
 
   const startTime = Date.now();
   try {
+    inject();
     clearErrorTransformers();
     initializeErrorTransformers();
     unmount(manager && manager.webpackHMR ? true : hadError);

packages/app/integration-tests/tests/sandboxes.test.js

@@ -17,12 +17,10 @@ class SassTranspiler extends WorkerTranspiler {
     code: string,
     loaderContext: LoaderContext
   ): Promise<{ transpiledCode: string }> {
-    const extension =
-      typeof loaderContext.options.indentedSyntax === 'undefined'
-        ? 'scss'
-        : 'sass';
-
-    const customPath = loaderContext.path + '.' + extension;
+    const indentedSyntax =
+      loaderContext.options.indentedSyntax == null
+        ? loaderContext.path.endsWith('.sass')
+        : true;
 
     return new Promise((resolve, reject) => {
       if (code === '' || code == null) {
@@ -33,7 +31,8 @@ class SassTranspiler extends WorkerTranspiler {
       this.queueTask(
         {
           code,
-          path: customPath,
+          path: loaderContext.path,
+          indentedSyntax,
         },
         loaderContext,
         (err, data) => {

packages/app/src/sandbox/compile.js

@@ -3,7 +3,9 @@ import { join, basename, absolute, dirname } from 'common/utils/path';
 import delay from 'common/utils/delay';
 
 self.importScripts([
-  'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.6/sass.sync.min.js',
+  process.env.NODE_ENV === 'production'
+    ? 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.6/sass.sync.min.js'
+    : 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.6/sass.sync.js',
 ]);
 
 self.postMessage('ready');
@@ -27,18 +29,17 @@ const existsPromise = (fs, file) =>
     });
   });
 
+const pathCaches = new Map();
 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`,
-  ];
+  if (p.endsWith('.json')) {
+    return false;
+  }
+
+  if (pathCaches.get(p)) {
+    return pathCaches.get(p);
+  }
+
+  const possiblePaths = Sass.getPathVariations(p);
 
   let existedFile = false;
 
@@ -48,6 +49,8 @@ const getExistingPath = async (fs, p) => {
     }
   }
 
+  pathCaches.set(p, existedFile);
+
   return existedFile;
 };
 
@@ -123,7 +126,7 @@ function initializeBrowserFS() {
 let fsInitialized = false;
 
 self.addEventListener('message', async event => {
-  const { code, path, codesandbox } = event.data;
+  const { code, path, indentedSyntax, codesandbox } = event.data;
 
   if (!codesandbox) {
     return;
@@ -141,16 +144,18 @@ self.addEventListener('message', async event => {
     }
   }
 
+  pathCaches.clear();
+  Sass._path = '/';
+  Sass.clearFiles();
+
   // register a custom importer callback
   Sass.importer(async (request, done) => {
     // eslint-disable-next-line
     const fs = BrowserFS.BFSRequire('fs');
 
     try {
       const currentPath =
-        request.previous === 'stdin'
-          ? path
-          : join(dirname(path), request.previous);
+        request.previous === 'stdin' ? path : request.previous;
 
       const foundPath = await resolveSass(fs, request.current, currentPath);
 
@@ -166,8 +171,10 @@ self.addEventListener('message', async event => {
           return;
         }
 
-        done({
-          content: data.toString(),
+        Sass.writeFile(foundPath, data.toString(), () => {
+          done({
+            path: foundPath,
+          });
         });
       });
     } catch (e) {
@@ -179,7 +186,7 @@ self.addEventListener('message', async event => {
     code,
     {
       sourceMapEmbed: true,
-      indentedSyntax: path.endsWith('.sass'),
+      indentedSyntax,
     },
     result => {
       if (result.status === 0) {