Search code examples
javascripthtmlcssipfs

Using IPFS for CSS stylesheet

I am attempting to load a css stylesheet from the following link... https://ipfs.io/ipfs/Qmdun4VYeqRJtisjDxLoRMRj2aTY9skWkVyy4BfhkDjYuC

I have tried adding this link tag to both my main and head tags.

<link type="text/css" rel="stylesheet" href="https://ipfs.io/ipfs/Qmdun4VYeqRJtisjDxLoRMRj2aTY9skWkVyy4BfhkDjYuC">

I've also tried adding a style tag like this

var cssLink = "https://ipfs.io/ipfs/Qmdun4VYeqRJtisjDxLoRMRj2aTY9skWkVyy4BfhkDjYuC";
var style= document.createElement('style');
style.innerText = "@import url("+cssLink+")";
document.head.appendChild(style);

Neither work, and I'm not sure where to go from here. Thanks!

Solution

  • IPFS returns the file as text/plain. To get it to text/css I did

    const cssLink = "https://ipfs.io/ipfs/Qmdun4VYeqRJtisjDxLoRMRj2aTY9skWkVyy4BfhkDjYuC";
const cssText = await fetch(cssLink).then(res => res.text());
const cssBlob = new Blob([cssText], {type:"text/css"});
const cssURL = URL.createObjectURL(cssBlob);
const cssAtts = {"rel":"stylesheet", "type":"text/css", "href":cssURL, "key":"css"}
React.createElement("link",cssAtts,null);

    I'm new to JavaScript so if there is an even better way to do this, I'm curious to learn more.