CSS: out-of-memory/hang target:safari11

[dloebl]

The following input causes esbuild to hang/consume a lot of memory (over 100 GB):

.slider-section{height: auto;padding-top: .first-sec, .slider-section{height: auto;padding-top: .first-sec, .slider-section{ height: auto; padding-top: .first-sec, .slider-section{ height: auto; padding-top: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{height: auto;padding-top: .first-sec, .slider-section{height: auto;padding-top: .first-sec, .slider-section{ height: auto; padding-top: .first-sec, .slider-section{ height: auto; padding-top: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{height: auto;padding-top: .first-sec, .slider-section{height: auto;padding-top: .first-sec, .slider-section{ height: auto; padding-top: .first-sec, .slider-section{ height: auto; padding-top: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec, .slider-section{ height: auto; padding-bottom: .first-sec

Command line:
esbuild --target=safari11 input.css

esbuild try target=safari11

For --target=safari14 this issue started to appear with v0.25.0:
esbuild try target=safari14

[evanw]

Expanding nested CSS is inherently exponential. Other CSS tools such as Lightning CSS and SASS do the same thing as esbuild given valid sufficiently-nested CSS, so it's not clear to me that esbuild is doing anything wrong here. Here are some examples of the expansion of your input in different tools (uses smaller input to avoid a crash/hang so you can see what's happening):

• esbuild: link
• Lightning CSS: link
• SASS: link

Potential mitigations could be to try to apply limits to esbuild's implementation, such as nesting depth, execution time, or output length. But such limits could potentially inhibit valid use cases, so I'm not sure about this idea.

How did this issue come up for you? Obviously it's possible to construct pathological nested CSS with big expansion factors, just like it's possible to create .zip files with big expansion factors. But esbuild isn't intended to be used on adversarial inputs, and deliberately doesn't attempt to be robust in such cases. I consider that to be outside of esbuild's scope.

[dloebl]

Thanks for the explanation! That makes sense to me

How did this issue come up for you?

We noticed out-of-memory issues in our JS/CSS processing pipeline, so the above CSS snippet is part of a larger file - I just reduced it to the part that causes issues.

But esbuild isn't intended to be used on adversarial inputs

Oh ok I see. We use esbuild to process/minify JS/CSS on request (behind a CDN), so we're very interested in getting it safe to process random input. I'm happy to help with that!

What I'm not sure about is that these issues started to appear with the update to v0.25 (for --target=safari14), so perhaps something must have changed with this version?

esbuild try v0.24.2 target=safari14