Have you considered Less? (https://lesscss.org/#scope)

(See also https://lesscss.org/usage/#programmatic-usage)

If you want to give it a spin, here's a short snippet to wrap existing CSS in a scope (note that imports, e.g. google-fonts stylesheets, get inlined): function scoped(scope, css) { return require('less').then(l => l.render(`${scope}{${css}}`)).then(o => o.css); }

Great suggestion and something I'll experiment with. I notice SASS has something similar too. Thanks!

Adding ?min seems to break your imports. If you want the minified/optimized build, you should probably open e.g. https://cdn.skypack.dev/jss@10.7.1 directly and then copy the listed minified URL from there.

They are not broken for me, maybe I'm missing something?

Try clearing your browser cache, or open the notebook in an incognito window.

Still works in Incognito, for me. However I just read https://docs.skypack.dev/skypack-cdn/api-reference/pinned-urls-optimized, there does seem to be a performance benefit to using a "pinned URL". However it should also work with `?min` AFAIK.

Yeah, I see now that ?min is documented in https://www.skypack.dev/. I'll try to figure out on my end why the modules fail to import. Let me get back to you.

Nvm, it *was* a caching issue, but in *my* browser. Looks like skypack returned a 500 error at some point (maybe a CDN problem). Just did a load with disabled cache, and everything's working now.

I don't mind republishing using the pinned URLs anyway, if there's a small performance benefit to be had. It also works for me using those. Ah good, glad it looks OK to you now. I have republished using the pinned URLs anyway