Fix esbuild css resolver plugin

Author: ije

bundler/esbuild.ts

@@ -1,45 +1,77 @@
+// @deno-types="https://deno.land/x/[email protected]/mod.d.ts"
+import { build, stop, Plugin } from 'https://deno.land/x/[email protected]/mod.js'
 import { join } from 'https://deno.land/[email protected]/path/mod.ts'
 import { cache } from '../server/cache.ts'
 import util from '../shared/util.ts'
-// @deno-types="https://deno.land/x/[email protected]/mod.d.ts"
-import { build, stop, Plugin } from 'https://deno.land/x/[email protected]/mod.js'
 
 export {
   build as esbuild,
   stop as stopEsbuild
 }
 
-export const esmLoader: Plugin = {
-  name: 'esm-loader',
+export const cssPlugin: Plugin = {
+  name: 'css-resolver',
+  setup(build) {
+    build.onResolve({ filter: /.*/ }, args => {
+      const isRemote = util.isLikelyHttpURL(args.path)
+      const path = isRemote ? args.path : util.trimPrefix(args.path, 'file://')
+
+      if (
+        args.kind === 'url-token' ||
+        (args.kind === 'import-rule' && (isRemote || path.startsWith('/')))
+      ) {
+        return { path: path, external: true }
+      }
+
+      // ensure the `path` is an absolute path
+      if (!path.startsWith('/')) {
+        return { path: join(args.resolveDir, path) }
+      }
+
+      return { path }
+    })
+  }
+}
+
+export const denoPlugin: Plugin = {
+  name: 'deno-resolve-loader',
   setup(build) {
     build.onResolve({ filter: /.*/ }, args => {
       const isRemote = util.isLikelyHttpURL(args.path)
       const path = isRemote ? args.path : util.trimPrefix(args.path, 'file://')
 
+
+      console.log(args)
       if (
         args.kind === 'url-token' ||
         (args.kind === 'import-rule' && (isRemote || path.startsWith('/')))
       ) {
         return { path: path, external: true }
       }
+
       if (isRemote) {
         return {
           path,
-          namespace: 'http-module',
+          namespace: 'http',
         }
       }
-      if (args.namespace === 'http-module') {
+
+      if (args.namespace === 'http') {
         return {
           path: (new URL(path, args.importer)).toString(),
-          namespace: 'http-module',
+          namespace: 'http',
         }
       }
-      if (path.startsWith('.')) {
+
+      // ensure the `path` is an absolute path
+      if (!path.startsWith('/')) {
         return { path: join(args.resolveDir, path) }
       }
+
       return { path }
     })
-    build.onLoad({ filter: /.*/, namespace: 'http-module' }, async args => {
+
+    build.onLoad({ filter: /.*/, namespace: 'http' }, async args => {
       const { content } = await cache(args.path)
       return { contents: content }
     })

bundler/mod.ts

@@ -11,7 +11,7 @@ import { ensureTextFile, existsFile, lazyRemove } from '../shared/fs.ts'
 import util from '../shared/util.ts'
 import type { BrowserName, Module, DependencyDescriptor } from '../types.d.ts'
 import { VERSION } from '../version.ts'
-import { esbuild, stopEsbuild, esmLoader } from './esbuild.ts'
+import { esbuild, stopEsbuild, denoPlugin } from './esbuild.ts'
 
 export const bundlerRuntimeCode = `
   window.__ALEPH__ = {
@@ -296,7 +296,7 @@ export class Bundler {
       minify: true,
       treeShaking: true,
       sourcemap: false,
-      plugins: [esmLoader],
+      plugins: [denoPlugin],
     })
   }
 }

plugins/css.ts

@@ -1,5 +1,5 @@
-import { join } from 'https://deno.land/[email protected]/path/mod.ts'
-import { esbuild, esmLoader } from '../bundler/esbuild.ts'
+import { dirname, join } from 'https://deno.land/[email protected]/path/mod.ts'
+import { cssPlugin, esbuild } from '../bundler/esbuild.ts'
 import { existsFile } from '../shared/fs.ts'
 import log, { Measure } from '../shared/log.ts'
 import util from '../shared/util.ts'
@@ -113,13 +113,14 @@ export const cssLoader = async ({ specifier, data }: LoadInput, aleph: Aleph): P
       const ret = await esbuild({
         stdin: {
           loader: 'css',
+          resolveDir: join(aleph.workingDir, dirname(specifier)),
           sourcefile: specifier,
           contents: css
         },
         write: false,
         bundle: true,
         minify: aleph.mode === 'production',
-        plugins: [esmLoader],
+        plugins: [cssPlugin],
       })
       css = util.trimSuffix(ret.outputFiles[0].text, '\n')
     } catch (e) { }