feat: 🎸 add scss support for tilde (~) imports

✅ Closes: #277

Author: kaisermann

src/transformers/scss.ts

@@ -1,6 +1,6 @@
-import { Result } from 'sass';
+import type { Importer, Result } from 'sass';
 
-import { Transformer, Processed, Options } from '../types';
+import type { Transformer, Processed, Options } from '../types';
 import { getIncludePaths, importAny } from '../modules/utils';
 
 let sass: Options.Sass['implementation'];
@@ -19,6 +19,14 @@ function getResultForResolve(result: Result): ResolveResult {
   };
 }
 
+const tildeImporter: Importer = (url, _prev, done) => {
+  if (url.startsWith('~')) {
+    return done({ file: url.slice(1) });
+  }
+
+  return done({ file: url });
+};
+
 const transformer: Transformer<Options.Sass> = async ({
   content,
   filename,
@@ -44,6 +52,14 @@ const transformer: Transformer<Options.Sass> = async ({
     data: content,
   };
 
+  if (Array.isArray(sassOptions.importer)) {
+    sassOptions.importer.push(tildeImporter);
+  } else if (sassOptions.importer == null) {
+    sassOptions.importer = [tildeImporter];
+  } else {
+    sassOptions.importer = [sassOptions.importer, tildeImporter];
+  }
+
   // scss errors if passed an empty string
   if (sassOptions.data.length === 0) {
     return { code: '' };