There’s
which is the best thing since sliced bread and works great on its own. There’s also Svelte, which thanks to @yendrisrogelio and @nikokozak I managed to close-to-scuccessfully integrate into a project migrated from Phx 1.5/webpack to 1.6/esbuild as discussed in another thread
The last stronghold of the enemy is bundling CSS extracted from compiled Svelte modules.
Has anyone managed to process’n bundle CSS coming from the regular tailwind and extracted from Svelte modules in one shot? Passing more than one input to tailwind is not an option as of today so I took a detour and created second “profile”
# config/config.exs
…
# Use TailwindCSS
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__)
]
and added another “watcher”:
# config/dev.exs
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__)]
]
But I find it “smelly”. And obviously now I have two CSS files, for combining which I’d need to have one more build step or so. Any better ideas? Preferably all in one go…
