coen.bakker
Esbuild not flattening nested CSS
I’ve been using nested CSS but I need to support older browsers. My Phoenix app uses the default Esbuild setup, so I looked for support for unnesting CSS.
The Esbuild 0.17.14 release notes mentions CSS flattening.
I cannot seem to get it to work in my Phoenix app, though.
I changed the Esbuild installer to the latest version and added the --target tag to the build statement.
defp deps do
[
{:esbuild, "~> 0.8.1", runtime: Mix.env() == :dev},
]
end
defp aliases do
[
"assets.build": ["esbuild default --target=#{build_target()}"],
"assets.deploy": ["esbuild default --minify --target=#{build_target()}", "phx.digest"]
]
end
defp build_target(), do: "es2016,chrome88,edge109,firefox115,safari11"
However, when I run the build, the generated CSS is still nested.
Is the Esbuild installer behind, maybe? Or am I missing something else?
Marked As Solved
hubertlepicki
Looking at that library source, it appears you can force the version you need with:
config :esbuild, :version, "0.17.14"
and then running mix esbuild.install
Also Liked
coen.bakker
Thank you.
I have changed the config to this.
# Configure esbuild (the version is required)
config :esbuild,
version: "0.19.11",
default: [
args:
~w(js/app.js --bundle --target=es2017,chrome88,edge109,firefox115,safari11 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
cd: Path.expand("../assets", __DIR__),
env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
]
I set the version to 0.19.11 because I noticed some changes to how nested CSS is parsed in versions after 0.17.14.
I also included import '../css/app.css'; in my js/app.js after reading the Esbuild docs about CSS, because otherwise the CSS was still not flattened. Not sure why.
coen.bakker
Actually, there was some more unexpected behaviour, even with import '../css/app.css';.
It seems to do with the fact that I still had Tailwind installed and configured. Did a quick test and seems like removing Tailwind solves the problem.
Last Post!
tj0
Yuck. Possibly could just be the css itself not being supported by Safari? Sorry, no other ideas. 
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Build Elixir applications with speed and confidence.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"