Go Back to Pagination

A weird SCSS processing error

The initial plan was straightforward: update some dependencies and switch my base Docker image to Debian. What followed, however, was a classic debugging rabbit hole leading to a critical CSS corruption bug.

The Bug

After the Docker build updates, my app's layout was completely broken. Upon inspection, I found that Tailwind utilities were producing incorrect CSS values during the Docker build process, but not in local development.

Specific examples of the corruption included:

  • top-0 rendering as 0.125rem instead of the expected 0px.
  • margin: 1.414rem becoming margin: 1rem.
  • font-size: 2.25rem being truncated to font-size: 2rem.

The core issue was a systematic corruption or truncation of decimal values, which fundamentally broke all calculated layout and spacing.

I later found out that it wasn't just tailwind, also independent css was broken.

Analysis

By comparing the CSS output from a local build against the Docker build, I isolated the problem to the build environment itself.

docker run --rm IMAGE_NAME cat /app/assets/index-Csfp1Xwd.css > broken-tailwind.css

I narrowed down the problem to the SCSS processing inside the container. So not tailwind itself and not vite. It might be because I used bun when there was a platform difference (ARM64 local, on my M1, vs x86_64 in the image) or maybe the bleeding-edge bun version in the image was the problem.

But this is why I have visual testing people!

The Temporary Fix

Instead of trying to patch the version-specific and platform-specific bugs deep within the build toolchain, I made an immediate change to the deployment architecture to restore functionality.

I temporarily switched off the multi-stage Docker build process. The application is now built locally using bun run build and the resulting static dist folder is then copied into a simple Nginx container for deployment.

This is just a temporary stop-gap. I just wanted to write this article, since I found this fascinating.

Feedback

If you have suggestions for the concrete cause, I'm all ears. You can find my contact info at the main page.