fix: 🐛 try to use sass before node-sass

✅ Closes: #163
sveltejs · Jul 7, 2020 · 10af027 · 10af027
1 parent c3ae353
commit 10af027
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 22 deletions.
diff --git a/src/transformers/scss.ts b/src/transformers/scss.ts
@@ -28,7 +28,7 @@ const transformer: Transformer<Options.Sass> = async ({
   let implementation = options?.implementation ?? sass;
 
   if (implementation == null) {
-    const mod = await importAny('node-sass', 'sass');
+    const mod = await importAny('sass', 'node-sass');
 
     // eslint-disable-next-line no-multi-assign
     implementation = sass = mod.default;

diff --git a/test/transformers/scss.test.ts b/test/transformers/scss.test.ts
@@ -1,3 +1,6 @@
+/* eslint-disable global-require */
+/* eslint-disable @typescript-eslint/no-require-imports */
+
 import { resolve } from 'path';
 
 import autoPreprocess from '../../src';
@@ -30,22 +33,34 @@ const implementation: Options.Sass['implementation'] = {
 };
 
 describe('transformer - scss', () => {
-  it('should prepend scss content via `data` option property - via default async render', async () => {
-    const template = `<style lang="scss"></style>`;
+  it('should return @imported files as dependencies - via default async render', async () => {
+    const template = `<style lang="scss">@import "fixtures/style.scss";</style>`;
     const opts = autoPreprocess({
       scss: {
-        prependData: '$color:red;div{color:$color}',
+        // we force the node-sass implementation here because of
+        // https://github.com/sveltejs/svelte-preprocess/issues/163#issuecomment-639694477
+        implementation: require('node-sass'),
       },
     });
 
     const preprocessed = await preprocess(template, opts);
 
-    expect(preprocessed.toString()).toContain('red');
+    expect(preprocessed.dependencies).toContain(
+      resolve(__dirname, '..', 'fixtures', 'style.scss').replace(/[\\/]/g, '/'),
+    );
   });
 
-  it('should return @imported files as dependencies - via default async render', async () => {
+  it('should return @imported files as dependencies - via renderSync', async () => {
     const template = `<style lang="scss">@import "fixtures/style.scss";</style>`;
-    const opts = autoPreprocess();
+    const opts = autoPreprocess({
+      scss: {
+        // we force the node-sass implementation here because of
+        // https://github.com/sveltejs/svelte-preprocess/issues/163#issuecomment-639694477
+        implementation: require('node-sass'),
+        renderSync: true,
+      },
+    });
+
     const preprocessed = await preprocess(template, opts);
 
     expect(preprocessed.dependencies).toContain(
@@ -80,21 +95,6 @@ describe('transformer - scss', () => {
     expect(preprocessed.toString()).toContain('blue');
   });
 
-  it('should return @imported files as dependencies - via renderSync', async () => {
-    const template = `<style lang="scss">@import "fixtures/style.scss";</style>`;
-    const opts = autoPreprocess({
-      scss: {
-        renderSync: true,
-      },
-    });
-
-    const preprocessed = await preprocess(template, opts);
-
-    expect(preprocessed.dependencies).toContain(
-      resolve(__dirname, '..', 'fixtures', 'style.scss').replace(/[\\/]/g, '/'),
-    );
-  });
-
   it('should use the specified implementation via the `implementation` option property - via renderSync', async () => {
     const template = `<style lang="scss">h1{}</style>`;
     const opts = autoPreprocess({