Support Import attributes with options `format: 'esm'` and `splitting: true`.

[MotooriKashin]

As This example:

import stylesheet from "./index.css" with {type: 'css'};

export class Button extends HTMLElement {

    static get is() {
        return 'my-button';
    }

    #shadowRoot = this.attachShadow({ mode: 'closed' });

    constructor() {
        super();

        this.#shadowRoot.adoptedStyleSheets.push(stylesheet);
    }
}
customElements.define(Button.is, Button);

Web components + Shadow DOM + Import attributes is frequently used in projects. But esbuld don't support Import attributes(see #3384 ), even with options format: 'esm' and splitting: true.
Why can't we keep this sentence of Import attributes just like then options loader:{'.css': 'copy'}?
Indeed, setting the 'loader: {'. css': 'copy' 'option seems to be a solution at present. But as it is written literally, it simply copies files and does not handle the functions already supported by css loader such as' @ import 'and' loader for image and font files'. What I want is if I can process the copied CSS files using the default CSS loader, it would be perfect.
At present, I can only write a plugin like the one below to temporarily handle this issue:

import { build } from "esbuild";
import type { PluginBuild } from "esbuild";

const cssConstructStylesheetPlugin = {
    name: 'css imports',
    setup(pluginBuild: PluginBuild) {
        pluginBuild.onLoad({ filter: /\.css$/ }, async args => {
            if (args.with['type'] === 'css') {
                const result = await build({
                    bundle: true,
                    entryPoints: [args.path],
                    minify: pluginBuild.initialOptions.minify || true,
                    charset: 'utf8',
                    loader: {
                        '.woff2': 'dataurl',
                        '.gif': 'dataurl',
                    },
                    write: false,
                });
                return { contents: result.outputFiles[0]!.text, loader: 'copy' };
            } else {
                return { loader: 'empty' };
            }
        });
    }
}

build({
    entryPoints: [
        'src/index.ts',
    ],
    outdir: 'dist',
    outbase: "src",
    bundle: true,
    minify: true,
    format: 'esm',
    charset: 'utf8',
    splitting: true,
    treeShaking: true,
    plugins: [cssConstructStylesheetPlugin],
    loader: {
        '.html': 'text',
        '.svg': 'text',
        '.xml': 'text',
    }
});

Currently, for the entire Import attributes proposal, except for the CSS file which needs to be processed using the css loader + copy loader, there is no problem with other references such as copy loader.

Finally, it turns out that I used machine translation to translate terrible English!

[hyrious]

I guess this issue is for requesting implementing with { type: 'css' } natively in esbuild. As it has already supports types like json and bytes.

Note that the code splitting is definitely hard for both JS & CSS. Currently there's no splitting happened on CSS (playground). Therefore, I can imagine the rough implementation is: Bundle the CSS file as if there's no with { type: 'css' }, however keep the import statement for runtime to pick up. It's like the file loader (which also keeps import statement) except that the file is bundled.

[MotooriKashin]

I guess this issue is for requesting implementing with { type: 'css' } natively in esbuild. As it has already supports types like json and bytes.

Note that the code splitting is definitely hard for both JS & CSS. Currently there's no splitting happened on CSS (playground). Therefore, I can imagine the rough implementation is: Bundle the CSS file as if there's no with { type: 'css' }, however keep the import statement for runtime to pick up. It's like the file loader (which also keeps import statement) except that the file is bundled.

Yes, this is exactly what I want.

[MotooriKashin]

With options format: 'esm' and splitting: true, as I wrote in the plugin above, whenever I encounter an import stylesheet from'./index. css' with {type:'css'}; When using such statements, treat this CSS file as a new bundle entryPoint. Keep the import statement in the original .js output.