SASS Support for SASS Plugin

plugins/sass.ts

@@ -1,14 +1,15 @@
-import { renderSync } from 'https://esm.sh/sass@1.29.0'
+import { Options, renderSync } from 'https://esm.sh/sass@1.29.0'
 
-export default {
+const defaultPlugin = {
     name: 'sass-loader',
     test: /.(sass|scss)$/,
     acceptHMR: true,
     transform(content: Uint8Array, path: string) {
         const ret = renderSync({
             file: path,
             data: (new TextDecoder).decode(content),
-            sourceMap: true
+            sourceMap: true,
+            indentedSyntax: path.endsWith('.sass')
         })
         return {
             code: (new TextDecoder).decode(ret.css),
@@ -17,3 +18,28 @@ export default {
         }
     }
 }
+
+const pluginFactory = (opts: Options) => ({
+    ...defaultPlugin,
+    transform(content: Uint8Array, path: string) {
+        const ret = renderSync({
+            indentedSyntax: path.endsWith('.sass'),
+            ...opts,
+            file: path,
+            data: (new TextDecoder).decode(content),
+            sourceMap: true
+        })
+        return {
+            code: (new TextDecoder).decode(ret.css),
+            map: ret.map ? (new TextDecoder).decode(ret.map) : undefined,
+            loader: 'css'
+        }
+    }
+})
+
+pluginFactory.displayName = defaultPlugin.name
+pluginFactory.test = defaultPlugin.test
+pluginFactory.acceptHMR = defaultPlugin.acceptHMR
+pluginFactory.transform = defaultPlugin.transform
+
+export default pluginFactory

plugins/sass_test.ts

@@ -1,19 +1,37 @@
 import { assertEquals } from 'https://deno.land/std/testing/asserts.ts';
 import plugin from './sass.ts';
 
-Deno.test('project sass loader plugin', () => {
+Deno.test('project scss loader plugin', () => {
     Object.assign(window, {
         location: {
             href: 'https://localhost/'
         }
     })
     const { code, loader } = plugin.transform(
         (new TextEncoder).encode('$someVar: 123px; .some-selector { width: $someVar; }'),
-        'test.sass'
+        'test.scss'
     )
     assertEquals(plugin.test.test('test.sass'), true)
     assertEquals(plugin.test.test('test.scss'), true)
     assertEquals(plugin.acceptHMR, true)
     assertEquals(code, '.some-selector {\n  width: 123px;\n}')
     assertEquals(loader, 'css')
 })
+
+Deno.test('project sass loader plugin', () => {
+    Object.assign(window, {
+        location: {
+            href: 'https://localhost/'
+        }
+    })
+    let ret = plugin.transform(
+        (new TextEncoder).encode('$someVar: 123px\n.some-selector\n  width: 123px'),
+        'test.sass'
+    )
+    assertEquals(ret.code, '.some-selector {\n  width: 123px;\n}')
+    ret = plugin({ indentType: 'tab', indentWidth: 2 }).transform(
+        (new TextEncoder).encode('$someVar: 123px\n.some-selector\n  width: 123px'),
+        'test.sass'
+    )
+    assertEquals(ret.code, '.some-selector {\n\t\twidth: 123px;\n}')
+})