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?

14 comments

/phoenix #esbuild #nested-css

0 1419 14

2024-01-30 09:35:47 UTC

First 10 of 14 Posts!

hubertlepicki

this is because Elixir packate :esbuild only ships with 0.17.11 version of esbuild, and you need at lesast mentioned 0.17.14:

https://github.com/phoenixframework/esbuild/blob/v0.8.1/lib/esbuild.ex#L3C21-L3C27

Post #1

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

Post #2

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.

Post #3

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.

Post #4

TwistingTwists

So then you don’t need taliwind, is it?

Only esbuild is sufficient?

Post #5

coen.bakker

I tried Tailwind. I wanted to give it a fair shot. At this point I don’t want to use it for my projects. But I’ll continue keeping an eye on it .

Post #6

tj0

I’ve used this to flatten in my configuration. Not using taliwind though.

config :esbuild,
  version: "0.17.18",
  default: [
    args: ~w(js/app.js --bundle --target=es2016,chrome58 --outdir=../priv/static/assets --external:*.woff2 --external:*.svg),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

Post #7

coen.bakker

Ty for your message on Fly.io.

In case someone is interested, on Fly.io I asked “Can I use Esbuild version 0.19.11 instead of 0.17.11 with Phoenix LiveView?”.

This was after I successfully flattened the nested CSS in local development, after the help in this Elixir Forum topic. In production with Fly.io it did not work. Not yet, at least. Also after trying version 0.17.18.

Post #8

tj0

Did you try with the lower targets?

`--target=es2016,chrome58`

Edit: Ah, re-read this. If it successfully worked in dev and not in prod, there must a difference in the esbuild configuration between the two environments?

Post #9

coen.bakker

Actually, now it does flatten. This was indeed the change I made. Which is a head scratcher, since setting --target=es2017,chrome88 did work locally.

Still get super weird styling on iOS on real iPhones and iPads… Must be something else going on then, besides the nested CSS.

Confused at this point. But I’ll keep trying to figure out what is going on.