Blob URLs in CSS variables

[nyakase]

Concept

It would be convenient if nyalib had a function that generates a stylesheet with the Blob URLs.

This might seem like bloat, but remember nyalib was made to provide simplistic skinning in web apps. Skinning is rarely accomplished by swapping the files alone, you will want CSS, and your CSS will probably want the files.

Expectation

nyalib.getVariableStylesheet() // name subject to change

:root {
  --nyafile-img-cloud: url("blob:https://quarky.nineplus.sh/88228354-1fe9-41f5-9e84-a144754aee54");
  --nyafile-img-tumblr: url("blob:https://quarky.nineplus.sh/ac1742eb-6993-4e08-9c08-4097fc9fdefb");
  [...]
}

Real world use case

In q2, I am currently using inline(!) styles in a couple components as a workaround since this feature isn't available.

This, achievable with the new feature, would certainly be better:

.primaryClouds, .secondaryClouds {
  mask-image: var(--nyafile-img-cloud)
}

Than this hack:

const {nyafile} = useContext(AppContext);

<div className={styles.secondaryClouds} style={{maskImage: `url(${nyafile.getFileURL("img/cloud")})`}}/>
<div className={styles.primaryClouds} style={{maskImage: `url(${nyafile.getFileURL("img/cloud")})`}}/>

Which, with the new feature, is done in regular CSS instead, making the component:

<div className={styles.secondaryClouds}/>
<div className={styles.primaryClouds}/>

Use case tested?

Yes, by defining a stylesheet as in the expectation using a Blob URL retrieved from nyalib. Blob URLs and CSS variables are usable in this way (tested with nyalib 3.1.1, Quarky 0cbd20b, Electron 33, Chromium 130).