JS-less way to swap stylesheets on netlify

Support
, , ,
1

hello world

i got a blog (netlify here) and i got an idea, basically currently this loads all css, but, im thinking now, could i swap or add stylesheets depending on the url without needing to generate more files statically, for example

lets say we have a blog on https://blog.ari-web.xyz/b/ari-web-now-delivers-minified-content/ and it has a single stylesheet that is used globally – https://d33wubrfki0l68.cloudfront.net/css/4352e7f8520e34eaef1ccb1626dbba40d80967e7/content/styles.min.css, but, what if i wanted to have like https://blog.ari-web.xyz/b/ari-web-now-delivers-minified-content/hc and itd load the high contrast theme rather than having the @media query to check for it, and what if i also wanted to have like https://blog.ari-web.xyz/b/ari-web-now-delivers-minified-content/minimal and itd load the minimal theme with minimal css and so on

is such thing possible on netlify ?
oh btw, i dont want to introduce any js on clientside

2

Update 1: i think i could use a nonce and set it in CSP depending on the URL CSP: style-src - HTTP | MDN

any better solution though ?

Update 2: Hm, is it possible to have redirects specific to a route, so for example:

[[redirects]]
    from = "/b/:blog/minimal"
    to = "/b/:blog"
    status = 200
    force = true

    [[redirects.redirects]]
        from = "/content/styles.min.css"
        to = "/content/minimal-styles.min.css"
        status = 200
        force = true

This should only redirect styles.min.css to minimal-styles.min.css if youre on the /b/:blog/minimal route, else it should be ignored

3

This is precisely what Edge Functions are meant to do:

In your case, you can use RegEx to find and add the CSS <link> inside the <head>.

1 Like