Use CSS instead of JS for floating docs banner [#1988]

[arpan8925]

Use CSS instead of JS for floating docs banner

Fixes #1988

[arpan8925]

@adamzap Can you review kindly !

#1988 Fixed

[adamzap]

@arpan8925 Could you squash your commits into one?

[arpan8925]

Give me some time, exam is going on, trying this as soon as possible in next 2/3 days

[adamzap]

Sure! If you need some guidance to squash the commits, you can do it in at least two ways:

1. Run git rebase -i HEAD~16 and mark every commit after the first one as "fixup" (f), then git amend the commit message before force-pushing.
2. Delete your branch locally, look at the diff view on GitHub, reproduce those changes in one commit locally on a new branch with the same name, then force-push.

Let me know if you have trouble.

[arpan8925]

updated @adamzap , review kindly

[arpan8925]

Hi @marksweb Can you check if yours Change Request is resolved?

[marksweb]

This doesn't seem to work.

❯ make compile-scss
python -m pysassc djangoproject/scss/output.scss djangoproject/static/css/output.css --style=compressed
pysassc.py: error: Error: Invalid CSS after "@supports ": expected @supports condition (e.g. (display: flexbox)), was "selector(:has(a, b)"
        on line 28:10 of djangoproject/scss/_style.scss
        from line 4:1 of djangoproject/scss/output.scss
>> @supports selector(:has(a, b)) {

[arpan8925]

Ok Checking

[arpan8925]

The issue was happening for, actually pysassc does not support modern selector-based feature queries like: @supports selector(:has(#dev-warning)) {

[arpan8925]

So I left with 2 Options acutally

Using JavaScript-based detection only
or
Using PostCSS or Dart Sass via a JS or Node build chain instead of LibSass of pysassc .

[adamzap]

Yeah, unfortunately I think we're stuck with the JavaScript approach for now. Do you agree @marksweb?

[marksweb]

I'm happy with this now, providing everyone's happy with how it looks.

[adamzap]

@arpan8925 I'm reviewing this as well. Thanks for the changes!