Importing custom css

[ChrisJefferson]

Is it possible to import custom css?

anywidget lets you set _css, but (as far as I can tell), setting that to a file doesn't seem to do anything?

I wanted to check if isn't supported, or isn't documented (and I'm possibly using it wrong..)

[kolibril13]

Currently, you can do styling of widgets like mentioned in this walkthrough guide https://widgetti.github.io/ipyreact/lab/?path=full_tutorial.ipynb like this

from IPython.display import HTML , display
from pathlib import Path
css_rules = Path('styles_orange.css').read_text()
display(HTML('<style>' + css_rules + '</style>'))

But yes, a _css option would be amazing, here was a conversation about that: #3 (comment)

[maartenbreddels]

Indeed, this is not supported yet, we'd need to do something like in https://github.com/manzt/anywidget/blame/main/packages/anywidget/src/widget.js

Happy to guide someone through a PR and get this in, but I currently don't have the bandwidth to do it myself.

[maartenbreddels]

I do not think that should not be part of the same widget (I disagree with anywidget in that respect), you can also use https://solara.dev/api/style

But we could think about adding a simple Style widget in ipyreact.

[sirwhinesalot]

If all you care about is bundling the .css of your widget alongside it, you can use the SASS plugin of ESBuild to shove it into the .js file (it works with regular CSS too). Just make sure to import the .css somewhere in your javascript code.

plugins: [sassPlugin({type: 'style'})]

[maartenbreddels]

Nice, thanks!

[paddymul]

I wrote a bit of a hack that gets me to my first release on top of ipyreact. I will work on a patch back to ipyreact when I get a chance (weeks out).

const BUCKAROO_STYLE_ID = "buckaroo-style-block";
export const injectBuckarooCSS = (css_text:string) => {
    if(document.getElementById(BUCKAROO_STYLE_ID) !== null) {
        return
    }

	const style = Object.assign(document.createElement("style"), {
		id: BUCKAROO_STYLE_ID,
		type: "text/css"
	});
	style.appendChild(document.createTextNode(css_text));
	document.head.appendChild(style);
}

class IPYBuckaroo(BuckarooWidget, ipyreact.ValueWidget):
    style_block =  traitlets.Unicode(
        Path("./../../packages/buckaroo-js-core/dist/style.css").read_text()).tag(sync=True)
    _esm="""
...    

export default function({
    style_block
    }) {
      injectBuckarooCSS(style_block)
      """

My code was adapted from the anywidget css code, and it doesn't work HMR. I only have a single style block for my widget and it's rather big. I don't want it reinjected multiple times. Ideally the CSS would work more like ipyreact.define_module. For now this is expedient.