Skip to content

Avoid relative color syntax in login stylesheet - #306

Merged
tvdeyen merged 1 commit into
mainfrom
fix-login-css-relative-color
Sep 3, 2026
Merged

tvdeyen merged 1 commit into
mainfrom
fix-login-css-relative-color

Conversation

@tvdeyen

@tvdeyen tvdeyen commented Sep 3, 2026

Copy link
Copy Markdown
Member

Applications that still bundle sassc-rails fail to precompile assets since we started shipping the login styles as pre-built CSS. Sprockets installs the SassC css_compressor whenever that gem is present, and it re-parses our already-minified build output as SCSS. libSass resolves hsl() and rgb() to its own builtins, so the relative color form in .logo-box aborts the whole precompile with Function hsl is missing argument $saturation.

color-mix(in srgb, ... 50%, transparent) expresses exactly the same 50% alpha — color-mix interpolates premultiplied, so mixing with transparent only touches the alpha channel. libSass has no builtin of that name and passes it through untouched. It is also better supported in browsers than relative colors (Baseline 2023 vs. Safari 16.4 / Firefox 128), so this is not a compatibility regression.

Worth noting that this only avoids the one construct that currently trips libSass rather than preventing the class of problem: a future relative color, or even a plain space-separated hsl(200 50% 50%), would break these hosts again the same way. The structural fix belongs in alchemy_cms, whose Alchemy::Sprockets::SkipBuildsCompression already skips compression for pre-built CSS but hardcodes its own engine root and so never covers this gem's app/assets/builds.

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.
@tvdeyen tvdeyen added the backport-to-8.4-stable Needs a back port to 8.4-stable label Sep 3, 2026
@codecov

codecov Bot commented Sep 3, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.58%. Comparing base (5300ae4) to head (f2e09a6).

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #306   +/-   ##
=======================================
  Coverage   98.58%   98.58%           
=======================================
  Files          11       11           
  Lines         283      283           
=======================================
  Hits          279      279           
  Misses          4        4           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@tvdeyen tvdeyen added the bug label Sep 3, 2026
@tvdeyen
tvdeyen enabled auto-merge September 3, 2026 08:55
@tvdeyen
tvdeyen disabled auto-merge September 3, 2026 08:55
@tvdeyen
tvdeyen merged commit f622298 into main Sep 3, 2026
19 checks passed
@tvdeyen
tvdeyen deleted the fix-login-css-relative-color branch September 3, 2026 08:56
@alchemycms-bot

alchemycms-bot Bot commented Sep 3, 2026

Copy link
Copy Markdown

💚 All backports created successfully

Status Branch Result
8.4-stable

Questions ?

Please refer to the Backport tool documentation and see the Github Action logs for details

tvdeyen added a commit that referenced this pull request Sep 3, 2026
[8.4-stable] Merge pull request #306 from AlchemyCMS/fix-login-css-relative-color
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport-to-8.4-stable Needs a back port to 8.4-stable bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant