From a4f67fd8aad1af95f7b53a41691278d5311aa6f8 Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Thu, 3 Sep 2026 10:43:33 +0200 Subject: [PATCH] fix(assets): Avoid relative color syntax in login stylesheet Applications that still bundle sassc-rails get Sprockets' SassC css_compressor, which re-parses our already-minified build output as SCSS. libSass resolves hsl() and rgb() to its own builtins and aborts on the relative color form, so precompiling assets fails for those hosts. color-mix() expresses the same 50% alpha and is unknown to libSass, so it passes through untouched while staying valid modern CSS with wider browser support than relative colors. (cherry picked from commit f2e09a688c71f7123f86fa271725f8077b8dce13) --- app/assets/builds/alchemy-devise.css | 2 +- app/assets/stylesheets/alchemy-devise/login.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/builds/alchemy-devise.css b/app/assets/builds/alchemy-devise.css index 5ca625d..4d2ebc2 100644 --- a/app/assets/builds/alchemy-devise.css +++ b/app/assets/builds/alchemy-devise.css @@ -1 +1 @@ -body.signup,body.user_sessions,body.passwords{background-image:url("https://picsum.photos/1920/1200.webp?grayscale");background-size:cover;background-position:center}body.signup #errors,body.signup .message.info,body.user_sessions #errors,body.user_sessions .message.info,body.passwords #errors,body.passwords .message.info{border-color:rgba(0,0,0,0)}body.signup #errors,body.user_sessions #errors,body.passwords #errors{margin-left:157px}body.signup #main_content,body.user_sessions #main_content,body.passwords #main_content{padding-top:var(--spacing-2);display:flex;flex-direction:column;justify-content:center}body.signup::after,body.user_sessions::after,body.passwords::after{content:"Image from Unsplash";position:absolute;bottom:var(--spacing-2);right:var(--spacing-2);font-size:var(--font-size_small);color:var(--body-background-color)}.logo-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-4);background-color:hsl(from var(--body-background-color) h s l/50%);backdrop-filter:blur(5px);border-radius:var(--border-radius_large);box-shadow:var(--dialog-box-shadow);padding:var(--spacing-4);margin-bottom:var(--spacing-6);text-shadow:0 0 2px var(--body-background-color)}.logo-box svg{width:200px;height:auto}.login_signup_box{position:relative;max-width:450px;margin:auto;--form-right-column-width: 1.65fr}.no-js .login_signup_box{display:none}.login_signup_box alchemy-message{margin-bottom:1.5em}.login_signup_box .panel{--panel-background-color: var(--body-background-color);width:100%;max-width:100%;margin:0;box-shadow:var(--dialog-box-shadow);border-radius:var(--border-radius_large);border-color:rgba(0,0,0,0)}@media(max-width: 500px){.login_signup_box .input,.login_signup_box .submit{grid-template-columns:1fr}.login_signup_box .input label,.login_signup_box .submit label{text-align:start;margin-bottom:var(--spacing-1)}}.login_signup_box .submit>a{display:inline-flex;align-items:center;gap:var(--spacing-0);width:fit-content}.login_signup_box .submit>a:hover alchemy-icon{transform:translateX(-2px);transition:transform var(--transition-duration)}@media(min-width: 501px){.login_signup_box .submit{grid-template-columns:var(--form-left-column-width) minmax(254px, var(--form-right-column-width))}.login_signup_box .submit>label{text-align:start}.login_signup_box .submit>label input[type=checkbox]{margin:0 var(--spacing-0) 0 0}.login_signup_box .submit>a{grid-column:2;grid-row:1}} +body.signup,body.user_sessions,body.passwords{background-image:url("https://picsum.photos/1920/1200.webp?grayscale");background-size:cover;background-position:center}body.signup #errors,body.signup .message.info,body.user_sessions #errors,body.user_sessions .message.info,body.passwords #errors,body.passwords .message.info{border-color:rgba(0,0,0,0)}body.signup #errors,body.user_sessions #errors,body.passwords #errors{margin-left:157px}body.signup #main_content,body.user_sessions #main_content,body.passwords #main_content{padding-top:var(--spacing-2);display:flex;flex-direction:column;justify-content:center}body.signup::after,body.user_sessions::after,body.passwords::after{content:"Image from Unsplash";position:absolute;bottom:var(--spacing-2);right:var(--spacing-2);font-size:var(--font-size_small);color:var(--body-background-color)}.logo-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-4);background-color:color-mix(in srgb, var(--body-background-color) 50%, transparent);backdrop-filter:blur(5px);border-radius:var(--border-radius_large);box-shadow:var(--dialog-box-shadow);padding:var(--spacing-4);margin-bottom:var(--spacing-6);text-shadow:0 0 2px var(--body-background-color)}.logo-box svg{width:200px;height:auto}.login_signup_box{position:relative;max-width:450px;margin:auto;--form-right-column-width: 1.65fr}.no-js .login_signup_box{display:none}.login_signup_box alchemy-message{margin-bottom:1.5em}.login_signup_box .panel{--panel-background-color: var(--body-background-color);width:100%;max-width:100%;margin:0;box-shadow:var(--dialog-box-shadow);border-radius:var(--border-radius_large);border-color:rgba(0,0,0,0)}@media(max-width: 500px){.login_signup_box .input,.login_signup_box .submit{grid-template-columns:1fr}.login_signup_box .input label,.login_signup_box .submit label{text-align:start;margin-bottom:var(--spacing-1)}}.login_signup_box .submit>a{display:inline-flex;align-items:center;gap:var(--spacing-0);width:fit-content}.login_signup_box .submit>a:hover alchemy-icon{transform:translateX(-2px);transition:transform var(--transition-duration)}@media(min-width: 501px){.login_signup_box .submit{grid-template-columns:var(--form-left-column-width) minmax(254px, var(--form-right-column-width))}.login_signup_box .submit>label{text-align:start}.login_signup_box .submit>label input[type=checkbox]{margin:0 var(--spacing-0) 0 0}.login_signup_box .submit>a{grid-column:2;grid-row:1}} diff --git a/app/assets/stylesheets/alchemy-devise/login.scss b/app/assets/stylesheets/alchemy-devise/login.scss index 3ce7799..d8d26c1 100644 --- a/app/assets/stylesheets/alchemy-devise/login.scss +++ b/app/assets/stylesheets/alchemy-devise/login.scss @@ -37,7 +37,7 @@ body.passwords { align-items: center; justify-content: center; gap: var(--spacing-4); - background-color: hsl(from var(--body-background-color) h s l / 50%); + background-color: color-mix(in srgb, var(--body-background-color) 50%, transparent); backdrop-filter: blur(5px); border-radius: var(--border-radius_large); box-shadow: var(--dialog-box-shadow);