Directly update custom CSS from style stored in GitHub repo

arda

Hi,

I want Flarum to update my custom CSS directly from my GitHub repo when I commit to it.

Is that possible somehow?

clarkwinkelmann

I don't think there's any existing tool but I see at least two options:

Make your theme as a Flarum extension that only loads a LESS file. Add it to Packagist. Then tag releases on GitHub and install the theme updates as regular extension updates (with Bazaar for example).

If you're not interested in doing that I suppose you could create a standalone script or other Flarum extension that gets triggered by a webhook from GitHub, retrieves the content of the file via the GitHub API then applies it as the custom_less setting of Flarum. It also needs to clear the cache otherwise the change won't show up.

arda

clarkwinkelmann Thanks.

But isn't there a way to do this without any tool or extension easily?

If no, I'll go with the extension.

luceos

arda

You want to automate that Flarum recompiles CSS whenever you update a remote CSS.
You want to do it without an extension or tool.

Answer: Nope.

arda

luceos Answer: Nope.

It did work even without using the custom CSS field! ...thanks to @clarkwinkelmann and @Toby.

Here's what I did:

I went to my repo, launched my CSS file as RAW.
I copied the Raw link, used the tool @Toby sent, replaced with the format @clarkwinkelmann sent and got the line below:

<link rel="stylesheet" href="https://rawgit.com/Extum/flarum-theme-material/material-icons/material.css">

I placed that line to my custom header field, with the icon fonts above the line.

It worked! ?

arda without using the custom CSS field

This also helped me to serve my users new updates without them needing to update their custom CSS fields, as it's no longer using that area. Custom header will automatically pull from the master branch.

If you look at my theme's installation instructions you will see that it's also so simple and easy now.

clarkwinkelmann

I thought of another "solution" but it's not actually working in its simplest form.

Given your theme is plain CSS and doesn't require LESS compilation or access to Flarum variables, you could just include it directly as a separate stylesheet by using @import ""; in the custom LESS or adding a <link rel="stylesheet" href=""> in the custom header.

The problem is that raw file from GitHub are served with text/plain MIME type and Firefox and Chrome (at least) refuse to apply a stylesheet that doesn't have the proper MIME.

One workaround would be to publish the repo as a GitHub Pages site, then access the stylesheet as https://yourusername.github.io/reponame/flarum.css. This should have the proper MIME.

Caching issues might give you hell with that solution though ? not sure if/how GitHub Pages caches static assets like CSS.

Toby

clarkwinkelmann https://rawgit.com

luceos

Toby ?

lorem

Thank you for starting this topic @arda , i needed to know the exact same thing too.