Esbuild not flattening nested CSS

Phoenix Forum Questions / Help
, ,
1

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?

2

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

3

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

5 Likes
4

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.

1 Like
5

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.

1 Like
6

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

Only esbuild is sufficient?

7

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 :slight_smile:.

8

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__)}
  ]
9

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.

10

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?

11

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. :sweat_smile: But I’ll keep trying to figure out what is going on.

Edit. On Xcode’s Simulator it does work on iOS.

12

Maybe try just using the “es2016,chrome58”, drop the rest, and see how it is on Safari? That has worked for me when I converted from scss to vanilla css with variables and I haven’t had any issues with real iphones/ipads.

13

Let me try that. :crossed_fingers:

14

Didn’t help…

15

Yuck. Possibly could just be the css itself not being supported by Safari? Sorry, no other ideas. :cry: