added css loader to resolve and load .css files

[scriptmaster]

• Added css loader to resolve and load .css files @lucacasonato
• Added sccs support from deno sass https://deno.land/x/denosass@1.0.5/mod.ts
• Added scss tests

deno test -A mod_test.ts:

[native, wasm] bundle config inline import map ... ok (26ms)
[portable, wasm] bundle config inline import map ... ok (7ms)
[native, native] bundle config ref import map ... ok (21ms)
[portable, native] bundle config ref import map ... ok (5ms)
[native, wasm] bundle config ref import map ... ok (25ms)
[portable, wasm] bundle config ref import map ... ok (7ms)
[native, native] custom plugin for scheme ... ok (10ms)
[portable, native] custom plugin for scheme ... ok (4ms)
[native, wasm] custom plugin for scheme ... ok (5ms)
[portable, wasm] custom plugin for scheme ... ok (5ms)
[native, native] custom plugin for scheme with import map ... ok (26ms)
[portable, native] custom plugin for scheme with import map ... ok (5ms)
[native, wasm] custom plugin for scheme with import map ... ok (22ms)
[portable, wasm] custom plugin for scheme with import map ... ok (9ms)
[native, native] uncached data url ... ok (28ms)
[portable, native] uncached data url ... ok (9ms)
[native, wasm] uncached data url ... ok (28ms)
[portable, wasm] uncached data url ... ok (11ms)
[native, native] scss and css ... ok (45ms)
[portable, native] scss and css ... ok (5ms)
[native, wasm] scss and css ... ok (33ms)
[portable, wasm] scss and css ... ok (12ms)

ok | 108 passed | 0 failed (16s)

[scriptmaster]

@lucacasonato please review and merge

[bpevs]

This looks useful, but Deno itself doesn't even support this, does it?

This pr kinda feels outside the scope of this project; the general guidance would probably just be to use a 2nd loader, or a custom_scheme_plugin, rather than merging this into the repo. Or forking / expanding into a more comprehensive Deno-centric build system for client apps.

[omar-azmi]

EDIT: I wrote a Deno compatible package that bundles CSS files (SASS/SCSS not supported). jsr link: https://jsr.io/@oazmi/esbuild-plugin-css deno.land/x link: https://deno.land/x/esbuild_plugin_css npm link: https://www.npmjs.com/package/@oazmi/esbuild-plugin-css

Original comment: for those interested, you can write a simple css plugin to resolve css imports done inside javascript. the code is mostly copied from OP's PR.

// css_plugin.ts
import type * as esbuild from "https://deno.land/x/esbuild@v0.20.1/mod.js"
import { join } from "jsr:@std/path@0.218.2"

export const denoCssPlugin: esbuild.Plugin = {
    name: "deno_css_plugin",
    setup(build) {
        build.onResolve({ filter: /\.css/ }, (args) => {
            return { path: join(args.resolveDir, args.path) }
        })
        build.onLoad({ filter: /\.css/, namespace: "file" }, async (args: esbuild.OnLoadArgs): Promise<esbuild.OnLoadResult> => {
            const contents = await Deno.readTextFile(args.path)
            return { loader: "css", contents }
        })
    }
}

and then to use, simply place this plugin before denoPlugins()

// build.ts
import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@0.9.0"
import { denoCssPlugin } from "./path/to/css_plugin.ts"

const result = await esbuild.build({
    plugins: [denoCssPlugin, ...denoPlugins()],
    /* your configs
    entryPoints: ["./src/mod.ts"],
    outdir: "./dist/",
    ...
    */
})

[scriptmaster]

@bpevs are you aware of the number of devs facing sass and node-sass related install issues, which can be easily remedied with this merge?

Anyway, I have written complete bundler that supports scss/sass/preact/react (vue, svelte and angular on the way) here:

deno install -A -f https://cdn.jsdelivr.net/gh/scriptmaster/sergeant@1.7.1/sergeant.ts

sergeant create react app

[bpevs]

@scriptmaster sass and node-sass related issues are not new to bundlers and loaders: https://github.com/webpack-contrib/sass-loader/issues/205#issuecomment-256716899

That being said, I think handling css files in a loader that is supposed to be for Deno feels improper. To me, handling non-deno related code should be handled in a separate loader. I see the issues around sass, but as mentioned in https://github.com/lucacasonato/esbuild_deno_loader/issues/129, I think the proper solution to this is figuring a better way to ignore/skip css/sass files so that they can be resolved with other loaders. Not to resolve them within deno-loader.

edit: I think something like this is useful. But I just felt like I should explain why this is out of scope of this project / why I don't expect this pr to be merged.

[hsn10]

Importing CSS import './button.css' is a very common pattern.

It works in stock esbuild. If this doesn't work in deno esbuild version people will simply drop the tool and continue using what they used before.

[nandorojo]

This snippet from @omar-azmi worked for me, thanks!

[omar-azmi]

Glad to hear that it was of use to you @nandorojo . Do note that the snippet won't be able to bundle ccs url imports (i.e. @import url("./some_file_or_url.css")). For a more complete bundling solution, I'd recommend this esbuild plugin library that I wrote: omar-azmi/esbuild-plugin-css . The library handles css url imports, in addition to giving you the option for transforming your bundled css into javascript code that is embeddable in your output javascript file. I was able to bundle microsoft's monaco-editor into a single (humongous) javascript file this way.

[KyleJune]

I don't think a sass plugin should be included in the deno loader plugin. I think the following issue just needs to be resolved so that it is possible to use deno loader with other loaders like the one for postcss and sass. The reason they don't is in my latest comment on the issue below. Basically the deno plugin is adding an onLoad callback that handles all files instead of just files deno is expected to be able to load.

https://github.com/lucacasonato/esbuild_deno_loader/issues/129