Unable to inherit from sphinx-book-theme due to CSS hashes

[jacobtomlinson]

Describe the problem

I am exploring making a new theme for Dask which inherits sphinx-book-theme. We have a bespoke theme because we have many projects which all use the same theme and we need to be able to apply CSS/layout changes broadly across all projects rather than including additional CSS on a project-per-project basis. We mainly just want to configure colours, logos and a top nav bar.

The challenge I am having is that according to the Sphinx docs we need to override the default CSS file in the theme.conf and then import it inside the CSS. We do this today with the RTD theme.

However with sphinx-book-theme the CSS file is autogenerated and contains a hash and the URL in the theme.conf is populated via a Jinja template. This means we cannot make use of that CSS file from within our CSS file as the name changes unpredictably.

Link to your repository or website

https://github.com/dask/dask-sphinx-theme

Steps to reproduce

1. Create a new theme which inherits from sphinx_book_theme
2. Change the default style sheet to point to a custom style sheet as per the sphinx docs
3. Include the normal sphinx-book-theme CSS within the custom CSS
4. Rebuild the sphinx_book_theme CSS and see the name change and the include break

The version of Python you're using

3.9

Your operating system

macos

Versions of your packages

No response

Additional context

No response

[welcome]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

[chrisjsewell]

Heya, yeh this is a bit of a pain with regard to the sphinx set up for theme CSS: the CSS definitely needs to be hashed, since otherwise any changes to it do not get reflected when people load the page, due to browser caching (this issue was brought up numerous times before hashing was introduced), but sphinx obviously stipulates that the name needs to be static in the theme.conf

when adding arbitrary CSS in a sphinx extension, you can indeed dynamically write the css with a hashed file name (see e.g. https://github.com/executablebooks/sphinx-design/blob/9848dc5435ff19c38965a3ea91674ffc66cf2757/sphinx_design/extension.py#L75), but I'm not sure the way to do that with theme CSS stylesheet.

[pradyunsg]

Another approach would be to have a ?digest=..., which is what I did in Furo. :)

pradyunsg/furo@11dc2ee -- the way that's implemented assumes that it's scripts/main.js and styles/furo.css; but that's easy to change. :)

[jacobtomlinson]

Yeah I understand the need for the hash, but implementing it as a GET parameter like ?digest=... would allow the filename to remain the same but the cache still gets busted when the hash changes.

[choldgraf]

I opened up an issue to track the hashing idea specifically: #376 . That indeed looks like a useful pattern to follow.

[choldgraf]

resolved by #397