Problems getting Svelte components' internal CSS styles

[silverdr]

Is your feature request related to a problem? Please describe. I am having problem getting the internal styles to work. My build script (adapted from a different package) looks as follows:

const esbuild = require("esbuild");
const sveltePlugin = require("esbuild-svelte");

const args = process.argv.slice(2);
const watch = args.includes('--watch');
const deploy = args.includes('--deploy');

let opts = {
    entryPoints: ['js/app.js'],
    bundle: true,
    target: 'es2016',
    outdir: '../priv/static/assets',
    logLevel: 'info',
    plugins: [
        sveltePlugin({compilerOptions: {css: true}})
    ]
};

if (watch) opts = { ...opts, watch, sourcemap: 'inline' };
if (deploy) opts = { ...opts, minify: true };

const promise = esbuild.build(opts);

if (watch)
{
    promise.then(_result => {
        process.stdin.on('close', () => {
            process.exit(0)
        });

        process.stdin.resume();
    })
}

And the "watcher" part of configuration:

    watchers: [
        # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
        #esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
        tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]},
        node: ["buildscript.js", "--watch", cd: Path.expand("../assets", __DIR__)]
    ]

Describe the solution you'd like I'd like to be able to combine the Svelte specific CSS with the remaining CSS coming from other sources into app.css

Describe alternatives you've considered I read https://github.com/EMH333/esbuild-svelte#css-output and considered adding said options but that didn't work for me either

Additional context I am trying to make things work again after migrating an Elixir/Phoenix project from Phoenix 1.5 with "webpack" to 1.6 with "esbuild". It's been a bumpy road but everything now seem to work except the said CSS not being available anywhere. My understanding is that this is caused by regular "tailwind" watcher overwriting esbuild-svelte's app.css inside priv/static/assets/ directory. I understand that it might not be an esbuild-svelte issue per se but would still be very grateful for some pointers / ideas how to tackle the problem.

[EMH333]

How are you adding your Svelte components to the page? If it's through a JS file you control, you should be able to import the css like you would another JS file and esbuild will take care of including it

import ABC from "some js file";
import XYZ from "some svelte file";
import "some css file"; // this should include the css with the css from Svelte

new XYZ(...);

[silverdr]

In current project I do it like I described here: https://silverdrs.wordpress.com/2022/02/17/rendering-svelte-components-in-phoenix-templates/ (the last code snippet on that page) so generally yes, I can control said code. Currently I have two "watchers":

    watchers: [
        # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
        #esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
        tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]},
        tailwind: {Tailwind, :install_and_run, [:svelte, ~w(--watch)]},
        node: ["buildscript.js", "--watch", cd: Path.expand("../assets", __DIR__)]
    ]

and two configs:

config :tailwind,
version: "3.0.22",
default: [
    args: ~w(
        --config=tailwind.config.js
        --input=css/app.css
        --output=../priv/static/assets/default.css
    ),
    cd: Path.expand("../assets", __DIR__)
],
svelte: [
    args: ~w(
        --config=tailwind.config.js
        --input=../priv/static/assets/app.css
        --output=../priv/static/assets/svelte.css
    ),
    cd: Path.expand("../assets", __DIR__)
]

which eventually gives me two CSS files to load in the browser. I surely could try adding some kind of another bundler step to combine the two but the best would be to be able to get it in one go.

[Darkle]

I am also running into this too. I would also like to ouput a single css file containing all the css in the .svelte files style tags.