From 30eced448df831e9d29aa79952fd4def2f8af800 Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Fri, 6 Sep 2024 11:00:49 -0700 Subject: [PATCH] Fix bug precompiling a CSS file that contains a `min()` expression When I run `bin/deploy:precompile` on the previous version, I get an error from libsass that `vw` and `vh` are incompatible units. I don't get this error in development, only when compiling for production. My inference is: 1. For the production build, Sass is trying to preprocess even non-SASS files, maybe to help minify them? 2. In Sass, their `min()` existed before CSS's `min()`, so it's treating it Like That, and returning a reasonable-in-some-cases-but- not-here error that `min(100vw, 100vh)` can't be *precomputed*. Anyway, wrapping it in `calc()` isn't a *problem*, and helps the Sass compiler not try to precompute it, so. Okay! https://github.com/sass/node-sass/issues/2815#issuecomment-575926329 --- app/assets/stylesheets/swf_assets/show.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/swf_assets/show.css b/app/assets/stylesheets/swf_assets/show.css index 591f951d..0c1ba8f5 100644 --- a/app/assets/stylesheets/swf_assets/show.css +++ b/app/assets/stylesheets/swf_assets/show.css @@ -4,6 +4,9 @@ position: absolute; left: 0; top: 0; - width: min(100vw, 100vh); - height: min(100vw, 100vh); + + /* HACK: `calc` isn't needed, but works around a bug in our asset pipeline, + * where libsass is trying to preprocess it. (We're not SASS tho?) */ + width: calc(min(100vw, 100vh)); + height: calc(min(100vw, 100vh)); }