Merge pull request #163 from NathanBeddoeWebDev/main

Merging Nathan's async changes

Author: glromeo

package.json

@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "resolve": "^1.22.6",
-    "sass": "^1.7.3"
+    "sass-embedded": "1.70.0"
   },
   "devDependencies": {
     "@types/node": "^18.15.12",

src/index.ts

@@ -1,10 +1,10 @@
 import {OnLoadResult} from 'esbuild'
-import {StringOptions} from 'sass'
+import {StringOptions} from 'sass-embedded'
 import {sassPlugin} from './plugin'
 
 export type Type = 'css' | 'style' | 'css-text' | 'lit-css'
 
-export type SassPluginOptions = StringOptions<'sync'> & {
+export type SassPluginOptions = StringOptions<'async'> & {
 
   /**
    * Careful: this RegExp has to respect Go limitations!!!

src/plugin.ts

@@ -31,7 +31,7 @@ export function sassPlugin(options: SassPluginOptions = {}): Plugin {
 
   return {
     name: 'sass-plugin',
-    setup({initialOptions, onResolve, onLoad, resolve, onStart}) {
+    async setup({initialOptions, onResolve, onLoad, resolve, onStart}) {
 
       options.loadPaths = Array.from(new Set([
         ...options.loadPaths || modulesPaths(initialOptions.absWorkingDir),
@@ -72,11 +72,11 @@ export function sassPlugin(options: SassPluginOptions = {}): Plugin {
         }))
       }
 
-      const renderSync = createRenderer(options, options.sourceMap ?? sourcemap)
+      const renderSync = await createRenderer(options, options.sourceMap ?? sourcemap)
 
       onLoad({filter: options.filter ?? DEFAULT_FILTER}, useCache(options, fsStatCache, async path => {
         try {
-          let {cssText, watchFiles, warnings} = renderSync(path)
+          let {cssText, watchFiles, warnings} = await renderSync(path)
           if (!warnings) {
             warnings = []
           }

src/render.ts

@@ -2,20 +2,20 @@ import {dirname, parse, relative, resolve, sep} from 'path'
 import fs, {readFileSync} from 'fs'
 import {createResolver, fileSyntax, sourceMappingURL} from './utils'
 import {PartialMessage} from 'esbuild'
-import * as sass from 'sass'
-import {ImporterResult} from 'sass'
+import * as sass from 'sass-embedded'
+import {ImporterResult, initAsyncCompiler} from 'sass-embedded'
 import {fileURLToPath, pathToFileURL} from 'url'
 import {SassPluginOptions} from './index'
 
-export type RenderSync = (path: string) => RenderResult
+export type RenderSync = (path: string) => Promise<RenderResult>
 
 export type RenderResult = {
   cssText: string
   watchFiles: string[]
   warnings?: PartialMessage[]
 }
 
-export function createRenderer(options: SassPluginOptions = {}, sourcemap: boolean): RenderSync {
+export async function createRenderer(options: SassPluginOptions = {}, sourcemap: boolean): Promise<RenderSync> {
 
   const loadPaths = options.loadPaths!
   const resolveModule = createResolver(options, loadPaths)
@@ -61,10 +61,12 @@ export function createRenderer(options: SassPluginOptions = {}, sourcemap: boole
 
   const sepTilde = `${sep}~`
 
+  const compiler = await initAsyncCompiler();
+
   /**
    * renderSync
    */
-  return function (path: string): RenderResult {
+  return async function (path: string): Promise<RenderResult> {
 
     const basedir = dirname(path)
 
@@ -112,7 +114,7 @@ export function createRenderer(options: SassPluginOptions = {}, sourcemap: boole
       css,
       loadedUrls,
       sourceMap
-    } = sass.compileString(source, {
+    } = await compiler.compileStringAsync(source, {
       sourceMapIncludeSources: true,
       ...options,
       logger,

src/utils.ts

@@ -2,7 +2,7 @@ import {SassPluginOptions, Type} from './index'
 import {AcceptedPlugin, Postcss} from 'postcss'
 import PostcssModulesPlugin from 'postcss-modules'
 import {BuildOptions, OnLoadResult} from 'esbuild'
-import {Syntax} from 'sass'
+import {Syntax} from 'sass-embedded'
 import {parse, relative, resolve} from 'path'
 import {existsSync} from 'fs'
 import {SyncOpts} from 'resolve'